Como criar o logotipo do feed RSS com CSS3
RSS feed logo é um dos logotipos mais utilizados em web design, devido à função que se refere. Você viu muitos tutoriais sobre como desenhar o logotipo do feed RSS usando softwares gráficos como o Photoshop, mas que tal desenhando puramente usando CSS3? Sim, você me ouviu :-)
Nesta oportunidade, gostaria de mostrar a você a maneira fácil de criar um logotipo de feed RSS padrão com apenas CSS3, portanto, siga o tutorial com etapas e gráficos abrangentes para obter seu primeiro logotipo de feed CSS3.!
Aqui está uma prévia do que você estará criando em um minuto. Você também pode baixar os arquivos de origem no final do tutorial.
Passo 1
Crie um arquivo HTML, insira o seguinte código no arquivo, se estiver completamente vazio.
Meu primeiro CSS3 RSS Feed Logo - Insira seu HTML aqui -
Passo 2
Insira o código abaixo no arquivo HTML para criar uma caixa de feed.
HTML para caixa de feed
CSS para caixa de feed
span.feed-box display: bloco; largura: 200px; altura: 200 px; margem: 0 auto; fundo: # F9A004; box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -webkit-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-border-radius: 20px; -webkit-border-radius: 20 px; raio de fronteira: 20 px; span.feed-box * float: certo; display: bloco;
Este é o resultado que você alcançará:
etapa 3
Nós estaremos desenhando outra caixa que está localizada dentro da primeira caixa de alimentação, então coloque o código HTML abaixo no código HTML da primeira caixa de alimentação. Nós também vamos adicionar fronteira como barreira aqui.
HTML para caixa de alimentação menor
CSS para caixa de alimentação menor
span.feed-box .feed-box-in borda: 4px sólido # FFC563; Largura: 184px; altura: 184 px; margem: 4 px 4 px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20 px; raio de fronteira: 20 px; / * estouro: oculto; * /
Este é o resultado que você alcançará:
Passo 4
Nesta etapa, faremos 1/4 de círculo grande. Coloque o código HTML de 1/4 de círculo grande no código HTML da caixa de alimentação menor, e abaixo está seu código:
HTML para 1/4 Big Circle
CSS para 1/4 Big Circle
span.feed-box .feed-box-in. feed-quarter-circle-big margem: 16px 16px 0 0; Largura: 260px; altura: 260 px; borda: 30px sólido # FFDEA5; -moz-border-radius: 260 px; -webkit-border-radius: 260 px; raio de fronteira: 260 px;
Este é o resultado que você alcançará:
Passo 5
Nós faremos o pequeno círculo de 1/4 agora, coloque o código HTML abaixo no código HTML do grande círculo.
HTML para 1/4 Small Circle
CSS para 1/4 Small Circle
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margem: 16px 16px 0 0; largura: 176 px; altura: 176 px; borda: 26px sólido # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176 px; border-radius: 176px
Este é o resultado que você alcançará:
Passo 6
Na etapa 6, o círculo menor será criado dentro do círculo pequeno, portanto, coloque seu código HTML no código HTML do círculo pequeno.
HTML para o menor círculo
CSS para o menor círculo
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle margem: 24px 24px 0 0; fundo: # FFDEA5; largura: 70px; altura: 70 px; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px
Este é o resultado que você alcançará:
Toque final
Pesquise o código, / * estouro: oculto; * / então substitua por este código, estouro: oculto;, então sim! Você acabou de obter um logotipo de RSS Feed CSS3!
Bônus: Adicionar Efeito Hover
Você não vai querer o seu logotipo de feed RSS sem efeito mágico hover, você faria? Basta adicionar o estilo CSS abaixo para alcançá-lo!
CSS para Efeito Hover
span.feed-box: hover background: # 07C103; box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -moz-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; span.feed-box: hover .feed-box-em border-color: # 58FC55; span.feed-box: pairar .feed-box-in .feed-quarter-circle-grande, span.feed-box: pairar .feed-box-in .feed-quarter-circle-grande .feed-quarter-circle -small border-color: # B9FFB7; span.feed-box: pairar .feed-box-in .feed-quarter-circle-grande .feed-quarter-circle-small .feed-circle fundo: # B9FFB7;
Visualizações e Downloads
Aqui estão as visualizações do logotipo do feed CSS3 em tamanhos variados e um estilo diferente. Se você não consegue realizar um certo passo, você pode baixar os arquivos de origem também.
- Visualizar o logo RSS da CSS3 (ampla)
- Visualizar o logo RSS da CSS3 (médio)
- Visualizar o logo RSS da CSS3 (pequeno)
- Visualizar o logo RSS da CSS3 (médio, invertido)
- Faça o download dos arquivos de origem do logotipo CSS3 RSS (.fecho eclair)
Nota do editor: Este post foi escrito por Irham Kendeni para Hongkiat.com. Irham, também conhecido como Indaam, é um web designer e desenvolvedor da Indonésia. Ele também ama o desenvolvimento de temas CSS e WordPress.
