İnternet Tasarım Dünyası

CSS ile Kutulara Ok Yapma

Yazan kişi Rothstein

Merhaba arkadaşlar! Bu yazımda yeni bir CSS özelliğinden bahsediyoruz. Özellik kutuların dışına bir yöne doğru ok yapma. Bu okları yapmak için önce “:before” ve “:after” yapısını bilmeniz gerekiyor. Bu yapılar bir elementin içindeki içeriğin öncesinde veya sonrasında bir şey koymaya yarıyor. O zaman kodları yazmaya başlayalım.

<!—- html kodları —->
<div id=”content”>
<div id=”social”>Facebook</div>
<div id=”social”>Facebook</div>
<div id=”social”>Facebook</div>
</div>

Yukarıda içinde Facebook yazan ve Id’si social olan 3 tane div oluşturduk. Şimdi bunlara “:after” ve “:before” ekleyip ne olacağını görelim.

/* CSS kodları */
#content{margin: 150px;}
#content #social {width: 90px; background: #3B5999; padding: 15px; font-size: 14pt; color: #fff; position: relative;}
#content #social:nth-child(n+2) {margin-top: 20px;}
#content #social:first-child:before {content: ‘piksel’;}
#content #social:nth-child(2):after {content: ‘piksel’;}

before afterYukarıdaki kodların sonucunda böyle bir şey ortaya çıkmalı. Şimdi bu yazılar yerine kareler oluşturmalıyız. Bunu da içine hiçbir şey yazmadan “border” vererek yapacağız.

/* CSS kodları */
#content {margin:150px;}
#content #social {width: 90px; background: #3B5999; padding: 15px; font-size: 14pt; color: #fff; position: relative;}
#content #social:nth-child(n+2) {margin-top: 20px;}
#content #social:first-child:before {content: ”; border: 12px solid #000; border-top: 12px solid #000; position: absolute;}
#content #social:nth-child(2):after {content: ”; border: 12px solid #000; position: absolute;}
#content #social:nth-child(3):after {content: ”; border: 12px solid transparent; border-top: 12px solid #000; position: absolute;}

square with before after

Bu kodların sonucunda yukarıda gördüğünüz gibi kareler oluştu. Eğer diğerlerini “transparent” yapıp, “border-top” verdiğimizde de aşağı doğru bir üçgen elde ettik. Bu karelere “position: absolute” verme sebebim kutuya da “position: relative” verince istediğimiz gibi yönlendirebilmek. Şimdi gelelim yerlerine getirmeye;

/* CSS kodları */
#content {margin:150px;}
#content #social {width:90px; background:#3B5999; padding:15px; font-size:14pt; color:#fff; position:relative;}
#content #social:nth-child(n+2) {margin-top: 20px;}
#content #social:first-child:before {content:”; border: 12px solid transparent; border-top: 12px solid #000; position: absolute; top: 53px;}
#content #social:nth-child(2):after {content:”; border: 12px solid transparent; border-left: 12px solid #000; position: absolute; left: 120px; top: 23px;}
#content #social:nth-child(3):after {content:”; border: 12px solid transparent; border-bottom: 12px solid #000; position: absolute; top: -24px;}

before afterla ok

Yukarıdaki kodların sonucunda gördüğünüz gibi kutuların kenarlarında oklar oluştu. Bugünlük anlatacaklarım bu kadar bir sonraki Html – CSS özelliğinde görüşmek üzere…

Yazar Hakkında

Rothstein

Yorum Bırak