Transparent vertical div

Transparent

Daha önceleri paylaşmış olduğum saydam bir üst menü örneğini dikey menü olarak değiştirerek tooltip ekledim. Tooltip kısmı saf  css  kullanılarak hazırlanmış bir bölüm. Ben tooltip örneğini  menüde  kullanarak paylaşmak istedim. Dilerseniz  herhangi  bir yazı içerisindeki bir kelimeyede  tooltip örneğini  uygulayabilirsiniz. İşlem oldukça basit  <i></i>   kodları arasına ekleyeceğiniz  yazılar mouse ile  yazının üstüne gelmediğiniz  sürece  görünmüyorlar. Mouse ile yazının üstüne geldiğiniz  zaman tooltip penceresi açılıyor ve açıklamalar tooltip içerisinde  görünüyor.

Şimdilik  fazla  detaya girmeyecem ama önümüzdeki günlerede unutmazsam tooltip kısmını detaylı olarak bir kaç örnek üzerinde anlatmaya çalışacağım sizlere.  Tooltip  örneğinin  en güzel tarafı  bütün tarayıcılar üzerinde sorunsuz  bir şeklde  çalışabilmesi ve menü örneği ise şeffaf png  resimler kullandığım  için her  türlü  site arkaplanına uygun  görünen bir  özeliğe  sahip.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css dosya adresi : 

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<ul id="menu">
 <li class="secili"><a href="index.html">Anasayfa<i>Site <br />Anasayfasına git.</i></a></li>
 <li><a href="#">Webmaster<i>Webtasarımcılar  için jQuery ve <br /> Css3 örnekler.</i></a></li>
 <li><a href="#">Wordpress<i>Wordpress  temalar, eklentiler<br /> ve bileşenler.</i></a>
 <li><a href="#">Script<i>Php, Asp, Flash  ve<br /> daha birçok örnek.</i></a></li>
 <li><a href="#">Photoshop<i>Photoshop dersleri, tasarımlar <br />ve örnekler.</i></a></li>
 <li><a href="http://mintik.com/?p=11964">Tutorial</a></li>
</ul>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-13 tarihinde yayınlandı,Toplam 1524 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...