Share
Hoy, me gustaría mostrarte un buen truco. Crearemos un icono de documento con CSS3 puro. Aún mejor, este efecto solo requerirá un único elemento HTML.
Empecemos!
Comenzaremos agregando nuestro único elemento HTML: una etiqueta de anclaje. Esto tiene sentido, ya que la mayoría de los iconos también sirven para ser enlaces..
Icono de documento
Vamos a establecer las dimensiones algo arbitrarias para nuestro icono. Haremos 40x56px, simplemente para esta demostración. ¡En una aplicación del mundo real, probablemente querrá reducir esto! Además, ten en cuenta que necesitamos añadir bloqueo de pantalla, ya que todas las etiquetas de anclaje están en línea, por defecto.
.docIcon background: #eee; Fondo: gradiente lineal (arriba, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); borde: 1px sólido #ccc; bloqueo de pantalla; ancho: 40px; altura: 56px; posición: relativa; margen: 42px auto;
Tenga en cuenta que, anteriormente, estamos configurando un contexto de posicionamiento para trabajar con pseudo elementos en breve. Encontrarás que solo he usado la sintaxis oficial de CSS3 para el gradiente. Es probable que también desee utilizar los distintos prefijos del navegador. Para acelerar las cosas, puedes usar Prefixr.com, o su API en tu editor de código favorito. Simplemente copie el fragmento de código de arriba, péguelo en el área de texto de Prefixr y haga clic en entrar. Luego escupirá todas las propiedades prefijadas, así:
.docIcon background: #eee; fondo: -webkit-linear-gradient (arriba, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); fondo: -moz-lineal-gradiente (arriba, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); fondo: -o-lineal-gradiente (arriba, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); fondo: -ms-lineal-gradiente (arriba, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); Fondo: gradiente lineal (arriba, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); borde: 1px sólido #ccc; bloqueo de pantalla; ancho: 40px; altura: 56px; posición: relativa; margen: 42px auto;
A continuación, vamos a añadir un poco de brillo utilizando las sombras del cuadro CSS. También he usado el guion de texto propiedad para ocultar el texto.
.docIcon ? -webkit-box-shadow: recuadro rgba (255,255,255,0.8) 0 1px 1px; -moz-box-shadow: recuadro rgba (255,255,255,0.8) 0 1px 1px; cuadro de sombra: inserción rgba (255,255,255,0.8) 0 1px 1px; texto-guión: -9999em;
A continuación, necesitamos crear un efecto de esquina redondeada. Agregue lo siguiente:
.docIcon ? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; radio del borde: 3px 15px 3px 3px;
Al pasar cuatro valores, podemos especificar los radios superior, derecho, inferior e izquierdo, según corresponda. Esto es similar a la forma en que aplicaría los márgenes o el relleno..
Para crear la ilusión de una esquina rizada, usaremos contenido generado o pseudo elementos.
Primero, agrega contenido :antes de nuestro icono En este caso, no requerimos ningún texto específico. En su lugar, necesitamos crear un cuadro de 15 píxeles y aplicar un degradado de fondo.
.docIcon: antes de contenido: ""; bloqueo de pantalla; posición: absoluta; arriba: 0; derecha: 0; ancho: 15px; altura: 15px; fondo: #ccc; fondo: -webkit-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); fondo: -moz-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); fondo: -o-lineal-gradiente (45deg, #fff 0, #eee 50%, #ccc 100%); fondo: -ms-lineal-gradiente (45deg, #fff 0, #eee 50%, #ccc 100%); fondo: gradiente lineal (45 grados, #fff 0, #eee 50%, #ccc 100%); -webkit-box-shadow: rgba (0,0,0,0.05) -1px 1px 1px, recuadro blanco 0 0 1px; -moz-box-shadow: rgba (0,0,0,0.05) -1px 1px 1px, recuadro blanco 0 0 1px; cuadro de sombra: rgba (0,0,0,0.05) -1px 1px 1px, recuadro blanco 0 0 1px; borde inferior: 1px sólido #ccc; borde izquierdo: 1px sólido #ccc;
Para que nuestro contenido generado también reciba el borde redondeado superior derecho, debemos, nuevamente, aplicar los mismos radios para alinearlo.
? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; radio del borde: 3px 15px 3px 3px;
A continuación, vamos a utilizar el :después Elemento psuedo para agregar algunas líneas discontinuas para representar el texto alejado. Aplicar un ancho del 60%, y una margen izquierdo y margen derecho del 20% (lo que equivale al 100%). A continuación, especificamos una altura y la posicionamos en 0 0.
.docIcon: after content: ""; bloqueo de pantalla; posición: absoluta; izquierda: 0; arriba: 0; ancho: 60%; margen: 22px 20% 0; altura: 15px;
Crear un conjunto de líneas es un poco complicado. Sin embargo, si somos inteligentes, podemos usar gradientes de CSS para lograr este efecto. Primero, divida la altura total por cinco y configure cada bloque con un relleno sólido. Consulte la imagen de abajo para una ejemplificación más clara de este pensamiento. Ingenioso, ay? Es una buena técnica para tener en tu cinturón de herramientas..
.docIcon: despues de ? fondo: #ccc; Fondo: -webkit-linear-gradient (arriba, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #ff 60%, #fff 80%, #ccc 80%, #ccc 100%); fondo: -moz-lineal-gradiente (arriba, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #f 60%, #ff 80%, #ccc 80%, #ccc 100%); Fondo: -o-lineal-gradiente (arriba, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #ff 60%, #fff 80%, #ccc 80%, #ccc 100%); fondo: -ms-lineal-gradiente (arriba, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #ff 60%, #fff 80%, #ccc 80%, #ccc 100%); Fondo: gradiente lineal (arriba, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #ff 80%, #ccc 80 %, #ccc 100%);
Demo en vivo ¿Te gustó el post? ¿Tienes otros trucos similares? Si es así, enlace a ellos en los comentarios a continuación..
Accentsconagua