Dzień dobry, drogie krówki! Ta instrukcja miała pojawić się zaraz po maturach, ale z moim poziomem lenistwa wyszło jak zwykle i wrzucam ją dopiero teraz.
Dziś będziemy rozkładać sobie na czynniki pierwsze menu robione w HTML. Dlaczego akurat to? Części efektów, które chcielibyśmy mieć na blogach nie da się wykonać za pomocą samego kodu CSS. Dziś mam dla was kilka ciekawych urozmaiceń, które bez HTML nie byłyby możliwe do zrobienia.
Oto, do czego zmierzamy:
Fajne, co? Idealnie nadaje się do szablonów z motywami roślinnymi. Może się wydawać tylko odrobinę skomplikowany.
To co, zaczynamy? :D
1. HTML - budujemy menu od podstaw.
Na dobry początek zajmijmy się podstawami, czyli kodem HTML. Bez niego nic nam nie będzie poprawnie działało.
Wchodzimy w Układ, w dowolnym miejscu klikamy "Dodaj gadżet" i wrzucamy tam ten kod HTML:
<div class="skrzydlo1 color1"><a href="#">Home</a></div><br />
<div class="skrzydlo2 color2"><a href="#">About</a></div><br />
<div class="skrzydlo3 color1"><a href="#">Page 1</a></div><br />
<div class="skrzydlo4 color2"><a href="#">Exit</a></div>
Wygląda troszkę strasznie, co? Spokojnie, nie ma co trząść portkami, zaraz sobie na spokojnie wyjaśnimy, co i jak tu działa.
- Tych fragmentów kodu, które są czarne, nie zmieniamy.
- Kolor czerwony (#) to miejsce naszego linku. Bez niego kliknięcie na tekst da nam tyle, co nic. By wszystko poprawnie działało, link musimy umieścić w cudzysłowie.
- Kolor zielony to po prostu tekst, który się wyświetla - tak, jak to widać w podglądzie.
- Kolor niebieski w naszym kodzie to nazwa naszego identyfikatora/klasy. Potrzebny nam on będzie w kodzie CSS, byśmy wiedzieli, które reguły odnoszą się dokładnie do którego diva. By się nie pogubić, najlepiej nic tu nie zmieniać ani nie kombinować.
Może lepiej pokażę to na przykładzie. Tak wyglądałoby nasze menu z tym samym CSS, ale za to wszędzie posiadalibyśmy klasę "skrzydlo1 color1":
Jedno, wielkie "meh". Chyba, że interesują nas liście, to wtedy wystarczy wyostrzyć rogi i zmienić kolor na zielony, ale nie o to nam teraz chodzi. Każdy z naszych div class (skrzydło1, skrzydlo2 etc.) ma trochę inny kod, dzięki czemu możemy mieć na blogu ładnego motylka, a nie rządek liści.
Zapisujemy nasz gadżet i przenosimy się do edycji kodu CSS.
2. CSS - tu się dzieje magia.
By nasze menu wyglądało jak ładny motylek, będziemy potrzebowali trochę innego kodu do każdego skrzydełka - właśnie dlatego w kodzie HTML mamy 4 klasy, a nie jedną, co tłumaczyłam wyżej. Zacznijmy może od pierwszego:
.skrzydlo1{margin: 10px 0px 0px 5px;}To raczej proste prawda? Magiczny margin przesuwa nam nasze skrzydełko o tyle pikseli, o ile nam się spodoba.
.skrzydlo1{Widzimy właśnie, że dzięki wcześniejszemu ustaleniu klasy (skrzydlo 1) możemy teraz spokojnie sobie kombinować z pojedynczym skrzydłem, a nie np. całym gadżetem HTML. Ostatnie 4 linijki odpowiadają za odpowiedni kąt nachylenia naszego skrzydełka i trzeba z nimi ostrożnie kombinować.
text-align: center; /*wyrównanie tekstu. Działa nam tutaj: center (do środka), left(do lewej strony), right (do prawej strony) oraz justify (wyjustowanie)*/
width:90px; /*szerokość skrzydła*/
height:20px; /*wysokość skrzydła*/
padding-top:30px; /*tzw. margines wewnętrzny. Odpowiada nam za wolną przestrzeń w środku skrzydła; inaczej mówiąc - tekst będzie odsunięty od górnej krawędzi skrzydła o tyle pikseli, ile tu wpiszemy*/
padding-bottom:30px; /* nadal tzw. margines wewnętrzny. Tekst będzie odsunięty od dolnej krawędzi skrzydła o tyle pikseli, ile tu wpiszemy*/
margin:10px; /*to wiadomo*/
border-radius: 10px 50px 0px 50px; /*zaokrąglenie rogów, by skrzydło było skrzydłem, a nie kwadratem*/
transform:rotate(15deg);
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
z-index: 10 /*ustala nam, jak bardzo "na wierzchu" będzie nasz gadżet - tak, by nawet jeśli coś na niego nachodzi, np. kolumna boczna, to by go nie zakrywało*/
}
No to zobaczmy, co nam w takim razie wyszło:
Hej, chwila, oprócz tego, że tekst nam się przesunął, to nic się nie stało, prawda? Ano prawda. Za kolor tła odpowiada magiczne color1 i color2, dopisane do każdej klasy.
.color1 {background:#e576af;}Spróbujmy jeszcze raz.
.color2 {background:#f0b6d4;}
Tadaa! Oto nasze pierwsze w pełni gotowe skrzydełko! Pozwólcie, by nie przedłużać tej i tak kolosalnej notki, że gotowe kody powrzucam do paczki na końcu notki.
Zakładamy, że kolejne skrzydła mamy już zrobione w ten sam sposób. Co nam pozostaje? Określić zachowanie i wygląd linków oraz powrzucać kilka bajerów.
.skrzydlo1, .skrzydlo2, .skrzydlo3, .skrzydlo4 {box-shadow: 5px 5px 25px #666666;}A na dobre zakończenie:
.skrzydlo1 a, .skrzydlo2 a, .skrzydlo3 a, .skrzydlo4 a {font-family: Courier; font-size: 13px;}
.skrzydlo1:a hover, .skrzydlo2:a hover, .skrzydlo3:a hover, .skrzydlo4:a hover {text-decoration: none; box-shadow: 2px 2px 15px white; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s}
I to wszystko, moi drodzy. Nasze menu jest piękne, różowe i tak bardzo motylkowe, że bardziej dałoby się to zrobić chyba tylko za pomocą programu graficznego. Łapcie sobie paczkę z instrukcją i dodatkowymi motylkami: klik!
Jakie problemy możecie napotkać podczas bawienia się tymi motylkami?
- Prawie na pewno wystąpi problem dobrego dostosowania menu do różnych rozdzielczości. Dopóki skrzydełka motyli się nie stykają, nie powinno to być aż tak widoczne, lecz kiedy skrzydła się dotykają, na pewno ten problem wystąpi. Nie powinny to być natomiast na tyle duże różnice, by menu się jakoś kompletnie porozjeżdżało. Najlepiej podczas zabawy tym menu otworzyć sobie później bloga i pooglądać go w różnym przybliżeniu. Niestety nie wiem, jak można by się tego pozbyć.
- Strasznie dużo czasu i pracy zajmuje odpowiednie ustawienie skrzydeł, kiedy zmieniamy ich kąt nachylenia, dlatego lepiej nie za wiele z nimi kombinować. Bawcie się kolorami, czcionkami i dodatkowymi bajerami, ale z bardziej skomplikowanymi rzeczami uważajcie.
A teraz miłej zabawy, moje krówki, i uważajcie na siebie na wakacjach.
Od razu mówię: nie mam pojęcia, czy coś się pojawi w następnym tygodniu, mam naprawdę mocny zastój weny.
Od razu mówię: nie mam pojęcia, czy coś się pojawi w następnym tygodniu, mam naprawdę mocny zastój weny.
Brak komentarzy:
Prześlij komentarz