Share
¡Hoy lo abrimos con un tutorial sobre cómo diseñar y codificar su propia nube de etiquetas jugosas usando Photoshop, CSS y algunas imágenes pequeñas! Utilizaremos la antigua técnica de las puertas corredizas, pero incluiremos algunos métodos avanzados de selección de CSS hacia el final en caso de que quiera empujar el sobre y usarlo dentro de WordPress. En sus marcas, listos, fuera!
Un poco de brillo en los lugares correctos realmente puede condimentar un diseño de página estándar. Hoy, veremos cómo crear su propia variación personalizada del elemento de "nube de etiquetas" que puede encontrar en casi cualquier sistema de blogs hoy en día..
Revisaremos rápidamente el diseño (es fácil de hacer), y luego profundizaremos en el CSS que hace que todo se junte. Úselo en sus propios proyectos, colóquelo en un blog personal, ¿depende totalmente de usted? vamos a bucear en!
Los puristas de CSS en la audiencia pueden temblar en este punto porque vamos a abrir Photoshop. ¿Por qué? Porque queremos crear un diseño de etiqueta completamente personalizado. ¿Se puede lograr esta etiqueta en particular que usaremos hoy en CSS? Probablemente, estoy seguro de que algunos ninjas CSS por ahí serán rápidos para señalar que estas son solo formas básicas. Pero ¿y si quisieras agregar textura? O una forma completamente diferente (bordes festoneados cualquiera)?
Aparte de los dolores de cabeza del navegador al tratar de hacer que esto funcione solo con CSS, la conclusión es que es bueno saber cómo usar imágenes y CSS juntos al unísono, así que eso es precisamente lo que haremos.
Sigue adelante y enciende Photoshop. Abre un nuevo documento de tamaño de 71px por 29px.
El ancho en realidad no importa mucho aquí? Pero la altura va a ser algo que querrás recordar..
A continuación, dibujemos un rectángulo redondeado en nuestro documento con un radio de 2px. Deja un poco de espacio para una sombra más tarde? En nuestro caso, he dejado 2px en la parte inferior y laterales..
Ahora es el momento de crear nuestra forma personalizada. Estaremos usando Photoshop's Añadir punto y Convertir punto herramientas. No hay mucho para esto más allá de solo jugar con los puntos hasta que tenga la forma que desea, así que juegue un poco. Aquí está el nuestro:
¿Necesitamos un pequeño agujero en nuestra etiqueta aunque? ya sabes, para que la gente pueda pasar una cadena virtual a través de él. Ok, tal vez no, pero agrega un poco más de destello para nosotros que no sería posible con CSS. Utilizar el Herramienta de marco elíptico y dibuja una selección circular (mantén presionada la tecla Shift mientras dibujas para mantenerlo perfecto).
Una vez que haya realizado su selección, seleccione la inversa de la selección (Seleccionar> Inverso) y conviértalo en una máscara vectorial sobre la forma de su etiqueta usando la Añadir máscara de capa botón en la parte inferior del inspector de capa.
En aras de la brevedad (queremos llegar a la parte de codificación, ¿no?), Repasemos los estilos de capa aquí. Puedes agregar tus propios ajustes, pero así es como se ve el nuestro:
El resultado final debería verse así:
Notarás en la PSD (dentro de la carpeta de descarga de este tutorial) que también he agregado en nuestro texto. Siéntase libre de hacer lo mismo en caso de que necesite usar esto dentro de cualquier maqueta de diseño..
Nota: Puede revertir la orientación de la etiqueta fácilmente por su cuenta. En realidad, le mostraremos cómo crear la etiqueta orientada hacia la izquierda y hacia la derecha en la fase de codificación..
Woot! ¿Así que tenemos nuestra etiqueta diseñada? ¿Pero cómo lo vamos a utilizar en una página web real? Comenzaremos por dividir nuestra etiqueta en tres partes:
Guárdelos todos como gráficos PNG para preservar la transparencia y almacenarlos dentro de una carpeta llamada "imágenes".
Ahora necesitamos crear nuestro marcado básico. Vamos a comenzar con un enfoque lógico y simple utilizando capas de DIV, pero al igual que con todo lo relacionado con el código, podremos limpiarlo (y reducir la cantidad de código requerido) en los pasos posteriores..
Aquí está nuestro marcado básico para cada etiqueta:
Diseño
Revisemos esto rápidamente: esencialmente tenemos un envoltorio de etiqueta principal DIV (.tag), con tres DIV anidados:
Puede continuar y repetir ese bloque de código varias veces para probar varias etiquetas apiladas una al lado de la otra..
Ahora es el momento de agregar nuestro CSS.
Comenzaremos el CSS aplicando algunas reglas básicas a cada uno de nuestros divs. Te mostraré el código de cada uno y luego te explicaré lo que está haciendo:
Accentsconagua
.etiqueta font-size: 11pt; text-shadow: 0 1px 1px rgba (255, 255, 255, 0.4); flotador izquierdo; / * Hace que cada etiqueta permanezca junta en una sola pieza * / margen: 5px; .tag .center background: url ("images / gradient.png") repetir-x desplazarse a la izquierda arriba transparente; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: auto; relleno: 0px 6px; / * Dale al texto un poco de espacio para respirar * / .tag .center a vertical-align: middle; / * Importante para ajustar el texto perfectamente * / line-height: 21pt; / * Importante para ajustar el texto perfectamente * / color: # 0f2d39; texto-decoración: ninguno; Este bloque de código configura el elemento que envolverá alrededor de nuestra etiqueta; Tenga en cuenta que estamos agregando algunas reglas de tipo aquí, un flotante simple y un margen entre cada etiqueta para espaciarlas.
Las segundas dos reglas en el CSS anterior cubren la parte central de la etiqueta, que establece el gradiente de fondo y algunos espacios..
En este punto, deberías tener algunas etiquetas que se parecen a esto:
Ahora veamos agregue un poco de estilo para los elementos laterales izquierdo y derecho.
.tag-left .left background: url ("images / tagleft_left.png") no repetir, desplazarse a la izquierda arriba transparente; bloqueo de pantalla; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 15px; / * Igual que el ancho de la imagen * / .tag-left .right background: url ("images / tagleft_right.png") no repetir, desplazarse a la derecha arriba transparente; bloqueo de pantalla; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 4px; / * Igual que el ancho de tu imagen * / El bloque de código anterior hace tres cosas principales:
Ahora tus etiquetas deberían estar bastante cerca de completarse:
Pero ¿y si queremos incluir otro tipo de etiqueta? Di uno que mire en dirección opuesta? Ahí es donde entran en juego los selectores "tag-left" y "tag-right". Al agregar estos en el nivel superior, podemos agregar algunas reglas más a nuestro CSS para permitir una etiqueta completamente diferente:
.tag-right .left background: url ("images / tagright_left.png") no repetir, desplazarse a la izquierda arriba transparente; bloqueo de pantalla; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 4px; / * Igual que el ancho de su imagen * / .tag-right .right background: url ("images / tagright_right.png") no-repetir desplazarse a la derecha arriba transparente; bloqueo de pantalla; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 16px; / * Igual que el ancho de tu imagen * / Lo que debería darle el estilo correcto de "etiqueta derecha":
¡Hecho! Bien sorta Para ser honesto, esta es una manera muy pesada de manejar este efecto. En el siguiente paso, lo llevaremos a algunos selectores de CSS más avanzados para un enfoque más elegante..
Nota de fuentes de Google: Puede que hayas notado que estoy usando una fuente personalizada aquí (Droid Sans). Es fácil agregar su propia fuente personalizada, solo visite el sitio de Google Fonts, encuentre la fuente que le guste y agregue el código de inserción y la regla CSS para la fuente.
¿Lo bueno de las fuentes de Google (o algo parecido) es que realmente puedes aplicar la mayoría de los estilos de fuente CSS al texto? esto significa que podemos usar atributos como sombra de texto para crear el efecto de luz sutil.
Cualquier persona que haya estado codificando por un período de tiempo le dirá que SIEMPRE hay una manera de mejorar un código. Eso es exactamente lo que estaremos haciendo en este último paso..
Empecemos por revisar lo que hay feo sobre el enfoque anterior.
Aquí hay otro enfoque utilizando CSS :antes de y :después selectores para aligerar la carga.
Comencemos por ver el CSS original en su totalidad, y luego reescribalo usando nuestros selectores:
/ * Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag font-size: 11pt; text-shadow: 0 1px 1px rgba (255, 255, 255, 0.4); flotador izquierdo; / * Hace que cada etiqueta permanezca junta en una sola pieza * / margen: 5px; .tag .center background: url ("images / gradient.png") repetir-x desplazarse a la izquierda arriba transparente; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: auto; relleno: 0px 6px; / * Dale al texto un poco de espacio para respirar * / .tag .center a vertical-align: middle; / * Importante para ajustar el texto perfectamente * / line-height: 21pt; / * Importante para ajustar el texto perfectamente * / color: # 0f2d39; texto-decoración: ninguno; / * Reglas de etiqueta izquierda +++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++ * / .tag-left .left background: url ("images / tagleft_left.png") desplazamiento sin repetición superior izquierda transparente bloqueo de pantalla; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 15px; / * Igual que el ancho de la imagen * / .tag-left .right background: url ("images / tagleft_right.png") no repetir, desplazarse a la derecha arriba transparente; bloqueo de pantalla; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 4px; / * Igual que el ancho de la imagen * / / * Reglas de etiqueta derecha ++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++ * / .tag-right .left background: url ("images / tagright_left .png ") no-repetir desplazarse a la izquierda arriba transparente; bloqueo de pantalla; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 4px; / * Igual que el ancho de su imagen * / .tag-right .right background: url ("images / tagright_right.png") no-repetir desplazarse a la derecha arriba transparente; bloqueo de pantalla; flotador izquierdo; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 16px; / * Igual que el ancho de tu imagen * / / * Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag float: left; margen: 5px; altura: 29px; / * Igual que la altura de tu imagen * / ancho: auto; .tag a background: url ("images / gradient.png") repetir-x desplazarse a la izquierda arriba transparente; flotador izquierdo; altura: 29px; relleno: 5px 6px; color: # 0F2D39; tamaño de letra: 11 puntos; texto-decoración: ninguno; text-shadow: 0 1px 1px rgba (255, 255, 255, 0.4); .tag: before content: "; background: url (" images / tagleft_left.png ") no-repita scroll 0 0 transparent; display: block; float: left; height: 29px; / * Igual que la altura de su imagen * / width: 15px; / * Igual que el ancho de la imagen * / .tag: after content: "; fondo: url ("images / tagleft_right.png") no-repetir scroll 0 0 transparente; bloqueo de pantalla; flotar derecho; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 4px; / * Igual que el ancho de la imagen * / / * Reglas de rotulación de etiquetas +++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++ * / .tag.flip: before content: "; background: url ( "images / tagright_left.png") no repetir, desplazarse a la izquierda arriba transparente; pantalla: bloque; flotar: izquierda; altura: 29px; / * Igual que la altura de su imagen * / width: 4px; / * Igual que el ancho de la imagen * / .tag.flip: después de contenido: "; fondo: url ("images / tagright_right.png") no se repite el desplazamiento a la derecha arriba transparente; bloqueo de pantalla; flotar derecho; altura: 29px; / * Igual que la altura de tu imagen * / ancho: 16px; / * Igual que el ancho de tu imagen * / ¿Qué es diferente? Para empezar, hemos eliminado la necesidad de los elementos izquierdo y derecho dentro del DIV.
Aquí, simplemente compare el marcado anterior y el nuevo marcado:
Diseño
Diseño Utilizando el :antes de y :después selectores, podemos inyectar de manera efectiva nuestras "puertas corredizas" en el marcado sin ninguna carga adicional. El resultado es un marcado mucho más limpio, ¡y uno que realmente funciona en todos los navegadores modernos! También hemos cambiado de usar elementos DIV a elementos SPAN simples (los SPAN tienen un poco más de sentido en este contexto).
Entonces, ¿qué pasa si queremos tener un estado flotante para nuestras etiquetas? Es bastante simple en realidad, solo agregue un par de reglas nuevas con el :flotar Selector insertado entre nuestro selector de clase y el :antes de y :después selectores.
Por ejemplo:
.etiqueta: hover: antes
Eso maneja el problema de selección: desde aquí, básicamente, puede agregar su propia variación de lo que sucede con el mouse-mouse. Puede hacer cualquier cosa desde cambiar el color del texto, a la opacidad, o incluso cambiar los gráficos de fondo reales. Esto es lo que usamos en la demostración:
/ * Mouse Hover Rules +++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++ * / .tag a: hover background: url ("images / gradient_hover.png") repetir-x desplazarse a la izquierda arriba transparente; .tag: hover: before background: url ("images / tagleft_left_hover.png") no-repetir scroll 0 0 transparente; .tag: hover: after background: url ("images / tagleft_right_hover.png") desplazamiento sin repetición 0 0 transparente; .tag.flip: flotar: antes de background: url ("images / tagright_left_hover.png") no repetir el desplazamiento a la izquierda arriba transparente; .tag.flip: flotar: después de background: url ("images / tagright_right_hover.png") no repetir, desplazarse a la derecha arriba transparente; ¿Tenga en cuenta que cambiar la imagen puede crear un efecto de parpadeo rápido la primera vez que se cargan las imágenes? hay maneras de lidiar con esto, pero ese es otro tutorial;)
Usar este pequeño truco dentro de WordPress también es bastante fácil. Consulte la página de WordPress Codex sobre la función "the_tags" que normalmente usaría dentro de uno de los archivos de plantilla. estaremos viendo cómo podemos cambiar el marcado que se usa para escupir las etiquetas.
Aquí hay un ejemplo de cómo podría convertir las etiquetas renderizadas en una lista desordenada:
Simplemente cambiaríamos eso para que coincida con nuestro propio sistema:
','',''); ?> ¡Eso es! Solo incluye el CSS asociado dentro de tu archivo style.css (o el archivo .css que estés usando en tu tema), y deberías tener algunas etiquetas personalizadas increíbles y listas para usar!
Gracias por seguir a todos :) Los comentarios sobre cómo podemos mejorar esto o hacerlo diferente siempre son bienvenidos!
