Responsywne obrazki / zdjęcia z efektem Polaroid – CSS3

kursy tutoriale

Kategoria wpisu Kurs CSS, Kursy Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 5,00 z 5)
Loading...

Reading Time: 2 minutes

W jednym z wcześniejszych wpisów pisałam jak z użyciem PHP uzyskać efekt Polaroid dla zdjęć i ilustracji. Tym razem pokażę jak uzyskać ten sam efekt ale mniejszym nakładem pracy (tak mi się przynajmniej wydaje) z użyciem CSS3.

Tworzenie zdjęć Polaroid z CSS3

Na początek będziemy potrzebowali zdjęcia np.:

Jak widać jest to zwykłe zdjęcie i nie posiada jeszcze charakterystycznej białej ramki do okoła.

W tym celu jej uzyskania dodajemy do ilustracji specjalnie przygotowany kod. Mój obrazek obecnie wygląda tak:

Pora na zmiany przekształcamy teraz kod następująco.

Przykładowy obrazek

Kodowo wygląda to następująco w HTML

W stylach CSS zapisujemy z kolei kod:
 

 
W przykładzie pokazałam tylko jedno zdjęcie można jednak na podstawie tego kodu zbudować całą galerię. Przydatny do tego może się okazać np. bootstrap dzięki czemu będzie można wykorzystać responsywność skryptu.
 

Źródło: http://www.w3schools.com/css/css3_images.asp

tagi:
efekt polaroid
efekt zdjęcia
obrazek w stylu fotografii
ilustracja z białym tłem
responsywne, RWD
rozciągające się zdjęcie
dodatek na witrynę

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *