Web Tasarım

Renkli Kategori Sayfası

Web sitemdeki side barda bulunan Kategori bölümündeki iconların arka beyaz kısımları aynı fona nasıl getirebileceğinize dair bir makale yazalım. Zaten bayadır Web Master kategorisini boş geçiyorduk. Bu sayede web masterler için bir makale yazmış oluruz.

İlk önce istediğiniz iconları ücretsiz indirebileceğiniz bir site adresi vereyim https://www.flaticon.com/ bu siteden bir çok vektörel çalışmaları indirebilirsiniz. Tabi kendi iconlarınızı da kullanabilirsiniz.



CSS Renkli Kategori Oluşturma

İlk önce CSS kodlarımıza bakalım.


.containermc { /* iconun ustune geldiginde metinin arka fonu ortalama icin contanierxx xx kısmında kısaltma yaptım mesela mc microsoft aşağıda lx var oda linuxlinux */
position: relative;
width: 100%;
}
.containerlx {
position: relative;
width: 100%;
}
.containerwm {
position: relative;
width: 100%;
}
.containerft {
position: relative;
width: 100%;
}
.containerbg {
position: relative;
width: 100%;
}
.containergn {
position: relative;
width: 100%;
}/*ortalama bittigi yer*/

.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease; /*arka fon renge komple bulanma süresi*/
backface-visibility: hidden;
}

.middle {
transition: .5s ease;/*font ve div kutusunun tamamen ortaya çıkma suresi*/
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
background-color: #008CBA;

}

.containermc:hover .image { /*burasıda arka renkle beyaz renkler aynı olması için yine aynı mc microsoftun arkası için diye sıralı gidiyor.*/
background-color: #2995CC;
opacity: 1;
}

.containerlx:hover .image {
background-color: #F2CF61;
opacity: 1;
}

.containerwm:hover .image {
background-color: #6EB1E1;
opacity: 1;
}

.containerft:hover .image {
background-color: #71D456;
opacity: 1;
}

.containerbg:hover .image {
background-color: #71D456;
opacity: 1;
}
.containergn:hover .image {
background-color: #F7CFA2;
opacity: 1;
}

.containermc:hover .middle {
opacity:1;
}
.containerlx:hover .middle {
opacity:1;
}
.containerwm:hover .middle {
opacity:1;
}
.containerft:hover .middle {
opacity:1;
}
.containerbg:hover .middle {
opacity:1;
}
.containergn:hover .middle {
opacity:1;
}
.text { /*Burasıda text kutusunun rengi boyutu yazı rengi boyutunun kısmı isterseniz burdada farklı textxx diye sıralayıp her kutucuğa farklı renk verebilirsiniz. Ben sabit kalmasını istediğim için yapmadım.*/
background-color: #dc3522; /*kutucuk rengi kırmızı*/
color: white;
font-size: 16px;
padding: 16px 32px;
}

Açıklamalar kodlar içinde var. Şimdi HTML kodlarımıza bakalım.

<table>
<tbody>
<tr>
<th>
<!--containermc microsoftun tagı bu kısımlarda da tagları kullanmanız yeter. -->
<div class="containermc">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700316/windows_p5zmu3.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/microsoft/">
<div class="text">Microsoft</div>
</a> <!--div kısmına link veriyoeum ki div kutucuk halinde linke dönüşsün -->
</div>
</div>
</th>
<th>
<div class="containerlx">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700316/linux_z80fqk.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/linux/">
<div class="text">Linux</div></a>
</div>
</div>
</th>
</tr>
<tr>
<td>
<div class="containerwm">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1492610907/webmaster_s65hej.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/web-tasarim/">
<div class="text">W.Master</div></a>
</div>
</div>
</td>
<td>
<div class="containerft">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700431/camera_nh5btx.png" alt="Avatar" />
<div class="middle"><a href="//www.zulfumehmet.com/category/fotografcilik/">
<div class="text">Fotoğraf</div></a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="containerbg">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700526/Comp_qxul0k.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/bilgisayar/">
<div class="text">Bilgisayar</div>
</a>
</div>
</div>
</td>
<td>
<div class="containergn">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700527/user_aylgqz.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/genel/">
<div class="text">Genel</div></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>




