wmaraci reklam

CSS ile Etkileyici Box-Shadow

7 Mesajlar 3.655 Okunma
wmaraci reklam

Adobewordpress Adobewordpress WM Aracı Kullanıcı
  • Üyelik 08.07.2011
  • Yaş/Cinsiyet 36 / E
  • Meslek Tasarımcı
  • Konum İstanbul Avrupa
  • Ad Soyad V** Ö**
  • Mesajlar 677
  • Beğeniler 58 / 418
  • 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.

.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

/* 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


Kenarları kalkık




Kıvrılmış kenarlı obje için bölge



CSS

/* 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

Kıvrılmış köşeler

" />



Perspektife uygun gölgelendirme



CSS

.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


Perspektif




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-ile-etkileyici-golge-efektleri/
LadyArch3r dlkrnugur kontdraweb

kişi bu mesajı beğendi.

adobewordpress.com ~ “güncel tasarım okulu”
SMM Panel, Sosyalyuvam, Bayilik Paneli, En Uygun Panel, Takipçi Paneli
reklam

archaeopteryx archaeopteryx WM Aracı Kullanıcı
  • Üyelik 13.08.2012
  • Yaş/Cinsiyet - / E
  • Meslek Öğrenci
  • Konum Eskişehir
  • Ad Soyad ** **
  • Mesajlar 68
  • Beğeniler 55 / 43
  • 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. :)
 

 

Muhsin ASLAN Muhsin ASLAN Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 10.07.2012
  • Yaş/Cinsiyet 29 / E
  • Meslek Developer
  • Konum Konya
  • Ad Soyad M** A**
  • Mesajlar 1120
  • Beğeniler 1086 / 244
  • Ticaret 1, (%100)
Hocam internet explorer'da sorun çıkıyor mu??
 

 

LadyArch3r LadyArch3r Web Developer Kullanıcı
  • Üyelik 02.04.2011
  • Yaş/Cinsiyet 33 / E
  • Meslek Web Developer
  • Konum Antalya
  • Ad Soyad B** K**
  • Mesajlar 930
  • Beğeniler 60 / 102
  • Ticaret 3, (%100)

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.
 

 

wmaraci

Adobewordpress Adobewordpress WM Aracı Kullanıcı
  • Üyelik 08.07.2011
  • Yaş/Cinsiyet 36 / E
  • Meslek Tasarımcı
  • Konum İstanbul Avrupa
  • Ad Soyad V** Ö**
  • Mesajlar 677
  • Beğeniler 58 / 418
  • 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”

MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

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 +++
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

t1esto t1esto WM Aracı Kullanıcı
  • Üyelik 12.08.2012
  • Yaş/Cinsiyet 38 / E
  • Meslek Webmaster
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 212
  • Beğeniler 12 / 35
  • Ticaret 0, (%0)
mesajım bulunsun lazım olacaktır bana teşekkürler
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al