Textos con borde

17/sep/2014 0

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:

Deja tu Comentario

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

CSSLab