Obramowanie zdjęcia w kształcie znaczka przy pomocy kodu CSS

przez - maja 07, 2015

Demo


Dziś zaprezentuję sposób, w jaki można obramować dowolne zdjęcie w kształcie znaczka bezpośrednio na blogu, przy pomocy kodu CSS. Żadnych programów graficznych, czysta magia :)

Jak umieścić widżet na Bloggerze?

Zaloguj się do panelu administracyjnego na Bloggerze. Przejdź do menu Układ i Dodaj gadżet.
Wybierz HTML/JavaScript.
W tytuł możesz wpisać, np. Wizytówka autora. W treść wklej skopiowany kod widżetu, który znajdziesz poniżej. Na koniec Zapisz.

Kod widżetu

<center><div class="stamp">
   <img src="http://3.bp.blogspot.com/-iMcOMzSMreU/VNODr7iaylI/AAAAAAAAI5Y/K_7fmjgq1oY/s1600/girl-flowers.jpg" />
</div>

<style>
.stamp img {
 width: 280px;
 height: 180px;
 display: inline-block;
 padding: 10px;
 background: white;
 position: relative;
  text-align:center;
 -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
 background: radial-gradient(
  transparent 0px, 
  transparent 4px, 
  white 4px,
  white
 );
 background-size: 20px 20px;
 background-position: -10px -10px;
}
.stamp:after {
 content: '';
 position: absolute;
 left: 5px; top: 5px; right: 5px; bottom: 5px;
 z-index: -1;
}
.stamp:before {
 content: '';
 position: absolute;
 bottom: 0; left: 0;
 font: bold 24px arial;
 color: white;
 opacity: 0.75;
 line-height: 100%;
 padding: 20px;
}
</style>
Link zamień na bezpośredni adres do zdjęcia.

Zobacz również

0 komentarzy