Responsywne obrazki / zdjęcia z efektem Polaroid – CSS3

kursy tutoriale

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



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ę

Przeczytaj również

Budujemy prostą stronę internetową cz. 5 To już przed ostatnia część mojego kursu. Omówię w niej ostatnie dwie części budowanej strony internetowej. W 6 ostatniej części pokażę animacje ja...
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...
Rosnący pasek postępu podczas przewijania strony Rosnący pasek postępu podczas przewijania strony internetowej to często mało widoczna animacja. Dzięki niej możemy zobaczyć, w którym miejscu witryny ...
Nowe podejście do responsywnych obrazów HTML i CSS... Od kilku już dobrych lat strony internetowe budowane są w taki sposób by bez problemu można z nich korzystać zarówno na monitorze komputera jak i na d...

Dodaj komentarz

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