Forum.Legalne.info: Ładne menu - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

Ładne menu

#1 Użytkownik jest niedostępny   exceptional 

  • Elita
  • Grupa: Moderatorzy
  • Postów: 1843
  • Dołączył: 30-April 06
  • MiejscowośćŁódź

Napisany 13 August 2009 - 09:27 AM

Outcome: http://brainfucker.p...009/08/menu.png

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 http://brainfucker.p.../2009/08/bg.png (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.
Brainfucker.pl

Deo Optimo Maximo
5

#2 Użytkownik jest niedostępny   Versus 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 30
  • Dołączył: 24-December 09
  • GG: 12269346
  • MiejscowośćGdynia

Napisany 25 December 2009 - 08:27 PM

No no, gitowe, na pewno mi się przyda!
10/10 Super tutek ;)
0

#3 Użytkownik jest niedostępny   danix111 

  • danix webmaster :>
  • Grupa: Użytkownicy
  • Postów: 566
  • Dołączył: 06-August 09
  • GG: 5972719
  • MiejscowośćGdynia

Napisany 26 December 2009 - 01:35 PM

Git tutek. Zobaczę, czy mi się przyda.
10/10 i punkt reputacji :).

Na pewno skorzystam na swojej stronie.
Dodaj obrazek
NIE pomagam na PW!
Umiem: HTML, CSS, PHP, SQL, JavaScript, C++, Python (podstawy)
Dodaj obrazek Piszę poprawnie po polsku
0

#4 Użytkownik jest niedostępny   Avatatus 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 254
  • Dołączył: 11-November 09
  • GG: 12411327

Napisany 26 December 2009 - 04:06 PM

Proste i Przydatne .

Repu leci .
0

#5 Użytkownik jest niedostępny   d3d3 

  • Gaduła
  • Grupa: Użytkownicy
  • Postów: 190
  • Dołączył: 28-October 09
  • GG: 12905694

Napisany 26 December 2009 - 04:32 PM

fajny tutek :)
0

#6 Użytkownik jest niedostępny   virus4 

  • Gaduła
  • Grupa: Użytkownicy
  • Postów: 186
  • Dołączył: 30-October 09

Napisany 26 December 2009 - 09:20 PM

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. :)
-2

#7 Użytkownik jest niedostępny   Wiloch 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 33
  • Dołączył: 18-December 09
  • GG: 1816475

Napisany 26 December 2009 - 10:26 PM

Ktoś kiedyś powiedział: "Lepiej więcej robić niż gadać". :)
0

#8 Użytkownik jest niedostępny   Yfidefot 

  • Nowicjusz
  • Grupa: Użytkownicy
  • Postów: 2
  • Dołączył: 22-March 17

Napisany 22 March 2017 - 04:21 PM

Kurdę, a szukałem pomysłu na ładne menu. Wielkie dzięki.
0

Prześlij ten temat:


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień