Efecto de esquinas rizadas usando solo CSS. Crear marcos con marco de comentario CSS con esquina css

Vlad Merzhevich

Con CSS, puede agregar un borde a un elemento de varias formas. Básicamente, por supuesto, se utiliza la propiedad de borde, como la más universal, así como el contorno y, sorprendentemente, la sombra de caja, cuya tarea principal es crear una sombra. A continuación, consideraremos estos métodos y sus diferencias entre sí.

Propiedad de esquema

La propiedad más simple para crear marcos. Tiene los mismos parámetros que el borde, pero difiere significativamente de él en algunos detalles:

• el contorno se dibuja alrededor del elemento (el borde está adentro);
• el contorno no afecta las dimensiones del elemento (el borde se agrega al ancho y alto del elemento);
• el contorno solo se puede establecer alrededor de todo el elemento, pero no en los lados individuales (el borde se puede usar para cualquier lado o todos a la vez);
• el contorno no se ve afectado por el radio de redondeo establecido por la propiedad border-radius (el borde se ve afectado).

Surge la pregunta: ¿en qué casos se necesita un esquema, cuando su papel, a pesar de las diferencias enumeradas, lo asume plenamente la frontera? No hay tantas situaciones, pero ocurren:

• creación de complejos marcos multicolores;
• agregar un borde a un elemento cuando se desplaza sobre él con el cursor del mouse;
• ocultar el marco agregado por el navegador automáticamente para algunos elementos cuando reciben el foco;
• para un contorno, puede establecer la distancia desde el borde de un elemento al marco utilizando la propiedad de desplazamiento del contorno para crear.

Marcos multicolores

Debe comprender que el contorno no reemplaza de ninguna manera el borde y puede existir con él, como se muestra en el ejemplo 1.

Ejemplo 1. Creación de un marco

En este ejemplo, se agrega un borde negro alrededor del elemento, que está separado del fondo por un borde blanco (Fig. 1).

Arroz. 1. Encuadre alrededor del elemento

Encuadre cuando se usa: hover

Agregar un borde a través del borde aumenta el ancho del elemento, lo cual es bastante notable cuando se combina el borde y la pseudoclase: hover. Hay dos formas de "ganar" esto. Lo más simple es reemplazar el borde con el contorno, que sabemos que no tiene ningún efecto en las dimensiones del elemento (ejemplo 2).

Ejemplo 2. Borde al pasar el mouse

El contorno no siempre es adecuado, aunque solo sea porque el redondeo de las esquinas no lo afecta. Aquí el segundo método es adecuado: agregue un marco invisible o un marco que coincida con el color de fondo y luego cambie sus parámetros al pasar el mouse (ejemplo 3). Entonces no ocurrirá ningún desplazamiento del elemento, ya que el marco ya existe desde el principio. Pero recuerde siempre que el ancho de un elemento es la suma de los valores de ancho, borde a la izquierda y borde a la derecha. La situación es similar con la altura.

Ejemplo 3. Cuadro al pasar el mouse

Borde alrededor de campos de formulario

En algunos navegadores (Chrome, Safari, Últimas Versiones Opera), aparece un pequeño borde de color alrededor de los campos del formulario cuando reciben el foco (Figura 2). Para eliminarlo, simplemente agregue el valor none a la propiedad de esquema en los estilos, como se muestra en el ejemplo 4.

Arroz. 2. Encuadre alrededor de los campos

Ejemplo 4. Retirada del marco

Marcos a través de box-shadow

Aunque la propiedad box-shadow está destinada a agregar una sombra alrededor de un elemento, también se puede usar para crear bordes que no se pueden hacer con un borde o un contorno. Esto se debe al hecho de que el número de sombras puede ser ilimitado, cuyos parámetros se enumeran separados por comas.

Para obtener el marco, los primeros tres parámetros deben establecerse en cero, son responsables de la posición de la sombra y su desenfoque. El cuarto parámetro en este caso es responsable del grosor del borde y el quinto establece el color del borde. Para el segundo marco, el cuarto parámetro es igual a la suma de los espesores de los dos marcos.

