Letras com várias texturas e efeito de profundidade

Esse passo a passo é igual ao que já postei aqui, o de letras texturizadas. Mas o "truque" dessa vez é usar várias cores diferentes, isso vai facilitar muito na hora de deixar aquela região transparente. E o diferencial é a sombra interna nas fontes, veja:
Passo dois: Agora vá abrindo as texturas conforme a transparência e posicionando em cima da figura. São essas as camadas do PhotoFiltre (Layer). Porém a última camada deve ser a mesma do background.


Agora a sombra: Truque da sombra, que não é novo, mas eu não sabia fazer. É simples, com a varinhazinha selecione a região em volta. Agora Filter > Stylize > Drop Shadow e sim, é só isso

Resultado final:


Em breve eu vou upar minha inspiração nessas primeiras páginas de bullets journals, mas vai demorar um pouquinho e esse já vai ser um complementar nessa postagem que vai vir.

Quadrinhos para Espalhar o ❤

Essa postagem foi feita com muito, muito amor. Desde quando minha inspiração deu uma pane, até o momento que eu finalmente consegui fazer algo que eu tivesse gostado. Mas, antes de postar aqui as imagens, quero fazer um breve resumo do porquê de eu querer tanto fazer essas imagens.
No dia 19 de janeiro de 2017, entrei no twitter e li uma tag chamada #WeAreWithAna e entrei, vi que era algo bem sério, foi ali que conheci o projeto #SpreadLove. Isso mudou além do meu dia, mudou meu ano e meu jeito de olhar para problemas como depressão, ansiedade entre outros temas, como sexualidade. Quando as meninas anunciaram que subiriam outra tag dessa um ano depois, me senti também convocada a fazer algo especial para esse dia.
Olha que graça, modéstia parte:
Download: Orgulho ♡  Maravilhos@ ♡ Valorizar ♡ Ame ♡ Sorriso ♡ Bons
 


Agora os créditos, mas antes, as imagens são de tamanho 1000X1000px. O fundo eu achei no site (maravilhoso!) Vecteezy | Fontes: A principal foram duas variações da HBM Serenity | De decoração foi a Princess Ivy
Convido a todos a estarem no twitter comentando com a tag #WeAreWithYou, esse é o nosso momento de subir para os Trending Topics espalhando o amor Brasil a fora

Tutorial completo de como fazer seu menu simples

A postagem de hoje é um pouco diferente, mas até chegar a fazê-la eu tive que treinar muito. Até pouco tempo eu não tinha ideia de como fazer um menu simples, ficava um tempão procurando um modelo legal pra eu usar. Se você passa por isso também, continue lendo que vou te passar um código base para editar e fazer um menu ao seu gosto e sem mexer o HTML do blog. O meu ficou assim:
Veja ele em hover no meu bloguinho <3

Agora vá em Layout > Adicionar Gadget > Abra o HTML/JavaScript | Código básico do menu:
<style>
.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menutagsTeste{
background-color: #F1EAE4;
box-shadow: 2px 1px 0px #7C5862; /*Sombra na caixa*/
width: 98%;
height: 8px;
float: left;
font: 10px Georgia;
color: #8D564F;
text-shadow: 1px 1px 0px #C19791;
padding: 3px; /*Espaço interno*/
text-align: center;
margin: 2px; /*Espaço por fora, em relação as linhas*/
text-transform: lowercase;
margin-bottom: 2px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;

}
#menutagsTeste:hover{
background-color: #F1EAE4;
border-radius: 15px 96px 37px 99px;
box-shadow: -2px 1px 3px #7C5862;
width: 98%;
height: 8px;
float: left;
font: 10px Georgia;
text-shadow: 1px 1px 3px #C19791;
color: #8D564F;
padding: 3px;
text-align: center;
margin: 2px;
text-transform: capitalize; /*Espaçamento entre as letras, depois que passa o mouse*/
margin-bottom: 2px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;

}
</style>
<div class="esquerda">
<a href= "seu link" id="menutags21">texto âncora</a>
<div class="direita">
<a href= "seu link" id="menutags21">texto âncora</a>
</div>
🌸 Achei o código nesse blog: Pequena Desarrumada 🌸
• O que está em lilás é como se fosse uma categoria. Ele é a identificação, também um modo de você saber as posições, mas não influencia tanto assim, podendo ser mudado de nome sem problemas.

• O que está em verde é o tamanho dele, caso fosse 100% ele estaria no seu tamanho normal. Eu poderia acrescentar um outro retângulo com o tamanho total (100%) dentro desse mesmo código, porém sua categoria teria que ser diferente de "direito" e "esquerdo", poderia ser, por exemplo, "centro".

• O #menutagsTeste e o #menutagsTeste:hover formam o nome do menu, você pode alterar se quiser. Dá para usar esse mesmo código para fazer vários menus, mas deve mudar esse nome a cada menu diferente que quiser usar.

• O que está em marrom, text-transform, tem outros efeitos além desse, veja aqui.

• O que está de musgo é o código de transição, fade. Quanto mais tempo tiver menos "brusco" ele fica, é sempre legal colocar para que o efeito vá desaparecendo de um jeito mais delicado.

• Já esse outro (border-radius: 15px 96px 37px 99px;), equivale as bordas. Se quer mais arredondado, ou que ele vá arredondando depois que o mouse estiver em cima (hover). Mas se você não sabe fazer, calma, eu também não e consegui graças a esse site: CSSmatic
Para finalizar, você não precisa ter medo de tentar fazer seu próprio menu. Na verdade, é muito fácil e dá para aprender muito em sites gratuitos Google a dentro. Mas não deixe de fazer o backup do seu template antes de começar. O template das metas deu erro e tive que fazê-lo todo de novo, então já viu.
Espero que essa postagem ajude. Beijo e obrigada pela visita!