Nie każdy lubi Disqus

piątek, sierpnia 07, 2015

Witajcie
Wiem, że przez temperaturę nikomu nic się nie chce, ale działać i pracować trzeba, tak więc dziś kolejny mini poradnik jak używać kodów CSS. Mamy już za sobą Wygląd Strony Głównej oraz Poprawki Wyglądu Postów.
Trzeci poradnik z tej serii więc już trochę tych kodów znacie, ale czy wiecie jak w łatwy sposób poprawić komfort komentowania bez konieczności instalacji Disqus czy podłączenia komentarzy Google +, jeśli nie to zapraszam do lektury.

Tła:

  • kolor
    .comment p {background-color: #5a5555;}
  • obraz w tle
    .comment p {background-image: url(http://s6.ifotos.pl/img/guiguojhj_xxenawe.png);} 
Przezroczystość, sama nie polecam jeśli tło Strony głównej ma pstrokaty wzór
  • .comment p {opacity: 0.7;} 
Cienie:
  • tekstu
    .comment p {text-shadow: 2px 2px 5px #5a5555 }
  • ramki
    .comment p{box-shadow:0px 0px 2px black} 
Zaokrąglone rogi:
  • .comment p{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 ramki)
  • .comment p {padding: 20px;} 
 Obramowanie:
  • linia ciągła
    .comment p {border-style: solid;}
  • linia kreskowa
    .comment p {border-style: dashed;}
  • linia kropkowana
    .comment p {border-style: dotted;}
  • linia podwójna
    .comment p {border-style: double;}
Grubość obramowania:
  • cienkie
    .comment p {border-width: thin;}
  • średnie
    .comment p {border-width: medium;}
  • grube
    .comment p {border-width: thick;}
No dobrze wygląd samych komentarzy mamy, ale co z Avatarami użytkowników?
Spokojnie na to też są kody.

Zaokrąglone rogi:
  • .avatar-image-container {border-radius: 90px 90px 5px 5px;} 
UWAGA! Jeśli wpiszecie duże parametry we wszystkich czterech rogach, wtedy avatar będzie mieć kształt koła. Ale po co ograniczać się tyko do kół. 

Obramowanie:
  • linia ciągła
    .avatar-image-container {border-style: solid;}
  • linia kreskowa
    .avatar-image-container {border-style: dashed;}
  • linia kropkowana
    .avatar-image-container {border-style: dotted;}
  • linia podwójna
    .avatar-image-container {border-style: double;}
Grubość obramowania:  
  • cienkie
    .avatar-image-container {border-width: thin;}
  • średnie
    .avatar-image-container {border-width: medium;}
  • grube
    .avatar-image-container {border-width: thick;}
Cienie
  • .avatar-image-container {box-shadow:0px 0px 2px black}    
Kochani tyle na dziś, następnym razem zajmiemy się Zakładkami na blogu czyli potocznie nazywanymi Stronami.

Pozdrawiam  

You Might Also Like

0 komentarze

Kamila K.. Obsługiwane przez usługę Blogger.

Archiwum bloga

Prawa Autorskie

Wszystkie publikowane na blogu zdjęcia oraz treści są mojego autorstwa. Jeśli jest inaczej wyraźnie to zaznaczam.
Nie zezwalam na ich kopiowanie bez mojej zgody.

Jeśli chcesz skopiować coś z bloga proszę o kontakt - e-mail: wtrampkachdocelu@gmail.com lub w komentarzach pod postem.