CSS redondeando esquinas de mesa. Border-radius: esquinas redondeadas en CSS

Saludos amigos. Este artículo está dedicado a un tema bastante popular entre los webmasters novatos: esquinas redondeadas CSS. Las preguntas que intentaré cubrir serán cómo hacer esquinas redondeadas de los elementos del sitio web usando solo CSS sin recurrir al uso de imágenes.

Este método tiene ventajas y desventajas. Las ventajas, por supuesto, son que no es necesario crear imágenes con ningún editor gráfico, cargarlas en el servidor y luego organizarlas usando CSS en los lugares necesarios para crear el efecto deseado. En este caso, es necesario crear elementos adicionales en el código HTML, así como especificar propiedades separadas para cada uno de ellos.

En cuanto a las desventajas, aquí se puede observar un problema: esta propiedad no es compatible con todos los navegadores web, especialmente con las versiones desactualizadas de varios navegadores.

Sin embargo, redondear esquinas usando CSS se está volviendo cada vez más popular. Como ya habrás entendido, en este artículo usaremos una propiedad disponible en CSS 3.

Esquinas redondeadas usando CSS.

Entonces, por ejemplo, tomaremos un elemento DIV de bloque y redondearemos sus esquinas. Por ejemplo, creemos un bloque y le asignaremos propiedades directamente en el código HTML usando el atributo de estilo. Primero tenemos un elemento de bloque relleno con un fondo de cualquier color:

Por cierto, si necesitas saber qué código de color tienes en tu web o en cualquier otra web, esto te vendrá muy bien.

Y así lo veremos en un navegador web:

Ahora, para redondear las esquinas, usaremos la propiedad "border-radius", que se puede traducir como el radio del borde. Sí, exactamente así, y no como muchos podrían pensar, que ese es el radio del marco o como lo llamen (borde). Esta propiedad es responsable específicamente del radio de los bordes del elemento, y no de sus marcos o bordes, que pueden no existir. Sin embargo, la propiedad seguirá funcionando sin utilizar un borde en el elemento. Espero que hayas entendido lo que quería decir. El valor de esta propiedad es cualquier valor numérico aplicable en CSS, como porcentajes, píxeles (px), puntos (pt), etc. Sí, y hay que tener en cuenta que esta propiedad funciona en las cuatro esquinas del elemento a la vez, además, puedes especificar un radio diferente para cada esquina, pero hablaremos de eso más adelante. Primero, establezcamos el radio de las esquinas de nuestro rectángulo. Sea igual a 5 píxeles:

Entonces el elemento se verá así:

Ahora propongo descubrir cómo agregar su propio radio para cada esquina por separado. Para ello, podemos utilizar una propiedad que se puede aplicar a cada ángulo por separado. Si hablamos del ejemplo anterior, en su forma completa las propiedades del elemento se verían así:

Radio del borde superior izquierdo: 5 px; /* esquina superior izquierda */ border-top-right-radius:5px; /* esquina superior derecha */ border-bottom-right-radius:5px; /* esquina inferior derecha */ border-bottom-left-radius:5px; /* esquina inferior izquierda */

Es decir, si queremos establecer cada esquina con su propio valor, tenemos esta oportunidad, y para asegurarnos de ello tomamos el siguiente código:

Y luego obtenemos este resultado:

Como podemos ver, el borde de cada esquina tiene su propio valor de radio.
Además, CSS nos permite establecer un valor para el borde de cada esquina como una entrada corta que se ve así:

Donde los valores seguirán en este orden:

Radio del borde: 5px /* esquina superior izquierda */ 10px /* esquina superior derecha */ 15px /* esquina inferior derecha */ 20px /* esquina inferior izquierda */;

En consecuencia, con base en lo anterior, queda claro que de la misma manera podemos establecer el límite del radio solo para tres (una o dos) esquinas:

Así es como se ve en un navegador web:

