14 października 2014

Designowe Diy #1


Kod CSS:
 h3.post-title {border-bottom: 1px #000000 solid ;}

1px - grubość kreski (im większa liczba, tym grubsza kreska)
 #000000 - kolor kreski (w tym przypadku jest to czarny) kolor można zmieniać za pomocą kodu z palety RBG - tutaj
 solid - rodzaj kreski ( solid- linia ciągła, dotted- kropkowana, dashed- kreskowana)

Dla przypomnienia kody te wstawiamy następująco:  układ>projektant szablonów>kody css>wklejamy


Efekt:


Kod CSS:

 .post img { opacity: 1;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
}
.post img:hover {
opacity: 0.70;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
}

To nic trudnego, wystarczy tylko wkleić kod nic nie zmieniając, a po najechaniu kursorem na zdjęcie będzie się ono podświetlać na biało!

Efekt:

Przed:

Po:


 pozycja: center - wyśrodkowanie;  justify - wyjustowanie; right - do prawej; left - do lewej;
strona: left - lewa; center - środkowa; right - prawa;

W zaznaczonych na czerwono miejscach wpisujemy podane wyżej wyrazy w zależności od pozycji i strony jaką chcemy:
.header { height: 450px;} - ustalenie wysokości nagłówka
h3.post-title, .comments h4 {text-align: pozycja;} - pozycja nagłówka postu
h2.date-header {text-align: pozycja;} - pozycja daty
.column-strona-inner {text-align: pozycja; } - pozycja gadżetów w danej kolumnie
a:hover { letter-spacing: 3px; } - rozsunięcie się liter linku po najechaniu kursorem
a:hover { word-spacing: 5px; } - rozsunięcie się wyrazów linku po najechaniu kursorem

---------------------------------------------------------------------------------------------

Mam nadzieje, że kody wam się przydadzą.
Chcecie więcej tego typu postów?

16 komentarzy:

  1. Na pewno bardzo przydatne, ale ja jak na razie chyba zrobiłam już to co trzeba z moim blogiem :)

    aaaaga.blogspot.com

    OdpowiedzUsuń
  2. pewnie pomogłaś wielu osobom, ale ja na razie nie mam czasu na doskonalenie bloga :/

    http://feel-that-moments.blogspot.com/

    OdpowiedzUsuń
  3. Wykorzystam kod z podświetlenie zdjęcia na biało. Świetny post! :)

    matrelsy.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję :)
      Cieszę się, że skorzystałaś z kodu :)

      Usuń
  4. Świetne, chciałabym więcej takich postów zobaczyć na twoim blogu. ;) Są bardzo przydatne!
    Może wspólna obserwacja? O ile mój blog Ci się spodoba.

    Pozdrawiam, Anu.
    http://murasakiiroanu.blogspot.com/

    OdpowiedzUsuń
  5. Bardzo przydatny post, na pewno z którejś rzeczy skorzystam ;)

    http://voanni.blogspot.com

    OdpowiedzUsuń
  6. Trochę mało tych kodów i brakuje objaśnień dotyczących ich składu. Nie sztuką jest pokazać coś gotowego. Sztuką jest wytłumaczyć tak, by ktoś zrozumiał i napisał sam - taka mała rada na przyszłość. :)
    Pozdrawiam :D

    OdpowiedzUsuń
  7. Nice pic

    http://www.angelnx.com/

    http://www.angelnx.com/Sarees

    OdpowiedzUsuń