ciekawe menu z grotem
Jak pisałam w poprzednim poście CSS3 daje bardzo duże możliwości twórcą stron. Wspomniałam również o możliwości zastąpienia grafiki odpowiednią formułą. Pokazałam także proste figury geometryczne i jak je uzyskać.
W tym poście pójdę o krok dalej i zaprezentuje praktyczne ich wykorzystanie na przykładzie menu/breadcrumb zastosowanie polecam waszej ocenie.
Po pierwsze edytora tekstu w którym napiszemy kod naszego menu.
Po drugie przeglądarki internetowej, gdzie będziemy mogli zobaczyć efekt naszej pracy.
Na początek tworzymy nowy plik „html” lub otwieramy modyfikowany.
Jeśli tworzymy nowy plik to umieszczamy w nim kod:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>Następnie pomiędzy znacznikami <body></body>:
<div id="menu">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</div>W tej chwili stworzyliśmy menu, nie wygląda ono jednak tak jak powinno. Brakuje do tego odpowiednich formul w CSS3
W następnym kroku zaczynamy pisać nasze formuły, możemy zrobić to w osobnym pliku CSS lub w tym samym umieszczając formułę w znacznikach <style></style> przed zamknięciem </head>.
Na początek wyśrodkujemy nasze menu względem strony, oraz usuniemy wypunktowanie listy.
#menu {
text-align: center;
}
#menu ul {
list-style: none;
display: inline-table;
}Teraz czas na pokolorowanie naszego menu. Nadal nie posiada ono jednak zakończonych strzałkami boków.
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
height: 50px;
background: #5a1010;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: #fff;
}
#menu ul li a:hover {
background: #270000;
}Boki zaostrzą się dopiero po dodaniu tego kodu:
#menu ul li a:after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #5a1010;
position: absolute; right: -40px; top: 0;
z-index: 1;
}
#menu ul li a:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #e3e3e3;
position: absolute; left: 0; top: 0;
}
#menu ul li:first-child a {
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#menu ul li:first-child a:before {
display: none;
}
#menu ul li:last-child a {
padding-right: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#menu ul li:last-child a:after {
display: none;
}
#menu ul li a:hover:after {
border-left-color: #270000;
}Na koniec Menu będzie wyglądało podobnie do tego poniżej:
Nie co więcej o tworzeniu tego typu menu znajdziecie na stronie:
http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css
Przy tworzeniu menu trzeba pamiętać, że powyżej znajduje się jedynie przykład a to jak będzie wyglądać wasze menu zależy tylko od was.
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…