Latest web development tutorials

Efeitos de texto CSS3

Efeitos de texto CSS3

texto CSS3 contém vários novos recursos.

Neste capítulo, você aprenderá atribui o seguinte texto:

  • text-shadow
  • box-shadow
  • text-estouro
  • word-wrap
  • palavra-break

Suporte a navegadores

属性
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

O CSS3 sombra de texto

Em CSS3, a propriedade text-shadow se aplica ao texto sombras.

efeito de sombra texto!

Você especifica a sombra horizontal, a sombra vertical, cor, borrão da distância e sombras:

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Adicionar uma sombra ao título:

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

tente »

CSS3 propriedade box-shadow

Em CSS3 propriedade CSS3 box-shadow aplica caixa para sombra

Exemplos

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

tente »

Em seguida, adicionar cor à sombra

Exemplos

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

tente »

Em seguida, adicione uma sombra para um efeito de borrão

Exemplos

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

tente »

Você também pode adicionar um efeito de sombra em dois :: befor e :: after pseudo-elementos

Exemplos

# Boxshadow {
position: relative;
b ox-sombra: 1px 2px 4px rgba (0, 0, 0, 0,5);
pa dding: 10px;
bac kground: branco;
}
img {#boxshadow
width: 100%;
border: 1px solid # 8a4419;
border-style: baixo-relevo;
}
# b oxshadow :: after {
conteúdo: '';
position: absolute;
z-index: 1; / * hide sombra atrás de * /
box-shadow: 0 15px 20px rgba (0, 0, 0, 0,3);
width: 70%;
esquerda: 15%; / * uma metade dos restantes 30% * /
height: 100px;
bottom: 0;
}

tente »

Um caso especial é o uso do efeito de sombra cartão

Exemplos

div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
text-align: center;
}
}

Texto Cartões >> Picture Card >>

CSS3 propriedade Overflow Texto

atributo CSS3 texto em excesso especifica como os usuários devem exibir conteúdo estouro

Exemplos

p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: clipe;
}

p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: reticências;
}

tente »

CSS3 nova linha

Se uma palavra é muito grande para caber em uma área que se estende para o exterior:

CSS3, a propriedade permite que você envolva quebra de texto obrigatória - mesmo que isso signifique a divisão no meio de uma palavra:

CSS é como se segue:

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Permite o ajuste de texto longa:

p {word-wrap:break-word;}

tente »

CSS3 Palavra Quebrando

CSS3 Palavra Quebra atributo para especificar as regras de linha de quebra:

CSS é como se segue:

Exemplos

p.test1 {
palavra-break: mantenha-tudo;
}

p.test2 {
palavra-break: break-tudo;
}

tente »

Os novos atributos de texto

propriedade descrição CSS
pendurando-punctuation Disposições caracter de pontuação está localizado no exterior da estrutura. 3
pontuação-trim Se as disposições da poda caracteres de pontuação. 3
text-align-last Definir como alinhar a última linha ou imediatamente antes da linha para forçar uma quebra de linha. 3
text-ênfase elementos-chave da aplicação a um tag de texto e chave de primeiro plano tag. 3
text-justificar Quando um método de alinhamento predeterminado quando text-align está definido para "justificar" o uso. 3
text-esboço Especificação do contorno do texto. 3
text-estouro Disposições quando as coisas acontecem quando o texto transborda o elemento que contém. 3
text-shadow Adicionar uma sombra ao texto. 3
text-wrap Disposições do texto envoltório regra. 3
palavra-break texto CJK das disposições das normas de não-linha de ruptura. 3
word-wrap Permite longo dividida e indivisível palavra quebra para a próxima linha. 3