niedziela, 4 listopada 2012

20. Style CSS - posty na blogu

Dziś nie ma szablonów, ale za to jest niespodzianka. Co powiecie na mały poradnik stylów CSS? Wiele osób pyta mnie jak zrobić szablon w moim obecnym stylu więc postanowiłam uchylić rąbek tajemnicy :p
Dziś zacznę od posta. 

Tła:
a) kolor:
.post {background-color: #5a5555;}

b) obrazek w tle:

.post {background-image: url(adres do obrazka);}

Przezroczystość:
.post {opacity: 0.7;}


Cienie:
a) tekstu:
.post {text-shadow: 2px 2px 5px #5a5555 }

b) 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, aby tekst nie przyklejał się do ramek):
.post {padding: 20px;}


Obramowanie:
 
a) linia ciągła:
.post {border-style: solid;}

b) linia kreskowa:
.post {border-style: dashed;}

c) linia kropkowana:
.post {border-style: dotted;}

d) linia podwójna:
.post {border-style: double;}


Grubość obramowania:
 
a) cienkie:
.post {border-width: thin;}

b) średnie:
.post {border-width: medium;}

c) grube:
.post {border-width: thick;}


UWAGA! Pogrubione parametry i kolory możecie zmieniać samodzielnie.

I co Wy na to? Sądzicie, że takie instrukcje są przydatne? Piszcie, co byście chcieli, abym opisała w następnym poście ^^

A jeśli sądzicie, że mój blog jest tego watr to zapraszam do głosowania na mnie w sondzie katalogu graficznego.
--------------------------------------------------------

