Yuvarlak Köşeli CSS Table Oluşturma
Geçenlerde bana lazım oldu bende başkalarınada lazım olabilir düşüncesiyle nasıl yapıldığını anlatmak istedim.Yapılışı çok basit.Adım adım göstereceğim.
İlk başta köşeleri yuvarlak olan bir kare veya tablonuzun şekli nasılsa ona göre bir çizim yapıyoruz.Çizim için Photoshop'u kullanıcam.Çünkü köşelerini rahat kesmek için bana daha cazip geliyor.
Renk: #0060ff
Sırasıyla isimleri sol_ust, sag_ust, sol_alt, sag_alt Elimize gerekli olan resim malzemesi bunlar.Bu köşelerin boyutları ise 10*10'dur.Boyutlarının kaça kaç olduğunu bilmek gerekiyor.Bunu daha sonra açıklayacağım.
Şimdi sıra geldi Css ve Div kodlarımızı yazmaya.İlk başta Css dosyamızı oluşturalım.
.koseli_tablo { background-color:#0060FF; color: #FFFFFF; width: 200px;}
.koseli_tablo p {margin:0 10px; }
.koseli_tablo_ust { background: url(sag_ust.png) no-repeat top right; }
.koseli_tablo_alt { background: url(sag_alt.png) no-repeat top right; }
img.kose { border: none; width: 10px; height: 10px; display: block; }
Css kodlarımızı tamamladık şimdi Div taglarımızı yazalım
<div class="koseli_tablo">
<div class="koseli_tablo_ust">
<img src="sol_ust.png" alt="" width="10" height="10" class="kose" />
</div>
<p>
Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat
</p>
<div class="koseli_tablo_alt">
<img src="sol_alt.png" alt="" width="10" height="10" class="kose" />
</div>
</div>
Böylelikle kodlarımızı tamamlamış olduk.Örnek İçin tıklayınız.
Başka bir makalede görüşmek üzere.
Subscribe