Cómo redondear las esquinas de una imagen usando CSS sin Photoshop. 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í:
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
Todo el mundo está cansado desde hace tiempo de las tradicionales esquinas rectangulares en el diseño de sitios web. Están de moda las esquinas redondeadas, que no se realizan mediante imágenes, sino mediante estilos, para los que se utiliza la propiedad border-radius. Esta propiedad puede tener uno, dos, tres o cuatro valores separados por un espacio, que determinan el radio de todas las esquinas o de cada una de forma individual.
en la mesa 1 muestra diferente número de valores y el tipo de bloque que se obtiene en este caso.
| Código | Descripción | Vista |
|---|---|---|
| div (radio-borde: 10px;) | Radio de redondeo para todas las esquinas a la vez. | |
| div (radio-borde: 0 10px;) | El primer valor establece el radio de las esquinas superior izquierda e inferior derecha, el segundo valor establece el radio de las esquinas superior derecha e inferior izquierda. |  |
| div (radio-borde: 20px 10px 0;) | El primer valor establece el radio de la esquina superior izquierda, el segundo, tanto la superior derecha como la inferior izquierda, y el tercer valor, la inferior derecha. |  |
| div (radio-borde: 20px 10px 5px 0;) | Establece secuencialmente el radio de las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda. |  |
El ejemplo 1 muestra cómo crear un bloque con esquinas redondeadas.
Ejemplo 1. Esquinas de un bloque
HTML5 CSS3 IE 9+ Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 1.
Arroz. 1. Bloque con esquinas redondeadas
Se puede obtener un efecto interesante si establece el radio de redondeo para que sea mayor que la mitad de la altura y el ancho del elemento. En este caso, obtendrás un círculo. El ejemplo 2 muestra cómo crear un botón redondo con una imagen.
Ejemplo 2: botón redondo
HTML5 CSS3 IE 9+ Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 2.
Arroz. 2. Botón redondo
En el navegador Opera, redondeando a
La propiedad border-radius se puede combinar con otras propiedades, por ejemplo, agregando una sombra a un elemento. En el ejemplo 3, se crea un conjunto de círculos, uno de los cuales se resalta usando box-shadow. Este conjunto se puede utilizar para navegar a través de páginas o fotografías.
Ejemplo 3. Resplandor
HTML5 CSS3 IE 9+ Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 3.
Arroz. 3. Brilla alrededor del círculo.
Usando border-radius puedes hacer no solo un círculo, sino también una elipse, así como un redondeo elíptico para un bloque. Para hacer esto, no debe escribir un valor, sino dos, separados por una barra. Escribir 20px/10px significa que el radio horizontal del filete será de 20 píxeles y el radio vertical será de 10 píxeles. El ejemplo 4 muestra cómo crear esquinas elípticas para agregar un título de estilo cómic a una foto.
Ejemplo 4: elipses
HTML5 CSS3 IE 9+ Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 4.
Arroz. 4. Usar esquinas elípticas
También puede cambiar la apariencia de las esquinas de las imágenes agregando la propiedad border-radius al selector de img, como se muestra en el Ejemplo 5.
Ejemplo 5: Imágenes
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Esquinas redondeadas en CSS Se puede hacer de muchas maneras, muchísimas, y algunas de ellas pueden considerarse obsoletas, ya que CSS 3 introdujo nuevas propiedades que le permiten redondear las esquinas de los elementos HTML. Sin embargo, en primer lugar, los navegadores más antiguos no admiten estas propiedades y, en segundo lugar, en el cerebro creativo de un diseñador a veces nacen ideas que sólo los métodos antiguos pueden salvar. Por lo tanto, aquí veremos varias opciones diferentes para crear esquinas redondeadas en CSS: desde las más simples hasta las bastante complejas.
En estos ejemplos, las esquinas de los elementos inicialmente de bloque están redondeadas y, en algunos ejemplos, estos bloques se utilizan como elementos auxiliares. Pero recuerde que puede hacer lo mismo fácilmente con elementos de nivel de línea, preconfigurandolos con block o inline-block si es necesario.
Esquinas redondeadas en CSS 3 sin imágenes
Este ejemplo utiliza propiedades de CSS 3 que le permiten redondear esquinas fácilmente sin la ayuda de imágenes.
Ejemplo de HTML y CSS: redondear esquinas con CSS 3 sin imágenes
Descripción del ejemplo
- Para redondear las esquinas utilizamos la propiedad CSS 3, que todos los navegadores modernos entienden.
- Para los navegadores más antiguos Firefox, Chrome y Safari, utilizamos propiedades especiales con los prefijos -moz- y -webkit-, que aparecían antes de que se admitiera la propiedad principal. Desafortunadamente, no existen análogos similares para los antiguos Opera e IE. Tenga en cuenta que al crear curvas complejas, es posible que las propiedades con prefijos no funcionen correctamente. Es por eso que en el código CSS se enumeraron más arriba que la propiedad principal, de modo que según prioridades de estilo, los navegadores que ya entienden "puro" lo utilizan.
Las propiedades con prefijos no están en la especificación CSS, por lo que su uso generará un código no válido.
Esquinas redondeadas en CSS sin imágenes.
Este ejemplo tampoco tiene imágenes, pero utiliza bloques adicionales. La esencia del método es que antes y después del contenido principal se indican varios bloques que, a medida que se alejan de él, van disminuyendo gradualmente de ancho utilizando los márgenes laterales externos. Gracias a esto se produce la imitación de esquinas redondeadas.
Este método es malo porque el código está "lleno" de bloques adicionales, pero, desafortunadamente, en muchos ejemplos dichos bloques estarán presentes. Otra desventaja es que con radios de curvatura grandes habrá que añadir incluso más bloques de los utilizados en el ejemplo.
Ejemplo de HTML y CSS: redondear esquinas sin utilizar imágenes
Descripción del ejemplo
- Dentro del bloque con class="block" indicamos un elemento para el contenido principal ("content_block") delante del cual colocamos bloques para simular el redondeo de esquinas ("b1", "b2", "b3"). Después las ponemos igual, pero en orden inverso.
- Configuramos los bloques de simulación a la altura y los márgenes laterales (CSS) requeridos para crear la apariencia de esquinas. También restablecemos su tamaño de fuente (CSS) y lo configuramos en :oculto; esto está destinado a navegadores más antiguos que pueden aumentar la altura y hacerlo más grande de lo especificado.
- En este ejemplo, además de redondear las esquinas, también se agregó una imitación de un marco, si no la necesita, simplemente elimine todos los "bordes" de los elementos y elimine el color de fondo del "b3"; bloquear.
La forma más sencilla de hacer que aparezcan esquinas redondeadas en CSS es utilizar una imagen como fondo del elemento. En este caso, las dimensiones del elemento suelen especificarse igual que el tamaño de la imagen de fondo. La desventaja de este método es que el contenido del elemento no debe extenderse más allá de su alcance, es decir, debe tener un tamaño limitado determinado.
Ejemplo de HTML y CSS: redondear esquinas usando una imagen
Descripción del ejemplo
- Usando la propiedad CSS, configuramos el bloque como una imagen de fondo, cuya reproducción vertical y horizontal está prohibida (sin repetición), ya que en este caso esto no es necesario.
- Para evitar que el texto dentro del bloque toque sus bordes, configuramos su relleno (CSS) en 5px en cada lado.
- A continuación, debe configurar el bloque con las mismas dimensiones que el fondo. Nuestra imagen de fondo tiene unas dimensiones de 140x32 píxeles, pero especificamos el ancho (CSS) y el alto (CSS) del bloque en sí, reducido en 10px. Tuve que reducirlo debido a esos mismos rellenos internos, que también expanden el elemento en 5 píxeles en cada dirección.
En el ejemplo anterior, el tamaño del bloque era fijo y dependía del tamaño de la imagen de fondo, lo cual es muy inconveniente. Ahora cambiaremos el tamaño del ancho de nuestro bloque. Para hacer esto, recorta tres partes de la imagen: los lados y una parte del centro. Luego colocaremos dos elementos de tamaños fijos dentro del bloque principal, que gracias al posicionamiento absoluto se colocarán de lado. Démosles las mismas partes laterales que el fondo y la parte central para el bloque principal. Esto nos dará un bloque con esquinas redondeadas y un ancho variable.
Esta técnica se utiliza muy a menudo para redondear elementos de una sola línea, como enlaces o títulos de secciones/menús.
Ejemplo de HTML y CSS: redondear esquinas usando bloques laterales
Descripción del ejemplo
- Dentro del bloque class = "block" colocamos dos elementos: "left_bok" y "right_bok", a los que asignamos imágenes de las partes laterales como fondo (CSS) y prohibimos su reproducción (sin repetición). Para el bloque principal en sí, configuramos el fondo desde la parte central y permitimos que se duplique solo horizontalmente (repetir-x).
- Especificamos el ancho de los bloques laterales correspondiente al tamaño del fondo; para nosotros es 14x32 píxeles. Pero para el bloque principal, como en el ejemplo anterior, configuramos la altura en 22px para compensar el relleno vertical.
- Colocaremos nuestras paredes laterales en relación con "bloque", por lo que especificamos :relativo para él y absoluto para las paredes laterales mismas. Bueno, luego los presionamos en los lados correspondientes del padre usando las propiedades CSS y .
- Para evitar que el contenido del bloque quede oculto debajo de las imágenes laterales, configuramos "bloque" para que tenga relleno lateral (CSS), que puede ser igual o ligeramente más grande que los propios lados. También establecemos pequeños márgenes en la parte superior e inferior para que el texto no se “pegue” a los bordes.
En IE6 hay un pequeño error con este método:
Si el ancho o alto del "bloque" es impar, aparecerá una sangría desagradable de 1 px entre el borde interior del bloque y la barra lateral ubicada a la derecha, lo que arruinará toda la imagen. Este error se puede solucionar usando Hackear CSS con cierta expresión, pero ni siquiera daré un ejemplo aquí, ya que a menudo congela el navegador y es mejor no usarlo.
Hagámoslo diferente. Establezcamos el margen izquierdo (CSS) de "right_bok" al 100% para que se mueva más allá del borde derecho del bloque principal, y luego lo devolvamos, moviéndolo hacia la izquierda una cantidad de píxeles igual a su ancho. IE6 funciona correctamente con los valores de estas propiedades, por lo que no le queda más remedio que colocar el bloque donde lo necesitemos.
Este método de redondear esquinas es similar al anterior, pero a diferencia de él, aquí no se colocan elementos HTML en los lados, sino los que se agregan al bloque principal. pseudo elementos. Gracias a este enfoque, fue posible deshacerse del código HTML innecesario de la página.
Ejemplo de HTML y CSS: redondear esquinas utilizando pseudoelementos laterales
Descripción del ejemplo
- Usando pseudoelementos CSS indicamos que queremos agregar algo al principio y al final del bloque principal. Y, usando la propiedad CSS, simplemente agregamos las imágenes necesarias de esquinas redondeadas, o mejor dicho, lados. Entonces creamos dos pseudoelementos con imágenes.
- Bueno, entonces hacemos exactamente lo mismo que en el ejemplo anterior, solo que trabajamos con los pseudoelementos creados.
Para IE6 e IE7, en este ejemplo se utilizaron las siguientes "muletas":
- Como sabe, IE6 e IE7 no comprenden los pseudoelementos utilizados aquí, por lo que hacemos lo siguiente. Usamos expresión, que integra dos etiquetas dentro del elemento principal, y les damos los mismos estilos que en el ejemplo anterior. Tenga en cuenta que el código inyectado que viene después del primer HTML interno se agrega inmediatamente después de la etiqueta "bloque" de apertura, y después del segundo HTML interno se agrega antes de la etiqueta de cierre. Sí, en nuestro caso esto no importa, ya que se utiliza posicionamiento absoluto, pero a veces es útil saberlo.
- Para evitar que otros navegadores vean este código, lo incluimos en comentarios condicionales. Sería mejor si lo colocara en un archivo CSS separado, que esté conectado con una etiqueta cerrada con los mismos comentarios.
Esquinas redondeadas en CSS usando envoltura de bloques
La esencia de este método es que primero se recortan las esquinas de la imagen. Luego, dentro del bloque principal, se colocan varios bloques más (según el número de esquinas), que se encajan entre sí. A cada uno de ellos se le asigna una esquina de la imagen como fondo. Se prohíbe la reproducción de imágenes y se dan coordenadas para que se ubiquen en las esquinas de los bloques. Así se obtiene el efecto de esquinas redondeadas.
Ejemplo de HTML y CSS: redondear esquinas usando Block Wrap
Descripción del ejemplo
- Colocamos cuatro más dentro del bloque principal. Dado que ninguno de estos bloques tiene márgenes o marcos, y sólo el más interno tiene sangrías, todos son iguales en alto y ancho.
- Usando la propiedad CSS, configuramos cada uno de los bloques internos en una esquina como fondo, les prohibimos reproducirse y los ubicamos en las esquinas de los bloques. Y como el color de fondo de los elementos es transparente, las cuatro esquinas del fondo son visibles en la página.
- Agregue el color de fondo deseado al bloque exterior con la esquina. Todo está listo.
Puede establecer explícitamente el ancho del bloque especificando la propiedad deseada en class="block" , pero para cambiar la altura debe usar el elemento más interno (para nosotros es "rb").
Esquinas redondeadas en CSS usando posicionamiento
Aquí también se recortan las esquinas para el fondo, que se indicará en los bloques pequeños. Utilizando el posicionamiento absoluto de CSS, estos bloques se colocan en las esquinas del elemento principal, al que se le asigna el color de fondo deseado.
Ejemplo de HTML y CSS: redondear esquinas mediante posicionamiento
Descripción del ejemplo
- Dentro del elemento principal (class= "block") colocamos cuatro etiquetas con las clases "corn_lt", "corn_rt", "corn_lb", "corn_rb", que actuarán como bloques de esquina.
- Usando la propiedad CSS, conectamos nuestra propia imagen de fondo a cada bloque de esquina y configuramos su ancho y alto para que sean iguales en tamaño a estas imágenes de fondo. Por las dudas, restablecemos el tamaño de fuente (CSS) y recortamos el exceso (CSS).
- Especificamos un posicionamiento relativo para el elemento principal (CSS:relativo), ya que posicionaremos los bloques de las esquinas en relación con él, y para las esquinas mismas, absoluto (absoluto).
- Usando las propiedades CSS y , especificamos distancias de desplazamiento vertical y horizontal para los bloques de las esquinas para que estén ubicados en las esquinas del bloque principal.
Hay un par de problemas con este método en IE6:
- Si el ancho del "bloque" no se especifica explícitamente, las esquinas de la izquierda no encajarán en su lugar. La razón de esto es la presencia de un acolchado interno en el bloque. La forma más sencilla de solucionar el problema es eliminar la sangría y encerrar el contenido principal del "bloque" (sin esquinas) en un contenedor de bloque adicional y luego especificar la sangría requerida en el contenedor. Pero aquí lo hice diferente al habilitar el diseño usando la propiedad zoom :1, que le dice a IE6 que muestre el elemento en su tamaño natural. Esta propiedad no es válida, por lo que si decides utilizarla, te recomiendo que realices la conexión a través de comentarios condicionales.
- El mismo error de un píxel que se analizó anteriormente. Pero aquí se pueden formar espacios no solo entre las esquinas derechas y el lado derecho del bloque, sino también en la parte inferior. Y si nos deshicimos de los espacios de la derecha, esto no funcionará con los de abajo. La solución es especificar explícitamente un ancho y un alto uniformes para el elemento principal. También puede establecer valores impares, pero luego deberá establecer que las distancias de desplazamiento hacia abajo y hacia la derecha no sean cero, sino -1px.
Esencialmente, la tecnología para este método de redondear esquinas en CSS es la misma que la anterior, por lo que aquí se omitirán los comentarios detallados. La única diferencia es que en lugar de imágenes de esquina de fondo separadas, aquí se utiliza una imagen de sprite común. Gracias a esto, la carga del sitio se acelera, porque una imagen “pesa” menos que cuatro y alojamiento hay una apelación en lugar de cuatro.
Un sprite es una imagen que combina varias imágenes utilizadas como fondo para los elementos del sitio web. Qué parte del sprite será el fondo de un elemento HTML en particular depende de las coordenadas especificadas en una propiedad CSS especial.
Ejemplo de HTML y CSS: redondear esquinas usando posicionamiento y sprites
Descripción del ejemplo
- Usando la propiedad CSS, conectamos una imagen de sprite de fondo a los bloques de las esquinas, que tiene una forma redonda con dimensiones de 22x22 píxeles (11x11 píxeles para cada cuarto de esquina).
- Usando la propiedad CSS, especificamos las coordenadas de desplazamiento del fondo. Por ejemplo, un valor de -11px 0 significa que el fondo se desplazará hacia la izquierda 11px en el eje X, pero no se desplazará en el eje Y. Por lo tanto, la mitad izquierda del sprite va más allá del borde del elemento y solo queda la derecha. Pero solo es visible a medias, ya que su altura es de 22 px y la altura del bloque de la esquina en sí es de solo 11 px. Entonces resulta que con este valor, el fondo del elemento será el cuarto superior derecho del sprite.
Con IE6 existen los mismos problemas que en el ejemplo anterior.
En este ejemplo, redondearemos las esquinas de un elemento que tiene un borde, pero esta no es una característica específica de este método en particular; puedes usar fácilmente un redondeo con un borde en los ejemplos anteriores.
Los propios redondeos los realizaremos utilizando pseudoelementos creados a partir del bloque principal, pero sin aplicarles posicionamiento.
Y una cosa más. En los ejemplos anteriores, las esquinas se cortaron junto con el fondo interior, y esto no siempre es necesario, especialmente si se espera que el fondo de un bloque con esquinas redondeadas no sea uniforme. Por lo tanto, el fondo dentro del marco aquí se hizo transparente (el formato PNG lo permite) y cuando se cortaron las esquinas, su interior también resultó ser transparente. Si es necesario, también puede utilizar un enfoque similar al de los ejemplos anteriores.
Ejemplo de HTML y CSS: redondear esquinas utilizando pseudoelementos
fondo , y con su ayuda los colocamos en el lado derecho y prohibimos la "reproducción". Eso es todo, las esquinas están listas.
Para IE6 e IE7, utilizamos aquí las ya familiares "muletas" con la inyección de código HTML, ya que estos navegadores no comprenden los pseudoelementos utilizados aquí:
- Usando expresión, integramos dos etiquetas dentro del elemento principal, que también convertimos en bloques. Luego les colocamos una etiqueta. Y luego estas etiquetas tienen las mismas propiedades que los pseudoelementos. Lo único es que agregamos adicionalmente la propiedad CSS :relative, sin la cual el marco se superpone a las esquinas.
La desventaja de este método es que no se puede establecer explícitamente la altura de un bloque con esquinas redondeadas, porque si excede el tamaño del contenido, las esquinas inferiores no se presionarán contra los bordes. Esto se puede evitar si aún incluye el contenido principal en otro bloque y establece su altura.
Otro ejemplo de redondeo de esquinas con pseudoelementos y sin bloques adicionales
Este ejemplo es similar al anterior, pero aquí usamos el posicionamiento para organizar los pseudoelementos. Gracias a este enfoque, fue posible especificar explícitamente la altura de un bloque con esquinas redondeadas.
Ejemplo de HTML y CSS: redondear esquinas donde puedes cambiar la altura del bloque
Y nuevamente, para IE6 e IE7, agregamos varios elementos adicionales dentro del bloque principal usando expresión y cerramos el código en comentarios condicionales. Sólo que esta vez ni siquiera intentaremos emular pseudoelementos, sino que lo haremos de forma más sencilla.
- Agregamos cuatro etiquetas dentro de "bloque" y les aplicamos posicionamiento. Y luego simplemente les mostramos las esquinas de la imagen como fondo y las colocamos en las esquinas del elemento principal. Es decir, actuamos exactamente como en uno de los métodos comentados anteriormente.
- Para deshacerse del error de un píxel (que se mencionó más de una vez anteriormente), agregue un margen izquierdo (CSS) con un valor del 100% y un desplazamiento negativo igual a -9px a los elementos de la esquina derecha. En general, si recuerdas, este desplazamiento debe ser igual al ancho del bloque de la esquina (para nosotros es 11px), pero no te olvides del borde de 2px que tenemos aquí: debemos colocar las esquinas encima. (11px-2px=9px).
Por cierto, de hecho, sería más fácil emular pseudoelementos, como hicimos en el ejemplo anterior; de esta manera habría menos código adicional. Pero no en IE6, este navegador necesitaría algunas "muletas" más y, como resultado, tendría que escribir dos comentarios condicionales- para IE6 e IE7, y esto sólo inflaría el código...
En Firefox, este método funciona correctamente desde la versión 3.6, y en Opera, desde la versión 10.0, no se me ocurrieron muletas para ellos, ya que esto tiene poca relevancia.
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.
