Share
Claro, todos estamos familiarizados con las fronteras. ¿Hay algo nuevo que pueda ser introducido? Bueno, apuesto a que hay muchas cosas en este artículo que nunca supiste!
No solo se puede usar CSS3 para crear esquinas redondeadas, sino que también se puede utilizar CSS de forma sencilla para mostrar formas personalizadas. Está bien; en el pasado, antes de que se descubrieran estas técnicas, podríamos haber recurrido al uso de imágenes de fondo en posición absoluta para mostrar círculos o flechas. Afortunadamente, dado que damos un paso más lejos de Photoshop, este ya no es el caso.
Probablemente estés familiarizado con el uso más básico de las fronteras..
borde: 1px negro sólido;
El código anterior aplicará un 1px borde a un elemento. Llano y simple; Pero también podemos modificar un poco la sintaxis..
ancho del borde: grueso; estilo de borde: sólido; color del borde: negro;
Además de pasar un valor específico a ancho del borde, Se pueden usar alternativamente tres palabras clave: Delgado, medio, y grueso.
Si bien inicialmente puede parecer innecesario utilizar alguna vez el escritura común a mano En este caso, hay varios casos en los que es ventajoso, como cuando necesita actualizar algún aspecto de un borde cuando ocurre un evento designado..
Quizás necesite cambiar el color de un borde cuando el usuario se desplaza sobre un elemento específico. Usar la forma abreviada requeriría que repitas los valores de píxeles.
.cuadro borde: 1px rojo sólido; .box: hover border: 1px solid green;
Un enfoque más elegante y seco sería actualizar específicamente el color del borde propiedad.
.cuadro borde: 1px rojo sólido; .box: hover border-color: green;
Además, como encontrarás en breve, este escritura común a mano La técnica es útil al crear formas personalizadas con CSS.
radio del borde es el hijo de oro de CSS3, la primera propiedad nueva en obtener un uso generalizado en la comunidad. Esto se traduce en que, excluyendo Internet Explorer 8 y anteriores, todos los navegadores pueden mostrar esquinas redondeadas.
Anteriormente, era necesario usar prefijos de proveedor tanto para Webkit como para Mozilla, para que el estilo se aplicara correctamente..
-webkit-border-radius: 10px; -moz-border-radius: 10px; radio del borde: 10px;
En estos días, sin embargo, podemos cortar las versiones de los proveedores sin preocuparnos, y simplemente seguir con el formulario oficial: radio del borde.
Como se podría esperar, también podemos especificar valores personalizados para cada lado de un cuadro.
borde superior izquierdo del radio: 20px; borde superior-derecho-radio: 0; borde inferior-derecho-radio: 30px; borde inferior-izquierdo-radio: 0;
En el código anterior, ajuste borde superior-derecho-radio y borde inferior-izquierdo-radio a cero sería superfluo, a menos que el elemento herede valores que deben restablecerse.
Muy parecido margen o relleno, estas configuraciones se pueden condensar en una sola propiedad, si es necesario.
/ * arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda * / radio del borde: 20px 0 30px 0;
Como ejemplo (y como lo hacen los diseñadores web). asi que a menudo), la forma de un limón se puede reproducir con CSS y la radio del borde propiedad, como asi:
.limón ancho: 200px; altura: 200px; fondo: # F5F240; borde: 1px sólido # F0D900; radio del borde: 10px 150px 30px 150px;
Muchos diseñadores permanecen felices con el conocimiento descrito hasta ahora en este capítulo; Sin embargo, hay algunas maneras en que podemos empujarlo más!
Hay una variedad de técnicas a las que podemos referirnos, cuando tenemos la tarea de aplicar varios bordes a un elemento.
Mientras sólido, precipitado, y punteado Son los valores más frecuentes para el estilo de borde propiedad, también hay algunos otros que podemos utilizar, incluyendo ranura y cresta.
borde: ranura de 20 px # e3e3e3;
O bien, con la forma de mano larga:
color de borde: # e3e3e3; ancho del borde: 20px; estilo de borde: surco;
Si bien esto es ciertamente útil, un cresta o ranura efecto no es realmente múltiples fronteras.
La técnica más popular para crear dos bordes es aprovechar el contorno propiedad.
.box border: 5px solid # 292929; esquema: 5px sólido # e3e3e3;
Este método funciona maravillosamente, sin embargo, está limitado a dos bordes. En caso de que necesite crear un efecto en capas, gradiente-esque, será necesario un enfoque diferente.
Cuando el contorno La técnica no es suficiente, un enfoque alternativo es tomar ventaja de la :antes de y :después pseudo elementos, y aplicar los bordes adicionales necesarios para el contenido generado.
.caja ancho: 200px; altura: 200px; fondo: # e3e3e3; posición: relativa; borde: 10px verde sólido; / * Crea dos cuadros con el mismo ancho del contenedor * / .box: after, .box: before content: "; position: absolute; top: 0; left: 0; bottom: 0; right: 0; .box: después de border: 5px solid red; esquema: 5px solid yellow; .box: before border: 10px solid blue;
Quizás este no sea el enfoque más elegante, pero sin duda consigue el trabajo. Una advertencia es que es fácil confundir el orden en que se aplicarán los colores del borde. A menudo se requiere un cierto nivel de "adivinar y verificar" para aplicar la secuencia correcta.
los niños geniales La forma de crear un número infinito de bordes es tomar ventaja de la untado parámetro en el sombra de la caja Propiedad CSS3.
.cuadro borde: 5px rojo sólido; caja-sombra: 0 0 0 5px verde, 0 0 0 10px amarillo, 0 0 0 15px naranja;
En este caso, estamos siendo inteligentes y estamos usando sombra de la caja de una manera que podría no haber sido necesariamente intencionada cuando la especificación se escribió originalmente.
Estableciendo el X, y, y difuminar componentes para 0, en lugar de eso podemos usar el untado Valor para crear bordes sólidos en las ubicaciones deseadas. Porque sombra de la cajas se puede apilar, mediante el uso de una coma, el número de niveles posibles es infinito.
Esta técnica se degrada con gracia bastante bien. En navegadores más antiguos, que no reconocen la sombra de la caja propiedad, esto simplemente hará que el único rojo 5px frontera.
Recuerde: los diseños no tienen que ser idénticos en todos los navegadores. Escriba su CSS para los navegadores más modernos y luego proporcione recursos adecuados, según corresponda.
Además de pasar un solo valor a radio del borde, alternativamente podemos proporcionar dos - separados por una / - para especificar valores únicos para los radios horizontal y vertical.
Por ejemplo…
radio del borde: 50px / 100px; / * radio horizontal, radio vertical * /
… es equivalente a:
borde superior-izquierdo-radio: 50px 100px; borde superior-derecho-radio: 50px 100px; borde inferior-derecho-radio: 50px 100px; borde inferior-izquierdo-radio: 50px 100px;
Esta técnica es particularmente útil cuando necesita imitar una curva larga y sutil, en lugar de una esquina redondeada genérica. Por ejemplo, el siguiente código nos permite separarnos ligeramente de una forma cuadrada, lo que resulta en un efecto más parecido a un papel rizado..
.caja ancho: 200px; altura: 200px; fondo: # 666; borde superior izquierdo del radio: 15em 1em; borde inferior-derecho-radio: 15em 1em;
Quizás el mejor uso de los bordes es cuando se aplican inteligentemente a los elementos, que tienen una anchura y una altura de cero. Confuso, ¿eh? Veamos una demostración.
Para los siguientes ejemplos, asuma el siguiente marcado ...
… Y lo siguiente base estilo:
.caja ancho: 200px; altura: 200px; fondo: negro;
El ejemplo al que se hace referencia con más frecuencia, al demostrar cómo se pueden usar las formas CSS en un proyecto, es crear la flecha obligatoria.
La clave para entender cómo se puede formar una flecha con CSS es establecer un único color del borde a cada lado, y luego reducir tanto el anchura y altura valores para el contenedor a 0.
Asumiendo un div con una clase de flecha como el contenedor:
.flecha ancho: 0; altura: 0; borde superior: 100px rojo sólido; borde derecho: 100px verde sólido; borde inferior: 100px azul sólido; borde izquierdo: 100 px amarillo sólido;
Como se demostró al comienzo de este capítulo, una sintaxis más limpia sería no use la versión de mano corta que lo abarca todo:
.flecha ancho: 0; altura: 0; borde: 100px sólido; borde superior de color: rojo; color de borde derecho: verde; color de borde inferior: azul; color de borde izquierdo: amarillo;
Incluso podemos reducir esto aún más, agrupando los valores de color..
.flecha ancho: 0; altura: 0; borde: 100px sólido; color del borde: rojo verde azul amarillo;
Interesante, ¿verdad? Sin embargo, tiene mucho sentido cuando retrocedemos un paso. Esa es la única manera posible en que los colores podrían alinearse, asumiendo un anchura y altura de cero para el contenedor. Ahora, ¿qué pasa si establecemos todos los colores de borde en transparente, excepto el lado azul?
.flecha ancho: 0; altura: 0; borde: 100px sólido; color de borde inferior: azul;
¡Excelente! Pero no parece demasiado semántico para crear una .flecha div, Todo con el propósito de agregar una flecha a la página. En su lugar, se pueden usar pseudo elementos para aplicar la flecha después o antes del elemento asociado.
Para crear un bocadillo de diálogo 100% CSS, comenzamos con el marcado.
Hola!
A continuación, algunos base el estilo debe ser aplicado.
.discurso-burbuja posición: relativo; color de fondo: # 292929; ancho: 200px; altura: 150px; línea de altura: 150px; / * verticalmente centro * / color: blanco; text-align: center;
La flecha se aplicará utilizando el después psuedo-elemento.
.burbuja de diálogo: después de contenido: ";
los
:antes dey:despuésLos elementos de psuedo se pueden usar para insertar contenido generado antes o después del contenido de un elemento.
En este punto, es simplemente una cuestión de reproducir la flecha y colocarla en la ubicación correcta. Comenzamos por posicionar absolutamente el contenido, restableciendo el anchura y altura, y aplicando los colores del borde..
.bocadillo: después de contenido: "; posición: absoluta; ancho: 0; altura: 0; borde: 10 px sólido; color del borde: rojo verde azul amarillo;
Como sabemos que queremos que la flecha apunte hacia abajo, la imagen de arriba demuestra que todos, excepto el borde rojo (o superior), deben omitirse o establecerse en transparente.
.burbuja de diálogo: después de contenido: "; posición: absoluta; ancho: 0; altura: 0; borde: 10 px sólido; borde superior-color: rojo;
Al crear formas CSS, porque no podemos usar el anchura propiedad para especificar qué tan ancha debe ser la flecha, la ancho del borde propiedad debe utilizarse en su lugar. En este caso, la flecha debe ser un poco más grande; entonces el ancho del borde se puede aumentar a 15px. También posicionaremos la flecha en la parte inferior y en el centro del contenedor, usando la parte superior y izquierda propiedades, respectivamente.
.bocadillo: después de contenido: "; posición: absoluta; ancho: 0; altura: 0; borde: 15 px sólidos; borde superior-color: rojo; superior: 100%; izquierda: 50%;
Casi allí; El último paso es actualizar el color de la flecha para que sea el mismo que el fondo del contenedor. El posicionamiento también debe modificarse para tener en cuenta el ancho de los bordes (15px). Mientras estemos aquí, también aplicaremos un sutil. radio del borde para hacer que el contenedor parezca más parecido a una burbuja.
.discurso-burbuja / * ... otros estilos * / radio-borde: 10px; burbuja de voz: después de contenido: "; posición: absoluta; ancho: 0; altura: 0; borde: 15 píxeles sólidos; borde superior-color: # 292929; parte superior: 100%; izquierda: 50%; margen izquierda: -15px; / * ajustar el ancho del borde * /
No esta mal ay Resuma este código en unas pocas clases reutilizables, y estará listo para todos los proyectos futuros.
/ * Uso de Speech Bubbles: aplique una clase de .speech-bubble y .speech-bubble-DIRECTIONHola* / .speech-bubble posición: relativo; color de fondo: # 292929; ancho: 200px; altura: 150px; línea de altura: 150px; / * verticalmente centro * / color: blanco; text-align: center; radio del borde: 10px; Familia tipográfica: sans-serif; .speech-bubble: after content: "; position: absolute; width: 0; height: 0; border: 15px solid; / * Posiciona la flecha * / .speech-bubble-top: after border-bottom- color: # 292929; izquierda: 50%; parte inferior: 100%; margen izquierdo: -15px; .pepe-bubble-right: después de border-left-color: # 292929; izquierda: 100%; superior: 50% ; margen superior: -15px; .speech-bubble-bottom: después de border-top-color: # 292929; superior: 100%; izquierdo: 50%; margen izquierdo: -15px; .speech-bubble- izquierda: después de border-right-color: # 292929; superior: 50%; derecha: 100%; margen superior: -15px;
Una desventaja de usar altura de la línea centrar verticalmente el texto es que estás limitado a una sola línea. Si el texto requiere dos o más líneas, la altura de cada línea será demasiado grande. Una solución inteligente es establecer una monitor de mesa a la burbuja del discurso, y un monitor de mesa-celda al párrafo que envuelve el texto. Esto entonces nos permite alinear el texto al medio, en consecuencia.
El texto va aqui.
A continuación, el CSS modificado..
.burbuja de diálogo / * otros estilos * / display: tabla; .speech-bubble p display: table-cell; alineación vertical: medio;
Si las referencias a
pantalla: mesatraiga recuerdos terribles de diseños antiguos, basados en tablas, no se preocupe. Estas propiedades simplemente se refieren al estilo en el que un elemento debe mostrar.
No estamos limitados a los triángulos; CSS es capaz de producir todo tipo de formas, incluso corazones y signos de riesgo biológico!
.riesgo biológico ancho: 0; altura: 0; borde: 60px sólido; radio del borde: 50%; borde superior de color: negro; color de borde inferior: negro; color de borde izquierdo: amarillo; color de borde derecho: amarillo;
Aunque es cierto que lo simple borde: 1px negro sólido la sintaxis va muy lejos, si somos inteligentes, podemos crear una variedad de efectos, iconos y formas útiles. ¿Quién hubiera pensado que las fronteras podrían ser tan poderosas? La clave es recordar que el estilo de las formas comunes o las burbujas de diálogo solo debe crearse una vez y luego abstraerse en clases de utilidad para uso futuro..
Accentsconagua