Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

css - pasek stron

||
Tła:
a) kolor:
.tabs-outer {background-color: #5a5555;}

b) obrazek w tle:
.tabs-outer {background-image: url(http://s6.ifotos.pl/img/guiguojhj_xxenawe.png);}

Przezroczystość:
.tabs-inner {opacity: 0.7;}

Cienie:
a) tekstu:
.tabs-outer {text-shadow: 2px 2px 5px #5a5555 }

b) ramki:
.tabs-outer{box-shadow:0px 0px 2px black}

Zaokrąglone rogi:
.tabs-outer{border-radius: 90px 90px 5px 5px;}

UWAGA: parametry odpowiadają wszystkim czterem rogom. Można zostawić tylko jeden i będzie się wtedy odnosić do całej ramki.

Marginesy (chodzi o to, aby tekst nie przyklejał się do ramek):
.tabs-outer {padding: 3px;}

Obramowanie:
a) linia ciągła:
.tabs-outer {border-style: solid;}

b) linia kreskowa:
.tabs-outer {border-style: dashed;}

c) linia kropkowana:
.tabs-outer{ border-style: dotted;}


d) linia podwójna:
.tabs-outer {border-style: double;}

Grubość obramowania:
a) cienkie:
.tabs-outer {border-width: thin;}

b) średnie:
.tabs-outer {border-width: medium;}

c) grube:
.tabs-outer {border-width: thick;}

Przesunięcie:
.tabs-outer {margin: 10px 30px 100px 44px;}

Odstępy między linkami:
.tabs-outer .widget li a {margin: 4px;} 

Długość menu:
.tabs-outer {width: 640px}

Wybrana karta:
.tabs-outer .widget li.selected a

Podświetlona:
.tabs-outer .widget li a:hover 

2 komentarze

  1. Hej!
    Jest szansa, że dowiem się, jak zrobić menu (karty), które wysuwa się z boku bloga/posta? Chodzi mi o coś takiego jak na Terrible Crash (gadżet "obserwatorzy"), tylko że jako strony.

    OdpowiedzUsuń
    Odpowiedzi
    1. Postaram się to prosto wytłumaczyć. :) Nie wiem, ile sama ogarniasz w temacie, więc rozpiszę to ogólnie, a potem ewentualnie podpytasz o coś więcej.
      Potrzebujesz selektora stron #PageList1.
      Należy przypisać mu position: absolute;, ustawić go pod postem.
      Dodać do tego z-index:20 i jednocześnie ustawić wyższą wartość dla posta, żeby zawsze był nad menu.
      Następnie wpisujesz #PageList1:hover i znów przy pomocy marginesów ustawiasz go obok posta, tam gdzie ma się znaleźć po wysunięciu. Nie zapomnij dla obu zjawisk dodać transition.
      To w sumie technicznie chyba wszystko. ;)

      Usuń