Nube de etiquetas con Css3

Las etiquetas son una característica común de muchos servicios Web 2.0, blogs y sitios web especialmente. En este tutorial vamos a usar CSS3 para crear el billete-, como las etiquetas, sin depender de alguna de las imágenes.

He aquí un rápido resumen del proceso:

• Crear el código HTML.
• Estilo de las etiquetas principales.
• Estilo de las cuatro esquinas de la etiqueta.
• Estilo del foro.
• Añadir y el estilo de un agujero perforado en la etiqueta.

Detalles Tutorial

• Tema: HTML / CSS, CSS3
• Dificultad: Media
• Tiempo estimado para terminar: 20 min

Demo Descargar

Paso 1: HTML encabezado de marcado

Vamos a empezar por el primero añadiendo el margen de beneficio dentro de la cabeza de nuestro documento. Hemos añadido dos hojas de estilo: “tut.css” y “tickets.css”, usted puede eliminar la primera cada vez que desee poner en práctica su propio trabajo, pero vamos a utilizar en la demostración. La hoja de estilo “tickets.css” contiene todos los estilos que formatear nuestras sugerencias. Aquí está nuestro margen de beneficio encabezado del documento:

1
2
3
4

<meta charset="utf-8">
<title>Pure CSS3 Ticket-like Tags</title>
<link rel="stylesheet" href="styles/tut.css" />
<link rel="stylesheet" href="styles/tickets.css" />

Paso 2: HTML etiquetas de marcado

Ahora tenemos que añadir el marcado de las etiquetas. Hemos utilizado una división para cada etiqueta con billete de clase de atributo, que vamos a utilizar para el estilo de las etiquetas. Entonces tenemos un lapso con el círculo de la clase de atributos. Por último, verá un enlace con el texto de las etiquetas. Aquí está el marcado etiquetas (he añadido cuatro etiquetas como una muestra, pero usted puede añadir tantos como quieras):

1
2
3
4

<div class="ticket"><span class="circle"></span><a href="#">CSS3</a></div>
<div class="ticket"><span class="circle"></span><a href="#">HTML5</a></div>
<div class="ticket"><span class="circle"></span><a href="#">Design</a></div>
<div class="ticket"><span class="circle"></span><a href="#">Development</a></div>

Paso 3: CSS principal Tag

Empecemos por el estilo del div tags principal (. Billete). Aquí ponemos los estilos de fuente, establecer la posición relativa de modo que podamos elementos de posición absoluta dentro de ella (nótese que tiene! Importante porque sin esto no podemos lograr los resultados que queremos), color de fondo, flotando a la izquierda, que también se puede establecer a derecha, y finalmente algo de relleno y los márgenes de separación.

1
2
3
4
5
6
7
8
9
10

.ticket {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    position: relative !important;
    background: #8dc63f;
    float: left;
    padding: 7px 3px;
    margin: 0 5px 5px 0;
}

Ahora que el estilo de las dos esquinas superiores para que se vea como un cuarto corte de un círculo. Para crear este que se va a utilizar pseudo elementos antes y después. Ambos elementos pseudo-tienen el mismo estilo, la única diferencia de que después se coloca a la izquierda, mientras que antes se coloca bien.

Para empezar, establezca el valor del contenido a la nada, la posición absoluta, z-index de 100 o cualquier valor positivo grande, fijar su posición de arriba, izquierda o derecha, y el cero. Establecer el estilo de borde-abajo y de izquierda o derecha, y finalmente nos pusimos frontera de radio de 20 píxeles (en la esquina inferior derecha para después y la parte inferior izquierda de antes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.ticket:after {
    content: "";
    position: absolute !important;
    z-index: 100;
    top: 0;
    left: 0;
    border-right: #fff 7px solid;
    border-bottom: #fff 7px solid;
    -moz-border-radius: 0 0 20px 0;
    -webkit-border-radius: 0 0 20px 0;
    border-radius: 0 0 20px 0;
}
 
.ticket:before {
    content: "";
    position: absolute !important;
    z-index: 100;
    top: 0;
    right: 0;
    border-left: #fff 7px solid;
    border-bottom: #fff 7px solid;
    -moz-border-radius: 0 0 0 20px;
    -webkit-border-radius: 0 0 0 20px;
    border-radius: 0 0 0 20px;
}

Paso 5: Enlaces CSS dentro de nuestras etiquetas

Dentro de los vínculos que ahora podemos crear el efecto de la costura mediante la utilización de las fronteras y contornos. Tenemos el estilo de los vínculos con un contorno discontinuo 1px color transparente con 40% de blancos, ajuste de las fronteras con el color transparente del 30% negro, el relleno para hacer la mirada más realista costuras en los bordes, ningún tipo de decoración del texto, color de texto para establecer el 50% blanco transparente (de modo que no tenemos que cambiar el color del texto cada vez que cambiamos el color de fondo de las etiquetas) y establecer un espacio en blanco para nowrap. Por último, establecer el estado estacionario el color del texto a 50% de negro transparente.

1
2
3
4
5
6
7
8
9
10

.ticket a {
    outline: 1px rgba(255,255,255,0.4) dashed;
    border: 1px rgba(0,0,0,0.3) dashed;
    padding: 4px 10px 4px 20px;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}
 
.ticket a:hover {color: rgba(0,0,0,0.5);}

Paso 6: Las esquinas inferiores CSS

Por las esquinas inferiores también vamos a utilizar pseudo elementos antes y después pero esta vez dentro del enlace. El estilo de estos dos extremos es, obviamente, similar a las esquinas superiores, acabamos de cambiar la posición y la frontera para que coincida con su posición.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.ticket a:after {
    content: "";
    position: absolute !important;
    z-index: 100;
    bottom: 0;
    left: 0;
    border-right: #fff 7px solid;
    border-top: #fff 7px solid;
    -moz-border-radius: 0 20px 0 0;
    -webkit-border-radius: 0 20px 0 0;
    border-radius: 0 20px 0 0;
}
 
.ticket a:before {
    content: "";
    position: absolute !important;
    z-index: 1000;
    bottom: 0;
    right: 0;
    border-left: #fff 7px solid;
    border-top: #fff 7px solid;
    -moz-border-radius: 20px 0 0 0;
    -webkit-border-radius: 20px 0 0 0;
    border-radius: 20px 0 0 0;
}

Paso 7: Adición de CSS del agujero perforado

En el código HTML que ya hemos añadido un elemento span vacío con el círculo de nombre de clase y se usa principalmente para crear nuestro efecto puñetazos agujero. Usaremos las fronteras y las fronteras de radio-de nuevo para crear círculos con valores cero de altura y anchura. Vamos a fijar su posición absoluta, z-index a un gran número positivo, el 50% de la parte superior, 8px de izquierda con una caja de sombra para que parezca más realista, y, finalmente, un margen superior de 5px, para alinearla perfectamente a el centro.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.ticket .circle {
    position: absolute !important;
    z-index: 100;
    border: 5px #fff solid;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-top: -5px;
    width: 0;
    height: 0;
    top: 50%;
    left: 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);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.3);
}

Detalles Tutorial

• Tema: HTML / CSS, CSS3
• Dificultad: Media
• Tiempo estimado para terminar: 20 min

Demo Descargar

Te recomendamos leer:

Webmaster GNU/Linux Parte 4: Servidor Mantenimiento y Procesos

Comprimir CSS y Javascript

Efecto fotos tiradas Css3

jsFiddle editor online html ,css y JavaScript

otros llegaron buscando