niedziela, 13 marca 2016

Design DIY: kody css

Hej, ten post jest bardziej przeznaczony dla osób, które mają blogi lub zamierzają je założyć. Przedstawię najważniejsze kody css. 

POSTY:

Obrazek w tle post:
.post{background-image:url(link do obrazka);}
bez nawiasów

Kolor tła postów:
.post{background-color:#afa4b2}
kolor do wyboru z tabeli kolorów

Przezroczystość tła:
post{opacity:0.5;)

Cień ramki posta:
.post{box-shadow: 2px 2px 5 px;}

Marginesy:
.post{padding: 20px;}

Cień tekstu posta:
.post{text-shadow: 0px 0 px 3px #000000

Ramki posta:
-linia ciągła:
.post{border-style:solid;}
-linia podwójna:
.post{border-style: double;}
-linia kreskowana:
.post{border-style: dashed;}
-linia kropkowana
.post{border-style: dotted;}

Grubość ramki:
.post{border-width: 2px;}

Kolor tekstu i ramki w poście:
.colimn-center-inner{color: #000000;}

Kolor ramki w poście:
.column-center-inner{border-color: #000000}

Wielkość czcionki w tekście:
.column-center-inner{font-size: 15px}

Wyśrodkowanie tekstu:
.column-center-inner{text-align: center;}

Rodzaj czcionki tekstu w poście:
.column-center-inner{font-family: Georgia;}

Przesunięcie:
.column-center-inner{margin: 90px 300px 0px -400px;}

Wyśrodkowania

Wyśrodkowanie gadżetów w lewej kolumnie:
.column-left-inner{text-align: center;}

Wyśrodkowanie gadżetów:
.column-right-inner{text-align: center;}

Wyśrodkowanie gadżetów w środkowej kolumnie:
.column-center-inner{text-align: center;}

Wyśrodkowanie daty:
h2.date-header{text-align:center;}

Wyśrodkowanie tytułu posta:
h3.post-title{text-align: center;}

Wyśrodkowanie napisy Komentarz:
.commnents h4{text-align:center;}

Wyśrodkowanie nagłówka:
.header-inner.widget div, .header-inner img{
margin-left:auto;
margin-right:auto;
}
Linki
Podkreślenia nad i pod linkiem:
a:hover{text-decoration:overline underline;}

Podkreślenia pod linkiem:
a:hover{text-decoration: underline;}

Przekreślenie linku:
a:hover{text-decoration: none;}

Rozszerzenie liter po najeździe na link:
a:hover{letter-spacing: 4px}

Rozszerzenie wyrazów po najeździe na link:
a:hover{word-spacing: 10px}

Inne
Podniesienie nagłówka
.header{height: 550px;}

14 komentarzy:

  1. Przydatne dla początkujących. Czasem warto dodawać takie posty, można pomóc wielu blogerom i blogerkom, które zaczynają swoją przygodę z designem ;3

    >ONLYMERY55.BLOGSPOT.COM<

    OdpowiedzUsuń
  2. O może coś wykorzystam mu siebie :D

    Zapraszam do siebie! Komentarze i obserwacje mile widziane ^^ http://bleedingoutforyou.blogspot.com/

    OdpowiedzUsuń
  3. Przydatny post :) Może wypróbuję u siebie :)
    Zapraszam :) http://natalie-forever.blogspot.com/2016/03/indie-earthi.html

    OdpowiedzUsuń
  4. dziękuję Ci bardzo <3 bardzo nam się przyda c: dopiero zaczynamy.. zapraszamy do nas c: http://queens-of-fucking-everything.blogspot.com/

    OdpowiedzUsuń
  5. Świetnie napisane, widać, że wkładasz serce w to co robisz i to mi się podoba, trzymaj tak dalej! będę zerkać częściej! ♥

    PS za poklikanie w linki z ostatniego postu, zaobserwuję Twój blog i zareklamuję w następnej notce♥
    ♥Last Dream By Me♥ *Klik*

    OdpowiedzUsuń
  6. Dziękuję! bardzo przydatne:)
    Zapraszam do mnie, bo właśnie powróciłam do blogowania :)
    pandabae.blogspot.com

    OdpowiedzUsuń
  7. przydatne ;)

    pozdrawiam i zapraszam serdecznie do mnie :)
    ewamaliszewskaoff.blogspot.com

    OdpowiedzUsuń
  8. na pewno mi pomorze

    OdpowiedzUsuń
  9. świetny blog
    pozdrawiam

    OdpowiedzUsuń
  10. więcej takich postów :)

    OdpowiedzUsuń

Jeśli zaobserwowałeś napisz, jeśli mi się spodoba zaobserwuje
Za wszystkie komentarze dziękuję ! :)
Jak prosicie abym ja kliknęła w linki zawsze to robię, ale jestem za leniwa, aby do napisać i nie chce dawać krótkich komentarzy