#HTML - Letras com contorno (pelo CSS)

~ SÓ PELA FOTO TEASER JÁ DÁ PRA SABER QUE O COMEBACK VAI SER DIVO, IMAGINA 'YOU THINK' ♥~

Olá pessoal lindo <3 tudo bem com vocês? Comigo está tudo certo <3 apesar de ter morrido com essas fotos lindas de Lion Heart ♥ Sério, essas músicas <33 depois tem You Think ♥ ah, esse So Nyeo Shi Dae <33 Agora, ainda não havia comentado, mas que comeback lindo é esse do Wonder Girls? Elas tocando >3< Queria falar mais do Kpop, mas estou sem tempo escrevendo isso antes de dormir -hahaha' Quero postar mais, como havia falado anteriormente, e então estou aqui ♥ Quero fazer ainda o especial de GG' mas vou deixar para um momento "pós-comeback". E queria também fazer uma wishlist de coisas que gostaria de comprar/ganhar ~aniversário chegando né gente, dia 22, 14 anos -q'~ E tem ainda outras ideias nessa minha cabeça, incluindo voltar a fazer goodies. Queria saber se vocês gostariam de algum avatar em especial. Podem pedir aqui. Para entrar, digite a senha: lovelymilkshake14. Coloquei senha porque assim só quem lê o blog entra lá, ok?  Eu talvez demore para trazer o goodie >///< Se quiser que eu te cite no post com o goodie, coloque o link do seu blog ao fim do pedido ♥

Bem, sobre o tutorial de hoje, eu montei com base no que eu sabia, mas procurando por aí devem ter mais tutoriais, mas esse foi o código que usei nesse layout ^^ e já que seu apenas colocasse os códigos, isso ficaria meio confuso, vou fazer do meu jeito e explicar cada detalhe. A borda fica mais ou menos assim. Não é aquela perfeição, mas serve para alguns detalhes. E ah, a borda só fica boa com 1 pixel de espessura T^T eu pelo menos não consegui deixar com mais do que isso :( Eu realmente tentei deixar bem explicado, mas ainda está meio confuso ç3ç Queria trazer esse post para depois postar alguns modelos de tooltip, sendo que em alguns irei usar isso <3 o que acham da ideia? E agora que estou falando de tutoriais, ainda vou fazer o do Photo Filtre, só preciso de tempo e vontade para conseguir terminá-lo -shaushau' Ainda tem outros tutoriais que quero trazer, alguns de HTML, outros de edição, de Nail Art e também de DIY (que irei ter que pensar ainda, nem sei se vou fazer, preciso de ideias para criar algo sobre isso -q). Mas vamos ao post ♥

Vamos começar pelo simples. Se você fosse colocar uma borda em uma caixa pelo HTML, seja em torno das postagens, títulos ou menus, você usa o border, certo? Mas o problema é que não há um "text-border" no CSS, ou seja, para conseguir isso, temos que improvisar. Okay, próximo passo é saber com o que podemos fazer uma borda, algo que exista para o texto em si... O que temos? O text-shadow. Para não confundir, deixem me explicar que no text shadow, a ordem que você usa altera a sombra. Temos o código: text-shadow: 5px 3px 2px #ccc, por exemplo, o 5 é a distância em relação a medida da horizontal (vai ficar 5 pixels deslocada para a direita), o 3 em relação à vertical (3 px deslocada para baixo), o 2 é  efeito borrado, e o #ccc é a cor da sombra.

Tá, agora já sabemos que o que é preciso é o text-shadow, mas como vou saber como fazer uma borda completa no texto? Bem, com o text-shadow nós podemos definir um texto com mais de uma sombra, usando a vírgula. Ok, vou demonstrar isso em partes e com cores visíveis. Se colocarmos um "text-shadow: 1px 1px 0 pink" vamos ficar com algo assim. Se formos colocar a sombra para preencher a outra parte, adicionaremos ao "text-shadow: 1px 1px 0 pink" um ", -1px -1px 0 pink;", ou seja, teremos "text-shadow: 1px 1px 0 pink, -1px -1px 0 pink;", ficando assim. Entretanto, em alguns cantos ainda não temos a borda (seria como aqui nessa imagem, onde representei em uma caixa e com a "borda" maior para facilitar a visualização - veja aqui), assim, teremos que adicionar outras sombras. Tendo assim o código final:

text-shadow: 1px 1px 0 pink, -1px -1px 0 pink, -1px 0px 0 pink, 0px -1px 0 pink, 1px 0 0 pink, 0 1px 0 pink;

Assim, teremos essa borda. É claro que ela não vai ficar das melhores, mas quando temos um espaçamento entre as letras (como no botão de seguir - nessa fonte fica assim), ou um efeito com uma sombra borrada, fica bonito até que >///<  Vou deixar o código pronto certinho aqui:

borda

text-shadow: 1px 1px 0 #CORDABORDA, -1px -1px 0 #CORDABORDA, -1px 0px 0 #CORDABORDA, 0px -1px 0 #CORDABORDA, 1px 0 0 #CORDABORDA, 0 1px 0 #CORDABORDA; /*Borda no texto por l-ovelymilkshake.blogspot.com*/

E foi isso. Espero que tenham gostado ^^ Fiz o máximo que pude para deixar inteligível. Ah, se usar esse tutorial, peço que por favor, credite ♥ mesmo que seja um tutorial simples, é bom ver nosso trabalho reconhecido ;3 mesmo que seja um crédito só no próprio modelo, mantendo aquela observação que deixei, isso já ajuda muito <3 Obrigada por ler até aqui ♥ Tenha uma ótima semana >3<

Sobre o jogo valendo divulgação, se você perdeu um post, não faz mal, a pontuação será feita com os que você souber ♥

E esse comeback divo do Wonder Girls?? Amei ♥