Responsywne obrazki / zdjęcia z efektem Polaroid – CSS3

kursy tutoriale

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



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ę

Przeczytaj również

Dopasowywanie tekstu do kształtu obrazka – C... Jak sam tytuł mówi tym razem zajmę się dopasowaniem tekstu do kształtu obrazka, nie zrobię tego jednak w formie grafiki lecz na żywym tekście (czyli t...
Dopasowywanie obrazka do rozmiaru obszaru CSS3 ... Dzięki właściwości object-fit jesteśmy w stanie określić w jaki sposób interesujący nas element HTML (np. obrazek) powinien wypełnić dany obszar na st...
Nadawanie odstępu: margin i padding Dzisiaj omówię dwie bardzo użyteczne właściwości CSS czyli margin i padding. Czym jest margin i padding? Pierwsza z nich margin określa odstęp n...
Zmiana wyglądu pierwszej litery Z pewnością ładnie jest rozpocząć tekst jak w starych księgach z wyróżnioną pierwszą literą. Z pozoru może się to wydawać trudne jednak w cale takie n...