A estas alturas, es probable que haya visto suficientes tutoriales largos de CSS3 para durar toda la vida. Probablemente esté comenzando a familiarizarse con lo que CSS3 tiene para ofrecer y está listo para pasar de la teoría básica y ver algunos ejemplos prácticos de diseño que puede copiar y pegar directamente en su código sin leer un montón de comentarios.
Bueno, estás de suerte porque eso es exactamente lo que tenemos para ti hoy. A continuación, encontrará siete trucos CSS divertidos y atractivos que puede capturar e insertar directamente en sus propios proyectos y personalizar a voluntad. Tenga en cuenta que dado que esto sigue siendo de vanguardia, los navegadores más antiguos no son compatibles con la mayoría. He intentado garantizar una degradación elegante siempre que sea posible para que pueda proporcionar una experiencia de trabajo a todos los usuarios y una mejor experiencia para aquellos con el uso de webkit.
Tipografía
Insertar texto es bastante simple en CSS. Para lograrlo, necesitará tres colores: un color de fondo, un tono más claro del color de fondo y un tono más oscuro del color de fondo.
Para comenzar, rellene el texto con el tono más oscuro del color de fondo. Luego, simplemente aplique una sombra de texto CSS3 que sea un tono más claro y tenga el efecto de crear una apariencia en relieve.
El HTML
El CSS
Letras minúsculas
El efecto de mayúsculas es cuando todas las letras en un encabezado son mayúsculas, pero las letras iniciales en cada palabra son más grandes que el resto. Es un efecto agradable y simple que no se ve a menudo en la web (no es realmente CSS3, ¡pero sigue siendo genial!).
Una forma fácil de hacer esto es simplemente insertar?pequeña? etiquetas en su HTML y luego aplique un estilo a esas etiquetas con un tamaño de fuente ligeramente más pequeño que el resto del título. ¡Algunos comentaristas me informaron que de hecho hay una manera más fácil de lograr esto! Simplemente use? Font-variant: small-caps ;? y eres bueno para ir!
También usé la? Mayúscula? Transformación de texto sólo por diversión. Esto tomará automáticamente cualquier texto en minúsculas y lo transformará, lo que hará que sea más fácil volver atrás y cambiar su HTML manteniendo el mismo aspecto, incluso si no recuerda escribir todas las mayúsculas.
El HTML
El CSS
Cupón CSS
Este es útil para aquellos minoristas en línea que desean ofrecer promociones, ventas, cupones en línea, etc. El tratamiento de borde típico que se ve en la mayoría de los sitios web es solo una línea sólida, pero también puede hacer líneas de puntos o líneas discontinuas en un borde.
¡Combina esto con algunas esquinas redondeadas de CSS3 y una sombra de caja y obtendrás un bonito gráfico de cupones de CSS!
El HTML
El CSS
Cosido
Mientras estamos en el tema de los tratamientos de borde discontinuo, aquí hay un truco alternativo que puede usar para darle a una caja una sutil ilusión cosida.
Esta vez en lugar de un borde usamos un esquema. Un contorno se puede insertar fácilmente usando un valor negativo en el comando de desplazamiento de contorno.
El HTML
El CSS
Brillo
Este efecto de la web 2.0 popular y quizás sobreutilizado solía requerir al menos una imagen para lograrlo. Ahora, utilizando CSS3 y un poco de gradiente de fondo, sepa cómo puede recrear ese brillo utilizando solo el código.
Los gradientes complejos de CSS pueden ser difíciles de construir, así que recomiendo utilizar el Generador de degradado de CSS Ultimate o algo similar para ayudar a automatizar el proceso.
El HTML
El CSS
Stroked Text & @ font-face
En este ejemplo obtienes dos trucos en uno! Verá la sintaxis para agregar trazos de texto en webkit, más la de agregar fuentes personalizadas en todos los navegadores modernos con @ font-face.
La fuente que usé en el siguiente ejemplo se llama Jungle Fever y se puede descargar como un kit @ font-face de Font Squirrel.
El HTML
El CSS
Doble trazo de texto
Descubrí esta sugerencia por completo al construir un texto con trazos para el ejemplo anterior. Resulta que si utiliza RGBa en el texto trazado y reduce un poco la opacidad, puede lograr un doble golpe impresionante. No estoy completamente seguro de por qué funciona (¿algo que ver con la hemorragia del derrame cerebral?) ¡Pero sí!
El HTML
El CSS
Conclusión
Como dije en las declaraciones iniciales, siéntase libre de copiar y usar los ejemplos anteriores como lo desee. Deje un comentario a continuación si tiene alguna idea para mejorar cualquiera de estos trucos, ya sea para que se vean más atractivos o más compatibles con varios navegadores. ¡Están lejos de ser perfectos y quiero verlos mejorarlos!