Si aún no está completamente confundido, continúemos. El hecho es que el radio de cada límite de esquina se puede especificar no en un valor, como comentamos anteriormente, sino en dos. Es decir, dos valores para cada ángulo. En este caso, el primer valor establecerá el radio de la esquina horizontalmente y el segundo valor establecerá el radio verticalmente. Comencemos primero con una esquina:

En este ejemplo, afectamos solo la esquina superior izquierda del elemento:

Si inviertes los valores, el elemento se verá así:

Parece que podría haber acabado ahí, pero no. Hay un truco más. En el valor de una propiedad, podemos usar una barra diagonal (/) entre los valores. La barra diagonal nos puede ayudar a combinar valores con otros valores. En general, es más fácil mostrar que contar. Comencemos con algo simple. Supongamos que necesitamos que el radio horizontal sea de 35 píxeles y el radio vertical de 5. Además, estos valores deben aplicarse a todas las esquinas. Entonces podemos escribir así:

Y obtenga este resultado:

Ahora veamos un ejemplo más complicado:

En este caso, el valor antes del signo de barra (/) se relacionará con el radio horizontal de la esquina y después del signo con el vertical. En este caso los valores se relacionarán entre sí de esta forma:

Radio del borde superior izquierdo: 20 px 15 px;

borde-arriba-derecha-radio: 10px 25px;

borde-inferior-derecho-radio: 40px 15px;

borde-inferior-izquierdo-radio: 10px 25px;

Y el resultado será así:
Y al final del artículo, hablaremos sobre la compatibilidad de esta propiedad con varios navegadores.
Redondear esquinas en varios navegadores web.
Vale la pena señalar aquí que esta propiedad no es compatible con todas las versiones del navegador. La propiedad es compatible con IE9+, Firefox 4+, Chrome, Safari 5+ y Opera.
Pero para algunas versiones de navegador que no admiten esta propiedad, existen propiedades no estándar que agregan el llamado prefijo o prefijo a la propiedad.

Chrome antes de la versión 4.0, Safari antes de la versión 5.0, iOS usa la propiedad no estándar -webkit-border-bottom-left-radius.

Firefox anterior a la versión 4.0 utiliza la propiedad no estándar -moz-border-radius-bottomleft.

En este caso tendremos que duplicar la propiedad utilizando estos prefijos. Por ejemplo, si configuramos la propiedad para el borde de la esquina superior izquierda en un valor de cinco píxeles:

Radio del borde superior izquierdo: 5 px;
Entonces la propiedad, duplicándola usando prefijos, se verá así:

Las esquinas redondeadas de la foto parecen bastante interesantes y atractivas. La mayoría de las veces, estas imágenes se utilizan al hacer collages o crear presentaciones. Además, las imágenes con esquinas redondeadas se pueden utilizar como miniaturas de publicaciones en el sitio.

Hay muchas opciones de uso, pero solo hay una forma (correcta) de obtener esa foto. En este tutorial te mostraré cómo redondear esquinas en Photoshop.

Abre la foto en Photoshop que vas a editar.

Luego crea una copia de la capa de cascada llamada "Fondo". Para ahorrar tiempo, use teclas de acceso rápido CTRL+J.

La copia se crea para dejar intacta la imagen original. Si (de repente) algo sale mal, puede eliminar las capas fallidas y empezar de nuevo.

En este caso, sólo nos interesa uno de los ajustes: el radio de redondeo. El valor de este parámetro depende del tamaño y las necesidades de la imagen.

Estableceré el valor en 30 píxeles para que el resultado sea mejor visible.

Ahora necesitas estirar la figura resultante por todo el lienzo. Llamando a la función "Transformación libre" teclas de acceso rápido CTRL+T. Aparecerá un marco en la forma, que puedes usar para mover, rotar y cambiar el tamaño del objeto.

Nos interesa escalar. Estira la figura usando los marcadores indicados en la captura de pantalla. Una vez completado el escalado, haga clic en INGRESAR.

Consejo: para escalar con la mayor precisión posible, es decir, sin ir más allá del lienzo, debe habilitar el llamado "Vinculante" Mire la captura de pantalla, muestra dónde se encuentra esta función.