48 komentarzy:

  1. Świetny pomysł!
    Od tak dawna nie mogę rozgryźć przezroczystego tła postów,a tu proszę.
    Jeżeli chodzi o instrukcje - one zawsze są przydatne, ale a tę chwilę nie mam żadnych pomysłów, o czym mogłabyś jeszcze napisać.
    Pozdrawiam :)

    OdpowiedzUsuń
  2. twój blog zdecydowanie jest jednym z tych, które w blog sferze są potrzebne. dzięki tobie nie musiałam męczyć się z kodami w html'u, za co jestem ci bardzo wdzięczna. :D
    pozdrawiam :*

    OdpowiedzUsuń
    Odpowiedzi
    1. bardzo dziękuję :) osobiście uważam, że html jest bardzo skomplikowany i poco sobie krew zatruwać skoro CSS aż sam do nas mruga?

      Usuń
  3. O, właśnie ostatnio sama się nakręciłam na CSS i wyszukałam te kody, a tu proszę :D Z pewnością przydadzą się wielu osobom, jestem za ^^
    Aha, aha. Widziałam na Ginevrze, że tło postu jest przezroczyste, ale czcionka normalna. Jak to zrobiłaś? Moja pierwsza myśl to dodany jakiś obrazek jako to tło, ale nie mam pewności ^^''
    Pozdrawiam cieplutko :)

    OdpowiedzUsuń
    Odpowiedzi
    1. a masz photoshopa? bo tam można dodać obrazek który będzie przezroczysty i właśnie tak to zrobiłam, ale... tak sobie pomyślałam, ze można to załatwić inaczej. zaraz sprawdzę.

      Usuń
    2. a nie, jednak nie :D chyba moja wyobraźnia mnie czasem przerasta ^^

      Usuń
    3. Meh, szkoda ;_: Nie mam photoshopa, od półtora roku jestem wierna Gimpowi. Hm, nie wiem, popróbuję zrobić tak samo w Gimpie, może się da xD

      Usuń
    4. Wszędzie się da ^ ^ nawet w photofiltre.

      Usuń
  4. O! Świetna instrukcja. Jeszcze kilka takich a sama zacznę robić szablony w tym stylu, jak ten. ^_^ Propozycja co do następnego? Może coś o komentarzach? Świetnie wyglądają Te. No chyba, że te kody do postów też działają, na tej samej zasadzie na komentarze... CSS to do tej pory była dla mnie zagadka. Wolałam grzebać w HTML'u. :) Blog przydatny jak najbardziej. Teraz tylko czekać aż będziesz przyjmować zgłoszenia na szablony... ;)
    Pozdrawiam!
    Mustela

    OdpowiedzUsuń
    Odpowiedzi
    1. Wracając jeszcze do propozycji, przydatna instrukcja byłaby też na Strony...

      Usuń
  5. Czołem! Ostatnio męczę się nad stylem CSS i mam problem z ramkami bocznymi. Konkretnie chodzi mi o te zaokrąglenie rogów, wpisuję komendę:
    .column-right-inner {border-radius: 20px;}
    i nic.
    Z lewą ramką mam jeszcze większy problem, bo nic nie styka i pozostaje tylko kreskowana linia -.-. Pomożesz mi Elfabo?

    OdpowiedzUsuń
    Odpowiedzi
    1. bardzo bym chciała, ale sama mam z tym problem. nie wiem czemu, ale nie chcą mi działać żadne komendy dotyczące kolumn. dlatego w moich szablonach nie mają one żadnych efektów. kombinuję i kombinuję, a jak wykombinuję to dam znać.

      Usuń
    2. ok, jak może ja coś znajdę, to też dam info ;).

      Usuń
    3. Mi jedyne co w kolumnach wychodzi, to tytuły ._. bez problemu wchodzą obrazki etc., oraz kolumny całe .main-inner .column-right-inner minusem tego jest, że nie jest to rozdzielone na gadżety, przykład: szarmette.blogspot.com

      Usuń
    4. Dlatego, że w tym kodzie jest bardzo prosty błąd - zamiast "inner" należy wpisać "outer" i wszystko działa. Tło, cienie, obramowanie itd. C:
      To samo przy marginesach. Wszystkie kody wyglądają tak samo, jednakże należy wpisać column-left-outer na początku, tak jak przy kodach postów i komentarzy.

      Pozdrawiam!
      [skrzydlami-alatum]

      Usuń
    5. A nie, przepraszam. Tu jest rozdzielność. Już tłumaczę, jak to jest:
      dotyczące tła - wpisujemy "outer"
      dotyczące cieni - jak wyżej
      zaokrąglone rogi - jak wyżej
      obramowania (styl i grubość) - inner
      No, teraz wszystko jasne :D Wygląda to tak:
      http://probny-alatum.blogspot.com

      No, mam nadzieję, że tym razem udało mi się wszystko wyjaśnić, nie umiem tłumaczyć <D

      Usuń
  6. Nie znalazłam adnotacji, iż pod tym postem nie przyjmujesz zamówień, także zdaje się na ryzyko i piszę.
    Hasło: reniferek
    Mam chyba trochę nietypowe zamówienie na szablon. Prowadzę blog o wymianie do USA. Chciałabym, aby tętnił on życiem, ale oprócz mojej treści, miło by było mieć szablon który przyciągał by ludzi jak również mi odpowiadał.
    Chciałabym aby szablon oczywiście nawiązywał do Stanów Zjednoczonych.. coś w kolorach flagi, czy też sama flaga. Jakieś ciekawe znaki, albo coś takiego. Zdaje się całkowicie na Ciebie pod tym względem.
    Czemu wybrałam akurat Ciebie? Uważam, że jesteś prze genialna, robisz na prawdę świetne szablony, a ten znajdujący się na tej stronie, jest na prawdę nieziemski.
    Blog ogółem ma wiele "dodatków", m.in. listy blogów, które chciałabym aby jakoś pasowały do tego szablonu. Tzn. mogą być tak jak teraz są, a równie dobrze mogą być w formie zakładki znajdującej się na górze.
    Była bym wdzięczna, jeśli umieściłabyś dwa teksty: "Exchange to the USA" <-- w jakimś większym wydaniu i motto: "...Sami kreujemy własny los i to, czy będziemy żyć ciekawie, zależy przede wszystkim od nas...".
    Na prawdę złoże wielkie podziękowania, jeśli wykonasz dla mnie ten szablon.
    Link do mojego bloga: http://adventure-life-exchange-usa.blogspot.com/

    OdpowiedzUsuń
  7. Witam :)
    Hasło : reniferek
    Chciałabym zamówić szablon u Ciebie, bo Twoje szablony naprawdę bardzo mi się podobają nie ukrywając.
    Adresy do zdjęć :
    http://api.ning.com/files/7cwXj7bMKvw5UY30WslBPG45PqwQRVhO7lWMNXhU77p42xiPqviaim1ySe8GxooFES-cgeT7mVRVOzqdDDBKqLVfZpWPPt5t/1.jpg

    http://feltbeats.com/wp-content/uploads/2011/08/tom-felton-da-man-august-september-201120-03.jpg

    Kolory ciepłe najlepiej malina :) Będzie to opowiadanie o miłości więc trochę kwiatów i czegoś równie związanego z miłością. Co do jakiegoś napisu to chciałabym tylko "Last Passion". Również prosiłabym aby szablon był krótki i po prawej stronie miał grafikę a po lewej ramkę na opowiadanie. Nie umiem dokładnie opisywać, ale mam nadzieję, że po tym się dopatrzysz wszystkiego co bym chciała :)
    Z góry bardzo dziękuję! Na blogu na razie nie ma żadnej notki, ale opowiadanie się pisze.
    Adres : www.last-passion.blogspot.com
    Dziękuję jeszcze raz i pozdrawiam!

    OdpowiedzUsuń
    Odpowiedzi
    1. Zadałam pytanie w zakładce Pytania, ale ponowie je tutaj :) Chodzi o obrazki do podstrony "BOHATERÓW" czy byłabyś mi w stanie je zrobić? Bardzo bym prosiła!
      Ładnie wtopione zdjęcia z imieniem i nazwiskiem bohatera:) No nic, czekam na odpowiedź.
      Pozdrawiam serdecznie!

      Usuń
  8. Już jest Prolog na stronie :)

    OdpowiedzUsuń
  9. Ha! Ten mały poradnik najprawdopodobniej rozwiązuje moje problemy, które spędzały mi sen z powiek przez ostatnie kilka dni :-D Masz talent do grafiki, co widać na pierwszy rzut oka, a poza tym tłumaczysz wszystkie photoshopowe (i nie tylko) zawiłości w prosty sposób. Trzymaj się :-)

    OdpowiedzUsuń
  10. Więc ja również zaryzykuję i spróbuję złożyć zamówienie. Nie masz nic przeciwko? ;)

    Reniferek

    Prowadzę blog o Lily Evans, więc chciałabym, żeby na szablonie była umieszczona jakaś ruda, subtelna dziewczyna. Oprócz niej może tam być Hohwart lub James Potter, sama nie wiem. Tło wyobrażałam sobie jako ponure, ciemne odcienie beżu lub brązu. Napisem może być np. "Ona to ogień w białej lilii" (tytuł bloga). I podkreślam, to wszystko są sugestie, których wcale nie musisz słuchać. Zdaję się na twoją inwencję twórczą (a po obejrzeniu większości z twoich szablonów, jestem pewna, że mogę jej bezwarunkowo ufać).
    Blog jest pod adresem:
    http://niezwykla-historia-lily-evans.blogspot.com/
    Zaś ten stary z onetu na:
    http://niezwykla-historia-lily-evans.blog.onet.pl/

    Mam tylko prośbę: jeśli uznasz, że nie masz czasu albo chęci wykonywać tego zamówienia - daj jakoś znać.
    Z góry dzięki :)

    OdpowiedzUsuń
  11. Cześć! No więc i ja zaryzykuję i spróbuję zamówić szablon :)

    H: RENIFEREK

    Jest to trochę inny blog niż te wymienione wyżej, więc nie wiem czy będziesz chciała podjąć się tego zadania. Mianowicie piszę o żużlu.

    Fajnie by było gdybyś w tle umieściła jakiegoś żużlowca na motorze. Oprócz tego może się znaleźć tytuł boga (Bikeowy' Blog) i może (Jak dzisiaj pojedziesz? - Standardowo. Najpierw prosto, a potem trochę w lewo)...? Zdaję się na Ciebie. Kolory nie grają większej roli, chodzi tylko o to, żeby było przejrzyście i czytelnie.
    Z góry dziękuję, a tu podaję adres bloga:
    www.lifeaboutspeedway.blogspot.com

    OdpowiedzUsuń
  12. "bardzo bym chciała, ale sama mam z tym problem. nie wiem czemu, ale nie chcą mi działać żadne komendy dotyczące kolumn. dlatego w moich szablonach nie mają one żadnych efektów. kombinuję i kombinuję, a jak wykombinuję to dam znać." <- ostatnio znalazłam na to rozwiązanie i z chęcią się nim podzielę. Otóż zamiast .column-right/left-inner wpisujemy to: .main-inner .column-left-inner
    Sprawdzone ;P

    OdpowiedzUsuń
    Odpowiedzi
    1. Wielbię Cię za to droga Shy! Ta komenda działa na moim blogu testowym :D. Dziękuję :*.

      Usuń
    2. Ten fragment ".main-inner" znalazłam w kodzie HTML i nie wierzyłam, że podziała, ale dokleiłam do reszty i jednak jest dobrze :) I proszę bardzo :)

      Usuń
    3. Nie zauważyłam Cię >.> To samo napisałam wyżej przed chwilą XD

      Usuń
  13. Odpowiedzi
    1. ja też. a najlepsze jest to, że to dopiero początek :D

      Usuń
  14. Wiesz może jak zrobić tak żeby kolumna była na wysokości nagłówka? Tak jak tutaj : http://angelikasplace.blogspot.com
    Jest do tego jakiś kod CSS?

    OdpowiedzUsuń
    Odpowiedzi
    1. Np.
      .column-left-inner {
      position: relative; top: -100px;
      }

      Mam nadzieję, że pomogłam ^ ^

      Usuń
    2. Tak pomogłaś i to bardzo dziękuję! ; *

      Usuń
    3. A jak zrobić by nagłówek był na wysokości posta ? :)

      Usuń
  15. Jaki jest kod do tych komentarzy? Czyli okrągłego avatara?

    OdpowiedzUsuń
    Odpowiedzi
    1. o komentarzach będzie kolejny post prawdopodobnie w sobotę.

      Usuń
    2. Jeśli koniecznie chcesz mieć, wystarczy poszperać w necie ^^

      Usuń
  16. mam pytanie: zrobiłam szablon w identycznym rozmiarze jak Twój, ale kiedy chcę go załadować, jest zbyt duży. Wiesz może, jak mogę temu zaradzić?

    OdpowiedzUsuń
  17. Instrukcje zacne, tym bardziej przyda mi się ten do cieni. ;)

    OdpowiedzUsuń
  18. Kochana, wspaniała instrukcja, pozwoliłam sobie „podkraść” kod na nad podkreślenie linków, znalazłam to w podstronie „instrukcje”. Naprawdę bez Ciebie bym nie potrafiła tak dużo wiedzieć o HTML, a powoli się uczę ^^. Dziękuję jeszcze raz i z racji tego, że Twoje pomoce pozwoliły mi przyozdobić moje blogi, dodaję twój button na bloga:)Pozdrawiam i dziękuję jeszcze raz.

    OdpowiedzUsuń
  19. Hejo !
    Kocham twojego bloga ! <3
    Czy mogłabym zamówić nagłówek i szablon na bloga ?
    oto adres bloga: http://lostinseuol.blogspot.com/
    blog z ciekawostkami o Korei Południowej :)
    Zdjęcia, które mają pojawić się na szablonie: http://data.whicdn.com/images/8415476/tumblr_lizg0q5l7c1qi5z5fo1_500_large.png
    http://data.whicdn.com/images/16319194/tumblr_ltab6t6rte1r0li8mo1_1280_large.jpg
    http://data.whicdn.com/images/40287701/tumblr_mc06p9H2PB1rh01y3o1_500_large.jpg

    I napis na nagłówku: The body in Poland, the soul in South Korea.

    Była bym bardzo wdzięczna ^^
    Pozdrawiam i liczę na odpowiedź :D

    OdpowiedzUsuń
  20. Witaj! Mam takie małe pytanko... Dopiero zaczynam się uczyć obsługi blogspota i mam problem z kodami... Wrzuciłam coś takiego .post {background-image: url(http://www.sendspace.pl/file/f8d67934873209f0cd8c4fb);} i ni hu hu nie działa. Jakaś porada dla kompletnie zielonej blogowiczki?

    OdpowiedzUsuń
    Odpowiedzi
    1. Ponieważ to nie jest odnośnik do zdjęcia tylko strony, na której się znajduje? (Nie wiem, jak to napisać). http://www.sendspace.pl/file/pic/f8d67934873209f0cd8c4fb/view :)

      Usuń
    2. Albo nawet http://sv070.sendspace.pl/cache/img/2012/11/07/96/f8d67934873209f0cd8c4fb.1100x1100.jpg

      Usuń
  21. Jeju bardzo ci dziękuję od dawna szukałam czegoś takiego! <3

    OdpowiedzUsuń
  22. Hej,mam pytanie... Jesteś bardzo ogarnięta w temacie blogów i grafiki więc powinnaś wiedzieć.. Jak się robi zakładki nad postem? Piszę opowiadanie więc w jednej zakładce chciałabym mieć str. główną,a w drugiej np. bohaterów,widziałam to już u wielu blogerów,ale nie wiem jak się to robi...

    OdpowiedzUsuń
  23. pobrałam te kody CSS C:
    .post {border-style: dashed;}
    .post {text-shadow: 2px 2px 5px #5a5555 }
    .post {background-color: #FFE4C4;}
    .post {padding: 20px;}
    http://little-puppet-world.blogspot.com/

    OdpowiedzUsuń

Uwaga: tylko uczestnik tego bloga może przesyłać komentarze.