Giriş Yap / Kayıt Ol

Beğeni Ağacı3Beğeni
  • 3 Yazan Adobewordpress

Konuya Cevap Yaz
Seçenekler Stil
Geri Git   WM Aracı > Programlama / Yazılım > HTML - CSS - XML
Online Ucuz Uçak Bileti
  #1  
Okunmamış 15 Kasım 2012, 18:52
Avatar Seçilmemiş
Sms Onayı Gerekli
 
Üyelik Tarihi: 08 Temmuz 2011
Cinsiyet: Erkek
Meslek: Eğitmen
Ad, Soyad:
Mesajlar: 622
Beğeniler: 394 / 52
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.
  #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: 66
Beğeniler: 42 / 58
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
Muhsin ASLAN Adlı Üyenin Avatarı
yağmurdaıslananşemsiyeci
 
Üyelik Tarihi: 10 Temmuz 2012
Yaş / Cinsiyet: 20 / Erkek
Meslek: Developer
Konum: Konya
Ad, Soyad: M... A...
Mesajlar: 1.129
Beğeniler: 253 / 1121
Ticaret: 1, 100%
Hocam internet explorer'da sorun çıkıyor mu??
radyotiyatrosu.web.tr
  #4  
Okunmamış 15 Kasım 2012, 23:49
LadyArch3r Adlı Üyenin Avatarı
batuhankucukali.com
 
Üyelik Tarihi: 02 Nisan 2011
Cinsiyet: Erkek
Konum: Antalya
Ad, Soyad:
Mesajlar: 1.033
Beğeniler: 121 / 81
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
Avatar Seçilmemiş
Sms Onayı Gerekli
 
Üyelik Tarihi: 08 Temmuz 2011
Cinsiyet: Erkek
Meslek: Eğitmen
Ad, Soyad:
Mesajlar: 622
Beğeniler: 394 / 52
Ticaret: 1, 100%
Çalıştıkları : Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

Rica ederim.

İyi çalışmalar.
  #6  
Okunmamış 16 Kasım 2012, 01:42
SkyGhostAir Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 01 Kasım 2012
Yaş / Cinsiyet: 23 / Erkek
Konum: Balıkesir
Ad, Soyad: M... D...
Mesajlar: 514
Beğeniler: 70 / 58
Ticaret: 0, 0%
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 +++
Skype: muratdinc.md E-Posta: muratdinc.md[@]gmail.com
  #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: 200
Beğeniler: 37 / 13
Ticaret: 0, 0%
mesajım bulunsun lazım olacaktır bana teşekkürler
Konuya Cevap Yaz

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

Benzer Konular
Konu Konuyu Açan Forum Cevap Son Mesaj
Etkileyici Bir Web Sitesi Nasıl Hazırlanır? umutr Konu Dışı 0 28 Ağustos 2012 14:33
CSS3 Shadow Özelliği Poyraz HTML - CSS - XML 0 18 Nisan 2012 19:35
Css Box-Shadow Özelliği ahmettalut HTML - CSS - XML 0 12 Nisan 2012 22:21
Adobe Shadow 1.0 (iOS) ArtemisTr Teknoloji Genel 2 13 Mart 2012 20:12
Windows 8 ve Etkileyici 4 Özellik Alphabet Windows 2 14 Eylül 2011 17:06

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: 09:22.