Proste zdjęcia z efektem Polaroid RWD [CSS3]

Czas czytania: 3 minut

W jednym z wcześniejszych wpisów pisałam jak z pomocą PHP można uzyskać efekt zdjęć Polaroid. 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 w CSS3

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

Jak widać jest to zwykłe zdjęcie i nie posiada jeszcze charakterystycznej dla Polaroid białej ramki dookoła. Jej efekt uzyskamy właśnie dzięki odpowiedniej oscylacji w CSS.

Na początek jednak pokaże wam jak wygląda kod mojej grafiki:

<img src="https://www.aurainweb.pl/wp-content/uploads/2017/08/demo-k.jpg"/>

Jak widać to zwykły obrazek umieszczony w katalogu z Mediami w moim CMS. Wasze obrazki oczywiście będą miały inny adres, ale do testu możecie wykorzystać również tą grafiką.

Dodajemy białą ramkę i tekst – z pomocą tła

Skoro wiemy już jak dodać zwykły obrazek to teraz będzie pora by go odpowiednio zmodyfikować. Na początek umieszczę nasz obrazek w dodatkowym elemencie i dodam pod nim tekst.

<div class="efektpolaroid">
 <img src="https://www.aurainweb.pl/wp-content/uploads/2017/08/demo-k.jpg">
   <div class="kontener">
    <p>Przykładowy obrazek</p>
   </div>
</div>

W stylach CSS zapisujemy z kolei kod:

div.efektpolaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 2px 23px 2px rgba(0,0,0,.2);
  margin-bottom: 25px;
  padding: 10px;
}

div.kontener {
  text-align: center;
  padding: 10px 20px;
}
.efektpolaroid img{
    width: 100%; // tylko dla tego przykładu
    max-width: 100%;
    height:auto;
    display: block;
}

Przykładowy obrazek

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.

Dodawanie białego tła z pomocą obramowania

Inną metodą uzyskania efektu polaroid jest po prostu dodanie odpowiednio zmodyfikowanego obramowania do obrazka.

Jak widzicie dodałam do obrazka jedynie klasę mixborder

<img class="mixborder" src="https://www.aurainweb.pl/wp-content/uploads/2017/08/demo-k.jpg" />
.mixborder{
    box-shadow: 4px 7px 13px #ccc;
    border-color: #fff;
    border-style: solid;
    border-width: 10px 10px 73px 10px;
}
.mixborder img{
  max-width: 100%;
  display:block;
}

W tym wypadku dodanie tekstu bezpośrednio pod obrazkiem jest bez przebudowy nie możliwe.

Ź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ę