Esta semana tenemos otro proyecto CSS simple y divertido para que afines tus habilidades de codificación. Esta vez crearemos la ilusión de una página con una esquina que ha sido doblada.
Con el poder de los pseudo elementos, crearemos algunos triángulos CSS que luego podremos colocar en su lugar para crear nuestro plegado de página. Una vez que hayamos terminado, podrás aplicar una clase a cualquier div para agregar el efecto.
El concepto
Manifestación: Haga clic aquí para lanzar.
Recientemente, quise agregar un poco de carácter a un simple contenedor de texto y decidí intentar doblar una de las esquinas. Con la ayuda de una imagen, esta es una tarea bastante fácil. Sin embargo, si estamos intentando ir por una ruta CSS pura, se necesita más tiempo y esfuerzo.
El método que se me ocurrió no es innovador, pero pensé que era lo suficientemente interesante como para compartir aquí. Básicamente, lo que necesitamos, además de una caja rectangular, son dos triángulos. Presionaremos estos triángulos en las posiciones que se muestran a continuación.
Una vez que tenemos los triángulos en su lugar, podemos cambiar el triángulo superior al mismo color que el fondo, y de repente tenemos nuestro bonito y pequeño efecto de plegado de página. ¡Muy fácil!
Ahora que tenemos un plan en marcha, podemos comenzar a construir nuestras formas utilizando CSS. Realmente no hay una gran metodología incorporada para crear triángulos con CSS, así que tendremos que recurrir a algunos vudúes de borde.
El HTML
Para comenzar, crea un div como el que se muestra a continuación. He incluido un título con un párrafo, una clase para estilos de página generales que podríamos reutilizar en otra parte y, finalmente, una clase para aplicar el efecto de plegado de página (tl significa "arriba a la izquierda", crearemos otra para un pliegue superior derecho más tarde).
Eso es todo lo que necesitaremos por ahora. ¡Saltemos a nuestro CSS y pongamos esto en un estilo!
Página CSS
Para el CSS, comenzaremos codificando el aspecto general de nuestra pequeña página sin el efecto de plegado. Comencé por darle al fondo un bonito color oscuro, luego pasé a diseñar la clase de página real. Asígnele un ancho, alto y margen, y asigne blanco al color de fondo.
Como paso opcional, incluí un degradado de fondo muy sutil. Como siempre, esto requiere un pedazo de código impío si intentamos jugar bien con tantos navegadores como sea posible. Si sientes que no vale la pena, simplemente abandona el gradiente.
Ahora que hemos diseñado el contenedor básico, es hora de mejorar un poco el texto. Para el h2, lo hice agradable y grande, y lo escabullí bastante lejos de la parte superior para que no interfiera con el pliegue de la página. Además, utilicé la fuente web de Google Lilita One. Incrustar esto es tan fácil como copiar y pegar el código que se le dio en la página en ese enlace.
Finalmente, para terminar el texto, agregué un poco de relleno al párrafo, configuré su fuente y realicé el color en algunos tonos del negro para ayudar a distinguirlo del titular.
Control del progreso
En este punto, deberías tener una bonita página pequeña como la que se muestra a continuación. No hay mucho que ver ahora, pero es un comienzo sólido.
CSS triángulos
Antes de continuar, debemos aprender a hacer un triángulo con CSS. Para comenzar este proceso, crea un div vacío y dale una clase de "triángulo". Ahora establezca la altura y el ancho en cero, pero aplique un borde realmente grueso en la parte inferior y en los lados izquierdos (use dos colores diferentes). Aquí está el resultado que obtendrás:
Como puede ver, esto ha creado un cuadrado que se divide en diagonal desde la esquina inferior izquierda hasta la esquina superior derecha. Cada borde corresponde a uno de los triángulos que resultan. Ahora mira qué pasa si hacemos que uno de esos bordes sea transparente:
Ahí lo tienes, un triángulo hecho con CSS puro. Incluso podemos ajustar la dirección del triángulo aplicando bordes a diferentes lados:
Asegúrese de establecer el borde transparente en la dirección en la que desea que la hipotenusa esté orientada. Entonces, si quieres que quede bien, haz transparente el borde derecho. Lo contrario es cierto para las otras fronteras. Si desea que la hipotenusa esté hacia abajo, configure el borde superior. Si quieres que esté boca arriba, establece el borde inferior.
Echa un vistazo a este Tinkerbin para ver un ejemplo de las cuatro opciones en el trabajo.
Doblando la pagina
Ahora es el momento de utilizar este conocimiento para plegar la página. Para hacer esto, tenemos que seguir tres pasos. En primer lugar, vamos a estilizar el? Foldtl? clase que hemos creado antes. A continuación, agregaremos un triángulo usando el: antes del pseudo elemento.Finalmente, agregaremos el segundo triángulo usando el: después del pseudo elemento.
Como puede ver, todo lo que hemos hecho para la clase principal es aplicar posicionamiento relativo (esto ayuda a los triángulos posicionados absolutamente) y establecer una sombra de cuadro. Como nota al margen, este proyecto es mucho más fácil sin sombras, pero quería asegurarme de que sabía que aún podría funcionar. Solo debes asegurarte de que la sombra esté lo suficientemente desviada para que no sobresalga del lado con el pliegue de la página.
Ahora es el momento de crear nuestro primer triángulo. Llame el: antes del pseudo-elemento, establezca su contenido en nada, colóquelo absolutamente en el origen, luego use el código de triángulo que acabamos de aprender.
Como puede ver, establezco el tamaño en 70px y el color en #eee, que es un poco más oscuro que el color de la página porque este es el triángulo que crea el efecto de plegado. Una vez más, la sombra tiene que estar significativamente compensada para verse bien.
Recorte de la esquina
Para terminar, necesitamos colocar nuestro segundo triángulo para cortar esa esquina superior izquierda. Esto usa prácticamente la misma sintaxis que la última, solo el color del triángulo es el mismo que el cuerpo y la dirección se ha invertido.
Resulta que este paso no es realmente necesario, consulte la sección Actualización a continuación para obtener más información.
Con eso, nuestro efecto de plegado de página está terminado! Esto es lo que parece:
Volteando alrededor
Ahora que hemos terminado nuestro pliegue de la página superior izquierda, es hora de darle la vuelta y ver si podemos lograr lo mismo en el otro lado. La sintaxis es casi idéntica, simplemente se desplaza desde la derecha en lugar de la izquierda con su posición absoluta y voltea sus triángulos alrededor.
Una cosa que podría hacerte tropezar aquí es las sombras, tendrás que voltearlas también, de lo contrario la ilusión se arruinará. Esta imagen ilustra lo que quiero decir:
Verlo en acción
Ahora que todos hemos terminado, es hora de probar este mal chico. Ten en cuenta que porque estamos usando: antes y: después, IE7 y antes no son agradables. Hay correcciones disponibles usando JavaScript si esa es una preocupación importante para usted.
Manifestación: Haga clic aquí para lanzar.
Actualizar
Aquí está la cosa, a veces un proyecto como este tiene sentido en tu cabeza cuando lo codificas, luego regresas y te das cuenta de que lo estabas haciendo todo mal. Eso es exactamente lo que pasó aquí. Justo después de publicar esto, me di cuenta de que, dado que mi truco de borde se dividía en dos triángulos por sí solo, realmente no necesitaba pasar por el paso de agregar la sección: después de todo. La información anterior aún es excelente para aprender, así que la dejaré sola, pero aquí hay una mejor manera de lograr esto.
Todo lo que necesitamos hacer es tomar el borde que estábamos haciendo transparentes y establecerlo en el color de fondo. Solo eso sirve como nuestro segundo triángulo, lo que nos permite cortar la sección: después completamente.
Vive y aprende gente, vive y aprende. Siempre revise y asegúrese de que su código sea lo más conciso posible. A veces se cometen errores tontos (seguro que lo hago). No se desanime, en lugar de ello, consuélese en el hecho de que casi siempre hay una mejor manera de hacer algo y cada vez que encuentra uno, se está haciendo un mejor programador.
Asegúrese de revisar el Tinkerbin actualizado para ver esta versión nueva y mejorada.
Conclusión
Gracias por leer este tutorial sobre cómo crear un efecto de página con CSS. Espero que hayas encontrado la información útil y que ahora estés bastante cómodo manejando los triángulos CSS y los pseudo elementos antes y después.
Deja un comentario a continuación y hazme saber lo que piensas y asegúrate de volver pronto para obtener más información sobre CSS.