Arkusze Css

Witam, oto podstrona dzięki której może jakoś uda wam się ogarnąć kody css. No więc zacznijmy od krótkiego wytłumaczenia:

Kody css to coś, co tworzy wygląd strony internetowej, w naszym przypadku bloga. Wszystkie kody wklejacie do szablon->dostosuj->zaawansowane->arkusze css. Dobra, przechodzimy do kodów :)



KODY PODSTAWOWE

Posty
Wyśrodkowanie tytułu posta:

h3.post-title, .comments h4 {text-align: center;}
 Wyśrodkowanie daty:
h2.date-header {text-align: center;}
Kolor tła w postach 
.post {background-color: #000000;}

Obrazek w tle posta 
.post {background-image: url(adres obrazka);}
Kolor tekstu w postach
.post {color: #000000;} 

Tekst nie przykleja się do ramek
.post {padding: 10px;}

Ramka w postach 

.post {border-style: solid;} 
(kliknij, aby dowiedzieć się więcej o ramkach


Rozmiar czcionki w postach

.post {font-size: 20px;} 


Rodzaj czcionki w postach

.post {font-family: courier;} 


Pochyła czcionka w postach

.post {font-style: oblique;}


Drukowana czcionka w postach

.post {text-transform: uppercase;}



Strony / Karty 

 Ramka w kartach

#PageList1 {border-style: solid;}


Wyśrodkowanie górnego menu:

#PageList1 ul {
text-align: center;
}
#PageList1 ul li {
float: none;
display: inline;
}



Przesunięcie górnego menu na prawą stronę:#PageList1 ul {
text-align: right;
}
#PageList1 ul li {
float: none;
display: inline;
}


Zaokrąglone rogi kart 

#PageList1 {border-radius: 30px;} 


Rozmiar czcionki w kartach  

#PageList1 {font-size: 20px;} 


Rodzaj czcionki w kartach

#PageList1 {font-family: courier;} 


Pochyła czcionka w kartach

#PageList1 {font-style: oblique;}


Drukowana czcionka w kartach

#PageList1 {text-transform: uppercase;}



Komentarze 

Obramowanie komentarza 
 .comment {border-style: solid;} 


Zaokrąglone rogi komentarza
  
.comment {border-radius: 30px;}


Wyśrodkowanie tekstu w komentarzach

.comment {text-align: center;}

Tekst nie przykleja się do ramek 

.comment {padding: 10px;} 


Rodzaj czcionki w komentarzach

.comment {font-family: courier;} 


Pochyła czcionka w komentarzach

.comment {font-style: oblique;}


Drukowana czcionka w komentarzach

.comment {text-transform: uppercase;}



KODY DLA ZAAWANSOWANYCH 

Teraz pokażę ciekawe kody dla trochę większych znawców cssa. A jednak, jeżeli masz ambicje i, mimo że jesteś początkujący/a, chcesz spróbować, nie bronię! :)

Sposób na 'znikające' karty
 Jest to naprawdę bardzo prosty kod i tylko z pozoru wydaje się skomplikowany. Taki efekt stosowałam już w kilku szablonach i jest on po prostu super :D Dobra, nie będę się rozpisywać, przejdźmy do kodu!

#PageList1 li a:hover {
opacity: 0;
transition:all 1s;
}

To tyle! Jeżeli znasz w cssie takie coś jak opacity to kod będzie dla ciebie bardzo prosty. Tu nic nie trzeba zmieniać, po prostu wklejamy na bloga i powinno działać jak należy :)

Efekt kolorowego cienia 
Cóż, to jest także prosty kod a wygląda po prostu tak, że po najechaniu (a może być także cały czas) za napisem jest jeszcze kilka takich samych napisów w innych kolorach. Zobaczcie kod. 

#PageList1 a:hover {
opacity: 1;
text-shadow: 3px -5px 0px red,
4px -7px 0px blue,
5px -9px 0px yellow;
transition:all 1s;



Co można w tym kodzie zmienić? Otóż już mówię:

opacity: można zmienić ale efekt będzie brzydszy. Jest to widoczność elementu.

text-shadow: 3px -5px 0px red, 4px -7px 0px blue,
5px -9px 0px yellow:
w tym fragmencie wszystko prócz text-shadow można dowolnie zmieniać, zarówno kolory jak i wartości, kombinować aż wyjdzie ładnie :)


 No to tyle co do tego kodu, powinien działaś pięknie również po skopiowaniu na bloga.

Obrazek "płynący" przez karty
Kod daje taki efekt, jak np w tym moim szablonie: http://olgierddlacbxd.blogspot.com/ najeździe na karty z boku i zobaczcie! :) Spodobało się? No to teraz możesz mieć takie na swoim blogu!
Najpierw wklejamy ten kod:

#PageList1 ul a:link, #PageList1 ul a:visited {
display: block;
width: 106px;
text-decoration: none;
background-color: #bbad8e;
color: #000;
padding: 5px;
border: 2px outset #bbad8e;
        text-align: center;

}

Co tutaj można zmienić? Przede wszystkim, możemy zmienić wartość width, czyli liczbę 106. Możemy zmienić też #bbad8e - to. To jest kolor karty przed najechaniem. Tak samo można zmienić #000 i całe wyrażenie border: 2px outset #bbad8e; (oczywiście bez słowa border)
 Żeby ułatwić wam zmienianie kodu, pogrubiłam w nim to, co można zmienić :)

To teraz drugi kod, wklejamy go pod spodem:
#PageList1 ul a:hover {
background-image: url("link do obrazka");
background-position: 50% 50%;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}

Tuta zmieniamy tylko link do obrazka, w tym miejscu oczywiście wklejamy link do obrazka, czyli klikamy na swoim obrazku prawym przyciskiem myszy i wybieramy 'kopiuj adres url obrazka'.

Ten kod jest z pewnością trudniejszy niż pozostałe, ale myślę, że sobie poradzicie. W razie problemów piszcie ;)




Pierwsza litera inna niż pozostałe
Ten efekt możecie zaobserwować na szablonie głównym naszej szabloniarni. Przy wszystkich tytułach gadżetów pierwsza literka jest inna niż pozostałe. Jak tego dokonać? Przykładowo spróbujemy zmienić pierwszą literkę w tytule posta.
h3.post-title:first-letter {
color: red;
}

Wszystko powinno działać, tak więc teraz powinniśmy mieć pierwszą literkę w tytule posta czerwoną. Co można zmienić w tym kodzie? Oh, prawie wszystko! Jak zwykle zmieniamy pogrubione wartości. h3.post-title to oczywiście selektor. Color: red; to nic innego jak określenie co ma się stać z tą literką. Czyli przykładowo, jeśli chcemy by nasza literka była czerwona wpisujemy właśnie color: red; .
Dla leniwych dam gotowy już kod który zmienia pierwszą literkę. Oczywiście będziecie musieli zmienić kolory i selektory ale poza tym nic :)
Selektor:first-letter {
color: #000000
font-style: oblique;
letter-spacing: 1px;
font-weight: normal;
font-size: 15px;
font-family: 'Tahoma';
}
Taki kod wklejacie na bloga i cieszycie się pięknym wyglądem!

