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ż

Właściwość CSS empty-cells Właściwość CSS empty-cells w dużym skrócie służy do ukrywanie niewypełnionych pól. Innymi słowy empty-cells informuje przeglądarkę o tym, że jeśli dan...
Skrócenie zbyt długiego tekstu z użyciem CSS text-... Tym razem chcę pokazać jak skrócić tekst nie mieszczący się bloku np. tytuł wpisu na blogu do jednej linii co może być przydatne na responsywnej stron...
Równej wysokości kolumny Dość częstym problemem przy budowaniu strony internetowej jest utworzenie kolumn o równej wysokości. Wyrównanie dwóch kolumn z pewnością nikomu nie sp...
Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...