Advertisement
  1. Web Design
  2. CSS

Nube de etiquetas de Tagtastic con transformaciones CSS

Scroll to top
Read Time: 8 mins
This post is part of a series called Bringing Premium Pixels to Life.
Quick Tip: Create a Rating System With CSS, Web fonts and Sprites
Styling Dark Select Dropdown With Dropkick.js

Spanish (Español) translation by Steven (you can also view the original English article)

Hola chicos, hoy crearemos una nube de etiquetas de Tagtastic de pixeles premium. Como experimento de enfoques alternativos, crearemos las etiquetas utilizando degradados, sombras y (lo más importante) transformaciones CSS, que formarán el punto de cada etiqueta. Una vez finalizado, incluso daremos un paso más y nos ocuparemos de IE.

Hemos cubierto etiquetas antes en Tuts+, pero en esta ocasión vamos a examinar un método alternativo para crear todos los bits y piezas compuestas. Puede haber formas más nítidas de crear el efecto, pero nuestro ejemplo se abstendrá de imágenes, usará un marcado muy limpio y un estilo inusual. ¡Empecemos!


Paso 1: Maquetado base de HTML5

Comencemos agregando un marcado básico, incluido el familiar tipo de documento HTML5. También nos referiremos a nuestra hoja de estilo dentro del encabezado de nuestro documento.


Paso 2: Agregar algunos contenedores

Para el propósito de este tutorial, crearemos una envoltura/contenedor para contener nuestras etiquetas. Lo más probable es que necesites algo similar si los usas, por ejemplo, en la barra lateral de un blog.

Para los nuestros, simplemente crearemos un div con la clase 'wrapper', aplicaremos un ancho de 340px y un margen de 50px automáticamente para centrar el envoltorio en la página. Agregué 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 agregamos este CSS, agregaremos algunos estilos para el contenido (como una imagen de fondo) y aplicaremos un restablecimiento.


Paso 3: Crear una etiqueta con algo de HTML

He estructurado estas etiquetas de manera muy simple; todo lo que usaremos es una etiqueta de anclaje (una elección lógica ya que probablemente actuarán como enlaces a algún lugar o algo). Para este tutorial le he dado una clase "tag" pero esto se puede cambiar a lo que quieras.


Paso 4: Estilos de la etiqueta

¡Bien, a la siguiente parte! Ahora comenzaremos con el estilo de la etiqueta; aquí hay bastante código, pero no dejes que eso te confunda, te explicaré qué está pasando.

Primero agregué algunas cosas básicas aquí;

  • Flotadores
  • Márgenes
  • Posicionamiento - Relativo
  • Decoración de texto - ninguno

A continuación, definimos algunos ajustes de fuente, tamaño, familia y ancho, seguidos de un color y una sombra de texto. Después de eso, aplicamos algo de relleno, usando ems para que todo tenga un tamaño relativo al tamaño de la fuente del cuerpo o al tamaño de la fuente del navegador. Ahora, un borde simple, aunque no hemos aplicado uno a la izquierda. ¡Los ems han vuelto a aparecer! Esta vez  aplicaremos un border-radius, pero solo a las esquinas superior derecha e inferior derecha. ¿Aún estás despierto? Hay más... a continuación usaremos algunos degradados CSS3 (me adelanté y usé la ordenada aplicación Gradient para calcular los valores). La parte final son algunas sombras de caja (box shadows), un recuadro y una sombra paralela. ¡Recuerda esos prefijos!


Paso 5: La flecha

Bien, hemos completado la parte principal de la etiqueta, la siguiente parte es crear la flecha. Para agregar esto usaremos el pseudo elemento :before. También experimentaremos aquí con algunas técnicas avanzadas de CSS; transformaciones. La creación de estas flechas implicó mucho ensayo y error. ¡Tuve que probar diferentes anchos y alturas junto con el posicionamiento de la parte superior e inferior para que fuera lo más perfecto posible! Por tanto, cualquier comentario es muy bienvenido.

Hemos usado el mismo degradado de fondo que antes, pero con un cambio menor: debido a que giraremos el cuadrado que estamos a punto de hacer, también necesitaremos rotar el degradado para que coincida con la parte principal de la etiqueta. La aplicación Gradient fue útil para permitirme cambiar la dirección del gradiente. 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. Rotaremos el cuadrado que hicimos 45 grados para que parezca una flecha. Hemos utilizado transform: 45; junto con los prefijados.

Ahora deberías tener algo similar a lo siguiente; ten en cuenta que he ampliado el zoom para que puedas ver dónde se conecta la flecha con la parte principal, esto apenas se nota cuando se ve en tamaño normal.

Arrow and baseArrow and baseArrow and base

Paso 6: Agujero de la etiqueta

La última parte para completar nuestra etiqueta es crear un pequeño agujero en ella. Aquí usaremos un pseudo elemento nuevamente, pero esta vez, el elemento :after. Lo que hemos hecho para crear el agujero es bastante simple. Hemos definido un ancho y una altura en ems para que crezca sin problemas. A continuación, agregamos un 'border radius' grande que creará un círculo con un borde para delinearlo. Después de esto, agregamos una sombra paralela que es similar a la sombra de texto. Finalmente lo hemos posicionado (mientras usamos ems).

Hole createdHole createdHole created

Paso 7: Agregar algunos estilos de desplazamiento

Para hacer que nuestras etiquetas sean aún más impresionantes, agregaremos algunos estilos de desplazamiento. Necesitaremos agregar esto a la parte principal de la etiqueta y la flecha (mientras recordamos rotar el degradado de la flecha). También hemos cambiado el color del borde en ambos.


Paso 8: Servicio para IE

Si aún deseas mostrar tus etiquetas en todo su esplendor para los usuarios de IE, deberás adoptar un enfoque diferente hacia estas etiquetas, comenzando por crear una hoja de estilos específica para IE. Explicaré por qué... En primer lugar, muchos de nuestros efectos CSS3 no funcionarán en versiones anteriores a IE9 (solo un par funcionan en IE9 tal como está), pero el principal problema aquí son las transformaciones que no funcionarán. Para atender a los usuarios de IE, editaremos un poco nuestro código. Comenzaremos cambiando nuestro HTML primero, reemplazando el div wrapper y todo lo que contiene con:

IE ImagesIE ImagesIE Images

Usaremos una etiqueta de anclaje de nuevo pero con 3 tramos dentro; necesitaremos uno para crear la flecha, la parte principal y el final que tiene el 'border radius'.


Paso 9: Imágenes para nuestra versión de IE

Para asegurarnos de que nuestras etiquetas funcionen en IE, tendremos que usar imágenes. Comienza eliminando todo lo que está debajo de los estilos .wrapper, ¡todo lo relacionado con las etiquetas! Ahora deberás pegar el siguiente fragmento. Aquí simplemente aplicamos algunas imágenes de fondo, pero también repetimos el fondo del texto en el eje x, ya que el texto puede tener cualquier longitud. ¡Incluso Supercalafragalisticexpialadoshus!


Conclusión

¡Bueno, eso es todo! ¡Ese es otro tutorial completo y se ve bien! Hemos tomado estas etiquetas tagtastic y las hemos creado con CSS mientras nos ocupamos de IE al mismo tiempo. Estas etiquetas se pueden usar para todo tipo de cosas: adelante, úsalas en una barra lateral, en un blog, ¡lo que quieras!

CompletedCompletedCompleted

Espero que les haya gustado este tutorial, gracias por leer.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.