Yukarda gördüğünüz kutuyu CSS ile oluşturmak için şu adımları izlemek gerekiyor:
1- Önce aynı kutuyu photoshopta çizmeniz lazım:
Rounded Rectangle Tool seçerek yuvarlak kenarlı bir şekil oluşturun:
Direct Selection Tool ile objeyi seçin ve tam kenardaki bağlantı noktalarına Convert point tool ile tıklayın:
Tekrar Direct selection tool kullanarak noktaları çekerek düzleştirin.
Şimdi elde ettiğiniz şeliden sadece yuvarlak olan iki köşeye ihtiyacınız var, onu da Slice Tool ile yapmanız gerekiyor:
Şimdi Kodlamaya geçebiliriz. Burada “CSS Position” yöntemlerinden “relative” ve “absolute” kullanılmıştır.
“sag-alt” ve “sol-ust” olarak iki “div” ekliyoruz:
<div id=”container”>
<div id=”sol-ust”></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean augue justo, tincidunt sed, lacinia quis, imperdiet luctus, tortor. Integer aliquet nisl ac lacus. Sed ultrices enim at enim. In nonummy scelerisque nibh. Praesent iaculis, mauris a tempor lacinia, neque lacus
<div id=”sag-alt”></div>
</div>
Container olarak adlandırdığım div’e bu şekilde stil kodu yazıyorum:
#container{
width:500px;
position:relative;
margin: 0 auto ; /* div ortalamak*/
background-color:#212845; /*tasarımda kullandığımız renk*/
color:#FFFFFF;
padding:30px;
margin-top:20px;
}
Geri kalan köşelere ise:
#sol-ust {
background-color: #FFFFFF;
background-image: url(../images/sol-ust.jpg);
position: absolute;
height: 14px;
width: 14px;
left: 0px;
top: 0px;
}
#sag-alt {
background-color:#FFFFFF;
background-image:url(../images/sag-alt.jpg);
position:absolute;
height: 14px;
width: 14px;
right:0;
bottom:0;
}
sonuç:
Kaynakça:
w3school
Sampson Resume
Fatih Hayrioğlu
