"¿Has visto alguna vez ese bordecito a puntos alrededor de un enlace? Suele aparecer cuando el enlace tiene el foco. ¿Si?, Bueno, de todas formas pongo una captura:"
Así comienza el artículo en El Plan Seldon y no puedo dejar de pensar: sí lo he visto, lo vengo viendo desde que las PCs eran en blanco y negro y aún no entiendo cómo es que a nadie se le ha ocurrido que son espantosos y deben ser eliminados.
"Bien, pues esa linea a puntitos no es ni padding, ni margin ni border, (realmente no pertenece al modelo de caja de CSS). Pues resulta que esto se llama contorno y se controla mediante la propiedad outline."
¿Cómo es eso? Primera noticia de la existencia de esa propiedad (todos los días se aprende algo nuevo, amén).
Estos contornos, se crean automáticamente sobre cualquier vínculo (etiqueta A), sobre cualquier elemento que pertenezca a un formulario y sobre las imágenes que se utilicen como mapas (etiqueta MAP), en teoría, "para destacarlos sobre el resto cuando tienen el foco" (cuando están activos), en la realidad, sólo sirven para molestarme.
Como el contorno está siempre encima, no influye en la posición o tamaño del bloque y es dibujado comenzando junto fuera del límite del borde.
"Bien, pues esa linea a puntitos no es ni padding, ni margin ni border, (realmente no pertenece al modelo de caja de CSS). Pues resulta que esto se llama contorno y se controla mediante la propiedad outline."
¿Cómo es eso? Primera noticia de la existencia de esa propiedad (todos los días se aprende algo nuevo, amén).
Estos contornos, se crean automáticamente sobre cualquier vínculo (etiqueta A), sobre cualquier elemento que pertenezca a un formulario y sobre las imágenes que se utilicen como mapas (etiqueta MAP), en teoría, "para destacarlos sobre el resto cuando tienen el foco" (cuando están activos), en la realidad, sólo sirven para molestarme.
Como el contorno está siempre encima, no influye en la posición o tamaño del bloque y es dibujado comenzando junto fuera del límite del borde.
La propiedad outline es similar a la propiedad border excepto por dos cosas: no ocupa espacio (se dibuja "sobre" el elemento) y adopta la forma del elemento, es decir, puede no ser rectangular:
La propiedad genérica outline tiene tres estilos que puede controlar:
outline-width: thin | medium | thick | longitud (el ancho del contorno valor inicial medium)
outline-style: none | solid | double | dotted | dashed | groove | ridge | inset | outset (indica el tipo de contorno)
outline-color: el color del contorno (valor inicial invert)
outline-style: none | solid | double | dotted | dashed | groove | ridge | inset | outset (indica el tipo de contorno)
outline-color: el color del contorno (valor inicial invert)
La propiedad outline es una propiedad resumida y determina los tres valores:
outline: width style color
Por ejemplo:
a {outline:none;}
En el El Plan Seldon también sugieren utilizarla como una herramienta de depuración y ya mismo estoy adoptando la idea.
Cuando estoy creando o editando CSS, suelo utilizar un método bastante efectivo, recuadrar con border los bloques DIVs o cualquier otro elemento que quiera ver pero claro, siempre hay una pequeña variación ya que el borde "come" parte del ancho. Como outline no influye en el tamaño sino que funciona como una "capa transparente", es mucho más útil y basta darle valores para visualizar los elementos:
Cuando estoy creando o editando CSS, suelo utilizar un método bastante efectivo, recuadrar con border los bloques DIVs o cualquier otro elemento que quiera ver pero claro, siempre hay una pequeña variación ya que el borde "come" parte del ancho. Como outline no influye en el tamaño sino que funciona como una "capa transparente", es mucho más útil y basta darle valores para visualizar los elementos:
DIV {outline: 1px solid red;}
Simple, efectivo, una maravilla ¿dónde habrás estado toda mi vida que nunca te encontré?
REFERENCIAS:
8 comentarios:
Ah que bueno, lo del quitar outline.
Gracias
Ahora una pregunta:
Se pueden poner dos main wrapper, y hacer que cuando creas una entrada cada main wrapeer sea diferente y no sean la misma entrada?
Por ejemplo, tengo si tengo una plantilla de tres columnas, quiero tener sos dolumnas que sean entradas, y una columna de widgets.
Ahora bien, cuando hago eso, las dos columans de main wrapper me copia el mismo contenido del post.
Yo quisiera que en un main wrapper de post estuviera el contenido de la entrada del dia de hoy, y en el segundo main wrapper, el contenido de la entrada de ayer.
QUe no se copien el contenido
¿Se puede hacer eso?
Aunque te cueste creerlo... a mí me gustan esos puntitos.
Raro que es uno.
Renton
ID="main-wrapper", Los ID deben ser únicos, no puede haber dos con el mismo nombre, para el navegador, son el mismo.
Lo único que se me ocurre es tratar de "contarlos" para que los impares se muestren en un bloque y los pares en otro. Para empezar, debería duplicarse el código y cambiarse los IDs para que sean diferentes.
¿Se puede hacer? Imagino que si aunque en Blogger no he visto nada parecido, de cualquier manera, no parece una tarea sencilla.
Amigo Renton: en este mundo hay sitio para todos :D
Detesto esos puntitos desde el primer día que me puse ante el monitor.
Renton... no eres raro simplemente diferente :D
Jajajaaja, sobre gustos ... :D
Habra alguna forma(mediante css) de quitar la linea punteada de los elementos flash, sino hay me da igual que sea un scrip, pero que sea para definirlo una ves y que quede para todos los elementos, por ejemplo:
a {outline:none;}
quita la linea punteada a todos los enlases que haya en la pagina.
De la misma manera pero no efuncionará en IE:
embed, object {outline:none;}
No importa lo del ie, firefox es mejor y creo que hasta el mas neofito en el area se da cuenta de la diferencia, en fin, el que lo usa que se embrome, mi blog se ve bien con firefox.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...