Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this document? Why not share!

Css ile etkileyici gölge efektleri

on

  • 929 views

Css ile etkileyici gölge efektleri

Css ile etkileyici gölge efektleri

Statistics

Views

Total Views
929
Views on SlideShare
929
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Css ile etkileyici gölge efektleri Css ile etkileyici gölge efektleri Document Transcript

  • Adobewordpress.com / Ta sa rım Unsurla rı / CSS3 / CSS ile Etkileyici Gölge Efektleri CSS ile Etkileyici Gölge Efektleri Vatanay Özbeyli tarafından 15 Kasım 2012 tarihinde yazıldı. ~ Yorum Yok + Değiştir 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. 1 .golge-efekti{ 2 position:relative; 3 background-color:#dedede; 4 padding:20px030px; 5 font:14px/1.5Arial,sans-serif; 6 width:200px; 7 padding:1em; 8 color:#666; 9 text-shadow:0px1px3px#fff; 10 text-align:center; 11 margin:50pxauto; 12 -webkit-box-shadow:01px4pxrgba(0,0,0,0.3),00 40pxrgba(0,0,0,0.1)inset; 13 -moz-box-shadow:01px4pxrgba(0,0,0,0.3),00 40pxrgba(0,0,0,0.1)inset;
  • Kalkık kenarlı obje için gölge CSS Kodları 14 box-shadow:01px4pxrgba(0,0,0,0.3),0040px rgba(0,0,0,0.1)inset; 15 } 16 17 .golge-efekti:before, 18 .golge-efekti:after{ 19 content:""; 20 position:absolute; 21 z-index:-2; 22 } 23 24 .golge-efektip{ 25 font-size:16px; 26 font-weight:bold; 27 } 1 /*Kalkıkköşeler*/ 2 .kalkik{ 3 -moz-border-radius:4px; 4 border-radius:4px; 5 } 6 7 .kalkik:before, 8 .kalkik:after{ 9 bottom:15px; 10 left:10px; 11 width:50%; 12 height:20%; 13 max-width:300px; 14 max-height:100px; 15 -webkit-box-shadow:015px10pxrgba(0,0,0,0.7); 16 -moz-box-shadow:015px10pxrgba(0,0,0,0.7); 17 box-shadow:015px10pxrgba(0,0,0,0.7); 18 -webkit-transform:rotate(-3deg); 19 -moz-transform:rotate(-3deg); 20 -ms-transform:rotate(-3deg); 21 -o-transform:rotate(-3deg); 22 transform:rotate(-3deg); 23 } 24 25 .kalkik:after{ 26 right:10px; 27 left:auto; 28 -webkit-transform:rotate(3deg); 29 -moz-transform:rotate(3deg); 30 -ms-transform:rotate(3deg); 31 -o-transform:rotate(3deg); 32 transform:rotate(3deg); 33 }
  • HTML Kodları Kıvrılmış kenarlı obje için bölge CSS Kodları HTML Kodları 1 <divclass="golge-efektikalkik"> 2 <p>Kenarlarıkalkık</p> 3 </div> 1 /*Kıvrılmışköşeler*/ 2 .kivrilmis{ 3 border:1pxsolid#dedede; 4 -moz-border-radius:00120px120px/006px6px; 5 border-radius:00120px120px/006px6px; 6 } 7 8 .kivrilmis:before, 9 .kivrilmis:after{ 10 bottom:12px; 11 left:10px; 12 width:50%; 13 height:55%; 14 max-width:200px; 15 max-height:100px; 16 -webkit-box-shadow:08px12pxrgba(0,0,0,0.5); 17 -moz-box-shadow:08px12pxrgba(0,0,0,0.5); 18 box-shadow:08px12pxrgba(0,0,0,0.5); 19 -webkit-transform:skew(-8deg)rotate(-3deg); 20 -moz-transform:skew(-8deg)rotate(-3deg); 21 -ms-transform:skew(-8deg)rotate(-3deg); 22 -o-transform:skew(-8deg)rotate(-3deg); 23 transform:skew(-8deg)rotate(-3deg); 24 } 25 26 .kivrilmis:after{ 27 right:10px; 28 left:auto; 29 -webkit-transform:skew(8deg)rotate(3deg); 30 -moz-transform:skew(8deg)rotate(3deg); 31 -ms-transform:skew(8deg)rotate(3deg); 32 -o-transform:skew(8deg)rotate(3deg); 33 transform:skew(8deg)rotate(3deg); 34 } 1 <divclass="golge-efektikivrilmis"> 2 <p>Kıvrılmışköşeler</p> 3 </div>
  • Perspektife uygun gölgelendirme CSS Kodları HTML Kodları Yükseltilmiş obje gölgesi CSS Kodları 1 .perspektif:before{ 2 left:80px; 3 bottom:5px; 4 width:50%; 5 height:35%; 6 max-width:200px; 7 max-height:50px; 8 -webkit-box-shadow:-80px08pxrgba(0,0,0,0.4); 9 -moz-box-shadow:-80px08pxrgba(0,0,0,0.4); 10 box-shadow:-80px08pxrgba(0,0,0,0.4); 11 -webkit-transform:skew(50deg); 12 -moz-transform:skew(50deg); 13 -ms-transform:skew(50deg); 14 -o-transform:skew(50deg); 15 transform:skew(50deg); 16 -webkit-transform-origin:0100%; 17 -moz-transform-origin:0100%; 18 -ms-transform-origin:0100%; 19 -o-transform-origin:0100%; 20 transform-origin:0100%; 21 } 22 23 .perspektif:after{ 24 display:none; 25 } 1 <divclass="golge-efektiperspektif"> 2 <p>Perspektif</p> 3 </div> 1 /*Yükseltilmişgölge-pseudoelementinegerek duymadan*/
  • HTML Kodları Tek dikey kavis gölgelendirme CSS Kodları HTML Kodları Çift dikey kavis gölgelendirme 2 .yuksek{ 3 -webkit-box-shadow:015px10px-10pxrgba(0,0,0, 0.5),01px4pxrgba(0,0,0,0.3),0040pxrgba(0, 0,0,0.1)inset; 4 -moz-box-shadow:015px10px-10pxrgba(0,0,0, 0.5),01px4pxrgba(0,0,0,0.3),0040pxrgba(0, 0,0,0.1)inset; 5 box-shadow:015px10px-10pxrgba(0,0,0,0.5),0 1px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0, 0.1)inset; 6 } 1 <divclass="golge-efektiyuksek"> 2 <p>Yükseltilmiş</p> 3 </div> 1 .kavis:before{ 2 top:10px; 3 bottom:10px; 4 left:0; 5 right:50%; 6 -webkit-box-shadow:0015pxrgba(0,0,0,0.6); 7 -moz-box-shadow:0015pxrgba(0,0,0,0.6); 8 box-shadow:0015pxrgba(0,0,0,0.6); 9 -moz-border-radius:10px/100px; 10 border-radius:10px/100px; 11 } 12 13 .kavis-vt-2:before{ 14 right:0; 15 } 1 <divclass="golge-efektikaviskavis-vt-1"> 2 <p>Tekdikeykavis</p> 3 </div>
  • CSS Kodları HTML Kodları Tek yatay kavis gölgelendirme CSS Kodları 1 .kavis:before{ 2 top:10px; 3 bottom:10px; 4 left:0; 5 right:50%; 6 -webkit-box-shadow:0015pxrgba(0,0,0,0.6); 7 -moz-box-shadow:0015pxrgba(0,0,0,0.6); 8 box-shadow:0015pxrgba(0,0,0,0.6); 9 -moz-border-radius:10px/100px; 10 border-radius:10px/100px; 11 } 12 13 .kavis-vt-2:before{ 14 right:0; 15 } 1 <divclass="golge-efektikaviskavis-vt-2"> 2 <p>Çiftdikeykavis</p> 3 </div> 1 /*Kavisligölge*/ 2 .kavis:before{ 3 top:10px; 4 bottom:10px; 5 left:0; 6 right:50%; 7 -webkit-box-shadow:0015pxrgba(0,0,0,0.6); 8 -moz-box-shadow:0015pxrgba(0,0,0,0.6); 9 box-shadow:0015pxrgba(0,0,0,0.6); 10 -moz-border-radius:10px/100px; 11 border-radius:10px/100px; 12 } 13 14 .kavis-hz-1:before{
  • HTML Kodları Çift yatay kavis gölgelendirme CSS Kodları HTML Kodları Yan yatmış obje gölgelendirme 15 top:50%; 16 bottom:0; 17 left:10px; 18 right:10px; 19 -moz-border-radius:100px/10px; 20 border-radius:100px/10px; 21 } 1 <divclass="golge-efektikaviskavis-hz-1"> 2 <p>Tekyataykavis</p> 3 </div> 1 /*Kavisligölge*/ 2 .kavis:before{ 3 top:10px; 4 bottom:10px; 5 left:0; 6 right:50%; 7 -webkit-box-shadow:0015pxrgba(0,0,0,0.6); 8 -moz-box-shadow:0015pxrgba(0,0,0,0.6); 9 box-shadow:0015pxrgba(0,0,0,0.6); 10 -moz-border-radius:10px/100px; 11 border-radius:10px/100px; 12 } 13 14 .kavis-hz-2:before{ 15 top:0; 16 bottom:0; 17 left:10px; 18 right:10px; 19 -moz-border-radius:100px/10px; 20 border-radius:100px/10px; 21 } 1 <divclass="golge-efektikaviskavis-hz-2"> 2 <p>Çiftyataykavis</p> 3 </div>
  • CSS Kodları 1 /*Çevrilmişkutu*/ 2 .cevrilmis{ 3 -webkit-box-shadow:none; 4 -moz-box-shadow:none; 5 box-shadow:none; 6 -webkit-transform:rotate(-3deg); 7 -moz-transform:rotate(-3deg); 8 -ms-transform:rotate(-3deg); 9 -o-transform:rotate(-3deg); 10 transform:rotate(-3deg); 11 } 12 13 .cevrilmis>:first-child:before{ 14 content:""; 15 position:absolute; 16 z-index:-1; 17 top:0; 18 bottom:0; 19 left:0; 20 right:0; 21 background:#dedede; 22 -webkit-box-shadow:01px4pxrgba(0,0,0,0.3),00 40pxrgba(0,0,0,0.1)inset; 23 -moz-box-shadow:01px4pxrgba(0,0,0,0.3),00 40pxrgba(0,0,0,0.1)inset; 24 box-shadow:01px4pxrgba(0,0,0,0.3),0040px rgba(0,0,0,0.1)inset; 25 } 26 27 .kalkik{ 28 -moz-border-radius:4px; 29 border-radius:4px; 30 } 31 32 .kalkik:before, 33 .kalkik:after{ 34 bottom:15px; 35 left:10px; 36 width:50%; 37 height:20%; 38 max-width:300px; 39 max-height:100px; 40 -webkit-box-shadow:015px10pxrgba(0,0,0,0.7); 41 -moz-box-shadow:015px10pxrgba(0,0,0,0.7); 42 box-shadow:015px10pxrgba(0,0,0,0.7); 43 -webkit-transform:rotate(-3deg); 44 -moz-transform:rotate(-3deg); 45 -ms-transform:rotate(-3deg); 46 -o-transform:rotate(-3deg); 47 transform:rotate(-3deg); 48 }
  • HTML Kodları Not : Gölge efektlerini uyguladığınız alanlar büyüdükçe gölgelerin boyutları da büyütülmelidir. Şimdilik bu kadar. Benzer Konular: CSS ile Sayfa Yığını HTML5 ve CSS3 ile Yaprak Menü CSS ile 3D, Blur, Ateş, Buz, Neon, Asit, Alfa ve Anaglyph… CSS ile Kutu Gölgelendirme HTML5 Video Oynatıcı (Altyazı ve Logolu) Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : çevrilmiş , css , CSS3 , drop , efekt , efektleri , etkileyici , glow , gölge , güzel , html5 , inner , kalkık , kenar , kıvrılmış , koyu , mükemmel , outer , perspektif , shadow 49 50 .kalkik:after{ 51 right:10px; 52 left:auto; 53 -webkit-transform:rotate(3deg); 54 -moz-transform:rotate(3deg); 55 -ms-transform:rotate(3deg); 56 -o-transform:rotate(3deg); 57 transform:rotate(3deg); 58 } 1 <divclass="golge-efektikalkikcevrilmis"> 2 <p>Yanyatmış</p> 3 </div>