31 komentarzy:

  1. A jak wybrać kolor tła posta???

    OdpowiedzUsuń
    Odpowiedzi
    1. Kolor tła posta? .post {background: #000000;} Jeżeli chodzi ci o te zera, to już ci pomagam :) --> http://windows.home.pl/kolory.htm
      Tu masz to mniej więcej napisane. Musisz skopiować ten kod przy kolorze i wkleić w miejsce zer ;)

      Usuń
  2. Hej! wiesz może, jak podłączyć nagłówek do tej samej kolumny co są posty i tak, żeby było to jedną całością? Chodzi mi o coś takiego jak jest na tym bogu http://willbefineee.blogspot.com/ Ja na moim próbnym blogu mam tak zrobione http://blognadesigny.blogspot.com/ Nie ukrywam tego, że sobie z tym nie radzę :// czy mogłabyś mi jakoś pomóc dotrzeć do końca mając jako efekt taki szablon jak ma ta dziewczyna z podanego bloga? Byłabym mega, meeega szczęśliwa,
    Proszę o bardzo szybki odzew bo zależy mi, aby skończyć już ten mój nieszczęsny szablon. Pozdrawiam ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Przepraszam za mój "bardzo szybki odzew", ale jakoś tak mi wypadło że nie odwiedzałam dawno tej zakładki. Twój blog próbny jest otwarty tylko dla zaproszonych, więc nie mogę zobaczyć, ale chyba wiem o co ci chodzi. Na tym blogu który podałaś po prostu autor nie zrobił ramek i nie zmieniał kolorów postów, i dzięki temu zyskał taki efekt. Czyli po prostu musisz wejść w Szablon -> Dostosuj. I tam usuwasz wszystkie tła, ramki itd :D jeśli nie zrozumiałaś, napisz na gg lub maila, a postaram ci się pomóc ;D

      Usuń
  3. Nie wiesz dlaczego nie chcą mi się zaokrąglić rogi w kartach? Karty mam ustawione po boku... Bardzo proszę o odpowiedzieć i z góry bardzo, bardzo dziękuje :*

    OdpowiedzUsuń
  4. Mam pytanie i bardzo mi na nim zależy, dlatego błagam o pomoc! Zrobiłam szablon, nagłówek i wszystko, czyli uzupełniłam arkusz css i dodałam nagłówek. Szablon mi się podoba tylko chciałam aby tekst (cały blog, tam gdzie piszemy/dodajemy notki) był wyżej, na nagłówku. Czy można tak zrobić? Jak tak, to bardzo proszę o instrukcję+ śliczne szablony i fajna instrukcja css. Kody naprawdę sie przydają ;))

    OdpowiedzUsuń
    Odpowiedzi
    1. Jesli chodzi ci o tekst ktory dodajesz w notkach, musisz zrobic tak:

      #Blog1 {
      Position: relative;
      top: -200px;
      }

      Jesli to nie zadziala, napisz do mnie na maila a sprobuje ci pomoc ;D

      Usuń
  5. Dodalam na gorze, przepraszam, ze tak pozno ;)

    OdpowiedzUsuń
  6. Cześć :3
    nie wiem, może przegapiłam, a może wcale tego nie było :) ale jaki jest kod żeby tytuł bloga był na środku?
    pozdrawiam ;*

    OdpowiedzUsuń
    Odpowiedzi
    1. h3.post-title {
      text-align: center;
      }

      Powinno działać :)

      Usuń
  7. hej chciałam się spytać czy może wiesz jaki kod zastosować żeby link nie był podkreślony? ;/
    próbowałam wielu rzeczy ale nic mi nie wychodziło xd
    z góry dziękuję i pozdrawiam <3

    OdpowiedzUsuń
    Odpowiedzi
    1. prosty kod ;) jeśli chodzi Ci o to, że jak najeżdżasz to się podkreśla:

      a:hover {
      text-decoration: none;
      }

      a jeśli nie chcesz żeby był podkreślony ogólnie, to :

      a:link {
      text-decoration: none;
      }

      Usuń
  8. Mam pytanie C: . Jak zrobić żeby pierwsza litera tytułu gadżetu była inna niż pozostałe? Bo twoja instrukcja z postem bardzo mi pomogła, tylko bym chciała, żeby taki efekt tez był w gadżecie C: .

    OdpowiedzUsuń
    Odpowiedzi
    1. To proste ;) po prostu zmieniasz selektor:
      h2:first-letter {
      color: red;
      }

      i gotowe! ;) oczywiście zamiast color: red; możesz dodać inne efekty :)

      Usuń
  9. Jak podświetlać zdjęcia??

    OdpowiedzUsuń
    Odpowiedzi
    1. Hmm, powiem Ci, że trochę mnie zagiąłeś! :D spróbuj tym kodem i napisz, czy zadziałało:
      img {
      box-shadow: inset 10px 10px 10px white;
      }
      ~Esme

      Usuń
    2. Spróbuj:
      img {
      box-shadow: inset 50px 50px 50px #ffffff;
      }
      jak nie zadziała to napisz :)

      Usuń
  10. Hej mam do Ciebie pytanie i fajnie byłoby jakbyś weszła na mój profil na Google+ i jakąś minkę w chacie mi napisała, a ja bym ci wyjaśniła o co chodzi.

    OdpowiedzUsuń
  11. a drukowana czcionka w dacie ?

    OdpowiedzUsuń
    Odpowiedzi
    1. h2.date-header {
      text-style: upprecase;
      }

      Chyba się nie pomyliłam, wybacz, że dopiero teraz :)

      Usuń
  12. Hej :) Chciałabym się zapytać jak wygląda zamówienie na hm.. jakby to ująć.. tak jak etykiety są, żeby wchodzic bezposrednio na linki, jakies takie ciekawsze, tak jak wy macie w kolku. Po ile cos takiego, i jak wszystko wyglada ? Pozdrawiam :)

    OdpowiedzUsuń
  13. Ja mam takie nieco inne pytanie.
    Na moim blogu ( yuno-w-korei.blogspot.com szablon "okno obrazu") w nagłówku jest obraz. Czy dałoby się zrobić tak, żeby był rozciągnięty na całą szerokość strony i żeby się ni eprzewijał tylko zawsze był u góry, na wierzchu?

    OdpowiedzUsuń
  14. pomorze mi ktoś w wyglądzie bloga?Tematyka to serial Violetta.Kontakt magiadisneyavioletta@gmail.com Napisze ktoś?

    OdpowiedzUsuń
  15. Mam pytanie bo ja nie wiem jak to zrobić bo gdy wpisuje te kody kilkam zastosuj do bloga no i i tak jak patrze na bloga to i tak nic z tego nie działa prosze o pomoc.

    OdpowiedzUsuń
  16. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  17. Czy jest jakis kod albo sposob na usuniecie napisu szablon .... co jest na dole bloga ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Chodzi Ci i o napis Technologia Blogger?
      Jeżeli tak to spróbuj:
      .Attribution {display:none !important;}

      Usuń