Como fazer degradê, círculos e animações com CSS3

Aprenda a trabalhar com CSS3 de forma surpreendente. Faça degradê, animações, círculos e etc somente com CSS. Deixe seu site bem mais rápido e eficiente.

O site é como ganhar dinheiro na internet, porém você precisa desenvolver seus projetos com um layout atrativo para seus visitantes. Sem uma boa camada de apresentação seu negócio não passa muita confiança para os visitantes e as conversões acabam não sendo tão altas quanto deveriam.

Vou passar duas dicas que deixarão seus projetos bem interessantes e sexy. O CSS3 possui funcionalidades incríveis e você pode aproveitar cada função a seu favor. Evitando até mesmo incluir imagens e deixando seu site mais lento do que deveria.

CSS3 - Dicas

CSS3 – Dicas

Animações Loading com CSS3

Carregando…

Lembre-se de alterar os parâmetros do CSS para você testar como funciona, o que funciona e tentar futuramente adaptar o código a sua necessidade.

Como foi feito? Segue o código CSS abaixo.

.loader1 {
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 0.8em auto;
  position: relative;
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
background-color:#267FCF;
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.11em -0.83em 0 -0.42em #9BB6CF, -0.11em -0.83em 0 -0.44em #9BB6CF, -0.11em -0.83em 0 -0.46em #9BB6CF, -0.11em -0.83em 0 -0.477em #9BB6CF;
  }
  5%,
  95% {
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.11em -0.83em 0 -0.42em #9BB6CF, -0.11em -0.83em 0 -0.44em #9BB6CF, -0.11em -0.83em 0 -0.46em #9BB6CF, -0.11em -0.83em 0 -0.477em #9BB6CF;
  }
  30% {
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.51em -0.66em 0 -0.42em #9BB6CF, -0.75em -0.36em 0 -0.44em #9BB6CF, -0.83em -0.03em 0 -0.46em #9BB6CF, -0.81em 0.21em 0 -0.477em #9BB6CF;
  }
  55% {
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.29em -0.78em 0 -0.42em #9BB6CF, -0.43em -0.72em 0 -0.44em #9BB6CF, -0.52em -0.65em 0 -0.46em #9BB6CF, -0.57em -0.61em 0 -0.477em #9BB6CF;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.11em -0.83em 0 -0.42em #9BB6CF, -0.11em -0.83em 0 -0.44em #9BB6CF, -0.11em -0.83em 0 -0.46em #9BB6CF, -0.11em -0.83em 0 -0.477em #9BB6CF;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.11em -0.83em 0 -0.42em #9BB6CF, -0.11em -0.83em 0 -0.44em #9BB6CF, -0.11em -0.83em 0 -0.46em #9BB6CF, -0.11em -0.83em 0 -0.477em #9BB6CF;
  }
  5%,
  95% {
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.11em -0.83em 0 -0.42em #9BB6CF, -0.11em -0.83em 0 -0.44em #9BB6CF, -0.11em -0.83em 0 -0.46em #9BB6CF, -0.11em -0.83em 0 -0.477em #9BB6CF;
  }
  30% {
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.51em -0.66em 0 -0.42em #9BB6CF, -0.75em -0.36em 0 -0.44em #9BB6CF, -0.83em -0.03em 0 -0.46em #9BB6CF, -0.81em 0.21em 0 -0.477em #9BB6CF;
  }
  55% {
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.29em -0.78em 0 -0.42em #9BB6CF, -0.43em -0.72em 0 -0.44em #9BB6CF, -0.52em -0.65em 0 -0.46em #9BB6CF, -0.57em -0.61em 0 -0.477em #9BB6CF;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: -0.11em -0.83em 0 -0.4em #9BB6CF, -0.11em -0.83em 0 -0.42em #9BB6CF, -0.11em -0.83em 0 -0.44em #9BB6CF, -0.11em -0.83em 0 -0.46em #9BB6CF, -0.11em -0.83em 0 -0.477em #9BB6CF;
  }
}

Para colocá-lo em ação basta incluir o código html na página:

<div class="loader1">Carregando...</div>

Muito interessante não é? Você pode ver este e outros exemplos de animação loading com CSS3 neste link.

Degradê com CSS3

O degradê dá sempre um ar mais sofisticado a seus blocos de informações. Muita gente ainda utiliza imagens para fazer este efeito e as colocam como background do site. Isso também faz com que o site perca performance e velocidade.

Degradê circular:

Como fazer o Degradê cirular:

#degrade_circular{
	background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
	background-image: -o-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
	background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
	background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
	background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
position:relative;
float:left;
height:250px;
width:100%;

Degradê Elíptico:

Código CSS do degradê elíptico:

#degrade_eliptico{
        background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
	background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
	background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
	background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
	background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
position:relative;
float:left;
height:250px;
width:100%;
}

Círculos em CSS3

Os círculos são bastante úteis para qualquer projeto web. Podem servir para “N” coisas. Não preciso dar exemplos de utilização né? rs.

Vamos aos finalmentes:

Como fazer o círculo:

/* Create the animation blocks */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
/* Spinning, gradient circle; CSS only! */
#advanced {
	width: 200px;
	height: 200px;
	
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	
	animation-name: spin; 
	animation-duration: 3s; /* 3 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}
.circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* width and height can be anything, as long as they're equal */
}

E para inserir ele na página, faça a chamada html:

<div class="circle" id="advanced"></div>

Esta ainda veio com bônus. Círculo com degradê. Você também pode fazer animações no círculo, mas não vou falar disso aqui senão o post vai ficar muito grande.

Se quiser ver algo mais aprofundado sobre isso acesse o site do David Walsh que é um crânio de desenvolvimento Web.

Enfim, esta página está cheia de estilos on-page e dificilmente será indexada com boa posição no google, rs. Então se você estiver lendo isso e tiver sido útil, comente e compartilhe nas redes sociais.

Aliás, isto é outra coisa que irei abordar em tópicos futuros. O que você pode ou não fazer no código HTML em termos de SEO, semântica e etc. Até!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *