/* Este código implementa o efeito gradiente quando o mouse desliza sobre o link*/
um {
cor: #007c21;
transição: cor .4s facilidade;
}
a:hover { cor: #00bf32 }Usando CSS3 você pode criar cantos arredondados para a maioria dos elementos, incluindo elementos de formulário, imagens e até mesmo texto de parágrafo, sem introduzir marcações ou imagens adicionais.
<!DOCTYPEhtml> <html lang="pt"> <cabeça> <meta charset="utf-8" /> <title>Cantos arredondados</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </head> <corpo> <div class="todos-cantos"></div> <div class="one-corner"></div> <div class="cantos elípticos"></div> <div class="círculo"></div> </body> </html>
Quatro exemplos usando cantos arredondados CSS, incluindo prefixos de fornecedores necessários para oferecer suporte a versões mais antigas dos navegadores Android, Mobile Safari e Safari. Para .circle , usar 75px tem o mesmo efeito que 50% porque o elemento tem 150像素*150像素.
div {
histórico: #999;
flutuar: esquerda;
altura: 150px;
margem: 10px;
largura: 150px;
}
.todos os cantos {
-webkit-border-radius: 20px;
raio da borda: 20px;
}
.um canto {
-webkit-border-top-left-radius: 75px;
raio superior esquerdo da borda: 75px;
}
.cantos elípticos {
-webkit-border-radius: 50px/20px;
raio da borda: 50px/20px;
}
.círculo {
-webkit-border-radius: 50%;
raio da fronteira: 50%;
} div {
plano de fundo: #ff9;
borda: 5px sólido #326795;
flutuar: esquerda;
altura: 150px;
margem: 10px;
largura: 150px;
}
.exemplo-1 {
/* Faz com que o raio dos cantos superior esquerdo e inferior direito seja 10px e
os cantos superior direito e inferior esquerdo 20px */
raio da borda: 10px 20px;
}
.exemplo-2 {
/* Faz com que o raio do canto superior esquerdo seja 20px e todos os outros cantos sejam 0 */
raio da borda: 20px 0 0;
}
.exemplo-3 {
/* Torna o raio do canto superior esquerdo em 10px, o canto superior direito em 20px,
o canto inferior direito 0 e o canto inferior esquerdo 30px */
raio da borda: 10px 20px 0 30px;
}-webkit-border-radius: r , onde r é o raio do filete, expresso como comprimento (com unidades). Insira border-radius: r , onde r é o raio do filete, use o mesmo valor da etapa um. Esta é a sintaxe abreviada padrão para esta propriedade.-webkit-border-top-left-radius: r , onde r é o raio do canto superior esquerdo, expresso como comprimento (com unidades). Insira border-top-left-radius: r , usando o mesmo valor para r da primeira etapa. Esta é a sintaxe de formato longo padrão para esta propriedade. Para criar um canto superior direito, use top-right ; para criar um canto inferior direito, use bottom-right bottom-left-webkit-border-radius: x/y , onde x é o raio do filete na direção horizontal, y é o raio do filete na direção vertical, ambos expressos como comprimento (com unidade) . Insira border-radius: x/y , onde x e y são iguais aos valores da primeira etapa.-webkit-border-radius: r onde r é o raio do elemento (com unidade de comprimento). Para criar um círculo, use a forma abreviada da sintaxe, onde o valor de r deve ser igual à metade da altura ou largura do elemento. Insira border-radius: r onde r é o raio do elemento (com unidade de comprimento), que é igual a r na primeira etapa. Esta é a sintaxe padrão sem prefixo. Nota: Navegadores mais antigos que não suportam border-radius renderizarão apenas elementos com cantos quadrados. border-radius afeta apenas os cantos do elemento ao qual o estilo é aplicado, não os cantos de seus elementos filhos. Portanto, se um elemento filho tiver um plano de fundo, o plano de fundo poderá aparecer nos cantos de um ou mais elementos pai, afetando assim o estilo de canto arredondado. Às vezes, o plano de fundo de um elemento (não o plano de fundo de seus elementos filhos aqui) será exibido através de seus cantos arredondados. Para evitar isso, você pode adicionar uma regra de estilo após a declaração border-radius do elemento: background-clip: padding-box; .
Use text-shadow para adicionar efeitos de sombra dinâmicos ao texto em parágrafos, títulos e outros elementos sem usar imagens para representar o texto.
text-shadow: . Insira os valores que representam x-offset (deslocamento horizontal), y-offset (deslocamento vertical), blur-radius (raio de desfoque) e color respectivamente (os três primeiros valores têm unidades de comprimento e não há vírgula entre os quatro valores separados), por exemplo -2px 3px 7px #999 .text-shadow: . Insira os valores de x-offset (deslocamento horizontal), y-offset (deslocamento vertical), blur-radius (raio de desfoque) e color respectivamente (os três primeiros valores têm unidades de comprimento e não há vírgula separação entre os quatro valores). O valor do blur-radius é opcional. Digite, (vírgula). Repita a etapa dois com valores diferentes para as quatro propriedades.<!DOCTYPEhtml> <html lang="pt"> <cabeça> <meta charset="utf-8" /> <title>Sombra do texto</title> <link rel="stylesheet" href="css/text-shadow.css" /> </head> <corpo> <p class="basic">Sombra Básica</p> <p class="basic-negative">Sombra Básica</p> <p class="blur">Raio de desfoque</p> <p class="blur-inversed">Raio de desfoque</p> <p class="multiple">Várias sombras de texto</p> </body> </html>
corpo {
plano de fundo: #fff;
cor: #222;
fonte: 100%/1,05 helvética, sem serifa;
preenchimento superior: 20px;
}
p {
cor: #222; /* quase preto */
tamanho da fonte: 4,5em;
peso da fonte: negrito;
margem: 0 0 45px;
}
p:último filho {
margem: 0;
}
.básico {
sombra de texto: 3px 3px #aaa;
}
/* usa deslocamentos negativos – você também pode misturar valores positivos e negativos */.
.básico-negativo {
text-shadow: -4px -2px #ccc; /* cinza um pouco mais claro que #aaa */
}
.desfoque {
sombra de texto: 2px 2px 10px cinza;
}
.blur-inverso {
cor: branco;
sombra de texto: 2px 2px 10px #000;
}
/* este exemplo tem duas sombras, mas você pode incluir
mais separando cada um com uma vírgula */
.múltiplo {
sombra de texto:
2px 2px branco,
6px 6px rgba(50,50,50,.25);
} Essas classes demonstram vários efeitos text-shadow . O primeiro, o segundo e o quinto omitem o valor do raio do desfoque. A classe .multiple nos diz que vários estilos de sombra podem ser adicionados a um único elemento, com vírgulas separando cada conjunto de atributos. Dessa forma, ao combinar vários estilos de sombra, você pode criar efeitos especiais e interessantes.
Ou seja, insira text-shadow: none; Este atributo não precisa ser inserido e usa o prefixo do fabricante.
A propriedade text-shadow aceita quatro valores: x-offset com unidades de comprimento, y-offset com unidades de comprimento, blur-radius opcional com unidades de comprimento e color . Se blur-radius não for especificado, seu valor será assumido como 0. x-offset e y-offset podem ser números inteiros positivos ou negativos, o que significa que 1px e -1px são válidos. O valor blur-radius deve ser um número inteiro positivo. Todos os três valores podem ser 0. Embora a sintaxe de text-shadow seja semelhante à das propriedades de borda e plano de fundo, ela não pode especificar quatro valores de propriedade separados, como borda e plano de fundo. Se text-shadow não for especificado, ele usará o valor inicial none .
Use a propriedade text-shadow para adicionar uma sombra ao texto de um elemento e use a propriedade box-shadow para adicionar uma sombra ao próprio elemento. Seu conjunto de propriedades base é o mesmo, mas box-shadow também permite o uso de duas propriedades opcionais: a propriedade de palavra-chave inset e spread (usada para expandir ou diminuir a sombra).
box-shadow aceita seis valores: x-offset e y-offset com unidades de comprimento, blur-radius opcional com unidades de comprimento, palavra-chave inset opcional, valor spread opcional com unidades de comprimento e valor color . Se os valores de blur-radius e spread não forem especificados, eles serão definidos como 0.
<!DOCTYPEhtml> <html lang="pt"> <cabeça> <meta charset="utf-8" /> <title>Sombra da caixa</title> <link rel="stylesheet" href="css/box-shadow.css" /> </head> <corpo> <div class="sombra"> <p>Sombra com desfoque</p> </div> <div class="sombra-negativa"> <p>Sombra com deslocamentos negativos e desfoque</p> </div> <div class="shadow-spread"> <p>Sombra com desfoque e propagação</p> </div> <div class="shadow-offsets-0"> <p>Sombra com deslocamentos zero, desfoque e propagação</p> </div> <div class="inset-shadow"> <p>Sombra inserida</p> </div> <div class="múltiplo"> <p>Várias sombras</p> </div> <div class="shadow-negative-spread"> <p>Sombra com desfoque e propagação negativa</p> </div> </body> </html>
corpo {
plano de fundo: #000;
cor: #fff;
}
h1 {
família de fontes: sem serifa;
tamanho da fonte: 2,25em;
altura da linha: 1,1;
alinhamento de texto: centro;
}
/* NOTA: Os URLs da imagem de fundo são diferentes do exemplo mostrado no livro, porque coloquei as imagens em uma subpasta (chamada "img"), como é típico ao organizar um site. Achei que seria útil ver como construir URLs de imagem de fundo nessas circunstâncias. Observe que os URLs são relativos ao local onde a folha de estilo está, NÃO à página HTML que está exibindo a imagem.
.céu noturno {
cor de fundo: azul marinho; /* cor substituta */
imagem de fundo:
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
posição de fundo:
50% 102%,
100% -150px,
0 -150 px,
50% 100%;
repetição em segundo plano:
sem repetição,
sem repetição,
sem repetição,
repetir-x;
altura: 300px;
margin: 25px auto 0 /* ligeiramente diferente do livro */
preenchimento superior: 36px;
largura: 75%;
} O programa acima é usado para demonstrar o efeito do uso de box-shadow para adicionar uma ou mais sombras. Cada uma das primeiras cinco classes aplica um estilo de sombreamento diferente uma da outra. A última classe aplica duas sombras (mais podem ser aplicadas). Os navegadores que não entendem box-shadow simplesmente ignorarão essas regras de estilo CSS e renderizarão a página sem sombra.
-webkit-box-shadow: . Insira os valores que representam x-offset , y-offset , blur-radius , spread e color respectivamente (os primeiros quatro valores têm unidades de comprimento), por exemplo, 2px 2px 5px #333 . Digite box-shadow: e repita a etapa dois.-webkit-box-shadow: . Insira os valores que representam x-offset , y-offset , blur-radius , spread e color respectivamente (os primeiros quatro valores têm unidades de comprimento), por exemplo, 2px 2px 5px #333 . Insira inset após os dois pontos e, em seguida, insira um espaço (você também pode inserir inset e um espaço antes da segunda etapa). Insira box-shadow: e repita as etapas dois e três.-webkit-box-shadow: . Insira os valores que representam x-offset , y-offset , blur-radius , spread e color respectivamente (os primeiros quatro valores têm unidades de comprimento), por exemplo, 2px 2px 5px #333 . Se necessário, inclua a palavra-chave inset . Digite uma vírgula. Repita a etapa dois com valores diferentes para cada atributo. Insira box-shadow: e repita as etapas dois a quatro.-webkit-box-shadow: none; Digite box-shadow: none; Nota: os valores x-offset , y-offset e spread podem ser números inteiros positivos ou negativos. O valor blur-radius deve ser um número inteiro positivo. Todos os três valores podem ser zero. A palavra-chave inset permite que a sombra seja colocada dentro do elemento.
Vários planos de fundo podem ser aplicados a quase qualquer elemento.
<!DOCTYPEhtml> <html lang="pt"> <cabeça> <meta charset="utf-8" /> <title>Vários planos de fundo</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /> </head> <corpo> <div class="céu noturno"> <h1>No céu noturno...</h1> </div> </body> </html>
...
.céu noturno {
cor de fundo: azul marinho; /* cor substituta */
imagem de fundo:
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
posição de fundo:
50% 102%,
100% -150px,
0 -150 px,
50% 100%;
repetição em segundo plano:
sem repetição,
sem repetição,
sem repetição,
repetir-x;
altura: 300px;
margin: 25px auto 0 /* ligeiramente diferente do livro */
preenchimento superior: 36px;
largura: 75%;
}Aplique várias imagens de fundo a um único elemento (sem necessidade de usar prefixos de fornecedor)
Insirabackground-color: b , onde b é a cor de fundo alternativa que você deseja aplicar ao elemento. Digite background-image: u , onde u é uma lista de url referenciados por caminhos absolutos ou relativos (separados por vírgulas. Para navegadores que suportam vários planos de fundo, as imagens são colocadas em camadas e se sobrepõem. A primeira da lista é separada por vírgulas . imagem na parte superior.) Insira background-position: p , onde p é um par de x-offset e y-offset (pode ser positivo ou negativo; com unidade de comprimento ou palavra-chave, como center top ) Conjuntos, separados por vírgulas. . Para cada url especificado na segunda etapa, deve haver um conjunto de x-offset e y-offset . Insira background-repeat: r , onde r é repeat-x , repeat-y ou no-repeat , separado por vírgulas, um valor para cada url especificado na segunda etapa.Para múltiplas imagens de fundo, a sintaxe abreviada padrão pode ser usada, usando vírgulas para separar cada conjunto de parâmetros de fundo. O benefício desta representação é que os desenvolvedores podem especificar uma cor de fundo alternativa ou uma imagem para navegadores mais antigos.
.céu noturno {
/* substituto com cor e imagem */
plano de fundo: url da marinha (../img/ufo.png) sem repetição central inferior;
/* para suporte a navegadores */
fundo:
url(../img/ufo.png) sem repetição 50% 102%,
url(../img/stars.png) sem repetição 100% -150px,
url(../img/stars.png) sem repetição 0 -150px,
url(../img/sky.png) repetir-x 50% 100%;
altura: 300px;
margem: 25px automático 0;
preenchimento superior: 36px;
largura: 75%;
}<!DOCTYPEhtml> <html lang="pt"> <cabeça> <meta charset="utf-8" /> <title>Fundos gradientes</title> <link rel="stylesheet" href="css/gradients.css" /> </head> <corpo> <div class="vertical-down"><p>padrão</p></div> <div class="vertical-up"><p>para o topo</p></div> <div class="horizontal-rt"><p>para a direita</p></div> <div class="horizontal-lt"><p>para a esquerda</p></div> <div class="angle-bot-rt"><p>para <br />canto inferior direito</p></div> <div class="angle-bot-lt"><p>para <br />canto inferior esquerdo</p></div> <div class="angle-top-rt"><p>no canto superior direito</p></div> <div class="angle-top-lt"><p>no canto superior esquerdo</p></div> <div class="angle-120deg"><p>120deg</p></div> <div class="angle-290deg"><p>290deg</p></div> <seção class="radial"> <div class="radial-center"><p>padrão</p></div> <div class="radial-top"><p>no topo</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70% 90% no <br />canto inferior esquerdo</p></div> <div class="radial-various-1"><p>vários 1</p></div> <div class="radial-various-2"><p>vários 2</p></div> </seção> <seção class="color-stops"> <div class="color-stops-1"><p>amarelo 10%, verde</p></div> <div class="color-stops-2"><p>no canto superior direito, amarelo, <br>verde 70%, <br>azul</p></div> </seção> </body> </html>
corpo {
preenchimento: 1,25em; /* 20px/16px, então 20px de cada lado */
tamanho da fonte: 100%;
}
div {
flutuar: esquerda;
altura: 150px;
margem: 10px;
largura: 150px;
}
p {
cor: #fff;
fonte: negrito 1,25em/1 sem serifa /* 20px/16px */
preenchimento superior: 1,65em; /* 33px/16px */
alinhamento de texto: centro;
}
/* NOTA: Os gradientes abaixo estão na sintaxe CSS3 padrão. Os navegadores que os suportam são Chrome 26+, Firefox 16+, IE 10+ e Opera 12.10+. Consulte gradientes-with-browser-prefixes.css para o mesmo. efeitos de gradiente, mas com o código de prefixo do fornecedor também incluído para que os gradientes funcionem em vários navegadores mais antigos. Um plano de fundo com um comentário "substituto" é a cor que será exibida nos navegadores que não suportam a sintaxe de gradiente. Você também pode usar uma imagem de fundo como substituto (sozinha ou em combinação com uma cor). Por exemplo, background: red url(gradient-image.jpg) no-repeat; .
/* GRADIENTES LINEARES
------------------------------------------ */
/* :::: Verticais :::: */
.vertical para baixo {
fundo: prata; /* substituto */
/* gradiente padrão, então você não precisa especificar "to bottom" antes das cores */
fundo: gradiente linear (prata, preto);
}
.vertical para cima {
fundo:prata;
fundo: gradiente linear (para cima, prata, preto);
}
/* :::: Horizontais :::: */
.horizontal-rt {
fundo: prata; /* substituto */
fundo: gradiente linear (para a direita, prata, preto);
}
.horizontal-lt {
fundo: prata; /* substituto */
fundo: gradiente linear (para a esquerda, prata, preto);
}
/* :::: Ângulos diagonais :::: */
/* Nota: As figuras na página 377 mostram aqua como cor substituta, mas eu mudei
para azul marinho abaixo porque o texto branco será mais fácil de ler em um fundo azul marinho */.
.angle-bot-rt {
plano de fundo: marinha; /* substituto */
plano de fundo: gradiente linear (canto inferior direito, água, marinho);
}
.ângulo-bot-lt {
plano de fundo: marinha; /* substituto */
plano de fundo: gradiente linear (canto inferior esquerdo, água, marinho);
}
.ângulo-topo-rt {
plano de fundo: marinha; /* substituto */
plano de fundo: gradiente linear (canto superior direito, água, marinho);
}
.ângulo-top-lt {
plano de fundo: marinha; /* substituto */
plano de fundo: gradiente linear (canto superior esquerdo, água, marinho);
}
/* :::: Ângulos via Graus :::: */
.ângulo-120deg {
plano de fundo: marinha; /* substituto */
plano de fundo: gradiente linear (120 graus, água, marinho);
}
.ângulo-290deg {
plano de fundo: marinha; /* substituto */
plano de fundo: gradiente linear (290 graus, água, marinho);
}
/* GRADIENTES RADIAIS
------------------------------------------ */
/* :::: Radial :::: */
.radial p {
sombra de texto: 0 0 3px #000;
}
.centro radial {
fundo: vermelho; /* substituto */
fundo: gradiente radial(amarelo, vermelho); /* padrão */
}
.radial-top {
fundo: vermelho; /* substituto */
fundo: gradiente radial (no topo, amarelo, vermelho);
}
.tamanho radial-1 {
fundo: vermelho; /* substituto */
fundo: gradiente radial (100px 50px, amarelo, vermelho);
}
.tamanho radial-2 {
fundo: vermelho; /* substituto */
fundo: gradiente radial (70% 90% no canto inferior esquerdo, amarelo, vermelho);
}
.radial-vários-1 {
fundo: vermelho; /* substituto */
plano de fundo: gradiente radial (lado mais próximo em 70px 60px, amarelo, limão, vermelho);
}
.radial-vários-2 {
fundo: vermelho; /* substituto */
plano de fundo: gradiente radial (30px 30px em 65% 70%, amarelo, limão, vermelho);
}
/* GRADIENTES LINEARES COM PARADAS DE COR
------------------------------------------ */
.color-stops div {
margem inferior: 30px;
}
.cor-paradas p {
preenchimento superior: 25px;
sombra de texto: 0 0 3px #000;
}
.color-stops-2 p {
tamanho da fonte: 18px;
altura da linha: 1,05;
}
.color-stops-1 {
fundo: verde; /* substituto */
fundo: gradiente linear (amarelo 10%, verde);
}
.cor-paradas-2 {
fundo: verde; /* substituto */
plano de fundo: gradiente linear (canto superior direito, amarelo, verde 70%, azul);
} Insira background: color ou background-color: color , onde color pode ser um número hexadecimal, valor RGB ou qualquer outro nome de cor compatível. É melhor não usar valores RGBA, HSL ou HSLA como cores de fundo substitutas (não se preocupe se você não planeja oferecer suporte ao IE), porque o IE8 e versões anteriores não oferecem suporte.
background: linear-gradient( . Se quiser que a direção do gradiente seja de cima para baixo (a direção padrão), você pode pular esta etapa. Adicione uma vírgula após a direção de entrada, e as direções referem to top , to right , to bottom right , to top right , etc. Ou adicione uma vírgula após a direção de entrada, onde a direção se refere ao valor do ângulo (como 45deg , 107deg , etc.) Defina a cor do gradiente de acordo com a "cor especificada" mencionada posteriormente );background: radial-gradient( . Especifique a forma do gradiente. Se desejar especificar o tamanho, você mesmo pode determiná-lo com base no tamanho especificado na terceira etapa. Caso contrário, insira circle ou ellipse . Especifique o tamanho do gradiente Se você deseja que o tamanho seja o valor especificado automaticamente (o valor padrão é ·canto mais distante·, o canto mais distante), caso contrário, insira um valor de comprimento representando a largura e a altura do gradiente (como 200px ou 7em ) ou um valor. par de valores representando a largura e a altura ( 390px 175px ou 60% 85% ) Observe que se apenas um valor for usado, o valor não pode ser uma porcentagem ou inserir closest-side , farthest-side , closest-corner ou farthest-corner . Essas palavras-chave representam até que at top o gradiente pode se estender em relação ao seu centro. Os limites determinam o tamanho do gradiente at right Você pode pular esta etapa se quiser que o gradiente comece no centro do elemento. at bottom left , at top right , etc. para representar o valor da posição central do gradiente ou insira um par de coordenadas representando a posição central do gradiente, começando com at , como at 200px 43px , at 30% 40% , at 50% -10px , etc. Defina a cor do gradiente ); Use o atributo opacity para modificar a transparência de um elemento. O método consiste em inserir opacity: x , onde x representa a opacidade do elemento (duas casas decimais, sem unidade).
O valor padrão de opacity é 1 (completamente opaco) e o intervalo é 0~1 .
Usando o atributo opacity e o pseudoatributo :hover , você pode produzir alguns efeitos interessantes e práticos. Por exemplo, img { opacity: .75; } pode definir a imagem com 75% de opacidade por padrão img:hover { opacity: 1; } pode fazer com que o elemento fique opaco quando o usuário passa o mouse sobre ele. Este efeito é frequentemente visto ao vincular miniaturas a versões em tamanho real. Para os visitantes, a levitação potencializa o movimento da imagem.
O atributo opacity e a cor de fundo transparente definida usando RGBA ou HSLA são dois conceitos que são facilmente confundidos. opacity afeta todo o elemento (incluindo seu conteúdo), enquanto background-color: rgba(128,0,64,.6);
Usar :before e :after é uma ótima maneira de adicionar alguns efeitos de design incríveis às suas páginas. Eles podem ser combinados com o atributo content para criar o chamado conteúdo gerado. Conteúdo gerado refere-se ao conteúdo criado por meio de CSS em vez de HTML.
... <p>Esta área é um dos espaços mais tranquilos da Villa Enquanto eu vagava, aproveitando a sombra proporcionada pelos plátanos e loureiros e serenata pelos respingos de água de duas fontes esculturais, não pude deixar de pensar … href="victoria.html" class="more">Leia mais</a></p> ...
/* O conteúdo gerado */
.mais:depois {
contente: " "";
} Através do código acima, o elemento com class="more" pode exibir uma seta dupla após ele. Se precisar ser alterado no futuro, você só precisa modificar a classe .more sem alterar um grande número de páginas HTML.
O texto é exibido rapidamente no navegador, mas as imagens tendem a retardar o carregamento da página. Para resolver esse problema, você pode combinar diversas imagens em uma única imagem de fundo ( sprite ), e então controlar qual parte da imagem é exibida através de CSS, usando o atributo background-position .
.documentos li {
margem superior: 0,45em;
}
/* Cada link no HTML possui esta classe */
.ícone {
display: bloco embutido;
altura da linha: 1,1;
tamanho da fonte: .875em;
min-height: 16px /* define a altura do ícone para que ele não seja cortado */
preenchimento à esquerda: 23px;
preenchimento superior: 2px;
/* permite posicionar o ícone absolutamente relativo aos elementos com class="icon" no HTML */
posição: relativa;
}
.icon:antes {
imagem de fundo: url(../img/sprite.png);
contente: " ";
exibição: bloco;
altura: 16px; /* altura do ícone */
left: 0; /* default altere isto se quiser que o ícone apareça em um local diferente */
posição: absoluta;
largura: 16px; /* largura do ícone */
top: 0; /* default altere isso se quiser que o ícone apareça em um local diferente */
}
/* Muda a posição da imagem sprite para qualquer nome de arquivo de documento que termine com .xls */
a[href$=".xls"]:antes {
posição de fundo: -17px 0;
}
/* Muda a posição da imagem sprite para qualquer nome de arquivo de documento que termine com .docx */
a[href$=".docx"]:antes {
posição de fundo: -34px 0;
} sprite podem ser aplicados a qualquer número de elementos. No exemplo acima, use .icon:before para obter o efeito desejado. Desta forma, sprite é a imagem de fundo do espaço gerado pelo content: " "; Configure-o para display: block; para que você possa definir a altura e a largura para corresponder ao tamanho do ícone. Sem essas três propriedades a imagem não será exibida. Usando background-position você pode colocar o ícone correto nessa posição.
Isso conclui este artigo sobre o uso de CSS3 para aprimorar efeitos de estilo. Para obter mais informações sobre o aprimoramento de efeitos de estilo CSS3, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo.