6/30/2014

Efekty dla tytułu posta i widgetu

W tej notce zapodam kilka kodów css, które upiększą Twojego bloga, a dokładniej jego tytuły.

Ciupka teorii

Kody CSS wklejamy do arkusza CSS. Jak go znaleźć: klik.

h3.post-title odpowiada za zmiany w tytule posta, natomiast h2 za tytuły widgetów.
Aby efekt zadziałał w tytule posta trzeba napisać: h3.post-title {kod, który podałam}
Na przykład:  h3.post-title {text-transform: uppercase;}

Żeby działał w widgetach: h2 {kod}
Na przykład: h2 {text-transform: uppercase;}

Wpisanie none po ":" zresetuje efekt, więc jeżeli mamy niechciane podkreślenie, możemy  je usunąć przez text-decoration: none;

Aby nałożyć na siebie kilka efektów, kod trzeba wkleić w taki sposób:
h2 {text-transform: uppercase;
text-decoration: underline;
}

Do dzieła!

Kody

Wielkie litery
text-transform: uppercase;


Małe litery
text-transform: lowcase;


Pierwsza litera zawsze wielka
text-transform: capitalize;


Podkreślenie
text-decoration: underline;


Przekreślenie
text-decoration: line-through;


Nadkreślenie
text-decoration: overline;


Cień
text-shadow: 2px 2px 2px black;
(text-shadow: przesunięcie w poziomie, przesunięcie w pionie, rozmycie, kolor)


Ramka
border: 2px solid black;
(border: grubość, styl, kolor)

Można też zmieniać pojedyncze strony ramki:
border-top: - góra
border-bottom: - dół
border-left: - lewo
border-right: - prawo

Wychodzi wtedy:
border-top: 2px solid black

Są też różne style:
solid - zwykła
dotted - kropkowana
dashed - paskowana
double - podwójna
groove, ridge, inset oraz outset - różne 3D

Wychodzi wtedy:
border: 2px groove black;
border-bottom: 1px double white;


Resztę rzeczy (pogrubienie, kursywa, kolor, wielkośc, font) można zmienić w zakładce tytuł posta/widgetu.
Jeżeli znasz jakiś inny kod, podrzuć go do komentarzy, a uzupełnię notkę c:

3 komentarze:

  1. Może mi się przydadzą, ale wolę takie normalny tekst.

    http://pomysly-na-wakacje-w-domu.blogspot.com/

    OdpowiedzUsuń
  2. Chciałabym, zeby mój blog był bardziej nastrojowy, odpowiedni do moich wierszy, ale nie wiem jak to zrobić...

    http://troughthelooookingglass.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Na pewno nie uzyska się nastroju domyślnym szablonem i tłem z bloggera. Jeżeli chcesz pójść na łatwiznę i nie czujesz się dobrze w projektowaniu blogów, nie znasz się na cssie i htmlu, to warto odwiedzić jakąś blogspotową szabloniarnię. Dużo takich wyskakuje w googlach po wpisaniu "szabloniarnia blogspot". Możesz wybrać gotowy szablon albo zamówić. Ale jeżeli chcesz spróbować sama, to podstawowe opcje bloggera nie wystarczą, aby zrobić coś nastrojowego i przyjemnego dla oka, więc chociaż podstawowa znajomość cssa jest wymagana.
      Najłatwiej nastrój uzyskać ciemnymi kolorami, więc i ciemnym tłem. Ale też niech nie będzie ono czarną plamą, a jakimś nierzucającym się w oczy wzorkiem. Jednak wtedy też trzeba się zająć nagłówkiem. Fajnie by było jakby napis był wyśrodkowany i miał bardziej ozdobny font, ale w miarę czytelny. Kolor nagłówka też jest ważny, a do ciemnego tła pasuje np. fiolet, niebieski, ogólnie ciemniejsze kolory, ale nie rażące po oczach.

      Usuń