La función hace que los objetos se "peguen" automáticamente a elementos auxiliares y bordes del lienzo.

Como puede ver, se ha formado una selección alrededor de la figura. Ahora vaya a la capa de copia y elimine la visibilidad de la capa con la forma (ver captura de pantalla).

La capa de cascada ahora está activa y lista para editar. La edición consiste en eliminar cosas innecesarias de las esquinas de la imagen.

Invertir la selección usando teclas de acceso rápido CTRL+MAYÚS+I. Ahora la selección se queda sólo en las esquinas.

Buenos días, tardes, noches o noches a todos. Dmitry Kostin está contigo una y otra vez. Un día estaba mirando diferentes fotografías y luego me gustaron algunas. Y les gustaban porque tenían los bordes redondeados. Inmediatamente parece más interesante. ¿No lo crees? Y es por eso que en la lección de hoy me gustaría contarte cómo redondear las esquinas en Photoshop para que la foto luzca más interesante.

Lo que me encanta de Photoshop es que en muchos casos se puede hacer lo mismo de varias formas. Así es aquí. Comencemos con nuestro Photoshop.

Suavizado usando bordes

Este método es similar al anterior, pero sigue siendo muy diferente. Todo lo haremos con la misma imagen.

Creando una forma

El tercer método ya es radicalmente diferente de los dos anteriores. Así que tómate un descanso de un par de segundos y sigue adelante. No cambiaré la imagen y cargaré este auto en Photoshop nuevamente.

¿Ves con qué terminaste? La imagen ahora tiene bordes redondeados, y todo porque se muestra solo donde está nuestro rectángulo redondeado dibujado. Pero ahora puedes recortar la foto adicional usando la herramienta Marco, o puedes guardar la imagen inmediatamente y ya tendrás una imagen separada con esquinas redondeadas.

Intente hacerlo todo usted mismo y, al mismo tiempo, dígame cuál de los métodos presentados es más preferible para usted.

Y, por cierto, si tienes lagunas en Photoshop o simplemente quieres aprenderlo por completo en el menor tiempo posible, te recomiendo que veas uno. Gran curso de Photoshop para principiantes.. El curso está bien hecho, todo está contado y mostrado excelentemente y cada material se analiza con gran detalle.

Bueno, estoy terminando mi lección de hoy. No olvides suscribirte para recibir nuevos artículos y compartirlos con tus amigos. Me alegré de verte en mi blog. Te estoy esperando de nuevo. Adiós.

Saludos cordiales, Dmitry Kostin

Todos los navegadores modernos admiten estándares de marcado de hipertexto HTML5 y estilos de diseño CCS3. Y si su sitio (plantilla) admite estándares modernos, entonces puede realizar cambios en el diseño, como redondear esquinas, sombras y rellenos degradados, sin recurrir a editores gráficos.

Los webmasters de todo el mundo utilizan esquinas redondeadas en bloques y marcos de sitios web. En este artículo te contaré cómo redondear las esquinas de imágenes y fotografías en un sitio web sin usar programas de terceros, solo usando CSS.

Para que los ejemplos dados en el artículo se muestren correctamente en su pantalla, debe utilizar las últimas versiones de los navegadores, Firefox, Chrome y aquellos basados ​​​​en ellos: Yandex.Browser, Amigo, etc.

Redondear esquinas de bloques DIV

Según el estándar CSS3, para que el bloque DIV tenía esquinas redondeadas, necesita ser estilizado radio-frontera, por ejemplo así:

Radio del borde: 10 px;

Para mayor claridad, dibujemos dos bloques con esquinas rectas y redondeadas:

Bloque con ángulos rectos

Bloque con esquinas redondeadas

Redondear las esquinas de las imágenes

Por analogía con el ejemplo anterior, puede redondear las esquinas de las imágenes del sitio, por ejemplo fotografías. Para mayor claridad, redondeemos las esquinas de la foto de la página.

Aquí está la imagen sin procesamiento CSS.

Y ahora con esquinas redondeadas:

Radio del borde: 10 px;

Para hacerlo realmente “hermoso”, agreguemos algunos bordes desde el principio...

