Page 1

Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / CSS3 Ş eki l l er

CSS3 Şekiller Vatanay Özbeyli tarafından 14 Temmuz 2013 tarihinde yazıldı. ~ Yorum Yok + Değiştir

CSS3 ile birlikte şekillendirme yapabileceğimiz araçların sayısı arttı. Özellikle Pseudo elemanları ile artık neredeyse şey imkansız değil. Adobewordpress olarak temel birkaç şekili sizler için derledik : kare, dikdörtgen, daire, yarım daire, üçgen, sola yatmış üçgen, sağa yatmış üçgen, beşgen, yıldız, altı kenarlı yıldız, pacman, sonsuz işareti, kalp, elmas, ribbon, yumurta, diyalog kutusu, yin yang ve büyüteç…

Nasıl hazırlanır? Kodlamalar bir çoğunda gayet basit. Sadece after ve before ile neler yapabileceğimizi görelim. Kullanmak istediğiniz objelerin isimlerini herhangi bir elemana class ile atayınız. Örnek verecek olursak : 1 <figure class="kare"></figure> Şimdi şekiller ile devam edelim.

Kare

1 2 3 4 5

.kare{ width:50px; height:50px; background:#35bce3; }

Dikdörtgen


1 2 3 4 5

.dikdortgen{ width:100px; height:50px; background:#35bce3; }

Daire

1 2 3 4 5 6 7 8

.daire{ height:45px; width:45px; border-radius:45px; -moz-border-radius:45px; -webkit-border-radius:45px; background:#35bce3; }

Yarım daire

1 2 3 4 5 6 7 8

.yarimdaire{ height:45px; width:90px; border-radius:90px90px00; -moz-border-radius:90px90px00; -webkit-border-radius:90px90px00; background:#35bce3; }

Üçgen

1 2 3 4

.ucgen{ width:0; height:0; border-left:25pxsolidtransparent;


5 border-right:25pxsolidtransparent; 6 border-bottom:50pxsolid#35bce3; 7 }

Sola yatmış üçgen

1 2 3 4 5 6 7

.sol-ok{ width:0; height:0; border-top:25pxsolidtransparent; border-right:50pxsolid#35bce3; border-bottom:25pxsolidtransparent; }

Sağa yatmış üçgen

1 2 3 4 5 6 7

.sag-ok{ width:0; height:0; border-top:25pxsolidtransparent; border-left:50pxsolid#35bce3; border-bottom:25pxsolidtransparent; }

Beşgen

1 2 3 4 5 6 7 8 9 10 11

.besgen{ position:relative; width:54px; border-width:50px18px0; border-style:solid; border-color:#35bce3transparent; } .besgen:before{ content:""; position:absolute; height:0;


12 13 14 15 16 17 18

width:0; top:-85px; left:-18px; border-width:045px35px; border-style:solid; border-color:transparenttransparent#35bce3; }

Y覺ld覺z

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

.yildiz{ display:block; color:#35bce3; width:0px; height:0px; border-right:50pxsolidtransparent; border-bottom:35pxsolid#35bce3; border-left:50pxsolidtransparent; -moz-transform:rotate(35deg); -webkit-transform:rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg); } .yildiz:before{ border-bottom:40pxsolid#35bce3; border-left:15pxsolidtransparent; border-right:15pxsolidtransparent; position:absolute; height:0; width:0; top:-22px; left:-32px; display:block; content:''; -webkit-transform:rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg); } .yildiz:after{ position:absolute; display:block; color:#35bce3; top:3px; left:-52px; width:0px; height:0px; border-right:50pxsolidtransparent; border-bottom:35pxsolid#35bce3; border-left:50pxsolidtransparent; -webkit-transform:rotate(-70deg); -moz-transform:rotate(-70deg);


45 46 47 48

-ms-transform:rotate(-70deg); -o-transform:rotate(-70deg); content:''; }

Altı kenarlı yıldız

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.alti-kenar-yildiz{ width:0; height:0; border-left:25pxsolidtransparent; border-right:25pxsolidtransparent; border-bottom:40pxsolid#35bce3; } .alti-kenar-yildiz:after{ content:""; position:absolute; width:0; height:0; border-left:25pxsolidtransparent; border-right:25pxsolidtransparent; border-top:40pxsolid#35bce3; margin:15px00-25px; }

Pacman

1 2 3 4 5 6 7 8 9 10 11 12

.pacman{ width:0px; height:0px; border-right:25pxsolidtransparent; border-top:25pxsolid#35bce3; border-left:25pxsolid#35bce3; border-bottom:25pxsolid#35bce3; border-top-left-radius:25px; border-top-right-radius:25px; border-bottom-left-radius:25px; border-bottom-right-radius:25px; }

Sonsuz işareti


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

.sonsuz{ position:relative; width:106px; height:50px; } .sonsuz:before, .sonsuz:after{ content:""; position:absolute; top:0; left:0; width:30px; height:30px; border:10pxsolid#35bce3; -moz-border-radius:25px25px025px; border-radius:25px25px025px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } .sonsuz:after{ left:auto; right:0; -moz-border-radius:50px50px50px0; border-radius:50px50px50px0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }

Kalp

1 2 3 4 5 6 7 8 9 10

.kalp{ position:relative; width:100px; height:90px; } .kalp:before, .kalp:after{ position:absolute; content:"";


11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

left:50px; top:0; width:50px; height:80px; background:#35bce3; -moz-border-radius:50px50px00; border-radius:50px50px00; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:0100%; -moz-transform-origin:0100%; -ms-transform-origin:0100%; -o-transform-origin:0100%; transform-origin:0100%; } .kalp:after{ left:0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); -webkit-transform-origin:100%100%; -moz-transform-origin:100%100%; -ms-transform-origin:100%100%; -o-transform-origin:100%100%; transform-origin:100%100%; }

Elmas

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.elmas{ width:50px; height:50px; background:#35bce3; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:0100%; -moz-transform-origin:0100%; -ms-transform-origin:0100%; -o-transform-origin:0100%; transform-origin:0100%; }

Ribbon


1 2 3 4 5 6 7

.ribbon{ width:0; height:50px; border-right:25pxsolid#35bce3; border-left:25pxsolid#35bce3; border-bottom:15pxsolidtransparent; }

Yumurta

1 2 3 4 5 6 7 8 9

.yumurta{ display:block; width:42px; height:60px; background-color:#35bce3; -webkit-border-radius:30px30px30px30px/ 108px108px72px72px; border-radius:50%50%50%50%/60%60%40%40%; }

Diyalog kutusu

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.diyalog{ width:60px; height:40px; background:#35bce3; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .diyalog:before{ content:""; position:absolute; width:0; height:0; border-top:6pxsolidtransparent; border-right:13pxsolid#35bce3; border-bottom:6pxsolidtransparent; margin:6px00-12px; }


Yin yang

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

.yin-yang{ width:48px; height:24px; background:#fff; border-color:#35bce3; border-style:solid; border-width:1px1px25px1px; border-radius:100%; position:relative; } .yin-yang:before{ content:""; position:absolute; top:50%; left:0; background:#fff; border:9pxsolid#35bce3; border-radius:50%; width:6px; height:6px; } .yin-yang:after{ content:""; position:absolute; top:50%; left:50%; background:#35bce3; border:9pxsolid#fff; border-radius:50%; width:6px; height:6px; }

Büyüteç

1 2 3 4 5 6 7 8 9 10

.buyutec{ font-size:5em; display:inline-block; width:0.4em; height:0.4em; border:0.1emsolid#35bce3; position:relative; border-radius:0.35em; }


11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

.buyutec:before{ content:""; display:inline-block; position:absolute; right:-0.25em; bottom:-0.1em; border-width:0; background:#35bce3; width:0.35em; height:0.08em; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); }

Kaynak 1. http://3easy.org/buildmobile/jquerymobile/ 2. http://www.css3shapes.com/ 3. http://css-tricks.com/examples/ShapesOfCSS/

Benzer Konular: HTML5 ve CSS3 ile Yaprak Menü CSS ile Etkileyici Gölge Efektleri CSS ile Sayfa Yığını CSS3 ile Sosyal Ağ Kutucuğu CSS ile Mükemmel Twitter Buttonu

Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : altı kenarlı yıldız , beşgen , büyüteç , CSS3 , daire , dikdörtgen , diyalog kutusu , elmas , kalp , kare , pacman , ribbon , sağa yatmış üçgen , şekiller , sola yatmış üçgen , sonsuz işareti , üçgen , yarım daire , yıldız , yin yang , yumurta

Css3 şekiller  
Read more
Read more
Similar to
Popular now
Just for you