#HTML - Letras com contorno (pelo CSS)

terça-feira, 11 de agosto de 2015
~ 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 ♥

Temos 14 comentários, comente e alegre o dia de uma pessoa ~ (≧▽≦)

  1. Deu pra entender direitinho sim, a letra ficou super fofinha.
    Você aceita afiliação com meu blog? Aguardo a resposta *-*

    Menina Vanilla

    ResponderExcluir
    Respostas
    1. Que bom que conseguiu entender ♥ Obrigada >//<
      Aceito sim ♥ irei colocar na elite <3

      Excluir
  2. Gentem, fiquei tempos atrás de borda por css e nunca pensei que desse pra fazer com o código de sombra! Adorei! o3o

    Beijas,
    Blonde Chaos

    ResponderExcluir
    Respostas
    1. Sério?? Bom, que bom que agora você sabe como fazer ♥ Obrigada :3
      Beijos <3

      Excluir
  3. Oi Amy, tudo bem? Comigo está tudo nada bem, não to podendo com essas fotos de Lion Heart. Você percebeu que a forma como as garotas estão sentadas forma um coração e que embaixo delas tem um leão? You Think vai ser um lacre total. Já imagino uma mistura de Run Devil Run, The Boys e CMIYC com algo de novo. Nem posso falar disso que chega o coração acelera, socorro. Ainda não vi o comeback do WG, mas aposto que foi super digno, nada de novo para as rainhas né? Vai fazer 14 anos???? Achei que você era mais velha djshxedh Se bem que no primeiro gadget está dizendo a sua idade... Eu sou meio lerda mesmo, ignora.

    Seu tutorial ficou super bonitinho e bem explicado. Não achei nada confuso, muito pelo contrário. Não vejo muitos blogs com tutos elaborados e detalhados ao mesmo tempo. O resultado é muito bonitinho, deixa mais trabalhado e diferente. Claro que não tem como usar em algumas situações, mas é ótimo para outras.

    Beijos
    p-layback.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá Mitty <3 tudo sim, obrigada pela pergunta ♥ também não to podendo não, senhor ~ siiim, está muito lindo ♥ ~sou de Leão, me sentindo amada pelas meninas u.u / vai ver que leão tem alguma coisa a ver de o grupo ter tido o debut na época de leão -shaushuashu'~ Vai sim, vai ser perfeito, só pelo teaser deu pra saber ♥ e pelo jeito vai ser sem YoonYulSooHyo com poucas linhas <3 Também fico imaginando, e com um Bad Girl no meio ♥ Sim, vai ser muito lindo <3 Não?? Veja, porque está super lindo, como esperado delas >333< Vou sim -hahahaha' SHAUSHAUH' não não, sou até apelidada de bebê em casa ¬¬' shsuahsuahsua'

      Obrigada Mitty <33 que bom que gostou ♥ pois é, eu gosto de deixar explicado, porque assim, quando você usa o tutorial, você vai aprender como funcionou e isso muitas vezes dá ideias para outras coisas <3 Obrigada ♥

      Beijos ♥

      Excluir
  4. Olá Amy ♥ Eu estou bem obrigada ♥ Eu estou ansiosa para Lion Heart mas não tanto. Não sou fã do conceito retrô e afins. Eu espero que SNSD me surpreenda assim como fizeram em Party ♥ A única música que eu estou ansiosa para ouvir é You Think, essa sim vai sambar e muito *OOO*. Você ja esta cheia de pedidos, quero ver todos eles aqui no blog auhsuhas.

    Eu gostaria muito de ver modelos de tooltips, eles são bem úteis. Eu ja tentei criar os meus mas eu não sou tão criativa assim. Parece que tudo que eu penso ja existe T^T. Por isso que eu não sirvo para HTML, tudo que eu penso ou que eu consigo ja existe (tirando o efeito swing, aquilo foi "cagada") T^T. Mas faz sim, quero ver ♥.

    Achei super legal essas bordas, bem criativa e o tutorial esta muito bem explicado ♥.

    Chu~ Sugar Free

    ResponderExcluir
    Respostas
    1. Olá Gi <3 Que bom que vai bem unnie ♥ Estou muito ansiosa *-* ahhh sim, eu acho tão bonito, tipo, gosto do ritmo, e acho as roupas e os cenários tão lindos ♥ Acredito que elas irão surpreender sim, assim como em Party ♥ Sim, You Think vai ser muito divo ♥ fazendo contagem regressiva para o lançamento ♥ pois é -shaushuashua' vai demorar um pouquinho - haha'

      Obrigada, acho que irei fazer sim ♥ ahhhh, mas às vezes bate uma ideia, uma inspiração, e aí você consegue criar ♥ não pense assim unnie, eu também pensava isso, mas aí comecei a procurar coisas novas e a pensar coisas novas ♥ Não diga isso viu? E não fique assim, é normal não ter ideias sempre >///< e aquele efeito que você criou é lindo viu? Eu não sei criar efeitos T^T Que bom que irá ver o post <3

      Obrigada <33 sério mesmo unnie, eu me sinto tão bem quando leio que gostaram do que fiz <33 obrigada ♥

      XOXO ♥

      Excluir
  5. Olá meu amor >.< Desculpeeeeeeeeeeeeeee, eu sou uma péssima afiliada e já falei isso umas trocentas vezes hahahaha. Cada piscada que dou eu entro aqui e tem um layout diferente *o* Que layout divo é este hein? Eu reparei que curte muito grupos femininos de kpop né? Eu já sou ao contrário, prefiro os grupos de meninos >.< Acho que eu não sou uma pessoa muito meiga hahahaha tipo não faço muito o lado meiguinha como as outras meninas, prefiro rappers, hip hope do kpop mesmo hihi >.<

    Agora este tuto é tão fofinho, eu acho muito legal esses efeitos, e se a pessoa souber usar e deixar harmonioso acho mais legal ainda ^^ Muito bom! Saudades de poder comentar com calma e com qualidade ^-^ Beijos linda =3

    ResponderExcluir
    Respostas
    1. Oiiii Roh linda <3 tudo bem Roh, eu também não sou das melhores >///< hsuahsuahsu' e olha que antigamente eu trocava mais ainda esses layouts -hahaha' Obrigada Roh ♥ você não sabe como fico feliz com isso, admiro tanto os seus layouts <3 Gosto sim ^3^ antes eu também preferia os masculinos, mas aí de repente troquei -shuashuashua'' Rappers <3 também gosto ♥ hip hop's do kpop <33 Block B, B.A.P, BTS ♥ também amo <3

      Obrigada Roh <3 também gosto deles, porque amo deixar letras brancas em fundos coloridos <3 Obrigada Roh ♥ espero que volte a ter tempo :3 Beijos Roh ♥

      Excluir
  6. Olá Amyyyy, primeiro eu amei esse layout esse slide e vou esperar ansiosamente para esse novo MV. Genteeee todas lindas todas lindas. Bem essa banda do final eu não conhecia, mas vou te dizer que eu sempre te considerei uma daquelas blogueiras mais amadas pelo povo! Primeiro que acho que nem preciso perguntar porque, já sei: Sua simpatia, sua determinação, sua dedicação, seu ser eu mesma ajudam e muito! Sem contar que seus layouts sempre arrasam que deixam qualquer um de queixo caido, você é uma princesaaaa ****

    Eu sei que eu posso parecer a estranha agora que não se identifica, mas fiquei muito tempo sem vir aqui, na verdade sem comentar. Eu via tantos comentários esforçados e gigantes que ficava com vergonha de comentar comentarios curtos. Sabe??? Nem sei como você consegue le-los mas vocÊ é a Amy e ela vai ler com certeza chuuuuuuu! Nunca ouvi falar desse tutorial mas irei tentar faze-lo assim que puder, sua ajuda é ótima... Até mais diwa!

    Até mais!|Cake Sugar| (◕◡◕✿) this? Visite; qualquer um é Bem Vindo!

    ResponderExcluir
    Respostas
    1. Olááá Iza <3 obrigada ♥ também irei <3 só não madrugo porque amanhã tem que acordar bem cedo -shuahsuashua' sim, elas são tão maravilhosas <3 não?? Procure, Wonder Girls é um grupo incrível >3< Awnnnnn obrigada Iza <3 sério que acha isso? Obrigada mesmo amor ♥ fico tão feliz por você achar isso, ler seu comentário alegrou o meu dia :3 Awnnn, obrigada mesmo pelos elogios, não sei nem como lhe responder e demonstrar minha gratidão ♥ Obrigada Iza >///< mesmo, obrigada ♥ e que princesa?? Hahahaha' obrigada ♥ você é um amor <33

      Tudo bem -hahahaha' senti sua falta >//< Ahhhh mas tudo bem Iza, o que importa é a intenção <3 e não faz mal um comentário ser curto viu ? Desde que eu saiba que você viu a postagem e o que você achou dela, tudo bem ^^ Awnnnnn obrigada <33 Faça sim :3 Obrigada >//<

      Kissus ♥

      Excluir
  7. Oee, que layout divoso <3 as cores ficaram harmoniosas! Adorei o tutorial, super útil e vou usar no próximo layout c:

    Abraços *3*

    {www.h-oneypie.com}

    ResponderExcluir
    Respostas
    1. Oláá <3 obrigada ♥ vou aguardar ansiosamente pelo seu próximo layout ♥ Abraços ~

      Excluir

Por favor, comente :3 não custa nada não é mesmo? Ao comentar, você me fará feliz ♥

Antes de comentar leia as regrinhas:
♥ Nada de ofensas;
♦ Comentários anônimos são aceitos;
♣ Comentários spam serão excluídos;
♠ A moderação dos comentários está ligada, pois assim ficará mais fácil de ler todos os comentários :3
♥ Temos vagas ^3^ pode pedir afiliação aqui~

Para colocar links cole o seguinte código:
<a href="SEU LINK">NOME DO LINK</a>
<b>PALAVRA EM NEGRITO</b>
<i>PALAVRA EM ITÁLICO</i>