Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Bordes redondeados en cualquier parte de tu blog

Si quieres unos marcos redondeados, es decir un borde redondeado y que pueda ser editado a tu gusto, solo tienes que hacer lo siguiente...

En tu plantilla, en la parte del CSS encontrarás las propiedades de todo lo que forma el blog... la sidebar, la cabecera, el post, el post-footer...

Cuando queremos añadir un borde ( o marco) a algo ponemos la línea de:

border: 1px solid #000000;
¿Pero y si quieres los esquinas redondeadas? Solo tienes que pegar estas dos líneas encima, de manera que quede así:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
Si además quieres ponerle fondo, recuerda que el modo de hacerlo es con esta línea...
background:#000000;
Y si quieres una imagen de fondo...
background:url('url-de-tu-imagen-de-fondo');
Nota:

El efecto de bordes redondeados no se ve en Internet Explorer, por el contrario, en Firefox funciona de maravilla :-D

Burity dice...

Olá Jaime, obrigado por seu comentário no meu blog. Tenha um 2009 com muitas alegrias.

Um gr abraço

Jaime Trujillo Escobedo dice...

Hola burity!! me alegra que hayas visitado el Balcón, te deseo un 2009 a ti también y que seas muy feliz este año nuevo!! un gran Saludo :-)!!

Anónimo dice...

Acabo de ver esta entrada con Opera, Firefox, Google Chrome, Safari e Internet Explorer; y con ninguno se ven bordes redondeados. :?

Jaime Trujillo Escobedo dice...

Hola Criptozoólogo, es que los bordes de los códigos no tienen el truco aplicado, pero si pruebas a ver mi blog con firefox, verás que la fecha tiene bordes redondeados ;-)

Anónimo dice...

Es cierto, también se ven así con Chrome. Pero sólo funciona con esos navegadores, con Opera lo sigo viendo cuadrado. No te ofendas, pero así yo no le encuentro ningún chiste.

Anónimo dice...

Ah, ya descubrí a qué se debe. Lo que pasa es que esos códigos sólo tienen las instrucciones "moz" y "webkit", que significan "Mozilla" y "Webkit"; que es el motor de Safari y Google Chrome, por eso sólo funciona con estos navegadores. Para que se vea también en Opera e Internet Explorer habría que agregar sus instrucciones correspondientes, sólo que no tengo idea de cuáles puedan ser, ya que estuve probando con algunas y no funcionaron. Me gustaría que me indicaras la fuente original para ver si puedo descubrir algo. ;)

Jaime Trujillo Escobedo dice...

Hola Criptozoólogo! la verdad es que en forefox si se vé, pero, como tu decías, lo probé con Opera y no se vé, la verdad es que puede ser útil, pero de todas formas yo no lo puse en ningún otro sitio más que en la fecha ;-) el truco me lo dió mi tío de un blog amigo suyo en inglés, yo lo traduje y lo modifiqué un poco. Creo que en Gem@ blog, lo puedes encontrar también ;-)

Saludines!!

Shirubia dice...

Hola Jaime!
Vieras q ya pude poner los títulos de la sidebar y de las entradas de color! tuve q investigar un poco pero lo logre =) (esque yo no tenia el sidebar h2 en mi plantilla y no sabia q lo ocupaba)

y de una vez aplique este truco tuyo y quedo muy divertido, muchas gracias!

Saludos!

Jaime Trujillo Escobedo dice...

Shirubia! cuánto me alegra que lo hayas conseguido0! ya verás, ahora puedes poner muchas cosillas nuevas, estilos, efectos... :-D ahora me paso por tu blog y lo veo :-)

Shirubia dice...

Hola Jaime!
Gracias a ti he descubierto este nuevo mundo que me encanta!
gracias por enseñarme tantas cosas y espero ansiosa el poder aprender mucho mas de ti! y gracias por tu visita =)

Saludos!

Jaime Trujillo Escobedo dice...

Shirubia, que feliz me hace oir eso :-D pronto voy a publicar truquillos que quizás te gusten bastante :-D ¡ya verás que tu blog quedará precioso! :-)

Sirkan! dice...

Hola!
Oye como lo hago para ponerle borde solo arriba a una imagen??
Por que lo que yo quiero es que mi header quede con borde redondeado solo en la parte superior y la de abajo quede normal.

Saludos y Gracias!

Jaime Trujillo Escobedo dice...

Sirkan, para poner un borde de esa forma deberías hacerlo así:

Diseño>edición HTML>expandimos artilugios

Busca en el CSS este bloque:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

y cámbialo por este otro:

#header {
margin: 5px;
border-top:2px solid $bordercolor;
border-bottom:2px solid $bordercolor;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
color:$pagetitlecolor;
}

Prueba a ver si de esa forma queda como te gusta ^_^

Sirkan! dice...

Hola!
Bueno no es lo que queria pero igual me gusto! xD

Saludos y Gracias!

Jaime Trujillo Escobedo dice...

Sirkan, esque hay un pequeño inconveniente, deberíamos poner el borde inferior (normal) en el bloque de header-inner pero claro, de esa forma quedarían desnivelados ambos bordes y se visualizaría un poco desordenado.

De esta manera el borde superior y el inferior están redondeados ^_^

Saludo0s!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo