Share
Apuesto a que muchos de ustedes no se dan cuenta de que podemos crear la ilusión de formas usando el 100% de CSS. Al utilizar la propiedad de borde en formas creativas, podemos hacer algunos polígonos realmente interesantes. En esta semana screencast, Descubriremos una manera de crear burbujas de discurso sin tener que recurrir a imágenes de fondo.
La mayoría de nosotros, por ahora, estamos familiarizados con el uso de las propiedades "-moz-border-radius" y "-webkit-border-radius" para crear esquinas redondeadas, o incluso círculos completos, pero existen otras técnicas para crear formas más complicadas.
blockquote # one width: 250px; fondo: # e3e3e3; relleno: 25px; posición: relativa; #one .arrow ancho: 0; altura: 0; línea de altura: 0; borde superior: 30px sólido # e3e3e3; borde izquierdo: 60 px blanco sólido; borde derecho: 10 px blanco sólido; posición: absoluta; abajo: -30px; derecha: 30px;
Observe cómo la propiedad "inferior" es el recíproco de la propiedad "border-top".
blockquote # two width: 250px; fondo: # e3e3e3; relleno: 25px; posición: relativa; blockquote # two .arrow width: 0; altura: 0; línea de altura: 0; borde superior: 40px sólido # e3e3e3; borde izquierdo: ninguno; borde derecho: 30 px blanco sólido; posición: absoluta; parte inferior: 60%; derecha: -30px;
blockquote # three width: 450px; fondo: # e3e3e3; relleno: 25px; posición: relativa; #tres .arrow ancho: 0; altura: 0; línea de altura: 0; borde inferior: 25px sólido # e3e3e3; borde derecho: 50px blanco sólido; posición: absoluta; arriba: -24px; izquierda: 20px;
Estoy escribiendo este párrafo minutos antes de publicar el tutorial. Aprendí algo esta noche. ¿Sabía que, si desea que su documento se valide, no puede colocar texto directamente en una nota de bloque? Debe estar anidado dentro de un elemento padre, como el
etiqueta. Además, al validador no le gustó el hecho de que usé una etiqueta de intervalo en el blockquote. Permite una gran cantidad de elementos, pero desafortunadamente no es el lapso! Oh bien; no es gran cosa. Solo sustitúyelo por un elemento diferente. Difícilmente hace una diferencia.
Estoy realmente ansioso por ver cómo ustedes han implementado este truco único en sus propios proyectos. Envíenos enlaces a sus ejemplos, a través de los comentarios. Gracias por ver. La próxima semana, planea aprender algo mucho más avanzado ... ¡Solo necesito averiguar qué! Hasta entonces.
Accentsconagua