Recomendação de Sites #1
Autor: Alan Felipe | Publicado: 2016-10-18T20:13:00-02:00


Olá! Estou bem, e vocês? Sim sim, algum tempo parado. O We Heart HTML é uma ótima fonte de conhecimento para quem tem como objetivo conhecer um pouco sobre HTML e CSS ou apenas quer decorar seu blog. Mas como sei que nem tudo que vocês procurão vai estar disponível aqui, trouxe uma postagem que irá auxiliar vocês a encontrarem o que procuram: uma recomendação de sites que me ajudaram e que com certeza irão ajudar você!




Border Radius Visitar
Border Radius
Simples, rápido e prático, são as palavras que podem descrever este site. Ele prepara o seu código para ter bordas arredondadas em qualquer navegador, tudo que você precisa é inserir um valor, e pronto, seu código está pronto, você só precisa copiá-lo.


Unsplash Visitar
Unsplash
Completamente grátis. Imagens em qualidade incrivelmente boa, grátis e de qualquer tipo! O site reune fotos de diversos fotógrafos ao redor do mundo, que disponibilizaram seus materiais para o site, deixando eles completamente sem qualquer tipo de custo. O site além de reunir fotos dos mais variados tipos, faz eventualmente coleções com fotografias que aparentam ter o mesmo tema.


Colour Lovers Visitar
Colour Lovers
Funcionando em forma de 'fórum', os participantes do site se inscrevem e podem ter acesso completo a todos os materiais, que são disponibilizados tanto pela equipe do site quando pelos usuários. O site conta com um acervo de paletas, backgrounds, pattners e diversas outras coisas!


Hello Color Visitar

Hello Color
Trabalhando com aleatoriedade e contrastes, Hello Color lhe apresenta os melhores contrastes para usar em seus projetos!


Codecademy Visitar

Codecademy
Novo no mundo do HTML e do CSS? Codecademy é sem dúvida o melhor lugar em que você pode ter um curso gratuito de sobre! Ele oferece diversas aulas, explica detalhadamente cada código, como ele funciona e quando você deve usar, além de todas as aulas serem práticas: você aprende e texta. São feitas revisões e testes sobre os assuntos, você só aprende coisas novas se dominar o que já foi visto.


Coolors Visitar
Coolors
Gerador online de paletas de cores. Nele, além de gerar uma paleta maravilhosa do nada, é possível ver as propriedades das cores, alterá-las para ver como ficariam em outras tonalidades e diversas outras funções!


DaFont Visitar
DaFont
Fontes grátis. DaFont reune o trabalho de diversos designers que disponibilazam suas criações online para você baixá-las! O site apresenta diversas categorias e os mais variados tipos de fontes, e o melhor de tudo: grátis.


CSS 3.0 MAKER Visitar
CSS 3.0 MAKER
A criação de efeitos em CSS vem se tornando cada vez mais presente no dia a dia de quem usa a internet. Como a junção de códigos ou até mesmo decorá-los é algo quase impossível, o CSS 3.0 MAKER reuniu em um só lugar os principais efeitos que você pode fazer utilizando CSS e criou um gerador, em que você pode efitar e copiar o código final para usar onde quiser!


Flaticon Visitar
Flaticon
Um dos melhores lugares online onde você pode conseguir os mais variados tipos de íncones gratiutos. Não esqueça de dar os créditos aos criadores!


Google Fonts Visitar
Google Fonts
Fontes gratuitas, para serem usadas tanto online ou para download. Acervo de fontes do Google, com os mais variados tipos e estilos.


recname { 
display: inline-block; position: absolute;
z-index: 9999;
background: rgba(0,0,0,0.5);
color: white;
padding: 5px 10px 5px 10px;
margin-top: 160px;
}

vis { 
display: inline-block; position: absolute;
z-index: 9999;
background: rgba(0,0,0,0.5);
color: white;
padding: 5px 10px 5px 5px;
margin-top: 160px;
right: 0%;
-webkit-transition: all 0.3s;
moz-transition: all 0.3s;
transition: all 0.3s;
}
vis:hover {
-webkit-transition: all 0.3s;
moz-transition: all 0.3s;
transition: all 0.3s;
background: rgba(0,0,0,0.8);
}

vis img { opacity: 0; width: 0px; -webkit-transition: all 0.3s;
moz-transition: all 0.3s;
transition: all 0.3s; }
vis:hover img { opacity: 1; width: 10px; margin-right: 5px; margin-left: 5px; -webkit-transition: all 0.3s;
moz-transition: all 0.3s;
transition: all 0.3s;}


.rec1 { display: block; position: static;
width: 100%;
height: 200px;
margin: 10px 0 10px 0;
background: url("http://i.imgur.com/v7iiW5L.png") center no-repeat #3a3b3a;
box-shadow: 0 0 3px #ccc;
}

.rec2 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/nYLOPvK.png") center;
box-shadow: 0 0 3px #ccc;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}

.rec3 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/tBjpk6n.png") center;
box-shadow: 0 0 3px #ccc;
}

.rec4 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/R8USYEM.png") center no-repeat #e9322b;
box-shadow: 0 0 3px #ccc;
-moz-background-size: 70% auto;
-webkit-background-size: 70% auto;
background-size: 70% auto;
}

.rec5 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/vdRPraz.png") center;
box-shadow: 0 0 3px #ccc;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}

.rec6 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/wUBrdfO.png") center;
box-shadow: 0 0 3px #ccc;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}

.rec7 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/bvM3nUv.png") center;
box-shadow: 0 0 3px #ccc;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}

.rec8 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/lgyvGmo.png") center;
box-shadow: 0 0 3px #ccc;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}

.rec9 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/2VHOiHh.png") center;
box-shadow: 0 0 3px #ccc;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}

.rec10 { display: block; position: static;
width: 100%;
height: 200px;
margin: 20px 0 10px 0;
background: url("http://i.imgur.com/W7u8Z2S.png") center;
box-shadow: 0 0 3px #ccc;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}