Efecto Pegatina Con Css3
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:
Efecto
Pegatina
con CSS3
Sólo si estás viendo esta página con Safari o Chrome podrás ver el efecto pegatina. :)
Por último la demostración final:
<!-- @font-face { font-family: 'PleasantlyPlumpNormal'; src: url('/themes/theproces/data/PLUMP-webfont.eot'); src: local('☺'), url('/themes/theproces/data/PLUMP-webfont.woff') format('woff'), url('/themes/theproces/data/PLUMP-webfont.ttf') format('truetype'), url('/themes/theproces/data/PLUMP-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } #efecto_pegatina { 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; font-weight:bold; } #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; } -->Efecto
Pegatina
con CSS3
Sólo si estás viendo esta página con Safari o Chrome podrás ver el efecto pegatina. :)
Artículo original en theproc.es
Hacer una pregunta
En la actualidad, automatizar su empresa o negocio se ha convertido en una necesidad competitiva.
Hoy en día una de las grandes necesidades de toda persona es la de automatizar la rutina diaria ya sea en el trabajo o en la vida personal, esto se debe a un factor común que conocemos como "MONOTONÍA". Muchos de nosotros deseamos que una máquina o un ordenador, haga, si no todo gran parte del trabajo que nos corresponde hacer
ODR son plataformas tecnológicas para la resolución de controversias a través de internet en las que el usuario únicamente precisa de un dispositivo conectado a la red y un navegador.
El siguiente artículo continúa con la idea de la primera parte sobre como elaborar buenas interfaces de usuario y mejorar así la experiencia de uso de un software.
Como consecuencia del uso masivo de internet y de la gran cantidad de documentación disponible para desarrolladores, es posible encontrar en la actualidad una gran variedad de productos de software. El problema está en que muchos de ellos son descartados tempranamente debido a que son presentados a su público objetivo mediante interfaces de usuario deficientes. El siguiente artículo trata sobre como elaborar buenas interfaces de usuario y mejorar así la experiencia de uso del programa.
Descripción de cómo un programa se ejecuta en un ordenador.
Todo lo que debes saber sobre las variables en batch.
En este artículo veremos algunos conceptos iniciales y muy necesarios para aquellas personas que deciden comenzar con drupal: ¿Que es un CMS? ,¿Que es drupal?, Instalando Drupal y Cambiar el idioma de Drupal
Decora tu casa ni gastarte un euro en ver cómo va a quedar
Este artículo explica qué aspectos se deben tener en cuenta a la hora de escoger un suelo de madera o parquet para su hogar y por tanto economizar costes al máximo.
Entrenamiento reduccion de grasas con plataforma vibratoria
Agregue un nuevo comentario
