Efecto Css: Bordes con outline-offset

20 de enero de 2014


Holi~ ya me siento mucho mejor y ya no me duele nada :3 .. algún día en mi blog personal escribiré que paso conmigo.. fue algo que paso con unas hormiguitas asesinas xD .. bueno como me sentía mejor decidí traerles un pequeño y sencillo tuto de como colocar bordes como arriba con un code Css al que le llamé Outline-offset.. 

Es muy fácil solamente debes agregar el siguiente código en donde quieras colocar ese efecto {algún tittle por ejemplo}
outline-offset: -3px;
outline: 1px dashed #fff;
padding: 6px;

Y lo editas~
 outline-offset: acá va la cantidad de pixeles de la distancia en que tu borde estará del centro
{-3px -4px -5px se ira más haca el centro -2px -1px 0px se irá más hacia afuera.}

outline: el tipo, color y grosor del borde. {prometo hacer alguna entrada con todos los tipos de bordes que existen :3}

padding: evita que el contenido por ejemplo el texto se acerqué mucho al borde.

Un ejemplo de este código dentro de algún titulo puede ser este:

.h2 {
  padding: 6px;
  background: #9f2c3d;
  color: #FFF;
  font-size: 7pt;
  font-family: 'pf ronda';
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #D69774;
  outline-offset: -3px;
  outline: 1px dashed #fff;}

lalala

La linea tendría que estar centrada pero a blogger le gusta distorsionar todo ¬¬

Bueno eso es todo, {les dije no era la gran cosa xD } espero les sirva el tuto~


10 comentarios:

  1. Respuestas
    1. Ahí le agregue un ejemplo de como colocarlo en algún lado ^^

      Eliminar
  2. Gracias por el codigo :3 y me alegro que te encuentres mejorsin :D
    Saludos!

    ResponderEliminar
  3. Ah ok, lo utilizaré para mi próxima remo, muchas gracias por el tuto xD <3
    Y me alegro que te hayas recuperado del brazo, me parece que estas mejor si publicaste un post, ¿no? Me alegro y cuidate :)

    ResponderEliminar
  4. Que mala soy^^hace siglos que no me pasaba por aqui^3^
    jeje gracias por la tutorial!
    saludos~

    ResponderEliminar
  5. Holaaa... muy útil, tal vez lo ponga en el título de mis entradas :D
    Saludos!! ^^

    ResponderEliminar
  6. ¡Angel! Genia!! :DD
    Lo usaré de inmediato... besos! :D

    ResponderEliminar
  7. hh gracias por la tutorial^^
    cuando haga alguna remo tendre en cuenta esta tuto^^
    saludos~

    ResponderEliminar
  8. Me alegra que estés mejor :D hormigas feas y asesinas :T ¡ellas mataron a Banana! TT^TT (tortuga mascota que tuve de pequeña).
    Ah! gracias por el tutorial, queda demasiado lendo *^* si algún día cambio de diseño (ahora me da lata xD, supongo que dejaré el actual unos cuantos meses adsvahvgdh) usaré esos amh... ¿bordes? x3
    Cuídate, cuídate owo)/ CHU!

    ResponderEliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)