Jump to content
Sign in to follow this  
exceptional

�adne menu

Recommended Posts

Outcome:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

 

Celem tuta jest pokazanie, jak można łatwo osią…gną…ć ciekawy efekt szklanego menu korzystają…c tylko z jednego pliku graficznego. Reszta to CSS.

 

1. Pobieramy plik

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
(Prawy klawisz -> Zapisz element docelowy jako)

 

2. Wklepujemy na naszej stronie kod:

<ul class="menu"> 
<li>Home</li>
<li>Galeria</li>
<li>Blog</li>
<li>Kontakt</li>
</ul>

 

ul.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
background: #9bb902 url(bg.png) top repeat-x;
}

ul.menu li {
display: inline-block;
line-height: 40px;
font-family: Verdana;
font-size: 12px;
color: white;
font-weight: bold;
margin-left: 20px;
}

 

3. I to wszystko. Efekt jest bardzo prosty, ale za to przyjemny dla oka i dość popularny. Większość osią…ga go za pomocą… pliku z gotowym tłem, ale stwarza to szereg niedogodności, m.in. dla każdego menu, kóre chcemy mieć w innym kolorze musimy tworzyć osobny plik, tutaj wystarczy zmienić kolor tła w CSS.

  • Like 5

Brainfucker.pl

 

Deo Optimo Maximo

Share this post


Link to post
Share on other sites

Nie dam reputa ponieważ w menu brakuje mi odnośników. Wprawdzie większość umie je zrobić ale dla amatorów było by to bardzo przydatne. Ja za niedługo umieszczę tutaj podobne menu, ale z odnośnikami i małym efektem. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...