Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Proste menu z efektem a'la rollover, Jak uzyskać efekt zaokrąglonego rogu ?
Bureau
post
Post #1





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 18.03.2012

Ostrzeżenie: (0%)
-----


Witam.
Mój problem dotyczy kodowania, ponieważ jestem grafikiem, który czasem w kodowaniu jest upośledzony tongue.gif

Wykonałem menu, które prezentuje się następująco:


Potrafię to pociąć, ułożyć w HTML/CSS poprzez:

  1. <ul><li></li></ul>


*oczywiście odpowiednio dobierając style do tychże znaczników.

Wszystko wygląda ładnie, pięknie. Menu działa. Jednakże problem tkwi w hover.

Jak musiałbym zmodyfikować swój kod, aby uzyskać efekt takiego menu:


Najbardziej zastanawia mnie jak zrobić zaokrąglone rogi bez użycia CSS3.
W ostateczności mógłbym użyć CSS3.

Pomógłby mi ktoś ? smile.gif Zapraszam do dyskusji wink.gif

Pozdrawiam smile.gif
Go to the top of the page
+Quote Post
crocodillo
post
Post #2





Grupa: Zarejestrowani
Postów: 215
Pomógł: 44
Dołączył: 31.07.2011
Skąd: wrocław

Ostrzeżenie: (0%)
-----


css3: border-radius

możesz też przy pomocy background-image
Go to the top of the page
+Quote Post
Bureau
post
Post #3





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 18.03.2012

Ostrzeżenie: (0%)
-----


No to tak krótko mówiąc biggrin.gif
Jednak chcialem sie dowiedziec gdzie dać ten atrybut.

nie chce zeby caly przycisk mi sie zmieniał. Mam zrobić klase
Kod
li a:hover { width:100px; height:100px; background-image:url(images/przycisk.jpg); }


Czy jak to dokładnie biggrin.gif
Go to the top of the page
+Quote Post
crocodillo
post
Post #4





Grupa: Zarejestrowani
Postów: 215
Pomógł: 44
Dołączył: 31.07.2011
Skąd: wrocław

Ostrzeżenie: (0%)
-----


Cytat(Bureau @ 18.03.2012, 13:21:12 ) *
No to tak krótko mówiąc biggrin.gif
Jednak chcialem sie dowiedziec gdzie dać ten atrybut.

Dokładnie to Ci nie powiem, bo moja magiczna kula właśnie service packa ściąga, ale tak ogólniej to dajesz to do elementu, który chcesz zmienić (nie musi być koniecznie <a>).
Go to the top of the page
+Quote Post
Bureau
post
Post #5





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 18.03.2012

Ostrzeżenie: (0%)
-----


Wstawiam to co zrobiłem (w css3 narazie).
Menu przedstawia się w htmlu następująco:



Problem tkwi w tym że nie wiem jak to rozszerzyć, ponieważ gdy dam wartości padding to rozwala całe menu po najechaniu tongue.gif

Mój kod HTML/CSS jaki tam zastosowałem na szybko (skupmy się tylko na pierwszym linku START):

Kod
ul, li {
    display:inline;
    float:left;
    padding:11px 8px 5px 8px;
}
.menu a {
    display:inline;
    text-decoration:none;
    color:#979797;
    font-weight:bold;
}
.menu a:hover{
    display:inline;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color:#fff;    
    color:#1e1e1e;
    font-weight:bold;
}


  1. <div class="grid_5 omega" id="menu">
  2.  
  3. <ul>
  4. <li class="menu"><a href="#">Start</a></li>
  5. <li>Portfolio</li>
  6. <li>Oferta</li>
  7. <li>Kontakt</li>
  8. </ul>
  9.  
  10. </div>


Da się to jakoś zrobić by było jak na powyższym przykładzie z 1 postu ?

Ten post edytował Bureau 18.03.2012, 14:20:40
Go to the top of the page
+Quote Post
crocodillo
post
Post #6





Grupa: Zarejestrowani
Postów: 215
Pomógł: 44
Dołączył: 31.07.2011
Skąd: wrocław

Ostrzeżenie: (0%)
-----


ustaw padding dla .menu a, wtedy nie będzie Ci się zmieniała wielkość przy najechaniu
Go to the top of the page
+Quote Post
Bureau
post
Post #7





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 18.03.2012

Ostrzeżenie: (0%)
-----


Dziękuje Ci bardzo smile.gif Menu działa perfekcyjnie smile.gif
Ale to jest jeśli chodzi o CSS3.

Teraz jakbym to chciał zrobić w CSS2 to ?

Mowiles o background-image. No rozumiem jak to działa, ale z zaokraglonymi rogami pierwsza droga jaka pomyslalem jest do kazdego linka przypisać nowy obrazek w h:over, bo nie kazdy napis jest równej długości.

Widziałem że ludzie jakoś to kiedyś określali position'em czy cos...
Może wiesz coś na ten temat ? smile.gif
Go to the top of the page
+Quote Post
crocodillo
post
Post #8





Grupa: Zarejestrowani
Postów: 215
Pomógł: 44
Dołączył: 31.07.2011
Skąd: wrocław

Ostrzeżenie: (0%)
-----


Różnie to można zrobić, możesz dla każdego ustawić inne tło, możesz też ustalić stałą szerokość dla każdego elementu i wtedy jedno tło, możesz też dodać elementy pomocnicze (przed i za, lewa i prawa strona z zaokrąglonymi rogami). Poszukaj w google: css rounded corners, wiele jest sposobów. Ja osobiście pozostał bym przy css3, tylko ie8- bodajże nie obsługuje
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.08.2025 - 15:21