Textos con borde

17/sep/2014 4

Un pequeño efecto que realicé para este nuevo diseño de CSSLab fue agregar borde a un caracter dentro de los blockquote, pero este efecto puede aplicarse a textos de cualquier tipo y con cualquier fuente, incluso si son @font-face. Entre las soluciones que encontré, existen principalmente 2:

-webkit-text-stroke

Esta propiedad sólo es utilizada por browsers Webkit y ha sido así desde que se creó. No ahondaré en su uso por este mismo motivo, pero mostraré su sintaxis:

-webkit-text-stroke: 4px black;

Múltiples text-shadow

Esta propiedad sí tiene amplio soporte y permite tener múltiples sombras alrededor de un mismo caracter, junto a regular su espesor y nivel de desenfoque hará que una línea del grueso que definamos rodee cada caracter, de la siguiente manera:

text-shadow:
  -4px -4px 0 #000,  
  4px -4px 0 #000,
  -4px 4px 0 #000,
  4px 4px 0 #000;
texto-con-borde

Link:

Comentarios

  1. Siroguh [#]

    Hola, tengo una pregunta, y no es de los textos con borde. Quería saber como hiciste la animación de arriba del todo, en la que al pasar el ratón se unen los puntos a través de líneas. Si tienes algun tutorial, pásamelo si puedes :)

    Si es con algún plugin, pasame el nombre.

    Muchas gracias.

  2. Jorge Epuñan [#]

    Siroguh: el codigo de lo que mencionas esta en Codepen para q lo analices.

    Salu2.

    • Siroguh [#]

      Vale, muchas gracias!

    • Siroguh [#]

      Siento ser pesado, de verdad que lo siento, pero copio y pego a mi html, a mi css y a mi main.js y no me funciona. Ya tengo agregado el jquery. Tengo los enlaces al css y javascript bien… no se me ocurre nada.

      ¿Alguna idea?

Responder a Jorge Epuñan ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab