Witajcie. Jest to kolejny post z
instrukcją na ZI. Postaram się w miarę najprościej objaśnić, jak można
bardzo łatwo i fajnie zmienić wygląd chociażby stron / menu.
Na początku zapraszam do lektury Useful :nth-child - warto zapoznać się z tą lekturą.
Kolejnym etap jest ten fajny 'sznureczek'. Zacznijmy najpierw od tego podłużnego.
A teraz czas na ten drugi, mniejszy, poprzeczny.
Nie pomińcie tylko " content:''; " . Bez tego po prostu nasz sznureczek nie będzie istnieć.
I teraz najfajniejsza część zabawy! Tworzenie każdego linku innego.
To chyba tyle w tym temacie.Nie jestem zbyt dobrym nauczycielem. Nie potrafię tłumaczyć, wybaczcie! Ale będę się starać ;p
Na początku zapraszam do lektury Useful :nth-child - warto zapoznać się z tą lekturą.
Jak widzicie na obrazku powyżej, uzyskałam bardzo fajny efekt. Jest przy tym nieco pracy, ale warto :)
No to lecimy! Upiększać będziemy nasze menu #PageList1
#PageList1{z-index: 100;
background:transparent;
padding:1em;
position:relative;
top:-710px;left:-200px;
width:150px;
padding:.5em;
margin:auto;
text-align:center;}
W tym momencie ustalamy pozycję naszego elementu i jego tło. Ja zastosowałam tło przezroczyste.Kolejnym etap jest ten fajny 'sznureczek'. Zacznijmy najpierw od tego podłużnego.
#PageList1:before{
content:' '; /*ustala konkretną wartość atrybutu (wymagany)*/
width:5px;
height:140%;
position:absolute;
z-index:-1;
top:-70px;
right:50%;
background: black;
border-radius:0 0 10px 10px;
}
A teraz czas na ten drugi, mniejszy, poprzeczny.
#PageList1:after{
content:'';
width:13px;
height:5px;
position:absolute;
bottom:-6px;
right:47%;
border-radius:90px;
background: black;
box-shadow:0 0 0px #000;
}
Nie pomińcie tylko " content:''; " . Bez tego po prostu nasz sznureczek nie będzie istnieć.
I teraz najfajniejsza część zabawy! Tworzenie każdego linku innego.
#PageList1 a { transform:rotateZ(0deg);Tutaj też zaczyna się wasze pole do popisu i wasza wyobraźnia. W kodzie powyżej zmieniacie wszystko tak, jak chcecie - kolor, rotację, pozycję, obramowanie. Możecie też, zamiast koloru tła, dodać obrazek. Jak szaleć, to na całego, czyż nie?
position:relative;
left:0em;}
#PageList1 li:first-child { background:#B4E4FA;
transform:rotateZ(-4deg);
z-index:15;}
#PageList1 li:nth-child(2){
background:#91AEDB;
z-index:14;}
#PageList1 li:nth-child(3){
background:#D5D1E9;
transform:rotateZ(4deg);
z-index:3;}
#PageList1 li:nth-child(4){
background:#DCE0F0;
z-index:12;position:relative;
}
#PageList1 li:nth-child(5){
background:#B4E4FA;
transform:rotateZ(4deg);
z-index:1;}
#PageList1 li:nth-child(6){
background:#91AEDB;
z-index:2;
}
To chyba tyle w tym temacie.Nie jestem zbyt dobrym nauczycielem. Nie potrafię tłumaczyć, wybaczcie! Ale będę się starać ;p
Co ty gadasz?! Świetnie to wytłumaczyłaś. I co najważniejsze- zrozumiałam. Zrozumiałam i użyję, na 100% :D
OdpowiedzUsuńCieszę się :) Może za bardzo nie zagłębiałam się, żeby to wytłumaczyć, ale obstawiam, że ktoś, kto porywa się na taki bajer, mniej więcej wie, co z czym się je ;p
UsuńInstrukcja i pomysł super! ;)
OdpowiedzUsuńWłaśnie staram się coś zdziałać. xd
Wszystko pięknie wygląda, tylko problem z efektami. xd Może uda mi się to rozgryść.
Wierzę, że dasz radę. Wystarczy tylko bawić się wartościami i położeniem, no i kolorami, a powinno być ok.
UsuńŚwietna instrukcja, tylko mam problem z content. O jaką tam chodzi tak dokładnie wartość? Wszystko próbowałam i nic :c.
OdpowiedzUsuńNie chodzi tu o wartość, a o zapis :) skopiuj tak, jak jest podane, a powinno działać :)
Usuńja mam pytanie. Użyłam tego kodu, bo oczywiście jest genialny, skorzystałam z twojej instrukcji, tylko zrobiłam ją własny sposób, odpowiedni do danego szablonu. Ten blog mam w kredytach jak zwykle, a ludzie się czepiają że powinnam o tym kogoś informować i oczywiście gównoburza powstaje. Uważam jednak, że skoro dałaś tutaj instrukcję to jest to ogólnodostępne i można z tego korzystać, pod warunkiem, że ma się gdzieś do tego bloga odnośnik. Zatem, czy mam jeszcze specjalnie w swojej notce umieścić link do tej instry, żeby zaraz mnie nikt o nic nie oskarżył? Pytam tak z ciekawości.
OdpowiedzUsuńJeśli link jest w kredytach, to nie mam powodów do tego, by się czepiać. Jeśli jednak pod danym szablonem pojawiłby się link do Zatraconych Instrukcji, byłoby nam jeszcze milej.
UsuńRadują się nasze serducha, gdy nasze instrukcje się przydają :)
Pozdrawiam!
Och, oczywiście, że się przydają! Nawet nie wiesz jak, choć w sumie wiesz, bo pytałam Cię nawet na DA jak zrobić te fajne karty z obrazkami, nie wiem czy będziesz kojarzyła. Zatem instrukcje są niesamowicie przydatne. Dziękuję za odpowiedź.
UsuńPs. Czy możesz usunąć weryfikację obrazkową tutaj? To strasznie wkurza
:O nie wiedziałam, że jest włączona... Zaraz to naprawię!
Usuńoh miesiąc tego szukam dziękuję
OdpowiedzUsuńA czy da się to zastosować do hoverów? Bo próbowałam na milion róznych kombinacji, ale nic mi nie wychodziło xD
OdpowiedzUsuńA dokładniej, że po najechaniu na menu czy co? XD
UsuńPisały niektóre osoby o kropce przy pozycjach w liście stron. A co jeśli ten podany kod nie działa? Jak inaczej mogę pozbyć się tych kropek?
OdpowiedzUsuń