piątek, 31 lipca 2015

By czytelnik był zadowolony

Witajcie,
Tak jak obiecałam przygotowałam dla Was kolejny mini poradnik korzystania  kodów CSS.
Duży procent odwiedzających Naszego bloga, nie zwraca uwagę na otoczkę tylko na konkretny wpis, bo znalazł się u Nas przypadkiem wpisując daną frazę w wyszukiwarce, dlatego też powinniśmy zadbać by taki czytelnik zapamiętam Naszą stronę nie dzięki nagłówkowi czy innym bajerom tylko dlatego, że wpis który czytał nie tyle był dobry, zrozumiały i taki jakiego szukał ale także estetycznie miły dla oka, tak więc dziś skupimy się na postach, bo je również można w łatwy sposób poprawić.

Tła:
  • możemy zmienić kolor
    .post {background-color: #5a5555;}
  • możemy mieć kaprys by w tle był obrazek, nic prostszego:
    .post {background-image: url(adres do obrazka);}
  • możemy również sprawić by tło było przezroczyste, aczkolwiek jeśli nie jest w jednolitym kolorze, nie polecam tej opcji, gdyż czytelnik będzie miał problem z odczytaniem tekstu, Wy z resztą też:
    .post {opacity: 0.7;}   
 Cienie:
  • tekstu
    .post {text-shadow: 2px 2px 5px #5a5555 }
  • ramki
    .post {box-shadow:0px 0px 2px black}
Zaokrąglone rogi:
.post {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 by tekst nie przyklejał się do ramek)
.post {padding: 20px;}   

Obramowanie:
  • linia ciągła
    .post {border-style: solid;}  
  • linia przerywana
    .post {border-style: dashed;}
  • linia kropkowana
    .post {border-style: dotted;} 
  • linia podwójna
    .post {border-style: double;}  
Mamy obramowanie no to teraz Grubość Obramowania
  • cienkie
    .post {border-width: thin;}
  • średnie
    .post {border-width: medium;}
  • grube
    .post {border-width: thick;}
Tyle na dziś i oczywiście pytanie do Was:
Czy jest coś co chcielibyście umieścić na swojej stronie, ale nie macie pojęcia jak się za to zabrać?

Pozdrawiam

Brak komentarzy:

Prześlij komentarz

Copyright © Szablon wykonany przez Blonparia