Article Html Efeito Hover Css
5 Botões Css com Linhas Animadas
Article Html Efeito Hover Css
Neste artigo vamos criar Article Html com Efeito Hover estilizado com Css. ao passar o mouse sobre o elemento html article as animações inicia conforme programado e estilizado nos Códigos Css de cada item no html.
Estrutura Base que vamos usar no projeto!
A estrutura base do nosso pequeno projeto para projetar o Article html vai ser composta por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css
Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.
Nesta seção, projetaremos uma estrutura simples nas tags <article>, <div>, <h3>, <p> e a tag <a> para inserirmos o link de destino.
Essas tags que usaremos para criar os Article Html Efeito Hover Css.
A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.
Nesta seção, usaremos algumas as tags HTML para montar a estrutura dos articles.
Estrutura Código Html:
<div class="box-artigos">
<article class="artigo-1">
<div class="circlepic"></div>
<div class="circleborder">
<i class="artigoIcon icon icon-html5"></i>
</div>
<h3>Html</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#" class="verMais">Saiba mais...</a>
</article><!--1-->
<article class="artigo-2">
<div class="circlepic"></div>
<div class="circleborder">
<i class="artigoIcon icon icon-css3"></i>
</div>
<h3>Css</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#" class="verMais">Saiba mais...</a>
</article><!--2-->
<article class="artigo-3">
<div class="circlepic"></div>
<div class="circleborder">
<i class="artigoIcon icon icon-wordpress"></i>
</div>
<h3>WordPess</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#" class="verMais">Saiba mais...</a>
</articlev><!--3-->
</div> Estrutura Código CSS
Para conseguirmos o efeito desejado nos Articles, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.
Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.
Nesta seção, usaremos algumas propriedades CSS para estilizar os Articles com o efeito desejado.
.box-artigos {
width: 100%;
height: auto;
float: left;
}
.artigo-1 {
display: inline-block;
width:100%;
height: 100%;
float: left;
background: #363636;
text-align: center;
transition: all 0.25s;
padding-bottom: 30px;
border-radius:10px;
margin-bottom: 20px;
}
.artigo-2 {
display: inline-block;
width:100%;
height: 100%;
float: left;
background: #363636;
text-align: center;
transition: all 0.25s;
padding-bottom: 30px;
border-radius:10px;
margin-bottom: 20px;
}
.artigo-3 {
display: inline-block;
width:100%;
height: 100%;
float: left;
background: #363636;
text-align: center;
transition: all 0.25s;
padding-bottom: 30px;
border-radius:10px;
margin-bottom: 20px;
}
.artigo-1:hover { background: #007cff; }
.artigo-1:hover .circlepic { background: #5c5c5c; }
.artigo-1:hover .circleborder { background: #333333; }
.box-artigos h3 {
width: 100%;
font-size: 25px;
font-weight: bold;
margin: 180px 0 auto;
text-align: center;
color: #fff;
}
.box-artigos p {
width: 100%;
text-align: center;
margin-top: 10px;
font-size: 16px;
color: #fff;
padding: 0 15px;
line-height: 30px;
}
.box-artigos .verMais {
color: #202020;
text-decoration: none;
background-color: #007cff;
display: inline-block;
padding: 10px 15px;
border-radius: 6px;
margin: 15px 0 auto;
}
.box-artigos .artigoIcon {
width: 90px;
height: 90px;
display: grid;
text-align: center;
font-size: 42px;
color: #fff;
background: transparent;
border-radius: 50px;
align-content: center;
}
.artigo-1:hover h3 { color: #2b2b2b; }
.artigo-1:hover .verMais { color: #ffffff; background-color: #2b2b2b; }
.artigo-2:hover h3 { color: #2b2b2b; }
.artigo-2:hover .verMais { color: #ffffff; background-color: #2b2b2b; }
.artigo-3:hover h3 { color: #2b2b2b; }
.artigo-3:hover .verMais { color: #ffffff; background-color: #2b2b2b; }
.artigo-3:hover articleIcon { color: #2b2b2b; }
.artigo-1:hover .artigoIcon, .artigo-2:hover .artigoIcon, .artigo-3:hover .artigoIcon {
transition: all 0.65s;
transform: rotateY(360deg);
}
.artigo-1:hover { background: #007cff; }
.artigo-1:hover .circleborder{ background: #2b2b2b; }
.artigo-2:hover { background: #007cff; }
.artigo-2:hover .circleborder{ background: #2b2b2b; }
.artigo-3:hover { background: #007cff; }
.artigo-3:hover .circleborder{ background: #2b2b2b; }
.circleborder {
width: 90px;
height: 90px;
background: transparent;
margin: -150px auto;
border-radius: 50%;
}
.circlepic {
margin: 50px auto;
width: 110px;
height: 110px;
background: #5c5c5c;
border-radius: 50%;
}
/*768PX BREAKPOINT*/
/*768 dividido por 16 = 48em*/
@media (min-width:48em){
.artigo-1 { width:32%; margin-bottom:0; margin-right:2%; }
.artigo-2 { width:32%; margin-bottom:0; margin-right:2%; }
.artigo-3 { width:32%; margin-bottom:0; }
}Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Article Html Efeito Hover Css
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como estilizar Article html com Css.
existem diversas formas de estilizar o html article com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
Deixe um comentário