Sitelerde dolanırken karşımıza çeşit çeşit ipuçları yani bilgilendirici yazılar çıkıyor. Bu ipuçları kimi zaman otomatik olarak çıkıyor kimi zaman ise bir elementin üzerine gittiğiniz zaman size o elementin işlevi hakkında bilgi veriyor.
Bu yazı da CSS'i kullanarak basit bir şekilde nasıl ipuçları oluşturabiliriz bunu göreceğiz. Kaynak dosyalara yazının sonunda ulaşabilirsiniz.
İpucu CSS (Code Style Sheet) dosyalarının her birini ayrı bir isimde kaydettim. "ipucu.css, ipucu2.css, ipucu3.css, ipucu4.css" şeklinde. Bu dosyaları yine oluşturmuş olduğum XHTML sayfanın içerisine <head></head> arasında çağırıyoruz.
Örneğin; <link rel="stylesheet" type="text/css" href="ipucu.css" /> (şeklinde)
yine <body></body> arasına yazılarımız ve elementlerimiz yer alacak. <a></a> elementi içerisinde yaratmış olduğum <ipucu></ipucu> elementini ipuçlarını saklamak için kullanmış oldum.
Önemli: Her hangi bir ipucu yaratmadan önce hangi elementi ipucu olarak kullanacağımızı önceden belirlememiz ve ona göre ipucu tasarımını hazırlamamız gerek. Örneğin bir div kullanarakta ipuçları oluşturabiliriz.
CSS Kodu:
a.element ipucu
{
display:none;
}
a:hover.element,a:focus.element
{
position:relative;
background:#000;
color:aqua;
}
a:hover.element ipucu,a:focus.element ipucu
{
position: absolute;
display: block;
top:20px;
left:0;
padding:5px;
background:yellow;
width:100px;
border:1px solid orange;
text-decoration:none;
color:black;
}
XHTML Kodu:
<div>
Kaynak: ipucu.css > Bu bir ipucu deneme <a class="element" href="#">yazısıdır
<ipucu>Buda bir ipucudur.</ipucu></a>
</div>
CSS İpucu Örnekleri:
Kaynağı İndir | Online Görüntüle