CSS3 Şekiller

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

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

Dikdörtgen

Dikdörtgen

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

Daire

Daire

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

Yarım daire

Yarım daire

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

Üçgen

Üçgen

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

Sola yatmış üçgen

Sola yatmış üçgen

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

Sağa yatmış üçgen

Sağa yatmış üçgen

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

Beşgen

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

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

Altı kenar 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

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

.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

.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

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

Yumurta

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

.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

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

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/


  • Merhaba;
    Kalp ikonunu üstüne gelince yanıp sönsün şeklinde nasıl yapabiliriz,
    Yardm lütfen…
    Kolay Gelsin…

  • Hocam aralarda boşluk yok kodları direk kopyalayanlar uğraşmak zorunda kalabilir…
    Örnek;border:0.1emsolid#35bce3;