Para muchos es indispensable usar bordes en sus imagenes para que estas pueden tener un toque mas profesional y llamativo, pero que sucede cuando no entendemos nada sobre CSS y lo queremos hacer de una forma mas entendible y practica..
Esto es muy sencillo y funciona perfectamente en Internet Explorer 7 y Firefox, se trata de un código que se agrega directamente a las imagenes sin tocar en lo mas mínimo el código en CSS..
Haremos una pequeña prueba.. supongamos que queremos una imagen con un borde solido y de color verde..
Lo que haremos sencillamente es agregar este código en donde queramos colocar la imagen..
<img style="border: #008000 5.5pt solid" src="urldelaimagen" width=250 height=250 alt="nombredelaimagen">
Los parámetros que podemos modificar los he marcado con color rojo, son estos:
El color del borde, este se representa con el numero decimal especificado en el código, en este caso verde #008000..
El tamaño del borde mediante el parámetro 5.5pt, este valor podemos modificarlo por uno mayor o menos, depende del estilo que le queramos dar..
El parámetro solid, lo cambiaremos por los diferentes estilos que existen para los bordes:
Eso seria todo en cuestión del borde, pero no olvidemos a widht y height que son el ancho y el alto de la imagen, como tampoco a alt que agrega un nombre a la misma..
Un ultimo ejemplo.. A continuación pondré una imagen con un borde doble, y como color de borde agregare un color rojo, el código seria el siguiente..
<img style="border: #c00000 5.5pt double" src="urldelaimagen" width=250 height=250 alt="nombredelaimagen">
El resultado seria este..
Y eso seria todo, como pudimos observar agregamos bordes a nuestras imagenes sin utilizar CSS, solo un simple código agregado directamente sobre la imagen :)..
Entradas relacionadas
Imagenes en Blogger (parte 1)
Icono en la barra de navegación
Dar estilo a las listas con CSS
Insertar archivos SWF en Blogger
Cursor personalizado en CSS..
5 comentarios:
Bueno esto es una buena y eficaz forma de usar CSS internamente dentro de las mismas etiquetas con la propiedad style, y esto es correcto en el XHTML Transitional :) en el Strict es necesario vincular una hoja de estilos ya que no es correcto ;)
Por cierto por alli hubo un detalle, olvidaste cerrar la etiqueta img /
@Stuckerboy
Es verdad todo lo que dices es mas que cierto, solo queria darle un toque de simplicidad a la entrada..
Y es verdad se me olvido cerrar < img , pero parece que ya esta resuelto, gracias :)
Muy bonito :P el mejor es dashed! Estas cosas faciles de aprender son muy utils!!
saludos!!
Estos trucos son muy buenos hacen mas fácil la vida cotidiana de un blogger. :D
Excelente tutorial, como todos los que pones en tu blog. Se ve bastante sencillo.
Publicar un comentario