Share
Las etiquetas son una característica familiar de muchos servicios Web 2.0, sitios web y especialmente blogs. Durante este tutorial usaremos CSS3 para crear etiquetas similares a tickets, sin depender de ninguna imagen..
Aquí hay un rápido desglose del proceso:
Vamos a empezar por añadir primero el marcado dentro de la cabeza de nuestro documento. Hemos agregado dos hojas de estilo: "tut.css" y "tickets.css"; Puede eliminar el anterior siempre que desee implementar su propio trabajo, pero lo usaremos en la demostración. La hoja de estilo "tickets.css" contiene todos los estilos que darán formato a nuestra información sobre herramientas. Aquí está nuestra marca de encabezado de documento:
Etiquetas de tipo CSS3 puro
Ahora necesitamos agregar el marcado para las etiquetas. Hemos utilizado una división para cada etiqueta con atributo de clase boleto el cual usaremos para estilizar las etiquetas. Entonces tenemos un span con atributo de clase circulo. Finalmente, verás un enlace con texto para las etiquetas. Aquí está el marcado de etiquetas (agregué cuatro etiquetas como muestra, pero puede agregar tantas como desee):
CSS3HTML5DiseñoDesarrollo
Vamos a empezar por el estilo de las etiquetas principales div (.boleto). Aquí establecemos los estilos de fuente, establecemos la posición en relativo de modo que podamos elementos de posición absoluta dentro de él (aviso que tiene !importante porque sin esto no podemos lograr los resultados que queremos), color de fondo, flotando a izquierda que también puede configurar para Correcto, Luego, finalmente, algunos rellenos y márgenes para el espaciado..
.ticket font-family: Arial; tamaño de fuente: 12px; font-weight: negrita; posición: relativa! importante; fondo: # 8dc63f; flotador izquierdo; relleno: 7px 3px; margen: 0 5px 5px 0;
Nuestras etiquetas deberían verse así.
Ahora diseñamos las dos esquinas superiores para que parezcan un cuarto de círculo recortado. Para crear esto vamos a utilizar pseudo elementos. después y antes de. Ambos pseudo elementos tienen el mismo estilo, la única diferencia es que después se coloca a la izquierda mientras que antes de se coloca a la derecha.
Comience por establecer el valor del contenido en nada, posición absoluto, índice z a 100 o cualquier valor positivo grande, establezca su posición desde arriba, izquierda o derecha, y cero. Establezca el estilo de borde inferior e izquierdo o derecho, luego finalmente configuramos el radio de borde 20px (esquina inferior derecha para después y abajo a la izquierda para antes de.
Para obtener más información sobre la creación de formas utilizando estilos de bordes CSS, puede ver esto
guía.
.boleto: después de contenido: ""; posición: absoluta! importante; índice z: 100; arriba: 0; izquierda: 0; borde derecho: #fff 7px sólido; borde inferior: #fff 7px sólido; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; radio del borde: 0 0 20px 0; .ticket: antes de contenido: ""; posición: absoluta! importante; índice z: 100; arriba: 0; derecha: 0; borde izquierdo: #fff 7px sólido; borde inferior: #fff 7px sólido; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; radio del borde: 0 0 0 20px;
Nuestras etiquetas deberían verse así.
Dentro de los enlaces ahora podemos crear el efecto de la costura utilizando bordes y contornos. Diseñamos los enlaces con un punteado 1px contornee con 40% de color blanco transparente, configure los bordes con 30% de color negro transparente, acolchado para que la costura se vea más realista en los bordes, sin decoración de texto, configure el color del texto en 50% de blanco transparente (para que no tengamos para cambiar el color del texto cada vez que cambiemos el color de fondo de las etiquetas) y establezca espacios en blanco para nowrap. Finalmente, establecemos el color del texto del estado de desplazamiento al 50% en negro transparente.
.boleto a esquema: 1px rgba (255,255,255,0.4) punteado; borde: 1px rgba (0,0,0,0.3) punteado; relleno: 4px 10px 4px 20px; texto-decoración: ninguno; color: rgba (255,255,255,0.5); espacio en blanco: nowrap; .ticket a: hover color: rgba (0,0,0,0.5);
Nuestras etiquetas deberían verse así. Observe que ambas esquinas recortadas se encuentran en la parte superior de la costura.
Para las esquinas inferiores también vamos a utilizar pseudo elementos. después y antes de Pero esta vez dentro del enlace. El estilo de estas dos esquinas es obviamente similar a las esquinas superiores, solo cambiamos la posición y el borde para que coincidan con su posición.
.ticket a: after content: ""; posición: absoluta! importante; índice z: 100; abajo: 0; izquierda: 0; borde derecho: #fff 7px sólido; borde superior: #fff 7px sólido; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; radio del borde: 0 20px 0 0; .ticket a: antes de contenido: ""; posición: absoluta! importante; índice z: 1000; abajo: 0; derecha: 0; borde izquierdo: #fff 7px sólido; borde superior: #fff 7px sólido; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; radio del borde: 20px 0 0 0;
Nuestras etiquetas ahora deberían verse así.
En el marcado HTML ya hemos agregado un elemento de intervalo vacío con el nombre de clase circulo y se utiliza principalmente para crear nuestro efecto de agujero perforado. Volveremos a utilizar los bordes y el radio del borde para crear círculos con valores de altura y anchura cero. Fijaremos su posición en absoluto, Índice z a un número positivo grande, 50% desde arriba, 8px desde la izquierda con una sombra de cuadro para que se vea más realista, y finalmente un margen superior de -5px alinearlo perfectamente al centro.
.ticket .circle position: absolute! important; índice z: 100; borde: 5px #fff sólido; -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; margen superior: -5px; ancho: 0; altura: 0; superior: 50%; izquierda: 8px; -moz-box-shadow: 0 -1px 0 rgba (0,0,0,0.5), 0 1px 0 rgba (255,255,255,0.3); -webkit-box-shadow: 0 -1px 0 rgba (0,0,0,0.5), 0 1px 0 rgba (255,255,255,0.3); caja-sombra: 0 -1px 0 rgba (0,0,0,0.5), 0 1px 0 rgba (255,255,255,0.3);
Nuestras etiquetas deben verse completas!
Mi enfoque para crear estas entradas tiene un problema. Las cuatro esquinas y el agujero perforado no cambian de color si se altera el color de fondo. En otras palabras, no son transparentes y debe cambiar su color cada vez que cambie el color de fondo..
En cuanto a la compatibilidad del navegador, esto ha sido probado para funcionar en Firefox 4.5+, Cromo 13, Opera 11 y IE9.
Su resultado final debe verse como la imagen de arriba. Para que su resultado final se vea exactamente como en nuestra demostración, debe usar los estilos dentro de "tut.css", pero puede agregar sus propios ajustes..
Espero que todos hayan aprendido algunas técnicas de este tutorial de CSS. Comparte tus pensamientos a continuación :)
Accentsconagua