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
UkashSatinAl.com.tr
  #1  
Okunmamış 15 Kasım 2012, 18:52
Adobewordpress Adlı Üyenin Avatarı
adobewordpress.com
 
Üyelik Tarihi: 08 Temmuz 2011
Mesajlar: 612
Beğenilen Mesajları: 408
Beğendiği Mesajlar: 59
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”
  #2  
Okunmamış 15 Kasım 2012, 20:51
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 13 Ağustos 2012
Mesajlar: 66
Beğenilen Mesajları: 42
Beğendiği Mesajlar: 58
Ticaret: 0, 0%
Standart

Ç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: 19 / Erkek
Mesajlar: 827
Beğenilen Mesajları: 182
Beğendiği Mesajlar: 911
Ticaret: 1, 100%
Standart

Hocam internet explorer'da sorun çıkıyor mu??
mcdcafe.com
  #4  
Okunmamış 15 Kasım 2012, 23:49
LadyArch3r Adlı Üyenin Avatarı
batuhankucukali.com
 
Üyelik Tarihi: 02 Nisan 2011
Mesajlar: 1.019
Beğenilen Mesajları: 120
Beğendiği Mesajlar: 81
Ticaret: 3, 100%
Standart

Alıntı:
Cash Adlı Üyeden Alıntı Mesajı göster
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ı
adobewordpress.com
 
Üyelik Tarihi: 08 Temmuz 2011
Mesajlar: 612
Beğenilen Mesajları: 408
Beğendiği Mesajlar: 59
Ticaret: 1, 100%
Standart

Ç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ı
O Ölmedi !
 
Üyelik Tarihi: 01 Kasım 2012
Yaş / Cinsiyet: 22 / Erkek
Mesajlar: 477
Beğenilen Mesajları: 64
Beğendiği Mesajlar: 53
Ticaret: 0, 0%
Thumbs up

Alıntı:
Adobewordpress Adlı Üyeden Alıntı Mesajı göster
Ç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
Mesajlar: 200
Beğenilen Mesajları: 37
Beğendiği Mesajlar: 13
Ticaret: 0, 0%
Standart

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 ve Donanım 2 13 Mart 2012 20:12
Windows 8 ve Etkileyici 4 Özellik Ömer Burak 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ı



WM Aracı Maskotu Boa WM Aracı © 2010 - 2014
WM Aracı tescilli bir markadır.
Cesur.NETWM Aracı Cesur.NET İnternet Teknolojileri'nde güvenle barınmaktadır.
Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 14:16.