CSS3 Şekiller

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 :

<figure class="kare"></figure>

Şimdi şekiller ile devam edelim.

Kare

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

Dikdörtgen

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

Daire

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

Yarım daire

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

Üçgen

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

Sola yatmış üçgen

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

Sağa yatmış üçgen

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

Beşgen

.besgen{
position:relative;
width:54px;
border-width:50px18px0;
border-style:solid;
border-color:#35bce3transparent;
}
.besgen:before{
content:"";
position:absolute;
height:0;
width:0;
top:-85px;
left:-18px;
border-width:045px35px;
border-style:solid;
border-color:transparenttransparent#35bce3;
}

Yıldız

.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);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
content:'';
}

Altı kenarlı yıldız

.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

.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

.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

.kalp{
position:relative;
width:100px;
height:90px;
}

.kalp:before,
.kalp:after{
position:absolute;
content:"";
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

.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

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

Yumurta

.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

.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

.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ç

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

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

CSS3 Şekiller