30/09/2013

3 maneiras de colocar borda separada(CSS)


Boa noite, leitores.

Lembram que eu falei sobre minhas provas? Bem, já recebi o resultado de três delas e foram bem animadores: um oito em português, um oito e meio em história e  um nove em matemática, minha matéria favorita em que a minha nota foi inclusive a melhor da sala. Foi bom que eu consegui mostrar para minha mãe que meu seis passado foi apenas uma leve queda, nada que deva preocupar muito. Fora isso, o resto do meu dia foi um tanto parado e cansativo por causa da natação, mas não tem coisa melhor que se exercitar, principalmente na água, aqui fala uma semideusa filha de Poseidon e não, eu não sou lerda como o Percy, apesar de que algumas pessoas acharem isso :c

Como faz tempo que não posto um tutorial aqui, resolvi trazer um que podem ter seu resultado obtido através de três maneiras (conhecidas por mim). Hoje vou ensinar como aplicar a bordinha separada por css, para quem não sabe do que estou falando, é essa borda que uso atualmente nas ilustrações aqui do blog. Sei que muita gente já sabe, mas como vou explicar mais de uma maneira, vocês podem escolher qual é o melhor para vocês ou até o mais fácil de ser aplicado. Ah e já tinha me esquecido, esqueci de agradecer pelor 15(8) seguidores, ultrapassamos a meta e nem havia notado (nossa, como sou atenciosa) e fiquei muito feliz com isso, de verdade. Até outro dia  =.=~

Primeiro jeito
.borda1 {
padding:2px; 
border:1px solid #cordaborda;
Segundo jeito
.borda1 {
padding:3px;
border: 1px double #cordaborda; }

Terceiro jeito
.borda1 {
outline-style:dashed;
outline-width:1px;
outline-color: #cordaborda;
outline-offset: 2px; }

Lembrando que vocês também podem alterar o número de pixels que elas ficam separadas das imagens e utilizar diferentes tipos de porta, as que eu mais recomendo são a solid e a dashed.

E para usar é só colar esse código em um gadget HTML/Javascript ou onde você quiser:
<img src="linkdaimagem" class="borda1"/>
}

15 comentários:

  1. Nossa é bem facinho, mdds e3e
    Que sorte que tu faz natação, queria fazer mas tenho rinite :c

    Kissus~~
    >> Photos and Camera

    ResponderExcluir
  2. Fico feliz por você :) concordo nao tem nada do que passar um tempão dentro d'água,ao contrario de você eu já sou meio lerda :P( vc e minha irma nem acredito *-*)
    Adorei o tutorial,eu só conhecia uma maneira,agora sei mais duas :)

    kisses!

    Lego House | l-egohouse.blogspot.com

    ResponderExcluir
  3. Não sabia que era tão fácil. Vou usar com certeza!


    Espirito Otaku | http://otakunoseishin.blogspot.com.br/

    ResponderExcluir
  4. Eu também Faço Natação, só é ruim quando está frio kkkk
    Esse Tutu é mt fácil mesmo

    ResponderExcluir
    Respostas
    1. Fazer natação no frio e na chuva é para os fortes susah'
      É bem fácil sim.

      Excluir
  5. Eu faço natação nas férias *u* Enfim, o tuto é super fácil mesmo.

    http://djeniferlopes.blogspot.com.br/

    ResponderExcluir
  6. Ameeei, sempre quis saber como colocar essas bordinhas, acho elas tão fofas >.<

    Post novo lá no Tutoriar, visualize e comente se puder!
    Beijoos ♥ Visite: www.tutoriar.net

    ResponderExcluir
  7. Bem legal o tuto.
    passa la no mru blog novo?
    BJS.
    Place Nuts

    ResponderExcluir
  8. Nossa, sua matéria preferida é matemática? Quem me dera :p
    O tutorial está perfeito :3
    Peach Cream

    ResponderExcluir
  9. Eu odeio as bordar :c. Em alguns blog´s eu até acho bem legalzinho, todavia, este blog´s o meu não está incluso.

    Beijos ♡

    c-ake.blogspot.com I Cake

    ResponderExcluir

- Não estou aceitando tags ou selinhos.
- Use os comentários ou a ask para fazer requests.
- Respondo todos os comentários e retribuo na maioria das vezes.
- "Seguindo! Segue de volta?" Depende, se você já tiver seguido realmente e eu gostar do seu blog.