Ícones para Links
Algumas imagens em PNG para links. Todas são gratuitas e foram achadas aqui.
AnasAbdin
Aqua Utopia|海の底で記憶を紡ぐ

Product Placement
d e v o n

@theartofmadeline

Andulka
Show & Tell
Cosimo Galluzzi

TVSTRANGERTHINGS
trying on a metaphor

❣ Chile in a Photography ❣
One Nice Bug Per Day

JBB: An Artblog!
Sweet Seals For You, Always

★
wallacepolsom
🪼

Origami Around
Cosmic Funnies

seen from Türkiye
seen from Saudi Arabia
seen from United States

seen from China
seen from Romania

seen from United Kingdom

seen from Türkiye
seen from Türkiye
seen from United Kingdom
seen from Austria

seen from Indonesia

seen from Canada
seen from United States
seen from Pakistan

seen from Malaysia
seen from Argentina
seen from Bulgaria

seen from Bangladesh
seen from United States

seen from Türkiye
@cascading
Ícones para Links
Algumas imagens em PNG para links. Todas são gratuitas e foram achadas aqui.

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Ícones de Redes Sociais
Todos os icons a seguir foram achados no Google e são de licença free. Apenas os deixei em um lugar de fácil acesso.
Aqui tem apenas os de redes sociais principais, mas deixei os links de onde eu peguei os ícones para que vocês possam olhar os outros.
Pacote #01 (créditos)
Degradê em Elementos
As vezes pode vir a ser útil.
Exemplo
Podemos fazer um degradê de cores nos fundos de elementos. O código geral é:
background:linear-gradient(direção, cor 1, cor 2);
Podemos ter degradês com as seguintes direções:
to right: para a direita
to left: para a esquerda
to top: para cima
to bottom: para baixo
to top right: do canto inferior esquerdo para o superior direito
to top left: do canto inferior direito para o superior esquerdo
to bottom right: do canto superior esquerdo para o inferior direito
to bottom left: do canto superior esquerdo para o inferior direito
Basta inserir o código com a direção e cores desejadas na div onde o degradê é necessário ou criar
O degradê pode conter quantas cores você quiser, basta adicionar uma vírgula seguido do código da cor. No exemplo abaixo, o degradê está de acordo com o arco íris:
.deg4 {width:500px; height:50px; background:#eee; background:linear-gradient(to right,#9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FF7F00, #FF0000);}
Não se esqueça de adicionar também as variações de navegadores e também um background “default” para caso o navegador não suporte este efeito.
O código abaixo e suas variações são referentes ao primeiro exemplo.
background:#eee; background:linear-gradient(to right,#f29de8, #9ddaf2); background:-webkit-linear-gradient(to right,#f29de8, #9ddaf2); background:-o-linear-gradient(to right,#f29de8, #9ddaf2); background:-moz-linear-gradient(to right,#f29de8, #9ddaf2);
Espero que venha a ser útil, um dia!
Sombreados em Textos
Olá! Gosto muito de sombrear textos, dá um aspecto interessante.
Exemplo
O código abaixo pode ser inserido em qualquer div que contenha um texto:
text-shadow: 5px 3px 2px #696969;
Este código informa que a sombra do texto será posicionada 5 pixels para a direita, 3 pixels para baixo, será borrado 2 pixels e terá a cor cinza.
As variações dos pixels podem ser negativas para posicionar a sombra para a direita e para cima. Quanto maior o valor do último pixel, mais borrada a sombra ficará.
É possível inserir o sombreamento no hover dos textos e ainda criar mais sombras em um único texto, como no efeito 3D do exemplo. Neste caso, o código usado foi:
.texto4 {width:auto; height:auto; padding:5px; font-family:georgia; font-size:30px; font:#696969; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in;} .texto4:hover { text-shadow: -3px 0px #E86060, 3px 0px #54d2cb;}
Espero que seja útil!
Selecionar Elementos Específicos
Olá! Quando queremos selecionar apenas alguns elementos específicos de um menu, por exemplo, não é necessário criar uma nova div apenas para os elementos que você quer manipular.
Com a ajuda de uma pseudo-classe do tipo seletor, podemos selecionar apenas os elementos que queremos alterar.
Exemplo
No primeiro exemplo, temos uma div chamada .menu1, onde queremos selecionar apenas os links pares.
Lembrando que, por se tratar de links, utilizei a pseudo-class .menu1 a para que apenas os links desta div sejam manipulados, e não a div como um todo.
O código abaixo representa a div em que os links se encontrarão.
.menu1 {width:300px; height:auto; padding:5px; }
A parte abaixo representa apenas os links desta div, para isso utilizamos a letra a depois do nome da mesma.
.menu1 a {width:20px; height:20px; line-height:20px; padding:5px; margin:1px; background:#F4CCCC; display:inline-block; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in; color:#fff;}
O código abaixo representa os links pares.
.menu1 a:nth-child(even) {background:#e17e66;}
O código abaixo refere-se ao hover de todos os links.
.menu1 a:hover {opacity:.7}
Código inteiro:
.menu1 {width:300px; height:auto; padding:5px; } .menu1 a {width:20px; height:20px; line-height:20px; padding:5px; margin:1px; background:#F4CCCC; display:inline-block; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in; color:#fff;} .menu1 a:nth-child(even) {background:#e17e66;} .menu1 a:hover {opacity:.7}
Existem códigos para cada seleção:
Elementos Pares
.div:nth-child(even)
Elementos Ímpares
.div:nth-child(odd)
Primeiro Elemento
.div:first-child
Último Elemento
.div:last-child
Elemento N
.div:nth-child(n)
Três Primeiros Elementos
.div:nth-child(-n+3)
Três Últimos Elementos
.div:nth-last-child(-n+3)
Espero que seja útil!

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Primeira Letra ou Linha Diferente
Olá! As vezes, é legal deixar a primeira letra de uma frase ou uma palavra com outra fonte. Geralmente, títulos e quotes utilizam essa técnica.
Exemplo
Vamos supor que temos uma div para título que é assim:
.titulo {width:300px; height:auto; padding:10px; font-family:georgia; font-size:15px;}
Queremos que a primeira letra deste título seja maior, com outra fonte e de outra cor. Podemos adicionar uma div “filha” desta primeira, logo abaixo dela, ficando assim, utilizando :first-letter:
.titulo {width:300px; height:auto; padding:10px; font-family:georgia; font-size:15px;}
.titulo:first-letter {font-family:'Great Vibes', cursive; font-size:30px; color:#e17e66;}
Neste caso, apenas a primeira letra deste título ficará com a fonte Great Vibes, com o tamanho 30px e com a cor rosa.
Agora, queremos que a primeira linha de uma frase fique diferente. A div desta frase é a seguinte:
.quote2 {width:500px; height:auto; padding:10px; font-family:georgia; font-size:15px;}
Para que fique como queremos, basta adicionar a div filha :first-line.
.quote2 {width:500px; height:auto; padding:10px; font-family:georgia; font-size:15px;} .quote2:first-line {color:#e17e66;}
A primeira linha da frase ficará com a cor rosa.
Espero que ajude!
Propriedade Filter
Olá! Esta propriedade é ótima para imagens.
Exemplo
Existem 8 tipos desta propriedade, sendo eles:
Grayscale
Blur
Brightness
Contrast
Drop Shadow
Hue Rotation
Invert
Opacity
O corpo do código deste efeito está descrito abaixo. Deve-se colocar as adaptações para outros navegadores, como descrito no último parágrafo deste tutorial:
filter: [tipo](opção);
Basta adicionar o código descrito no exemplo no elemento em que se deseja o efeito.
Observação: É interessante inserir as propriedades de imagem, quando estas estão dentro de uma div qualquer, como no exemplo abaixo:
.div img {width; height; [...]; filter: [tipo](opção); }
(Lembrando que .div é o nome da sua div)
Espero que seja útil.
Propriedade Transform
Olá! A propriedade Transform, alinhado com hover e transição, dá um efeito bem legal.
Exemplo
Existem 5 tipos de transform:
Rotate (Rotação)
Translate (Movimento)
Scale (Escala, Zoom)
Matrix (”Torcido” complexo)
Skew (”Torcido”)
O corpo do código deste efeito está descrito abaixo. Deve-se colocar as adaptações para outros navegadores, como descrito no último parágrafo deste tutorial:
transform: [tipo](opção);
Basta adicionar o código descrito no exemplo no elemento em que se deseja o efeito.
Seleção Colorida
Olá! Vou falar um pouquinho sobre a seleção colorida, que é quando você seleciona um texto com o mouse e esta seleção é personalizada.
Exemplo
É bem simples. Basta inserir o código abaixo em qualquer lugar entre as tags <style> e </style>, ou seja, no CSS.
::selection {color:#eee; background:#e17e66}; ::-moz-selection {color:#eee ;background:#e17e66;} ::-webkit-selection {color:#eee; background:#e17e66};
A seguinte parte muda a cor que a letra deve tomar ao ser selecionada.
color:#eee;
A seguinte parte muda a cor do fundo que a seleção deve tomar.
background:#e17e66
Lembrando que são 3 códigos praticamente iguais para que funcione em todos os navegadores.
Espero que tenha ajudado!
Fontes Personalizadas
Olá! Hoje vou ensinar como utilizar fontes personalizadas do Google.
Exemplos
As fontes podem ser encontradas aqui.
https://fonts.google.com/
Neste site, é possível fazer uma live preview de como a palavra/frase fica com a fonte desejada (1) .
Podemos selecionar uma ou várias delas para inserir no layout (2). As informações das fontes (tamanhos, formatações, etc) são mostradas em (3).
Os códigos das fontes selecionadas são mostrados ao clicarmos na barra preta com a quantidade de fontes selecionadas.
A seguinte parte deve ser inserida logo abaixo de <head>, no código.
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Bungee+Inline|Indie+Flower|Poiret+One|Shadows+Into+Light" rel="stylesheet">
Observação: Em alguns layouts, como o Blogger, deve ser inserido uma barra (/) ao final do código, depois de “ rel="stylesheet", ficando assim:
<link href [...] rel="stylesheet" />
As fontes podem ser aplicadas em elementos da seguinte maneira. Podem ser definidos tamanho e formatação normalmente:
font-family: 'Amatic SC', cursive;
É bem útil para dar uma cara legal ao layout. Espero que seja útil!

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Bordas com Imagens
Exemplo
Olá! Continuando com a propriedade border, existe a possibilidade de colocar imagens nas bordas com o seguinte código na div em que se deseja o efeito:
border: 10px solid transparent; padding: 15px; border-image: url( IMAGEM) 50 stretch; -webkit-border-image: url( IMAGEM) 50 stretch; -o-border-image: url(IMAGEM) 50 stretch;
Em “IMAGEM” deve ser inserida uma url de uma imagem.
A parte “50 stretch” informa que a imagem será “esticada” em 50. O intervalo varia entre 1 e 100 e a palavra “stretch” pode ser substituída por “round” para repetir a imagem na borda.
Até a próxima!
Bordas Arredondadas
Olá! Vim trazer um facilitador de vidas:
border-radius.com
Este site é um gerador de bordas arredondadas para aqueles que, como eu, tem uma preguiça danada de ficar alterando borda por borda. O site já gera os códigos adaptados para todos os navegadores. Mão na roda!
Exemplos
Dá para fazer coisas bem legais com bordas utilizando hover e transição, como expliquei aqui.
Espero que seja útil!
Hover e Transição
Olá! Vou tentar explicar detalhadamente esses efeitos.
Exemplos
Hover
Hover: Hover é o estado que um elemento irá tomar quando passarmos o mouse em cima dele. Você pode aplicar hover em um elemento, qualquer que seja ele, para que ele mude de cor, de tamanho, de largura, de opacidade [...]
Como Inserir um Hover
Para inserir um hover em um elemento, você deve adicionar no código, de preferência abaixo do estilo do elemento, o nome que foi dado a ele seguido de :hover
Por exemplo:
Se você possui uma div class de um elemento que se chama .elemento, ela seria algo parecido com
.elemento { width:50px, height:30px; [...] }
Adicionando o hover para deixar o elemento opaco em 50% abaixo desta div, ficamos com:
.elemento { width:50px, height:30px; [...] }
.elemento:hover { opacity:0.5 }
Não é necessário repetir todo o código da div de cima, pois o hover é como se fosse uma extensão desta. É importante que não haja espaço entre os dois pontos e a palavra “hover”.
Transição
Transição: Transição é o tempo que o elemento vai levar para atingir o estado final do hover. A mudança não é súbita, e sim sutil. Aqui temos uma tabela em inglês com todas as propriedades que suportam transição e aqui temos outra tabela contendo quais navegadores podem utilizá-la.
Como inserir transição
Para utilizar a transição, insira o seguinte código na div em que se deseja o efeito.
transition:0.5s ease-in; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in;
A parte “0.5s” representa o tempo de transição e pode variar entre 0.1 (mais devagar) e 1 (mais rápido).
O código em si é apenas este:
transition:0.5s ease-in;
Os outros são adaptações para todos os navegadores:
-moz para mozilla,
-webkit para safari, google chrome e opera
-o para opera
Espero que tenha ajudado!
:)