Giriş Yap / Kayıt Ol

3Beğeni
  • 3 Yazan Adobewordpress

Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   WM Aracı > Programlama / Yazılım > HTML - CSS - XML
tanıtım yazısı

CSS ile Etkileyici Box-Shadow

Sosyal Ağlarda Paylaş:
  #1  
Okunmamış 15 Kasım 2012, 18:52
Adobewordpress Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 08 Temmuz 2011
Cinsiyet: Erkek
Meslek: Tasarımcı
Ad, Soyad: Va... Öz...
Mesajlar: 670
Beğeniler: 417 / 54
Ticaret: 1, 100%
Merhaba arkadaşlar.

Daha önce öğrendiğimiz CSS gölge satırlarını bugün detaylandırıyoruz. Çıkış noktamız yine box-shadow, fakat bu sefer gölgelerde bile boyutlandırma işlemi yapacağız.



Bahsettiğim gibi ilk gölgelendirme yazımda (görüntülemek için tıklayın) temel teknikleri konuşmuştuk. Sonrasında box-shadow kod birimi ile çoklu border sistemini öğrenmiştik. Aslına bakarsanız gölgelendirme üzerine birçok yazımız mevcut. Makalenin en altındaki ilgili konular alanına göz atabilirsiniz.

Şimdi yavaş yavaş başlayalım.

Bu makalenin orjinal burada, Nicolas Gallagher tarafından hazırlanmıştır.


Bütün divlere ortak bir stil atamak için golge-efekti isimli bir class oluşturduk. İlk olarak aşağıdaki CSS kodlarını dosyanıza ekleyin.

Kod:
.golge-efekti {
position:relative;
background-color:#dedede;
padding:20px 0 30px;
font:14px/1.5 Arial, sans-serif;
width:200px;
padding:1em;
color:#666;
text-shadow: 0px 1px 3px #fff;
text-align:center;
margin:50px auto;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.golge-efekti:before,
.golge-efekti:after {
content:"";
position:absolute;
z-index:-2;
}

.golge-efekti p {
font-size:16px;
font-weight:bold;
}
Kalkık kenarlı obje için gölge



CSS

Kod:
/* Kalkık köşeler */
.kalkik {
-moz-border-radius:4px;
 border-radius:4px;
}

.kalkik:before,
.kalkik:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}

.kalkik:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
HTML

Kod:
<div class="golge-efekti kalkik">
<p>Kenarları kalkık</p>
</div>
Kıvrılmış kenarlı obje için bölge



CSS

Kod:
/* Kıvrılmış köşeler */
.kivrilmis {
border:1px solid #dedede;
-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
border-radius:0 0 120px 120px / 0 0 6px 6px;
}

.kivrilmis:before,
.kivrilmis:after {
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
max-height:100px;
-webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-webkit-transform:skew(-8deg) rotate(-3deg);
-moz-transform:skew(-8deg) rotate(-3deg);
-ms-transform:skew(-8deg) rotate(-3deg);
-o-transform:skew(-8deg) rotate(-3deg);
transform:skew(-8deg) rotate(-3deg);
}

.kivrilmis:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
 -o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
HTML

[IMG]<div class="golge-efekti kivrilmis"> <p>Kıvrılmış köşeler</p> </div>[/IMG]

Perspektife uygun gölgelendirme



CSS

