HTML5 & CSS3

Schludne obramowanie grafiki na stronie www

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.

img {
margin-right: 15px; 
margin-bottom: 8px; 
}

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.

img {
margin-right: 15px; 
margin-bottom: 8px; 
border: 1px solid silver; 
}

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.

img {
margin-right: 15px; 
margin-bottom: 8px; 
border: 1px solid silver; 
background: white; 
padding: 4px;
}

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.

img {
margin-right: 15px; 
margin-bottom: 8px; 
border: 1px solid silver; 
background: white; padding: 4px;
border-radius: 3px;
}

Krok 5. Cień obrazka

Przeczytaj artykuł > Tworzenie cieni za pomocą CSS3

Ostatni punkt poradnika to dodanie cienia.

img {
margin-right: 15px; 
margin-bottom: 8px; 
border: 1px solid silver; 
background: white; padding: 4px;
border-radius: 3px;
box-shadow: 1px 1px 3px silver; 
}

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.

komentarzy 5

  • Awatar
    Robert Dłubak

    17 maja 2012 19:34

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

    Odpowiedz
  • Awatar
    simon009

    30 lipca 2012 23:15

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

    Odpowiedz
    • Awatar
      Michał Kortas

      31 lipca 2012 08:14

      Oczywiście. Wystarczy do obrazka przypisać jakąś klasę, a potem zastąpić nią znacznik img w arkuszu CSS.

      Odpowiedz
  • Awatar
    Marek

    28 lutego 2014 00:03

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

    Odpowiedz
  • Awatar
    Sebastian

    15 października 2014 13:13

    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?

    Odpowiedz

Zostaw odpowiedź