Jak zaokrąglić rogi posta i dodać cień

Ostatnio dostałam 3 maile z pytaniem jak zrobić zaokrąglone rogi posta z lekkim cieniem, więc dzisiaj pokażę Wam jak ja to robię :) Więc zaczynamy !

1. ZAOKRĄGLONE ROGI POSTA


Wchodzicie w Szablon --> Edytuj kod HTML --> Klikamy Ctrl + F, wyszukujemy .post-outer pod nim wklejamy:

-webkit-border-radius: 10px;
border-radius: 10px;
}

Oczywiście pixele zmieniamy wg własnego uznania :) Pamiętajmy o tym, żeby zamknąć kod :) Na moim blogu przy 50px wygląda to tak:



2. CIEŃ


Jeżeli chcemy dodać do rogów naszego posta cień to w sekcji .post-outer w box-shadow musimy wpisać odpowiednie cyfry. Ja wpisuje takie:

box-shadow: 0 0 10px 5px rgba(0, 0, 0, .15);

Im więcej pixeli wpiszecie tym cień będzie większy. U mnie przy takich właściwościach prezentuje się tak:


Sama przez dłuższy czas szukałam jak wykonać okrągłe rogi posta, ale w końcu znalazłam. Mam nadzieję, że wytłumaczyłam Wam to w miarę zrozumiały sposób :)
Szablon, w którym to wykonywałam nazywa się Znak wodny :)

VEA:)
Udostępnij w Google +

Veronika (veronique228)

Nazywam się Weronika i prowadze tego bloga. Znajdziecie tu dużo postów urodowych, lifestylowych jak i wykonane przeze mnie DIY. Mam nadzieję, że miło spędzicie tu czas :) Więcej o mojej osobie w zakładce "O mnie".
    Blogger Comment
    Facebook Comment

24 komentarzy :

  1. bardzo przydatne porady:) ja sama jestemw tej kwestii zielona, ale jakbym chciała coś zmienić, to już wiem gdzie szukać;)

    OdpowiedzUsuń
  2. dobrze wiedzieć, spróbuję się z tym pobawić :)

    OdpowiedzUsuń
  3. Super instrukcja ;-) Gdzie mogę się zgłosić, abyś zrobiła mi nagłówek?

    OdpowiedzUsuń
  4. Lubię takie blogowe porady, bo zawsze się można dowiedzieć czegoś ciekawego:)

    Pozdrowienia!:))

    OdpowiedzUsuń
  5. To ja jeszcze dodam od siebie, że nie u każdego ten kod działa po wpisaniu go za .post-outer. Można wpisać też po .post albo po .main-inner
    U mnie właśnie był taki przypadek i musiałam szukać innych rozwiązań :) u siebie wpisałam na cienie taki kod: box-shadow: 0 0px 10px 0px #c0c0c0, gdzie kod c0c0c0 oznacza kolor srebrny. Jakby ktoś był ciekawy efektu zapraszam na mojego bloga :)

    OdpowiedzUsuń
  6. nominowałam Cię na moim blogu, jeśli masz ochotę ;)

    OdpowiedzUsuń
  7. Hej. :) Pozwoliłam sobie wziąć od Ciebie wektor i wykorzystać go u mnie w logo na blogu - mam nadzieję, że nie będziesz miała nic przeciwko :)

    OdpowiedzUsuń
  8. Swietna i pomocna notka, musze sprobowac :)

    OdpowiedzUsuń
  9. Najpierw muszę dojść do tego jak zrobić ramkę wokół posta,potem będę zaogkąglać :)

    OdpowiedzUsuń
  10. u mnie się niestety nie da :) Jak próbuję zaokrąglać rogi to mi znika w ogóle ramka :/

    OdpowiedzUsuń