Burda da aynı şekilde html kodların içinde açıklamalara bakabilirsiniz. Yukardaki kodları kullanarak şöyle bir kategori görüntü elde ettik.

Denemek için bu kodu bir boş bir html sayfasına yapıştırabilirsiniz. Kolay glesin.

</pre>
<!DOCTYPE html>
<html>
<head>
<style>
.containermc { /* iconun ustune geldiginde metinin arka fonu ortalama icin contanierxx xx kısmında kısaltma yaptım mesela mc microsoft aşağıda lx var oda linux */
position: relative;
width: 100%;
}
.containerlx {
position: relative;
width: 100%;
}
.containerwm {
position: relative;
width: 100%;
}
.containerft {
position: relative;
width: 100%;
}
.containerbg {
position: relative;
width: 100%;
}
.containergn {
position: relative;
width: 100%;
}/*ortalama bittigi yer*/

.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease; /*arka fon renge komple bulanma süresi*/
backface-visibility: hidden;
}

.middle {
transition: .5s ease;/*font ve div kutusunun tamamen ortaya çıkma suresi*/
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
background-color: #008CBA;

}

.containermc:hover .image { /*burasıda arka renkle beyaz renkler aynı olması için yine aynı mc microsoftun arkası için diye sıralı gidiyor.*/
background-color: #2995CC;
opacity: 1;
}

.containerlx:hover .image {
background-color: #F2CF61;
opacity: 1;
}

.containerwm:hover .image {
background-color: #6EB1E1;
opacity: 1;
}

.containerft:hover .image {
background-color: #71D456;
opacity: 1;
}

.containerbg:hover .image {
background-color: #71D456;
opacity: 1;
}
.containergn:hover .image {
background-color: #F7CFA2;
opacity: 1;
}

.containermc:hover .middle {
opacity:1;
}
.containerlx:hover .middle {
opacity:1;
}
.containerwm:hover .middle {
opacity:1;
}
.containerft:hover .middle {
opacity:1;
}
.containerbg:hover .middle {
opacity:1;
}
.containergn:hover .middle {
opacity:1;
}
.text { /*Burasıda text kutusunun rengi boyutu yazı rengi boyutunun kısmı isterseniz burdada farklı textxx diye sıralayıp her kutucuğa farklı renk verebilirsiniz. Ben sabit kalmasını istediğim için yapmadım.*/
background-color: #dc3522; /*kutucuk rengi kırmızı*/
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>
<!--containermc microsoftun tagı bu kısımlarda da tagları kullanmanız yeter. -->
<div class="containermc">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700316/windows_p5zmu3.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/microsoft/">
<div class="text">Microsoft</div>
</a> <!--div kısmına link veriyoeum ki div kutucuk halinde linke dönüşsün -->
</div>
</div>
</th>
<th>
<div class="containerlx">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700316/linux_z80fqk.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/linux/">
<div class="text">Linux</div></a>
</div>
</div>
</th>
</tr>
<tr>
<td>
<div class="containerwm">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1492610907/webmaster_s65hej.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/web-tasarim/">
<div class="text">W.Master</div></a>
</div>
</div>
</td>
<td>
<div class="containerft">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700431/camera_nh5btx.png" alt="Avatar" />
<div class="middle"><a href="//www.zulfumehmet.com/category/fotografcilik/">
<div class="text">Fotoğraf</div></a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="containerbg">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700526/Comp_qxul0k.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/bilgisayar/">
<div class="text">Bilgisayar</div>
</a>
</div>
</div>
</td>
<td>
<div class="containergn">
<img class="image" style="width: 100%;" src="//res.cloudinary.com/dihlkbitw/image/upload/v1490700527/user_aylgqz.png" alt="Avatar" />
<div class="middle">
<a href="//www.zulfumehmet.com/category/genel/">
<div class="text">Genel</div></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

&nbsp;
<pre>

Kolay ve basit bir şekilde güzel bir tablo hazırladık. Kolay gelsin.

 

Yorum Yaz

*E-mail adresiniz gizli kalacaktır.

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Öneriler

Yeni Makaleler