Recentemente, eu estava redesenhando meu próprio blog e decidi usar um ícone no estilo calendário para exibir o tempo. A solução anterior era geralmente usar imagens de fundo. Graças ao CSS3, agora podemos implementar essas funções usando o CSS3. Usarei algumas propriedades, como grades lineares, raio de borda e sombra da caixa para substituir o design anterior do Photoshop.
Diagrama de conceito do PhotoshopMuitos designers usam o método de projetar diretamente no navegador, mas ainda prefiro o método de fazer diagramas de conceito de photoshop primeiro. Embora muitos efeitos possam ser implementados diretamente com o CSS agora, a maneira de projetar efeitos com o Photoshop é muito mais simples do que a maneira de tentar constantemente modificar o CSS para finalmente alcançar o efeito que você deseja.
Primeiro, crie um retângulo arredondado e defina o raio do canto arredondado para 10px. Depois disso, usaremos a propriedade do Radio de Fronteira do CSS.
Adicione um gradiente vertical ao retângulo, a cor do gradiente é de #dad8d8 a #fcfcfc.
Defina um golpe de 1 pixels, a cor é #e3e3e3
Finalmente, adicione um efeito de sombra descendente com 20% de transparência, uma distância de 0 pixels e um tamanho de 15 pixels. Esses efeitos serão implementados no CSS usando a propriedade Shadow Box.
Copie o retângulo agora e remova a parte superior. Modifique o gradiente, a cor de #790909 para #D40000, preencha o retângulo recém -criado, que colocará as informações do mês.
Defina uma sombra interna para representar a borda superior, a cor é #A13838, 100% de transparência, distância de 3px e tamanho de 0px.
Use a ferramenta de fonte do Photoshop para definir o efeito da fonte da primeira metade do ícone do calendário. A fonte é Helvetica e a cor é #9E9E9E.
Digite as informações do mês na seção vermelha abaixo, defina a fonte como larga e a cor como branca.
O modelo do Photoshop está concluído. No passado, tirávamos a foto como plano de fundo e escrevíamos os números HTML nela, mas agora tudo isso pode ser alcançado com o CSS.
Estrutura HTML<div class = date>
<p> 25 <span> pode </span> </p>
</div>
Desta vez, o HTML da Demo Icon é muito simples. Usaremos uma div com a classe 'data' como contêiner e, em seguida, usaremos uma tag P para representar o número da data. Dias e meses são representados por tamanhos diferentes em nosso design, por isso usaremos tags <span> para tratar diferentes elementos de maneira diferente.
estilo CSS.data {
Largura: 130px; Altura: 160px;
Antecedentes: #fcfcfc;
Antecedentes: gradiente linear (superior, #fcfcfc 0%, #dad8d8 100%);
Antecedentes: -Moz-linear-gradiente (topo, #fcfcfc 0%, #dad8d8 100%);
Antecedentes: -Webkit-linear-gradiente (topo, #fcfcfc 0%, #dad8d8 100%);
}
O estilo CSS define primeiro a altura e a largura de todo o recipiente, e o efeito do gradiente pode ser facilmente alcançado através do gradiente CSS.
.data {
Largura: 130px; Altura: 160px;
Antecedentes: #fcfcfc;
Antecedentes: gradiente linear (superior, #fcfcfc 0%, #dad8d8 100%);
Antecedentes: -Moz-linear-gradiente (topo, #fcfcfc 0%, #dad8d8 100%);
Antecedentes: -Webkit-linear-gradiente (topo, #fcfcfc 0%, #dad8d8 100%);
borda: 1px sólido #d2d2d2;
Radio de fronteira: 10px;
-Moz-Border-Radius: 10px;
-Webkit-Border-Radius: 10px;
}
Use o atributo de fronteira para obter o efeito de borda de 1px no Photoshop e, em seguida, use-Radius de borda para obter o efeito de canto arredondado. Não se esqueça de adicionar prefixos -moz- e -webkit- para permitir a compatibilidade com os navegadores mais antigos.
.data {
Largura: 130px; Altura: 160px;
Antecedentes: #fcfcfc;
Antecedentes: gradiente linear (superior, #fcfcfc 0%, #dad8d8 100%);
Antecedentes: -Moz-linear-gradiente (topo, #fcfcfc 0%, #dad8d8 100%);
Antecedentes: -Webkit-linear-gradiente (topo, #fcfcfc 0%, #dad8d8 100%);
borda: 1px sólido #d2d2d2;
Radio de fronteira: 10px;
-Moz-Border-Radius: 10px;
-Webkit-Border-Radius: 10px;
Box-Shadow: 0px 0px 15px rgba (0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba (0,0,0,0,1);
-Webkit-box-shadow: 0px 0px 15px rgba (0,0,0,0.1);
}
A última parte do código é alcançar o menor efeito de sombra no design do Photoshop através da Shadow Box. Adicione 0px compensações horizontais e verticais para aumentar a ambiguidade de 15px. Use RGBA para controlar a transparência. No design do Photoshop, 105 é substituído por 0,1 aqui.
.Date p {
Fonte-família: Helvetica, sem serrif;
Size da fonte: 100px; Alinhamento de texto: centro; Cor: #9E9E9E;
}
Usamos a tag P para definir estilos para definir estilos de texto para datas. A fonte, o tamanho do texto e a cor do texto são todos copiados do Photoshop e o alinhamento de texto está definido como centro. Mas o estilo também afeta o texto do mês, e definiremos o estilo de rótulo do Span para ele separadamente.
.Date p span {
Antecedentes: #D10000;
Antecedentes: gradiente linear (superior, #d10000 0%, #7A0909 100%);
Antecedentes: -Moz-linear-gradiente (topo, #D10000 0%, #7A0909 100%);
Antecedentes: -Webkit-linear-gradiente (topo, #D10000 0%, #7A0909 100%);
}
A implementação da parte vermelha é alcançada definindo o atributo de gradiente linear para o plano de fundo do intervalo, e o valor vermelho também vem do Photoshop.
.Date p span {
Antecedentes: #D10000;
Antecedentes: gradiente linear (superior, #d10000 0%, #7A0909 100%);
Antecedentes: -Moz-linear-gradiente (topo, #D10000 0%, #7A0909 100%);
Antecedentes: -Webkit-linear-gradiente (topo, #D10000 0%, #7A0909 100%);
Size da fonte: 45px; Peso da fonte: negrito; Cor: #ffff; TRANSFORMA DE TEXTO: OUPERCASE;
exibição: bloco;
}
Modifique o estilo de texto para corresponder ao design, defina o tamanho para 45px, defina-o como uma fonte em negrito, defina a cor como branca e use a transformação de texto para implementar a conversão de capital. Defina a tag Span no elemento de bloco para corresponder ao tamanho do contêiner e defina um fundo vermelho.
.Date p span {
Antecedentes: #D10000;
Antecedentes: gradiente linear (superior, #d10000 0%, #7A0909 100%);
Antecedentes: -Moz-linear-gradiente (topo, #D10000 0%, #7A0909 100%);
Antecedentes: -Webkit-linear-gradiente (topo, #D10000 0%, #7A0909 100%);
Size da fonte: 45px; Peso da fonte: negrito; Cor: #ffff; TRANSFORMA DE TEXTO: OUPERCASE;
exibição: bloco;
Top de borda: 3px Solid #A13838;
Radio de fronteira: 0 0 10px 10px;
-Moz-Border-Radius: 0 0 10px 10px;
-Webkit-Border-Radius: 0 0 10px 10px;
preenchimento: 6px 0 6px 0;
}
O restante é adicionar a borda da cabeça, usar o estilo de borda para implementá-lo e usar o atributo Radius de fronteira para implementar os dois cantos arredondados na parte inferior. Um pequeno atributo de preenchimento pode fazer com que o texto tenha algum espaçamento entre os elementos para cima e para baixo e outros.
Compatibilidade do navegadorEmbora as propriedades aprimoradas do CSS possam nos ajudar a alcançar os efeitos de gradientes e sombras no Photoshop, ainda precisamos enfrentar os problemas que os web designers tiveram que enfrentar no passado, compatibilidade do navegador.