Jak automatycznie zaokrąglić rogi zdjęć w notce?

Dzisiaj startujemy z pierwszym, banalnym tutorialem, który wielu z was na pewno zaoszczędzi czas. Na wielu blogach widuję zdjęcia z zaokrąglonymi rogami - czasem autorzy chcą dopasować je do wyglądu szablonu, czasem to zwykłe widzimisię. Niestety, wiele z nich jest przerabianych w ten sposób z użyciem programów graficznych. Mam nadzieję, ze wad tej metody nie muszę nikomu tłumaczyć. Wiadomo, jest to praco- i czasochłonne, a także może przysporzyć nam problemów, gdy postanowimy zmienić szablon, lub gdy zwyczajnie... takie zdjęcia przestaną nam się podobać.
 
Najprostszym rozwiązaniem jest umieszczenie poniższego kodu CSS we własnym szablonie. Informację gdzie i jak to to zrobić, znajdziecie TUTAJ. Fragment ten zmieni rogi wszystkich zdjęć w notkach na zaokrąglone.

.post-body img 

 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px; 
}

Wartość "20px" można dowolnie zmieniać. Oznacza ona rozmiar zaokrąglenia w pikselach. Jeżeli nie orientujecie się, jak to może wyglądać, to zerknijcie na cztery przykłady poniżej. Możecie na nich zobaczyć, jak wygląda zaokrąglenie rogów o wartości 20px, 40px, 60px i 100px. Jeżeli zdecydujecie się na inną wartość pamiętajcie, żeby zmienić ją we wszystkich trzech liniach kodu!


21 lipca 2014

10 komentarzy :

  1. no tak, ja to bym siadła do PS'a i robiła, i robiła.. gdyż nie znam się na kodach..mały, superancki tutek :)

    OdpowiedzUsuń
  2. Bardzo przydatny post! Czekam na następne:)

    OdpowiedzUsuń
  3. Nie będę tego komentować... Ja od pół roku robię to w programie... Tracąc czas...

    ...

    Już nie będę tego robić! :)

    OdpowiedzUsuń
  4. Dzięki! Właśnie zrobiłam to u siebie na blogu :)

    OdpowiedzUsuń
  5. świetne,na pewno nie raz się przyda :)

    OdpowiedzUsuń
  6. Super, właśnie znalazłam Twojego bloga i chętnie wykorzystam porady. Dziękuję :D

    studiaedynburgh.blogspot.com

    OdpowiedzUsuń
  7. Super blog dziękuję za porady i za to...bo masakra była..

    OdpowiedzUsuń

Dzięki za komentarze! Wszystkie czytam i staram się na nie odpowiadać.
Zanim zadasz pytanie sprawdź, czy odpowiedzi na nie nie ma w zakładce FAQ znajdującej się na górze strony.