El ejemplo 4 muestra cómo agregar dos bordes y un borde a la derecha usando una propiedad de sombra de cuadro.

Ejemplo 4. Usando box-shadow

El resultado de este ejemplo se muestra en la Fig. 3.

Arroz. 3. Marcos creados por la propiedad box-shadow

En este tutorial, crearemos el efecto de esquinas curvas sin usar imágenes ni marcas adicionales. Funciona muy bien en todos los navegadores modernos y funciona bien para diseños de sitios web con esquemas de color simples.

Este efecto se utilizó en la demostración del tutorial "Varios fondos y trazos con CSS2". Además, el uso de esquinas curvadas en el diseño de un sitio real se puede ver en el ejemplo de Yiibu. Pero el sitio de Yiibu usa imágenes y nosotros usamos pseudoelementos y CSS.

Comienzo

Nada complicado. Cualquier elemento funcionará y no se requiere marcado adicional. Todo comienza con un simple rectángulo de color. Los navegadores que no admiten pseudoelementos (IE6 e IE7) también lo procesarán.

La adición de la propiedad posición: relativa hace posible el posicionamiento absoluto de los pseudoelementos.

Nota (posición: relativa; ancho: 30%; relleno: 1em 1.5em; margen: 2em automático; color: #fff; fondo: # 97C02F;)

La esquina doblada se crea utilizando un pseudoelemento que se coloca en la esquina superior del rectángulo. El pseudoelemento no tiene ancho ni alto, pero tiene un trazo grueso. Al cambiar el grosor del trazo, cambiaremos el tamaño de la esquina doblada.

En este ejemplo, las partes superior y derecha del trazo tienen colores que coinciden con el color de fondo del rectángulo principal. Las partes izquierda e inferior del trazo son más oscuras o más claras que el color de fondo del rectángulo.

Nota: antes (contenido: ""; posición: absoluta; arriba: 0; derecha: 0; ancho del borde: 0 16px 16px 0; estilo del borde: sólido; color del borde: # 658E15 #fff;)

Eso es todo lo que se necesita para crear un efecto de esquina curva simple similar al que se usa en el sitio web de Yiibu.

Firefox 3.0 no permite el posicionamiento de pseudoelementos. Puede usar un par de propiedades para arreglar cosas en un navegador determinado.

Nota: antes (... display: block; width: 0;)

Agrega una sombra sutil

La apariencia de la esquina se puede mejorar ligeramente agregando una propiedad de sombra de cuadro (para aquellos navegadores que la admitan) al pseudoelemento. Establecer la propiedad overflow: hidden en una clase de elemento oculta la parte de la sombra que rompe el efecto de esquina rizada.

Nota: antes (... -webkit-box-shadow: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0.2); caja-sombra: 0 1px 1px rgba (0,0,0,0,3), -1px 1px 1px rgba (0,0,0,0.2);)

Esquinas redondeadas

También es relativamente fácil utilizar esta técnica junto con las esquinas redondeadas. Desafortunadamente, todos los navegadores modernos tienen algún tipo de error relacionado con la propiedad border-radius (incluidos los que usan la propiedad sin prefijo). Esta situación significa la necesidad de trabajo adicional.

Solo los navegadores Webkit pueden hacer esquinas redondeadas para pseudoelementos si solo tienen 2 partes del trazo. Opera 11 y Firefox 3.6 crean un montón llamativo. Además, Opera 11 tiene el error máximo en este proceso.

El uso de los cuatro lados elimina los problemas en Opera 11 y Firefox 3.6. Pero este método La solución da como resultado un error en Safari 5, que da como resultado una línea diagonal con líneas irregulares. Derivación este problema puede establecer el color de al menos una parte del trazo en transparente.

El color de fondo será visible a través del trazo transparente. Idealmente, este enfoque generará efecto y contendrá un mínimo de código. Pero Opera 11 solo muestra el color de fondo a través de un trazo transparente si se establece la propiedad border-radius.

Nota redondeada: antes (contenido: ""; posición: absoluta; arriba: 0; derecha: 0; ancho del borde: 8px; color del borde: #fff #fff transparente transparente; fondo: # 658E15; -webkit-border- radio inferior-izquierda: 5px; -moz-border-radius: 0 0 0 5px; borde-radio: 0 0 0 5px; pantalla: bloque; ancho: 0;)

El archivo CSS de la página de demostración contiene comentarios útiles para trabajar. Cada navegador es diferente cuando se usa la propiedad border-radius o los elementos de borde sin ancho ni alto.

El aspecto final del código

A continuación se muestra todo el CSS necesario para crear un efecto de esquinas rizadas con sombras ligeras y usando solo un elemento HTML.

Posición: relativa; ancho: 30%; acolchado: 1em 1.5em; margen: 2em automático; color: #fff; fondo: # 97C02F; desbordamiento: oculto; ) .note: before (content: ""; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; border-style: solid; border-color: #fff #fff # 658E15 # 658E15 ; fondo: # 658E15; -webkit-box-shadow: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0,2); -moz-box-shadow: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0.2); caja-sombra: 0 1px 1px rgba (0,0,0,0,3), -1px 1px 1px rgba (0,0,0,0.2); display: block; width: 0; / * Superar los límites de Firefox 3.0 * /) .note.round (-webkit-border-radius: 5px; -moz-border-radius: 5px ; border-radius: 5px;) .note.Rodeado: before (border-width: 8px; border-color: #fff #fff transparent transparent; -webkit-border-bottom-left-radius: 5px; -moz-border- radio: 0 0 0 5px; radio del borde: 0 0 0 5px;)

Conclusión

La página de demostración contiene ejemplos que utilizan diferentes colores para asegurarse de que el efecto sea fácil de usar.

Hay que tener en cuenta que esta técnica funciona peor cuando se utiliza una imagen como fondo de un elemento que cuando se utiliza un color simple. Pero otros métodos para organizar las esquinas dobladas también tienen tales restricciones.

Vlad Merzhevich

En los sitios web, los triángulos se utilizan todo el tiempo como parte del diseño de elementos, por ejemplo, sirven como puntero a algún objeto, dirigiendo la atención del lector al lugar correcto. Además, los triángulos sirven como funciones decorativas, haciendo que los bloques donde se aplican sean más elegantes y modernos. En la Fig. 1 muestra un ejemplo del uso de un triángulo en el diseño.

Arroz. 1. Triángulos en el diseño web

No puede hacer un triángulo directamente usando CSS, por lo que hay dos métodos disponibles para agregarlo: a través del borde y la transformación.

Usando borde

Aunque los bordes creados a través de la propiedad de borde no están directamente relacionados con los triángulos, es el borde el que se usa con mayor frecuencia para esto. Si establecemos el ancho y la altura del elemento en cero, y también establecemos un borde suficientemente grueso, veremos un conjunto de cuatro triángulos (Fig.2). Para mayor claridad, los bordes de todos los lados están colocados en diferentes colores.

Arroz. 2. Agregar un borde a un elemento

Dejando solo el borde deseado, y haciendo transparente el resto, obtenemos un triángulo del color deseado (Fig.3).

Arroz. 3. Elemento con bordes transparentes

El ejemplo 1 muestra la adición de un triángulo a un bloque mediante el pseudoelemento :: after.

Ejemplo 1. Bloque con un triángulo

Para elementos absolutamente posicionados, no es necesario especificar ancho y alto cero.

Combinando bordes puedes conseguir cuatro tipos más de triángulos, que en combinación con los ya mencionados nos da ocho opciones. Su tipo y código requerido se dan en la tabla. uno.

Pestaña. 1. Posibles tipos de triángulos

Vista	Estilo
	borde: 20px sólido transparente; borde superior: 20px verde sólido;
	borde: 20px sólido transparente; borde derecho: 20px verde sólido;
	borde: 20px sólido transparente; borde inferior: 20px verde sólido;
	borde: 20px sólido transparente; borde izquierdo: 20px verde sólido;
	borde: 20px sólido transparente; borde superior: 20px verde sólido; borde derecho: 20px verde sólido;
	borde: 20px sólido transparente; borde derecho: 20px verde sólido; borde inferior: 20px verde sólido;
	borde: 20px sólido transparente; borde inferior: 20px verde sólido; borde izquierdo: 20px verde sólido;
	borde: 20px sólido transparente; borde izquierdo: 20px verde sólido; borde superior: 20px verde sólido;

En la tabla puedes ver que los bordes invisibles ocupan espacio, tenlo en cuenta a la hora de colocar elementos. El estilo también debe rellenarse con cero ancho y alto, o usar la propiedad de posición, como en el ejemplo 1.

Puede hacer un triángulo de una forma diferente si establece un grosor diferente de los bordes. Entonces, el código para crear el bloque que se muestra en la Fig. 4 se muestra en el ejemplo 2.

Arroz. 4. Triángulo agudo

Ejemplo 2. Triángulo agudo

Con la ayuda del borde obtenemos triángulos de colores sólidos para crear el borde que se muestra en la fig. 5, tienes que ir a por el truco y poner un elemento encima del otro con un ligero desplazamiento. Nuevamente, los pseudo-elementos: before y: after nos ayudarán aquí (ejemplo 3).

Arroz. 5. Marco con esquina

Ejemplo 3. Triángulos superpuestos

Debido al hecho de que estamos superponiendo un elemento de color sólido sobre otro, este método solo es adecuado para rellenos de color sólido y no es adecuado para degradados o imágenes de fondo.

Usando transformación

Con la ayuda de la transformación podemos rotar el elemento cuadrado 45º y sacarle un rombo. Este no es un triángulo como tal, por lo que dejamos la parte que sobresale que necesitamos a la vista y escondemos el resto detrás de otro elemento (ejemplo 4).

Ejemplo 3. Transformación

El resultado de este ejemplo se muestra en la Fig. 6.

Arroz. 6. Triángulo con sombra

1. , , - propiedades CSS
2. (Transparente): propiedad CSS. Responsable de crear un marco diagonal.
3. "px": valor en píxeles

En este artículo hablaremos contigo sobre la creación de marcos, pero no cuadrados regulares, sino redondeados. Tienen mas hermosa vista que los marcos cuadrados regulares sin redondeo.

Propiedad ampliar el espacio para las ideas creativas aumentando el número de posibles elementos diseño. Y junto con el cambio de estilo de los marcos, utilizando los valores de la propiedad , puede crear un marco especial que no encontrará en ningún otro lugar.

En este artículo, analizaremos más de cerca la creación de marcos redondos y más. Existen los bordes triangulares en CSS, pero más sobre eso a continuación.

Redondeo de marcos con

html (margen: 0; relleno: 15vh 0 0 0;) #content (borde: 5px rojo sólido; alto: 70vh; ancho: 80%; radio del borde: 15px; margen: 0 automático)

Esta propiedad CSS le permite redondear los bordes de un elemento. Algunos desarrolladores lo utilizan sin crear bordes visibles para crear diseños en un contenedor de "cuerpo" redondeado.

Puede utilizar radios estándar para crear formas redondeadas, como un círculo o un óvalo.

Para rastrear el funcionamiento de esta propiedad, es suficiente establecer la propiedad ... Aunque su nombre contiene la palabra "borde", no se relaciona directamente con la creación de marcos. Redondea los bordes del elemento web, no su borde.

La propiedad en sí es la abreviatura de cuatro propiedades: , , y ... Cada uno de estos establece el radio de redondeo para cada una de las cuatro esquinas.

Propiedad simple puede utilizar uno o 4 valores. Funciona igual que con la propiedad o .

El redondeo se puede aplicar a todos Elementos HTML pero no en todos los casos. Algunos navegadores no lo aceptan al cargar marcos que tienen la propiedad , con el valor "colapso".

Se pueden usar diferentes valores para determinar el radio del redondeo, pero la mayoría de las veces el valor se especifica en píxeles. Esto se debe a que son los más adecuados para detallar artículos de tamaño pequeño.

Además del redondeo habitual, puede utilizar un radio adicional, por ejemplo, para crear una elipse.

Para hacer esto, necesita dividir los valores con una fracción.

Propiedad - ejemplos:

Ahora mostraremos un par de ejemplos para crear un borde redondeado. Para estudiarlos con más detalle descargue nuestras fuentes.

Creando triángulos con

Para crear triángulos, usa la propiedad ... Pero aquí su uso será ligeramente diferente al de la creación de marcos regulares.

Primero, establezca el ancho y el alto en cero para el elemento triángulo.

Después de eso, escriba algunas propiedades. Lo primero es lo principal, la propiedad del marco. Se crea casi de la misma manera que de costumbre. Establezca el ancho, el tipo de línea e ingrese el valor "transparente". Es responsable de crear un triángulo.

Para crear un lado plano del triángulo, debe crear una línea de marco separada para este lado.

Conclusión

Ahora sabes todo sobre la propiedad que te permitirá crear elementos de diseño únicos. Además, los triángulos creados con el "borde" hacen grandes piezas decorativas que se pueden colocar en cualquier página web.

Puede parecer muy difícil al principio, pero si lo practicas es más fácil de lo que piensas. Descargue nuestras fuentes y estudie su código para comprender mejor cómo funciona la propiedad. ¡Buena suerte con tu aprendizaje!

Etiquetas: Aquí hay una hermosa selección de esquinas y marcos que están destinados a bloques de información, que se utilizan con HTML y CSS. También en esta nota puede elegir el estilo de diseño, que se realiza en las esquinas, que viene con un efecto de desplazamiento y una configuración predeterminada sin ningún efecto, solo un diseño elegante.

Como ejemplo, puede tomar una variación, donde hay esquinas dobladas en el bloque y se ve completamente diferente a la estándar. En algunos existe la opción de colocar varias cintas o instalar una imagen que se instala en el interior del bloque.

Todos los materiales se presentan en forma adaptativa para diferentes resoluciones, que es para un monitor grande o la pantalla más pequeña. Después de la instalación, se producirá un cambio en el sitio, donde principalmente lo colocan para llamar la atención, porque inicialmente la estructura solo va, lo que puede complementar el estilo principal.

Primera opción:

CSS

Ugoinsa_utomatio_npones (
pantalla: bloque en línea;
ancho: 295px;
posición: relativa;
borde: 1,5px sólido # 1b629e;
transición: facilidad de todos los .3s;
margen: 5px;
cursor: puntero;
}
.ugoinsa_utomatio_npones: antes, .ugoinsa_utomatio_npones: después (
contenido: "";
índice z: -1;
bloqueo de pantalla;
posición: absoluta;
fondo: #FFF;
arriba: 50%;
izquierda: 50%;
transformar: traducir (-50%, -50%);
recuento de iteraciones de animación: 1;
origen de transformación: 50% 50%;
}
.ugoinsa_utomatio_npones: antes (
ancho: calc (100% + 4px);
altura: 75%;
índice z: 1;
transición: altura 0,6 s;
}
.ugoinsa_utomatio_npones: después (
altura: calc (100% + 4px);
ancho: 85%;
índice z: 1;
transición: ancho 0,7 s;
}
.ugoinsa_utomatio_npones: hover: before, .ugoinsa_utomatio_npones: focus: before (
altura: 50%;
}
.ugoinsa_utomatio_npones: hover: after, .ugoinsa_utomatio_npones: focus: after (
ancho: 74%;
}
.sequpok_egulaned_demob (
relleno: 29px;
índice z: 2;
posición: relativa;
alineación de texto: centro;
}

Aquí, creamos de forma independiente una instalación para nuestro recurso y la hacemos más notoria, según la acción.

Segunda opción:

CSS

Pvobamoco-mpagensive (
posición: relativa;
pantalla: bloque en línea;
ancho: 283px;
margen: 7px 0 37px 0;
relleno: 28px;
color: # f3eaea;
alineación de texto: centro;
fondo: # 2b22a0;
fondo: gradiente lineal (hacia la parte inferior izquierda, 50% transparente, rgba (16, 16, 16, 0.4) 0) sin repetición 100% 0 / 30px 30px, gradiente lineal (-135deg, rgba (0, 0, 0) , 0) 20px, # 334ab9 0);
filtro: sombra (18px 28px rgba (14, 14, 14, 0.1));
}
.pvobamoco-mpagensive :: antes (
contenido: "";
posición: absoluta;
superior: 30px;
derecha: 0;
fondo: gradiente lineal (a la parte inferior izquierda, rgba (0, 0, 0, 0) 50%, rgba (14, 14, 14, 0.1) 0) 100% 0 sin repetición;
ancho: 28px;
altura: 28px;
transformar: rotar (180 grados);
}

Inicialmente, el efecto no se registró aquí, pero se hizo una hermosa sombra, que puede aumentar y cambiar de forma independiente la gama de colores.

Tercera opción:

CSS

Keculosubes_aspectsiveb (
posición: relativa;
pantalla: bloque en línea;
ancho: 295px;
relleno: 30px;
margen: 9px;
altura mínima: 91px;
borde: 2px sólido # BFE2FF;
alineación de texto: centro;
}
.malugeke_deculos (
ancho: 148px;
altura: 148px;
desbordamiento: oculto;
posición: absoluta;
}
.malugeke_deculos :: antes, .malugeke_deculos :: después (
posición: absoluta;
índice z: -1;
contenido: "";
bloqueo de pantalla;
borde: 5px sólido # 2980b9;
}
.malugeke_deculos span (
posición: absoluta;
bloqueo de pantalla;
ancho: 223px;
relleno: 15px 0;
color de fondo: # 337AB7;
sombra de cuadro: 0 5px 10px rgba (12, 12, 12, 0.1);
color: # f3f0f0;
fuente: 700 18px / 1 "Lato", sans-serif;
sombra de texto: 0 1px 1px rgba (8, 8, 8, 0.1);
transformación de texto: mayúsculas;
alineación de texto: centro;
}
.malugeke_deculos-top-left (
superior: -10px;
izquierda: -10px;
}
.malugeke_deculos-top-left :: before, .malugeke_deculos-top-left :: after (
border-left-color: transparente;
}
.malugeke_deculos-top-left :: before (
arriba: 0;
derecha: 0;
}
.malugeke_deculos-top-left :: after (
izquierda: 0;
abajo: 0;
}
.malugeke_deculos-top-left span (
derecha: -25px;
superior: 30px;
transformar: rotar (-45 grados);
}
.malugeke_deculos-top-right (
superior: -10px;
derecha: -10px;
}
.malugeke_deculos-top-right :: before, .malugeke_deculos-top-right :: after (
border-top-color: transparente;
border-right-color: transparente;
}
.malugeke_deculos-top-right :: before (
arriba: 0;
izquierda: 0;
}
.malugeke_deculos-top-right :: after (
derecha: 0;
abajo: 0;
}
.malugeke_deculos-top-right span (
izquierda: -25px;
superior: 30px;
transformar: rotar (45 grados);
}

Queda por elegir la cinta derecha o izquierda, para poder instalarla en el bloque, donde la propia cinta servirá para escribir un título en ella. También cambie el color o establezca inicialmente el bloque predeterminado que se establece debajo de las cintas.

Aquí, un desarrollador web puede diseñar muy bien, porque para esto, el marco ya está completamente en su lugar, que algunos ponen sombras, todo depende de la paleta de colores del recurso de Internet y en general dónde estarás y con qué propósito colocarlo. un marco tan original.