Latest web development tutorials

Efectos de texto CSS3

Efectos de texto CSS3

CSS3 texto contiene varias características nuevas.

En este capítulo se atribuye el texto siguiente:

  • text-shadow
  • box-shadow
  • -desbordamiento de texto
  • word-wrap
  • palabra-break

Soporte para el navegador

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

El texto de la sombra CSS3

En CSS3, propiedad text-shadow se aplica al texto sombras.

efecto de sombra de texto!

Se especifica la sombra horizontal, vertical de la sombra, el color, la distancia borroso y sombras:

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Añadir una sombra al título:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Trate »

CSS3 propiedad box-shadow

En CSS3 CSS3 propiedad box-shadow aplica caja de sombra

Ejemplos

div {
box-shadow: 10px 10px;
}

Trate »

A continuación, añadir color a la sombra

Ejemplos

div {
box-shadow: 10px 10px gris;
}

Trate »

A continuación, añadir una sombra a un efecto de desenfoque

Ejemplos

div {
box-shadow: 10px 10px 5px gris;
}

Trate »

También puede añadir un efecto de sombra en dos :: :: acaben y después de pseudo-elementos

Ejemplos

# Boxshadow {
position: relative;
b buey-shadow: 1px 2px 4PX RGBA (0, 0, 0, 0,5);
pa dding: 10px;
bac kground: blanco;
}
img {#boxshadow
width: 100%;
frontera: 1px solid # 8a4419;
frontera de estilo: inserción;
}
#b oxshadow :: tras {
contenido: '';
position: absolute;
z-index: 1; / * esconder la sombra detrás de la imagen * /
box-shadow: 0 15px 20px RGBA (0, 0, 0, 0,3);
anchura: 70%;
izquierda: 15%; / * Una media de los restantes 30% * /
altura: 100px;
parte inferior: 0;
}

Trate »

Un caso especial es el uso de la tarjeta de borrado efecto

Ejemplos

div.card {
Anchura: 250px;
box-shadow: 0 0 8 píxeles 4PX RGBA (0, 0, 0, 0,2), 0 6px 20px 0 RGBA (0, 0, 0, 0,19);
text-align: center;
}
}

Texto Tarjetas >> Picture Card >>

CSS3 propiedad de desbordamiento de texto

CSS3 atributo de texto de desbordamiento especifica cómo los usuarios deben mostrar el contenido de desbordamiento

Ejemplos

p.test1 {
white-space: nowrap;
Anchura: 200px;
frontera: 1px solid # 000000;
overflow: hidden;
texto de desbordamiento: Clip;
}

p.test2 {
white-space: nowrap;
Anchura: 200px;
frontera: 1px solid # 000000;
overflow: hidden;
texto-overflow: puntos suspensivos;
}

Trate »

nueva línea CSS3

Si una palabra es demasiado larga para caber en un área que se extiende hacia el exterior:

CSS3, la propiedad le permite envolver el ajuste de texto obligatorios - incluso si esto significa que la división en el medio de una palabra:

código CSS es el siguiente:

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Permite el ajuste de texto largo:

p {word-wrap:break-word;}

Trate »

La separación de palabras CSS3

La separación de palabras CSS3 atributo para especificar reglas de división de líneas:

código CSS es el siguiente:

Ejemplos

p.test1 {
palabra-break: keep-todo;
}

p.test2 {
palabra-break: romper, todo;
}

Trate »

Los nuevos atributos de texto

propiedad descripción CSS
colgando-puntuacion Disposiciones de carácter puntuacion se encuentra fuera del marco. 3
puntuacion-trim Si las disposiciones de la poda caracteres de puntuación. 3
text-align-pasado Configuración de la forma de alinear la última línea o inmediatamente antes de la línea de forzar un salto de línea. 3
texto-énfasis Los elementos clave de la aplicación de una etiqueta de texto y el primer plano la etiqueta dominante. 3
texto justificar Cuando un método de alineación predeterminada cuando text-align está ajustado a "justificar" su uso. 3
texto-resumen Especificación del contorno del texto. 3
-desbordamiento de texto Disposiciones cuando las cosas suceden cuando el texto se desborda el elemento que contiene. 3
text-shadow Añadir una sombra al texto. 3
ajuste del texto Disposiciones de ajuste de texto regla. 3
palabra-break CJK texto de las disposiciones de las normas no de división de líneas. 3
word-wrap Permite larga dividida y la palabra indivisible envolver a la línea siguiente. 3