Kod:
.perspektif:before {
left:80px;
bottom:5px;
width:50%;
height:35%;
max-width:200px;
max-height:50px;
-webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-webkit-transform:skew(50deg);
-moz-transform:skew(50deg);
-ms-transform:skew(50deg);
 -o-transform:skew(50deg);
transform:skew(50deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
 -o-transform-origin:0 100%;
transform-origin:0 100%;
}

.perspektif:after {
display:none;
}
HTML

Kod:
<div class="golge-efekti perspektif">
<p>Perspektif</p>
</div>
Not : Gölge efektlerini uyguladığınız alanlar büyüdükçe gölgelerin boyutları da büyütülmelidir.

Şimdilik bu kadar.

Kaynak : http://www.adobewordpress.com/css-il...lge-efektleri/
LadyArch3r, dlkrnugur ve kontdraweb bunu beğendi.
adobewordpress.com ~ “güncel tasarım okulu”
heuristic
  #2  
Okunmamış 15 Kasım 2012, 20:51
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 13 Ağustos 2012
Cinsiyet: Erkek
Meslek: Öğrenci
Konum: Eskişehir
Ad, Soyad:
Mesajlar: 68
Beğeniler: 43 / 56
Ticaret: 0, 0%
Çok şık çalışmalar, her yerde kullanabilir.

Hocam kaçtır denk geliyorum, farklı ve ilgi çekici şeyler paylaşıyorsunuz. Yeri gelmişken teşekkür edeyim. Boş vaktim olduğunda blogunuzu iyice didiklemeyi planlıyorum.
  #3  
Okunmamış 15 Kasım 2012, 21:02
Avatar Seçilmemiş
Üyeliği Durdurulmuş
 
Üyelik Tarihi: 10 Temmuz 2012
Yaş / Cinsiyet: 21 / Erkek
Meslek: Developer
Konum: Konya
Ad, Soyad: Mu... As...
Mesajlar: 1.133
Beğeniler: 248 / 1098
Ticaret: 1, 100%
Hocam internet explorer'da sorun çıkıyor mu??
  #4  
Okunmamış 15 Kasım 2012, 23:49
Avatar Seçilmemiş
batuhankucukali.com
 
Üyelik Tarihi: 02 Nisan 2011
Cinsiyet: Erkek
Konum: Antalya
Ad, Soyad:
Mesajlar: 919
Beğeniler: 106 / 62
Ticaret: 3, 100%
Alıntı:
Cash Adlı Üyeden Alıntı
Hocam internet explorer'da sorun çıkıyor mu??
pie.htc ile bu sorunu aşabilirsin.

http://css3pie.com/ buradan ilgili siteye ulaşabilirsin.

css3 özelliklerini ie lerde de kullanabiliyorsun bu sayede.


Hocam güzel şeyler paylaşıyorsun blogunu takip listeme aldım.

Teşekkürler.
  #5  
Okunmamış 16 Kasım 2012, 01:30
Adobewordpress Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 08 Temmuz 2011
Cinsiyet: Erkek
Meslek: Tasarımcı
Ad, Soyad: Va... Öz...
Mesajlar: 670
Beğeniler: 417 / 54
Ticaret: 1, 100%
Çalıştıkları : Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

Rica ederim.

İyi çalışmalar.
adobewordpress.com ~ “güncel tasarım okulu”
  #6  
Okunmamış 16 Kasım 2012, 01:42
SkyGhostAir Adlı Üyenin Avatarı
Bozuk Tuş
 
Üyelik Tarihi: 01 Kasım 2012
Yaş / Cinsiyet: 24 / Erkek
Meslek: Girişimci
Konum: Balıkesir
Ad, Soyad: Mu... Di...
Mesajlar: 591
Beğeniler: 70 / 67
Ticaret: 3, 100%
Alıntı:
Adobewordpress Adlı Üyeden Alıntı
Çalıştıkları : Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

Rica ederim.

İyi çalışmalar.
eline sağlık vatanay güzel olmuş kenarları kalkık olanı beğendim ben +++
  #7  
Okunmamış 16 Kasım 2012, 02:38
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 12 Ağustos 2012
Cinsiyet: Erkek
Meslek: Webmaster
Ad, Soyad:
Mesajlar: 215
Beğeniler: 35 / 13
Ticaret: 0, 0%
mesajım bulunsun lazım olacaktır bana teşekkürler
Cevap Yaz Favorilerime Ekle


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   WM Aracı > Programlama / Yazılım > HTML - CSS - XML


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı



Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 17:51.