1. Najpierw tworzymy pasek, który ma zostać "przyklejony" do górnej belki przeglądarki i zostać nieruchomy. Jak tego dokonać? Wystarczy wkleić ten kod:
.tabs-outer {
background: #260404; /*kolor tła*/
position: fixed; /*pozycjonowanie nieruchome gadżetu*/
top: 0px; /*magines górny*/
left: 0px; /*margines lewy*/
width: 2000px; /*szerokość paska*/
z-index: 10;
padding: -2px; /*margines */
box-shadow: 0px 0px 14px #000; /*cień paska*/
}
Oczywiście wszystkie wartości możecie dowolnie zmieniać, dodać swoje dodatkowe właściwości i usunąć to, co uważacie za zbędne i niepotrzebne. Uprzedzam jednak, by pozostawić wartość "width: 2000px;". Niestety, nie znalazłam rozwiązania do faktu, by pasek rozciągnął się na cała szerokość okna przeglądarki; pozostaje jedynie bawienie się marginesami. Jeśli ktoś zna na to sposób, prosiłabym o jakikolwiek kontakt.
2. Nadszedł czas na stworzenie przycisków kart. Podaję przykładowy kod do wklejenia w arkusz CSS:
#PageList1 a {
background: #d08539; /*kolor tła*/
padding-bottom: -2px; /*margines dolny*/
border-radius: 0px 0px 20px 20px; /*zaokrąglenia*/
margin: 3px;
opacity: 0.7; /*przezroczystość*/
}
Tak jak wyżej, wszelkie wartości i właściwości możecie wybierać dowolnie. Wszystko zależy od waszej wyobraźni. :)
3. Do przycisków można też zrobić ciekawe efekty po najechaniu na link. Przykładowym efektem może być ten:
#PageList1 a:hover {
background: #280909 !important; /*kolor tła*/
color: #d08539; /*kolor czcionki po najechaniu na link*/
padding-top: 20px; /*margines dolny*/
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
4. Mamy nieruchomy pasek, przyciski oraz efekty po najechaniu na link. Pozostaje teraz zabawa marginesami. Oto kod na rozmieszczenie menu górnego:
#PageList1 {margin: -5px 0px 0px -188px;}
Pierwszy to margines górny, drugi to prawy, trzeci to margines dolny, a ten ostatni to margines lewy. Liczby ujemne też wchodzą w grę, pamiętajcie! :)
MÓJ EFEKT:
(kliknij na obrazek, by zobaczyć podgląd)
Brak komentarzy:
Prześlij komentarz