Efecto pegatina con CSS3

0

Publicado el 19/05/2010 en Diseño por Laura Vilar

Diseñadora industrial con años de experiencia en diseño web y HTML/CSS. Además de aportar su creatividad, Laura es la encargada de gestionar las campañas de marketing online de Axtro.

El efecto pegatina o sticker effect es un estilismo que con CSS 3 va a convertirse en una realidad. A día de hoy, este efecto tan sólo puede visualizarse en Safari y Chrome, aunque pronto será incorporado por otros navegadores.

De todas formas aquí os dejamos el código por si los más atrevidos se animan a usarlo ya. Desde luego es un recurso muy divertido y con una buena combinación de colores puede resultar muy impactante.

Esta es la css de nuestro ejemplo:

@font-face {
	font-family: 'PleasantlyPlumpNormal';
	src: url('PLUMP-webfont.eot');
	src: local('☺'), url('PLUMP-webfont.woff') format('woff'), url('PLUMP-webfont.ttf') format('truetype'), url('PLUMP-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
#efecto_pegatina {
width:950px;
margin:0 auto;
}
#efecto_pegatina h1 {
color:#FF5600;
font:68px/75px 'PleasantlyPlumpNormal',Arial,sans-serif;
margin:0;
padding-top:50px;
text-align:left;
-webkit-text-stroke: 5px #fff;
-webkit-text-fill-color:#FF5600;
text-shadow:0 0 10px #000000;
}
#efecto_pegatina h2 {
border-top:1px dotted #CCCCCC;
color:#333333;
font:normal 25px lucida Grande,sans-serif,arial;
margin:20px 0 0;
padding-top:20px;
text-align:right;
}

Y este nuestro pequeño código html en la demo:

<div id="efecto_pegatina">
<h1>Efecto<br />Pegatina</h1>
<h2>con CSS3</h2>
<p>Sólo si estás viendo esta página con Safari o Chrome podrás ver el efecto pegatina. :)</p>
</div>

Por último la demostración final:

Compartir