Radio del borde: 10 px; borde: 5px #ccc sólido;

y luego las sombras:

Radio del borde: 10 px; borde: 5px #ccc sólido; sombra de cuadro: 0 0 10px #444;

La siguiente opción (esquinas redondeadas con sombra sin borde) se parece mucho a una alfombrilla de ratón:

Radio del borde: 10 px; sombra de cuadro: 0 0 10px #444;

Y por último, una completa burla de la imagen.

Radio fronterizo: 50%; borde: 5px #cfc sólido; sombra de cuadro: 0 0 10px #444;

Si abre la imagen en una nueva ventana, verá que (la imagen) no ha cambiado y que todas las esquinas, sombras, etc. son solo el resultado del procesamiento. CSS estilos por su navegador.

Una pequeña digresión lírica

Estilo borde aumenta el tamaño de la imagen por la cantidad del borde. Si se especifica un valor borde: 5px, la imagen final será 10 píxeles más ancha y más alta. Tenga esto en cuenta, en algunos casos es posible que el diseño del sitio no funcione.

un estilo sombra de caja no afecta el tamaño de la imagen, la sombra parece pasar sobre los elementos vecinos. Al usarlo, el diseño del sitio no se ve afectado.

Cómo redondear las esquinas de las imágenes en WordPress

En todos los ejemplos anteriores, escribí estilos directamente en las etiquetas del código html. Por ejemplo, el último se ve así:

Esto es bueno cuando necesitas reorganizar una imagen o fotografía. ¿Y si quieres cambiarlo todo? Bueno, no tendrás que recorrer todo tu sitio para editar la visualización de cada uno. En la mayoría de los casos, la etiqueta de WordPress IMG define varias clases de estilo. Uno por el nombre único del archivo de imagen, otro por tamaño y otro por alineación. Puede complementar uno de ellos con los parámetros anteriores.

Por ejemplo, para todas las imágenes para las que no se especifica la alineación, en el archivo estilo.css Para su tema de WordPress, ingrese lo siguiente:

Alignnone (radio-borde: 10px; borde: 5px #cfc sólido; sombra-cuadro: 0 0 10px #444;)

O el método más estricto para todas las imágenes del sitio. Redefinimos el estilo de todas las etiquetas. IMG:

Img (radio-borde: 10px; borde: 5px #cfc sólido; sombra-cuadro: 0 0 10px #444;)

La última opción es adecuada no sólo para WordPress, sino también para cualquier CMS. E incluso por simple HTML páginas en el caso de que, al mostrar imágenes, la etiqueta IMG no se asignan clases de estilo. Pero ten cuidado. Si anula las opciones de visualización de etiquetas IMG¡Cambiarás la apariencia de TODAS las imágenes del sitio!

En lugar de una conclusión

Todos los ejemplos del artículo son condicionales y su único objetivo es demostrar algunas de las capacidades de CSS para el procesamiento de imágenes y mostrar lo simple que es.

En la lección anterior, aprendimos cómo establecer un borde para un elemento. También analizamos propiedades como color de borde y estilo de borde, con las que puedes personalizar el color y el estilo del borde. Sin embargo, todos nuestros marcos salieron con ángulos rectos. Ahora le mostraremos cómo crear esquinas redondeadas en CSS para bordes.

Cómo redondear esquinas: propiedad border-radius de CSS3

Se pueden redondear las esquinas en CSS para cualquier elemento de una página HTML. Para hacer esto, debe aplicarle la propiedad border-radius con el valor apropiado. La mayoría de las veces el valor se especifica en píxeles, pero también se pueden utilizar otras unidades, como em o porcentaje (en el último caso, el cálculo es relativo al ancho del bloque).

El efecto de esta propiedad sólo será perceptible si el elemento al que se le está aplicando estilo tiene un fondo y/o borde de color. Por ejemplo:

BorderElement (color de fondo: #EEDDFF; borde: 6px sólido #7922CC; radio del borde: 25px;)

El estilo descrito anteriormente dará el siguiente resultado en el elemento