Share
Hola chicos, hoy vamos a crear Tagtastic Tag Cloud de Premium Pixels. Como un experimento en enfoques alternativos, crearemos las etiquetas utilizando gradientes, sombras y (lo más importante) las transformaciones de CSS, que formarán el punto de cada etiqueta. Una vez finalizado, incluso daremos un paso más y atenderemos a IE.
Ya hemos cubierto las etiquetas en Webdesigntuts +, pero en esta ocasión vamos a examinar un método alternativo para crear todas las piezas y fragmentos compuestos. Puede haber formas más nítidas de crear el efecto, pero nuestro ejemplo se abstendrá de utilizar imágenes. muy Marcado limpio y un estilo inusual. Vamos a quedar atrapados en!
Comencemos lanzando un marcado básico, incluido el conocido doctype HTML5. También nos referiremos a nuestra hoja de estilo en el encabezado de nuestro documento..
Para el propósito de este tutorial, crearemos un contenedor / contenedor para mantener nuestras etiquetas. Lo más probable es que necesite algo similar si los utiliza, por ejemplo, en una barra lateral de blog..
Para el nuestro, simplemente crearemos un div con una clase de envoltura, aplicaremos un ancho de 340px y un margen de 50px auto para centrar la envoltura en la página. He agregado 50px en lugar de 0 solo para agregar un poco de margen superior para que nuestras etiquetas no toquen la parte superior de la ventana del navegador. Mientras introducimos este CSS, agregaremos algunos estilos para el cuerpo (como una imagen de fondo) y aplicaremos un reinicio..
html, body, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, y, dirección, cite, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, forma, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, navegación, salida, ruby, sección, resumen, tiempo, marca, audio, video, entrada, área de texto, seleccione fondo: transparente; borde: 0; tamaño de fuente: 100%; margen: 0; contorno: 0; relleno: 0; vertical-align: baseline artículo, aparte , detalles, figcaption, figura, pie de página, encabezado, hgroup, menu, nav, sección display: block body line-height: 1 blockquote, q quotes: none blockquote: before, blockquote: after, q: before , q: después de contenido: ninguno
body font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; tamaño de fuente: 16px; fondo: url (… /images/bg.jpg) repetir; -webkit-font-smoothing: suavizado; .wrapper max-width: 340px; margen: 50px auto;
He estructurado estas etiquetas de manera muy simple; todo lo que usaremos es una etiqueta de anclaje (una opción lógica, ya que estas probablemente actúen como enlaces a algún lugar o algo). Para este tutorial le he dado una clase de "etiqueta" pero esto puede cambiarse a lo que quieras.
alta resolución
Bien, a la siguiente parte! Ahora comenzaremos a diseñar la etiqueta. Aquí hay un montón de código, pero no dejes que eso te confunda. Explicaré qué sucede..
Primero he añadido algunas cosas básicas aquí;
A continuación, hemos definido algunos ajustes de fuente, tamaño, familia y peso, seguidos de un color y una sombra de texto. Después de eso, hemos aplicado algo de relleno, utilizando ems para que todo tenga un tamaño relativo al tamaño de la fuente del cuerpo o el tamaño de la fuente del navegador. A continuación, un borde simple, aunque no hemos aplicado uno a la izquierda. ¡Los ems han vuelto a aparecer! Esta vez los aplicaremos al radio del borde, pero solo en las esquinas superior derecha e inferior derecha. Está bien, todavía estás despierto? Hay más ... luego usaremos algunos gradientes CSS3 (seguí adelante y usé la aplicación Neat Gradient para calcular los valores). La parte final es un cuadro de sombras, una inserción y una sombra. Recuerda esos prefijos!
.etiqueta float: left; margen: 0 0 7px 20px; posición: relativa; Familia tipográfica: 'Helvetica Neue', Helvetica, Arial, sans-serif; tamaño de fuente: 0.75em; font-weight: negrita; texto-decoración: ninguno; color: # 996633; texto-sombra: 0px 1px 0px rgba (255,255,255, .4); relleno: 0.417em 0.417em 0.417em 0.917em; borde superior: 1px sólido # d99d38; borde derecho: 1px sólido # d99d38; borde inferior: 1px sólido # d99d38; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; radio del borde: 0 0.25em 0.25em 0; imagen de fondo: -webkit-linear-gradient (arriba, rgb (254, 218, 113), rgb (254, 186, 71)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 71)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 71)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 71)); imagen de fondo: gradiente lineal (arriba, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba47"); -webkit-box-shadow: recuadro 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); -moz-box-shadow: inserción 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); box-shadow: recuadro 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); índice z: 100;
Bueno, hemos completado la parte principal de la etiqueta, la siguiente parte es crear la flecha. Para agregar esto usaremos el :antes de pseudo elemento. También experimentaremos con algunas técnicas avanzadas aquí desde CSS; transformaciones. Crear estas flechas involucró mucho ensayo y error. ¡Tuve que probar diferentes anchos y alturas junto con la posición de la parte superior e inferior para que fuera lo más perfecto posible! Cualquier comentario es por lo tanto muy bienvenido ...
Hemos utilizado el mismo degradado de fondo que antes pero con un cambio menor: debido a que estaremos girando el cuadrado que estamos a punto de hacer, también necesitaremos rotar el degradado para que coincida con la parte principal de etiqueta. La aplicación de degradado me ayudó a cambiar la dirección del degradado. La siguiente parte es crear algunos bordes, a la izquierda y abajo. Todo lo que queda con respecto a la flecha es agregar un radio de borde para suavizar el punto y finalmente aplicar nuestras transformaciones. Giraremos el cuadrado que hemos hecho 45 grados para que se vea como una flecha. Hemos utilizado transformar: 45; junto con los prefijados.
.etiqueta: antes contenido: "; ancho: 1.30em; altura: 1.358em; imagen de fondo: -webkit-linear-gradient (parte superior izquierda, rgb (254, 218, 113), rgb (254, 186, 71)) ; imagen de fondo: -moz-lineal-gradiente (parte superior izquierda, rgb (254, 218, 113), rgb (254, 186, 71)); imagen de fondo: -o-lineal-gradiente (parte superior izquierda, rgb ( 254, 218, 113), rgb (254, 186, 71)); imagen de fondo: gradiente -ms-lineal (parte superior izquierda, rgb (254, 218, 113), rgb (254, 186, 71)); imagen de fondo: gradiente lineal (arriba a la izquierda, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71' , EndColorStr = "# feba47"); posición: absoluta; izquierda: -0.69em; superior: .2em; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -o-transform: rotate (45deg); transformar: rotar (45deg); borde izquierdo: 1px sólido # d99d38; borde inferior: 1px sólido # d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0.25em; radio del borde: 0 0 0 0.25em; índice z: 1;
Ahora debería tener algo similar a lo siguiente; Nota He ampliado para que pueda ver dónde se conecta la flecha a la parte principal, esto es apenas perceptible cuando se ve en tamaño normal..
La última parte para completar nuestra etiqueta es crear el pequeño agujero en ella. Aquí usaremos un pseudo de nuevo, pero esta vez, el :después elemento. Lo que hemos hecho para crear el agujero es bastante simple. Hemos definido un ancho y alto en ems para que crezca sin problemas. A continuación, hemos agregado un radio de borde grande que creará un círculo con un borde para delinearlo. Después de esto, hemos agregado una sombra paralela que es similar a la sombra de texto. Finalmente lo hemos posicionado (utilizando ems)..
.etiqueta: después de contenido: "; ancho: 0.5em; altura: 0.5em; fondo: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; borde: 1px sólido # d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; posición: absoluta; superior: 0.667 em; izquierda: -0.083em; z-index: 9999;
Para hacer que nuestras etiquetas sean aún más impresionantes, agregaremos algunos estilos de desplazamiento. Tendremos que agregar esto a la parte principal de la etiqueta y a la flecha (recordando rotar el gradiente de la flecha). También hemos cambiado el color del borde en ambos.
.etiqueta: flotar imagen de fondo: -webkit-linear-gradient (top, rgb (254, 225, 141), rgb (254, 200, 108)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (254, 225, 141), rgb (254, 200, 108)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (254, 225, 141), rgb (254, 200, 108)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (254, 225, 141), rgb (254, 200, 108)); imagen de fondo: gradiente lineal (arriba, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); color de borde: # e1b160; .tag: hover: antes de background-image: -webkit-linear-gradient (parte superior izquierda, rgb (254, 225, 141), rgb (254, 200, 108)); imagen de fondo: -moz-lineal-gradiente (parte superior izquierda, rgb (254, 225, 141), rgb (254, 200, 108)); imagen de fondo: -o-lineal-gradiente (parte superior izquierda, rgb (254, 225, 141), rgb (254, 200, 108)); imagen de fondo: -ms-lineal-gradiente (parte superior izquierda, rgb (254, 225, 141), rgb (254, 200, 108)); imagen de fondo: degradado lineal (parte superior izquierda, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); color de borde: # e1b160;
Si aún desea mostrar sus etiquetas con toda la gloria para los usuarios de IE, deberá adoptar un enfoque diferente hacia estas etiquetas, comenzando por crear una hoja de estilo específica de IE. Explicaré por qué ... En primer lugar, muchos de nuestros efectos CSS3 no funcionarán en versiones anteriores a IE9 (solo un par funciona en IE9), pero el problema principal aquí son las transformaciones que no funcionarán. Para atender a los usuarios de IE, editaremos nuestro código un poco. Comenzaremos cambiando nuestro HTML primero, reemplazando el envoltura div y todo en su interior con:
alta resolución
Volveremos a utilizar una etiqueta de anclaje pero con 3 vanos dentro; necesitaremos uno para crear la flecha, la parte principal y el extremo que tiene el radio del borde.
Para garantizar que nuestras etiquetas funcionarán en IE, tendremos que usar imágenes. Comience por eliminar todo lo que está debajo de los estilos .wrapper, ¡todo relacionado con la etiqueta! Ahora deberás pegar en el siguiente fragmento de código. Aquí simplemente estamos aplicando algunas imágenes de fondo, ¡pero también estamos repitiendo el fondo del texto en el eje x, ya que el texto puede tener cualquier longitud! Incluso Supercalafragalisticexpialadoshus!
.flecha ancho: 15px; altura: 25px; flotador izquierdo; fondo: url (… /images/arrow.png) no-repetir; .text altura: 25px; flotador izquierdo; relleno-izquierda: 4px; derecho de relleno: 4px; fondo: url (… /images/text.png) repetición-x; Familia tipográfica: 'Helvetica Neue', Helvetica, Arial, sans-serif; tamaño de fuente: 0.75em; font-weight: negrita; color: # 996633; texto-sombra: 0px 1px 0px rgba (255,255,255, .4); línea de altura: 23px; .end ancho: 4px; altura: 25px; flotador izquierdo; fondo: url (… /images/end.png) no-repetir; .tag: hover .arrow background-image: url (… /images/arrow_hover.png); .tag: hover .text background-image: url (… /images/text_hover.png); .tag: hover .end background-image: url (… /images/end_hover.png);
¡Bueno, eso es todo! ¡Ese es otro tutorial completo y se ve bien! Hemos tomado estas etiquetas tagtastic y las hemos creado con CSS al mismo tiempo que utilizamos IE. Estas etiquetas se pueden usar para todo tipo de cosas: adelante, úsalas en una barra lateral, blog, lo que quieras!
Espero que te haya gustado este tutorial, gracias por leerlo..
Accentsconagua