Sunday, December 10, 2006

Cómo quitar los bordes de las imágenes


Qué incómodo es ese recuadro que aparece por defecto enmarcando nuestra límpida e impoluta ilustración o fotografía, ¿verdad? Tamaña aberración, símbolo del intrusismo del programador en la obra del artista, debe ser eliminada sin premura. Nada más fácil:

- Busque en la plantilla del blog de usted, a eso de la mitad del recorrido del scroll, este código:

.post img {
padding:4px;
border:1px solid #ddd;
}


En esta pequeña muestra de literatura contemporánea, podemos determinar que padding es la cantidad de espacio que habrá entre nuestra imagen y el borde. Tenga en cuenta que aunque el borde sea invisible, el espacio seguirá existiendo: puede ser útil para separar la imagen del texto o de cualquier otro elemento que la rodee. Si se ve con ánimos, experimente con diversas medidas.

Encontramos también en tan intrigante código la propiedad border, la cual tiene tres valores:

- 1px indica el tamaño en píxeles de dicho borde. Para eliminarlo, ponga usted 0px (cero píxeles);

- solid se refiere al aspecto del borde. Los puede encontrar punteados, rayados, dobles... pero recuerde que si no los ha visto antes en ningún otro espacio web, por algo será.

- Finalmente, #ddd indica el color del borde en valor hexadecimal. Si usted conoce tal sistema y/o cómo descifrarlo, experimente. En caso contrario, pase usted por aquí.

Si por cualquier circunstancia la precedente verborrea le ha distraido del asunto que pretendía usted resolver, que era eliminar el incómodo bordecito, aquí tiene un resumen del resultado final:

.post img {
padding:4px;
border:0px;
}


Suerte y hasta la próxima lección.

37 Comments:

Blogger SIEN said...

El siguiente haztelo de cambiar el cuerpo que se meha ocurrido un chorrada que a lo mejor queda hasta bien.

Muchas gracias por la parciencia que tienes con un cazurro informatico como yo, te lo agradecere to´la puta via nene!!!

1:19 AM  
Blogger Puño said...

apuntado!

el próximo va para poner un fondito (te refieres a eso, verdad?)

3:53 AM  
Anonymous Anonymous said...

Qué grande es este blog. Yo he aprendido a manipular a base de suprimir códigos a punta pala, pero esto me va a yudar a entender lo que hago

P.D.1: en este caso, a mí el borde incluso me gusta)
P.D.2: A mí me gustaría aprender a meter fondos (dime tonto, pero no sé)

4:50 AM  
Blogger Puño said...

pues vamos pallá!

4:59 AM  
Blogger alberto vazquez said...

ya está...ya lo he hecho!!!
sí, sí...a mi me molaba saber cómo le puedo poner textura a la web o un fondo mío.
gracias profe!!!!!

7:49 AM  
Anonymous Anonymous said...

Eres mu grande mu MU GRANDE...

6:55 AM  
Blogger numaleon said...

Encontré este lugar de casualidad y me parece muy prolijo y agradable de leer.
De aprovechar, claro.

Gracias

6:01 PM  
Blogger Puño said...

gracias, qué honor. siempre deseé en secreto ser escritor de libros de autoayuda, pero de esos de las películas que vienen con voz en off y sirven para ponerse en forma o conquistar a las mujeres :)

6:37 PM  
Blogger JORGE PARRAS said...

Mola que hagas este blog, yo aprendí en plan Ferran, borrando cosas y mirando en vista previa las consecuencias. Así mola más. Una pregunta (espero que entre dentro del temario de este curso): cuando posteas una imagen ¿hay alguna forma de evitar que al pinchar sobre la misma se cargue a tamaño completo en otra página? Es decir, que no se pueda pinchar sobre las imágenes posteadas... En mi blog lo resuelvo posteando iframes, pero en el de ARGH! como somos varios colaboradores no puedo ponerme en ese plan...

muchas gracias!

6:14 AM  
Blogger Puño said...

es sencillo, lo que tienes que hacer es quitarles el enlace. subirlas al tamaño del blog si quieres evitarte toquetear el código para cambiar el tamaño, aunque ya te digo que no es neecsario, sólo has de quitar el enlace.

si lo ves muy chungo te subo un post con este tema.

6:53 AM  
Blogger JORGE PARRAS said...

ey ya lo he probado, sale la mano como que se puede pinchar la foto pero cuando pinchas no sucede nada, con eso ya voy más que sobrado!!!

