2015/05/07

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

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.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.