Schludne obramowanie grafiki na stronie www


16 maja 2012 / Michał Kortas


W dzisiejszym, krótkim poradniku pokażę Wam jak w bardzo prosty sposób, tylko za pomogą arkusza CSS, stworzyć schludny, ciekawy efekt obramowania wokół grafiki umieszczonej na naszych stronach internetowych. Dobrze przygotowana grafika skutecznie przyciąga wzrok. W tym celu wykorzystamy niektóre możliwości kaskadowych arkuszy stylów, takie jak cienie (box-shadow), a także zaokrąglone brzegi obrazków (border-radius). O każdej z tych możliwości pisałem już wcześniej na łamach wortalu. Teraz wykorzystamy tę wiedzę w praktyce. Zapraszam do lektury.

Krok 0. Obrazek bez efektów

Surowo wstawiona grafika jest niezbyt estetyczna, szczególnie, jeśli wokół niej opływa tekst.

Krok 1. Marginesy

Główną zmorą jest bliskość tekstu w stosunku do obrazka. Brakuje odstępu. Dodajmy kod do naszego arkusza CSS.

Krok 2. Obramowanie proste

Dodamy teraz linie okalającą nasze obrazki. Rozszerzamy wcześniej napisany kod CSS. Dla uwidocznienia zmian, w podglądzie użyłem czerwonego koloru ramki.

Krok 3. Odstęp obramowania od brzegów grafiki

Na tym etapie dodamy minimalistyczną ramkę, a właściwie określimy tylko zwykły odstęp obrazka od obramowania.

Krok 4. Zaokrąglenie rogów

Przeczytaj artykuł > Zaokrąglanie rogów w CSS3

Kiedyś musielibyśmy używać specjalnie przygotowanej grafiki, teraz wykonamy to szybką instrukcją w CSS3.

Krok 5. Cień obrazka

Przeczytaj artykuł > Tworzenie cieni za pomocą CSS3

Ostatni punkt poradnika to dodanie cienia.

To już wszystko. Obrazek prezentuje się lepiej, prawda? Macie własne sposoby na tworzenie obramowania? Piszcie, komentujcie.
Na wszelkie pytanie w sprawie problemów odpowiadam tylko i wyłącznie za pomocą komentarzy pod wpisem.



5 odpowiedzi na “Schludne obramowanie grafiki na stronie www”

  1. Mamy właśnie taki jak ten tutaj przedstawiony, padding i border odpowiednio dobrany, przy lekkim cieniu daje wspaniały efekt ;)

  2. simon009 pisze:

    Czy da się zrobić tak, aby tyczyło to się jednego obrazu?

  3. Marek pisze:

    Piękny efekt, bardzo Ci za to dziękuje!

  4. Sebastian pisze:

    Ramka bardzo fajna. Tylko, że jest na wszystkich zdjęć jakie występują na stronie. Jak zrobić by ramka była tylko dodawana w artykułach?

Skomentuj Michał Kortas Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.