13.1.14

Tutorial- Borda Outline

Olá meus corações de chocolate!
O que andam fazendo além de dormir? Eu tenho feito desenhos da Alice. Sabem da Alice de Lady of Darkness? Sabem, eu acho que essa foi umas das histórias a qual eu estou me dedicando ao máximo. Eu quero fazer um livro dessa história, mas pretendo faze-lo bem feito. Não igual foi o lixo de It´s My Destiny, que eu ainda tenho que terminar de disponibilizar. Eu quero colocar o sentimentos de uma garota verdadeira nesse livro. Um sentimento de solidão e angustia vindos de Alice, e não deixar uma porcaria igual estava com a Karin, naquele livro. Esse ano eu vou mudar de escola, por isso pretendo aproveitar ao máximo as aulas de redação e português. Esse ano eu vou lançar esse livro! 
E espero que vocês me ajudem, me falando no que eu preciso melhorar ou mudar. Porque o quanto melhor for o livro mais fácil de publica-lo. Porque eu sou jovem ainda, 16 anos, com certeza uma editora irá se interessar caso ele for bom. Não acham? As vezes é bom sonhar alto.
Mas hoje eu não vim falar disso, eu na verdade vim lhes ensinar um tutorial que vai ser-lhes muito útil. Já que este vem sendo muito utilizado ultimamente. A borda Outline. O que é? Bem é simples, sabem aquelas bordinhas que ficam para fora da imagem? Ou ficam para dentro dela? Então essas são as bordas Outline. Eu demorei um tempo para aprender já que eu quis procurar em livros de css/html e alguns sites mais especializados nessa área. Por isso espero que vocês aprendam. Não precisam creditar já que eu estou só ensinando.
Vou lhes dar um exemplo de borda Outline.



Então viram que legal? E dá pra fazer diversos efeitos.
Bem vou logo explicar para vocês.
Para colocar a borda Outline basta colocar esse código aonde você quiser.
outline: 1px double #999;
outline-offset: 3px;
Bem agora vocês devem estar se perguntando o porque desse arco-íris no código. É que cada cor tem um significado, e eu vou explica-lo para vocês. Recomendo prestar a atenção porque talvez não funcione! 
O verdinho representa a cor da borda. Tipo vocês podem ver que essa borda dentro da imagem é preta, certo? Então essa é a cor da borda.
O amarelo representa se a borda vai ficar pra fora ou pra dentro e seu espaço. Se for negativo a borda ficará dentro da imagem, e quanto maior o numero for negativamente, com o hifen na frente, maior o espaço. E quanto maior o numero positivamente maior o espaço para fora da iamgem. Resumindo, com hifen é para dentro da imagem, e sem hifen para fora.
O vermelho representa o estilo da borda. É claro que existem diversos tipos, mas o Outline só atende a alguns poucos, como por exemplo o double, que é duas bordinhas, o solid, que é uma única, e o dashed, que é o pontilhado. E lembre-se se você não especificar a borda não funciona, pelo menos comigo não funcionou.
E o preto/branco que é o tamanho da borda. Por exemplo se você quer bordinha fina você usa um numero pequeno, até 1, e não funciona numero quebrados. E quanto maior a borda, maior o numero. Recomendo usar até 6 px, porque se não fica muito grande.
Agora quando você for usar o Outline no hover, basta copiar o código que você fez no normal e altera-lo. Mas não altere o estilo da borda, e também não é recomendável mexer no tamanho dela também. Todas as vezes que eu mexi deu erro.
Então gente, esse foi o tutorial de hoje, depois de mais de 5 meses sem postar nenhum tuto.
Espero que gostem, até~

4 comentários:

  1. Karin coloquei vc na elite~~como blog irmão! na correria acabei me esquecendo desculpe! amei o tuto bjs

    kawaii-things.net

    ResponderExcluir
  2. Respostas
    1. ALGUÉM GOSTOU DO MEU TUTO
      O MAI GODE COMO É BOM VIVER )o)
      MÃE ALGUÉM GOSTOU DO MEU TUTO!
      Bem, depois de dar meus surtos, eu realmente muito feliz que você tenha gostado! Em breve eu vou postar mais, espero que você goste deles também!

      Excluir

Vai comentar? Muito obrigada, vai fazer uma louca feliz.
Mas antes temos umas regrinhas
♠- Apesar de eu falar palavrões, e de mais da conta, por favor se contenham com os palavrões também
♥- O Eternamente Otaku, e eu, Karin, adoramos novos rostinhos por aqui. Por isso não se acanhem em querer comentar.
♦- Eu respondo os comentários, as vezes demora um tempo, mas eu sempre respondo.
♣- Tua opinião é essencial para o blog. Mas claro, que espero que você tenha educação.
♠- Aceitos tags.
♥- Comente seu link no blog, mas recomendo que tenha cuidado, o google pode considerar spam.
♦- "Seguindo, segue?" Vou pensar ¬¬
Obrigada por comentar ♥