[Tutorial] Redondear esquinas a tu theme

Edson Ordaz 24 Dec, 2010, 2:08 pm

Hola amigos bueno ya que muchos ya saben y muchos queieren saber aqui le straigo este tuto para redondear esquinas a sus foros!!

Es algo MUY sencillo siguiendo las siguientes imagenes!

http://community.mybb.com/attachment.php?aid=9871
http://community.mybb.com/attachment.php?aid=9872
http://community.mybb.com/attachment.php?aid=9873

bueno pues en estas 2 imagenes veremos mis esquinas de mi tema cuadradas tanto de arriba como de abajo!!

[Imagen: 24pgbxf.png]

bueno pues como sabes eso es el container entonces en nuestro theme creamos una hoja de estilo con el nombre que ustedes quieran en este casoo yo le pondre redondear!!

entonces como le pondremos redondeadas las esquinas y eso es el #container vamos a nuestra hoja de estilos creada y pondremos!

Código:
#container {

    border-radius: 15px;

}

el 15 se lo podemos cambiar mientras mas pongamos mas redondeado queda les dejo 2 ejemplos uno con 15 y el otro con 50

15:
[Imagen: 2ppjvpl.png]

50:

y con eso queda rendodeado y asi vamos redondeando mas por ejemplo los campos de texto estan asi (al iniciar sesion)

[Imagen: 9sgtcm.png]

y como podemos ver en esta imagen
http://community.mybb.com/attachment.php?aid=9872
los campos de texto es input.textbox a eso le agregaremos redondear!

Vamos una vez mas a nuestra plantilla y abajo de #container agregamos esto

Código:
input.textbox {

    border-radius: 15px;

}

una vez mas repito el 15 se puede cambiar!

y con eso los campos de texto se pueden poner las esquinas redondeadas les dejo una imagen de como me quedo!

[Imagen: 30rvgua.png]

un ultimo ejemplo para la textarea donde escribimos nuestros mensajes, temas, etc

como podemos ver en esta imagen
http://community.mybb.com/attachment.php?aid=9873

donde escribimos es la textarea mi editor esta asi en este momento
[Imagen: 2hhg7yu.png]

entonces agrego esto a la hoja de estilo:

Código:
textarea {

    border-radius: 20px;

}

y se ve de esta manera
[Imagen: bf4yv6.png]

y asi va quedando mi css

Código:
textarea {

    border-radius: 20px;

}

#container {

    border-radius: 50px;

}

input.textbox {

    border-radius: 15px;

}

y asi van agregando dependiendo lo que quieran redondear!!
Espero les guste!

Saludos a todos!

Gustavo R. 24 Dec, 2010, 2:45 pm

:O muy bueno edson Smile

Para lo personal siempre me gustan redondos pero no tanto como el de 50
[Imagen: ruu2h4.png]

[Imagen: http://i.imgur.com/l7Qimoa.png]

Edson Ordaz 24 Dec, 2010, 2:50 pm

jeje vamos era para la demo de como se redondea yo siempre los redondeo entre 10 a 15 Wink

Saludos!

~Night 24 Dec, 2010, 4:29 pm

Te recomiendo que ademas de border-radius
agregues -moz-border-radius: y tambien -webkit-border-radius:
Porque border radius es para opera safari u otros creo
Porque -moz-border-radius es para mozilla firefox y -webkit-border-radius para chrome
Y si pones solo como tu pusiste, los que usen dichos navegadores verán todo normal o:

Edson Ordaz 24 Dec, 2010, 4:46 pm

si olvide mencionarlo jeje
ya sabia que

Código:
-moz-border-radius:

es para mozilla pero no sabia para que es el otro

Bueno como no me gusta quedarme con la duda investige un poco y aqui se los traigo!!

Código:
Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es:

-moz-border-radius

Código:
Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente, como en el caso de Firefox, sino que hay que utilizar un "alias":

 -webkit-border-radius.

Última modificación: 24 Dec, 2010, 4:50 pm por Edson Ordaz.

~Night 24 Dec, 2010, 4:50 pm

-webkit-border-radius
Es para chrome y no se si alguno mas

Edson Ordaz 24 Dec, 2010, 4:51 pm

:d repito:

Bueno como no me gusta quedarme con la duda investige un poco y aqui se los traigo!!

Código:
Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es:

-moz-border-radius

Código:
Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente, como en el caso de Firefox, sino que hay que utilizar un "alias":

 -webkit-border-radius.

~Night 24 Dec, 2010, 4:56 pm

(24 Dec, 2010, 4:51 pm)Edson Ordaz escribió: :d repito:

Bueno como no me gusta quedarme con la duda investige un poco y aqui se los traigo!!

Código:
Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es: -moz-border-radius

Código:
Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente, como en el caso de Firefox, sino que hay que utilizar un "alias": -webkit-border-radius.

Jajaja bueno almenos estuve cerca ajja

Edson Ordaz 24 Dec, 2010, 4:58 pm

jeje si aun asi grax por mencionarlo sirvio que lo investige (una cosa mas a mi cerebro xD)

Saludos!

Gypaete 25 Dec, 2010, 9:05 am

#10

-webkit-border-radius

Chrome ,Mozilla y nninguno más creo