[Tutorial] Redondear esquinas a tu theme

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]
[Imagen: 11to39z.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!

#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:
[Imagen: ruu2h4.png]

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

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:
textarea {
	border-radius: 20px;
}

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

y asi va quedando mi css
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!
Archivos Adjuntos

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

Saludos!
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:
si olvide mencionarlo jeje
ya sabia que
-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!!

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 

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.
-webkit-border-radius
Es para chrome y no se si alguno mas
:d repito:

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

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 

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. 
(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!!

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 

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

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

Saludos!
-webkit-border-radius

Chrome ,Mozilla y nninguno más creo
Colaboradores
~Night Maxii kitipa Himura Gypaete Gustavo R. gimli darkjeff27
This forum uses Lukasz Tkacz MyBB addons.