zamknij

Z cyklu porad CSS - pasek stron

Cześć i czołem ♥ Za równe 9 dni (licząc weekendy) długo oczekiwane wakacje. Macie może plany? Dziś jak zwykle przypada nam publikacja jakiś kodzików CSS. W notce dowiecie się m.in jak wyśrodkować pasek kart oraz wykonać banalne obramowanie!

Poziom trudności : [**]

    
By Yassmine ♥


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 

Instrukcja opracowana przez Elfabę.
Przypominamy o 

3 komentarze:

  1. B.przydatna instrukcja.
    Pozdro;33

    OdpowiedzUsuń
  2. a jeżeli nie chce się mieć obramowanych kart tylko podkreśline? I czy da się zmienić czcionkę I pogrubić ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Blogger jest o tyle przydatny, że można na nim działać wieloma operacjami. Zapraszam tutaj (http://tajemniczy--ogrod.blogspot.com/2012/11/gotowe-kody.html) gdzie wszystko jest wyjaśnione w prosty sposób :)

      Usuń