gracias!!!!

8:08 AM  
Blogger Puño said...

de nada!

de todas formas te lo miro.

10:22 AM  
Blogger lolalorente said...

muchas gracias, qué fácil parece todo explicado de esta forma.

1:24 AM  
Blogger Puño said...

y lo es, lolita, lo es!!!!

sigo preparando nuevo material, aunque ya va siendo hora de que ponga esto bonito, porque estoy metiendo el diseño del blog al tuntún y me está quedando feúcho :D

4:15 AM  
Blogger marmota said...

Hola!
Esto no funciona con la versión nueva de blogger, no?

Bueno, o eso, o yo no me aclaro, pero en la explicación no parece nada complicado...

Un saludo!

2:44 AM  
Blogger Puño said...

no, aún seguimos a la espera de una versión definitiva para continuar con las lecciones!

4:11 PM  
Blogger alanising said...

GRACIAS!!!

Ha sido muy útil la información.

Saludos.

7:40 PM  
Blogger Juan C. Torrealba R. said...

Cómo hago si le quiero quitar el borde solamente a una imágen???

9:04 PM  
Blogger Puño said...

has de incrustar el CSS de 'border:0px' dentro de la imagen, de tal manera que te quede algo como:

img style="border:0px" src="la ruta de tu imagen"

3:06 AM  
Blogger ekz said...

img style="border:0px" src="la ruta de tu imagen"

Esa es la técnica! :D

gracias
SAludos

1:41 PM  
Blogger Mariana said...

El titulo de tu blog es muy acertado... porque te lo agradeceré todo mi vida! jejeje
Gracias!!

5:15 AM  
Blogger kissu&padam said...

grr pese a la sublime explicación no conseguí quitar el borde de la imagen de cabecera e iconos a ppie de página.. será porque e sla versión nueva de blogger? será pq el IE es una p mierda y por eso es el unico navegador donde aparecen?

voy a seguir buceando en su blog

7:27 PM  
Blogger jocarl said...

graxia por el truco

5:47 PM  
Blogger ficus said...

Gracias. ;)

2:54 PM  
Blogger nancyuvita said...

This comment has been removed by the author.

1:11 PM  
Blogger nancyuvita said...

buen trucooooo...si q se lo agradecere esos tontos bordes me exasperaban!!! pero ya no mas.....

1:14 PM  
Blogger || Gabriela || said...

Excelente (Y)

3:03 AM  
Blogger Mony said...

eres un crack! los bordes pasaron a mejor historia por lo menos en mi blog
jajajaja un besi desde león city ciudad del metal!

4:44 AM  
Blogger Barbara PN said...

Buenas, me encanto el blog. de hecho lo he agregado al mio. Tengo un preguntita. ¿es posible evitar que se copien las imagenes? quitar el icono de guardar imagen y bloquear el boton derecho del raton?

10:46 AM  
Blogger Top-Ten-Blogs said...

WOOOOOOWWWWWWWW

Si que te lo voy a agradecer!!!

hoohohohoohoh

MUCHAS,MUCHAS THNX'S!!

12:27 PM  
Blogger Aitor said...

Perfecto, sencillo y bien explicado!
Muchas gracias.

3:19 AM  
Blogger Martin Hernandez said...

la verdad te lo tengo que agradecer, ningun otro blog me ayudo

6:59 AM  
Blogger Michael Giovanny Martinez said...

Hey gracias !!! funca !!!

7:15 PM  
Blogger Jor Di said...

Muchas gracias!!

5:50 PM  
Blogger Camila Cerda said...

quizás este post es muy antiguo... pero en mi código no aparece así.. y puse cero en algo pero no pasó nada.. no podrías decirme cómo encontrarlo? la verdad es que odio ese bordecito gris y no sé que hacer...muchas gracias salu2

5:01 PM  
Blogger Coton Mignon said...

Hola! ¡Muy útil la publicación! Puño: Por favor! Me gustaría quitar el borde pero a la cabecera, yo tengo el tema Forever de wordpress...lo he intentado, pero nada... Saludos!

5:21 AM  
Blogger Jen Hanubi said...

¡Oh, no me lo puedo creer, se hizo el milagro! Busqué bastantes tutoriales y no no me daba resultado ninguno, ¡y se han quitado los bordes, yay! ¡Muchas gracias! Precioso blog.

4:39 AM  

Post a Comment

<< Home