Hola fanáticos del diseño web, esta vez aprenderemos como hacer esquinas redondeadas con Css compatible para todos los navegadores, una forma muy buena para que muchas cosas en nuestro blog se vean mas chulas e interesantes.
Generalmente hay muchos frameworks que han venido utilizando todas estas funcionalidades, pero si vamos a empezar a entrar a este tema, entonces no vamos a aprender nada pues una idea muy interesante es que tu puedas hacer uso de este código de acuerdo a tus exigencias.
Redondear todos los bordes con CSS
Veamos la única forma mas básica y necesaria, la que generalmente utilizamos por obvias razones de ganar mucho tiempo, o quizás porque aún somos muy novatos y preferimos utilizar de acuerdo a lo que este a nuestro alcance.
border-radius: 20px 20px 20px 20px;
Un único tamaño para todos los bordes, si queremos hacerla variar ya de acuerdo a nuestras exigencias podemos empezar haciéndola variar de tamaño. Pero quizás esta tan solo sea soportado por algún navegador, y no sea visto de la misma manera en otros navegadores, ya que para ello necesitamos aumentar otro tipo de funcionalidades. Veamos entonces :
.bordesredondeados {
-moz-border-radius: 20px; /*Soportado para navegador Firefox */
-webkit-border-radius: 20px; /* Soportado para navegadores Google Chrome y Safari */
border-radius: 20px; /* CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores) */
}
Como puedes ver es realmente muy fácil poder hacer los bordes redondeados con css, y puedes incluso poner color al borde de esta manera.
border: 1px solid #6a6a6a;
Podemos también alejar el texto que esta contenido dentro del cuadro de esta manera:
padding-left: 20px;
padding-right: 20px;
De izquierda a derecha, o también la puedes hacer de arriba y hacia abajo, eso ya depende de tu criterio o de lo que en ese momento vayas a necesitar.
Si quieres mas tutoriales de CSS, ya sean avanzados o básicos, tan solo necesitas decirnos en los comentarios sobre que temas hablar y nosotros con gusto te estaremos brindando mucha mas información.
Como hacer esquinas redondeadas con Css compatible para todos los navegadores ( Firefox, Google Chrome y Safari, CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores)
Generalmente hay muchos frameworks que han venido utilizando todas estas funcionalidades, pero si vamos a empezar a entrar a este tema, entonces no vamos a aprender nada pues una idea muy interesante es que tu puedas hacer uso de este código de acuerdo a tus exigencias.
Redondear todos los bordes con CSS
Veamos la única forma mas básica y necesaria, la que generalmente utilizamos por obvias razones de ganar mucho tiempo, o quizás porque aún somos muy novatos y preferimos utilizar de acuerdo a lo que este a nuestro alcance.
border-radius: 20px 20px 20px 20px;
Un único tamaño para todos los bordes, si queremos hacerla variar ya de acuerdo a nuestras exigencias podemos empezar haciéndola variar de tamaño. Pero quizás esta tan solo sea soportado por algún navegador, y no sea visto de la misma manera en otros navegadores, ya que para ello necesitamos aumentar otro tipo de funcionalidades. Veamos entonces :
.bordesredondeados {
-moz-border-radius: 20px; /*Soportado para navegador Firefox */
-webkit-border-radius: 20px; /* Soportado para navegadores Google Chrome y Safari */
border-radius: 20px; /* CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores) */
}
Como puedes ver es realmente muy fácil poder hacer los bordes redondeados con css, y puedes incluso poner color al borde de esta manera.
border: 1px solid #6a6a6a;
Podemos también alejar el texto que esta contenido dentro del cuadro de esta manera:
padding-left: 20px;
padding-right: 20px;
De izquierda a derecha, o también la puedes hacer de arriba y hacia abajo, eso ya depende de tu criterio o de lo que en ese momento vayas a necesitar.
Si quieres mas tutoriales de CSS, ya sean avanzados o básicos, tan solo necesitas decirnos en los comentarios sobre que temas hablar y nosotros con gusto te estaremos brindando mucha mas información.
0 comentarios: