por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, responsive, Taller Web, Trucos CSS
En el diseño web, como en los demás diseños, las tendencias vienen y van. Sin embargo el Full Screen en diseño web se ha mantenido durante varios años, sigue siendo una apuesta segura. En este post, además de comentar algún aspecto de este tipo de diseños, os dejo el código explicado para que podáis hacer la vuestra.
En las web full screen, el contenido llena toda la pantalla del navegador, independientemente de la resolución que estemos usando, son responsive.
Son pantallas con un fuerte impacto visual, ideales para presentar un producto. El menú suele ser de hamburguesa y un icono en forma de flecha o ratón nos indica que la web continúa en navegación vertical.
El diseño full screen suele plantearse solo en el primer módulo de información, pasando luego a una web de navegación vertical, aunque también hay diseñadores que apuestan por hacer todos los módulos de contenido en full screen.
Vamos por partes:
1 BACKGROUND. IMAGEN DE FONDO
Es importante encontrar una imagen que no deje indiferente, que sea impactante y a ser posible «limpia», ya que sobre ella habrá texto, y cualquier detalle pequeño puede no verse. Además aconsejo meter un filtro que oscurezca un poco la imagen para ganar en legibilidad del texto que va encima.
En este ejemplo, he usado dos imágenes con formatos distintos para que veáis la diferencia. La primera (rosa) es vertical y la del segundo bloque apaisada. Si modificáis el tamaño de la ventana del navegador, veréis que el comportamiento de la segunda se adapta mucho mejor a todas las resoluciones desktop, y la primera funcionará mejor en las pantallas mobile.
Vamos al código CSS. Se trata de hacer que la imagen ocupe el 100% de la ventana del navegador:
- capa1 y capa2; son los contenedores de los dos módulos. En este ejemplo de web he usado dos módulos full screen.
- height: 100vh; con esta orden, le decimos a la CSS que el alto de la imagen tiene que ocupar el 100% del alto de la ventana del navegador.
- background-size:cover; indicamos que la imagen debe ocupar todo el contenedor, incluso si tiene que estirarse.
- background-position: center top; aquí indicamos que la imagen crezca o encoja desde el punto situado en el eje central de la imagen y desde su punto superior.
- padding: 200px 0 0 10%; para colocar el texto, he decidido separarlo 200px del top y un 10% del ancho de pantalla del margen izquierdo.
Como decía antes, es conveniente oscurecer un poco la imagen de fondo para hacer más legible el texto, esto puedes hacerlo de dos maneras, la primera con photoshop o el editor de imágenes que suelas utilizar, la segunda forma de hacerlo es con CSS, le aplicamos a toda la capa un gradiente negro con una opacidad que iremos modificando según nuestra conveniencia, en este caso un 60%
2 FLECHA EN EL BOTTOM PARA CONTINUAR NAVEGACIÓN
En la parte inferior de la ventana de navegación, he colocado una flecha que con un movimiento suave vertical, indica que la navegación sigue más abajo. Además he puesto un enlace en la flecha para que al pulsar sobre ella muestre el segundo bloque, vamos a ver cómo se hace esto:
En primer lugar, en lugar de usar una imagen png para la flecha, usamos una fuente, de ese modo no se pixelará y será más nítida en cualquier resolución. Para ello usamos este icono.
En el código, podéis ver todos los parámetros de la flecha. Con translateY movemos la flecha 20px en vertical. La duración de la animación es de 0.7s y es un loop infinito.
A continuación os dejo el código, espero que os sea útil.
NOTA: coloca el visor en 0.5x para ver bien el efecto
See the Pen
LANDING FULL SCREEN by Omar Benyakhlef Domnguez (@gloobs)
on CodePen.
por Omar Benyakhlef | capas, CSS, Diseño Web, responsive, Taller Web, Trucos CSS, Usabilidad
Existen varias maneras de alinear capas sin que se produzca salto de línea. Para mi esta es la más sencilla, y además es responsive, por lo que no tendrás ningún problema independientemente de la resolución de pantalla que esté usando el usuario de tu sitio.
Este es el único código que tienes que usar en tu CSS en el contenedor que va a alojar las distintas capas, como verás es bien sencillo:
.box {display: flex; align-items: stretch; flex-wrap: wrap;}
Con esto ya estaría, pero vamos a darle un poco de estilo a las capas que van dentro, para que no quede feo:
.uno, .dos, .tres, .cuatro, .cinco, .seis {padding:50px; color: #fff; width: 150px; font-family: ‘Bebas Neue’, cursive; font-size:30px}
.uno {background-color: #fdd129}
.dos {background-color: #c91818}
.tres {background-color: #2d4f62}
.cuatro {background-color: #498356}
.cinco {background-color: #f18f39}
.seis {background-color: #000}
Simplemente hemos dado a cada capa un color y a todas unas características de ancho, tipo de fuente y padding.
En el HTML, colocamos la capa principal y contenedor (box) y dentro las capas que van a ir alineadas.
<div class=»box»>
<div class=»uno»>Uno</div>
<div class=»dos»>Dos</div>
<div class=»tres»>Tres
<br>tiene
<br>texto
<br>extra
</div>
<div class=»cuatro»>Cuatro</div>
<div class=»cinco»>Cinco</div>
<div class=»seis»>Seis</div>
</div>
Y ya está !!!
Ahora entra en el siguiente enlace para verlo funcionando y prueba a hacer más grande y pequeña la ventana del navegador, para comprobar cómo se va adaptando automáticamente a cualquier resolución de pantalla, colocando las que no entran en la siguiente línea.
VER EJEMPLO FUNCIONANDO
por Omar Benyakhlef | CSS, Trucos CSS, Tutoriales
En numerosas ocasiones, centrar un texto dentro de un div, se convierte en una tarea complicada. En este post vamos a enseñarte a centrar el texto tanto horizontal como verticalmente y que además sea adaptativo.
Vamos a ver cómo se hace este ejemplo; se trata de una capa que contiene un background-image y sobre la que hemos puesto un texto, que ha quedado centrado horizontal y verticalmente, independientemente del tamaño de la caja contenedora.
Vamos a ver cómo lo hemos hecho.
Para empezar, definimos un contenedor con el tamaño que va a llevar el módulo, y le aplicamos una CSS en la que simplemente definimos un width, un height y el background con la imagen.
<div class="contenedor"></div>
.contenedor{width:350px; height: 500px;
background-image: url("nombreimagen.jpg");}
Dentro de este contenedor, metemos la caja que va a llevar el texto centrado. Para ello he visto que hay muchas maneras de hacerlo, pero esta me parece la más completa, ya que no hace falta definir el tamaño del contenedor, de modo que conseguimos que funcione en cualquier tipo de resolución de pantalla, desktop o mobile. Se trata del flex, un módulo de caja flexible, conocido como flexbox, un método que mejora las capacidades de alineación.
No hace falta que sepáis flex, basta con que metáis esta CSS dentro del div que contiene al texto y que va dentro del que acabamos de ver (contenedor):
<div class="contenedor">
<div class="bloque">Texto</div>
</div>
.contenedor{width:350px; height: 500px;
background-image: url("nombreimagen.jpg");}
.bloque{display: flex; flex-direction: column;
justify-content: center; align-items: center;
flex:1; height:100%; }
Y eso es todo, así de fácil !!!
por Omar Benyakhlef | CSS, Trucos CSS
Hoy traemos un efecto espectacular para tus textos, una composición retro, con luces de neón.
Solo tienes que cambiar los textos y listo, Yoav Kadosh nos ha dejado todo preparado para que simplemente tengamos que copiar la CSS y poder usarlo.
Se trata de puro CSS, con máscaras, inclinación de texto, efecto neón… Y además de ser compatible con Chrome, Edge, Firefox, Opera, Safari, es responsive, lo que significa que lo puedes usar en cualquier proyecto sin miedo a que no se vea en móvil.
Échale un vistazo, cambia los textos en la parte html y sorpréndete !!
VER DEMO Y CÓDIGO
por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, Trucos CSS, Usabilidad
¿Por qué seguir haciendo aburridos formularios cuando podemos usar impresionantes efectos CSS?. A veces tendemos a lo fácil, y no hay nada más aburrido en una web que rellenar un formulario, añade estos efectos y verás que aumentarán los usuarios que lo utilizan.
Es exagerada la cantidad de aburridos formularios que además piden campos totalmente innecesarios que encontramos en internet. Tu máxima como diseñador ha de ser pedir los datos justos, y si es posible, hacerlo dinámico, divertido incluso, usando iconos, efectos, o estos fantásticos efectos CSS que puedes descargar gratis en tympanus.
Además de vistosos son muy útiles, por ejemplo a la hora de ahorrar espacio, nada mejor que meter el texto dentro del input y que al pinchar sobre él salga y se coloque en un lugar que no moleste, son muchos los efectos que vais a encontrar, espero que os sean útiles.
Ver y Descargar Efectos Input con CSS
por Omar Benyakhlef | accesibilidad, Taller Web, Trucos CSS, Usabilidad
En numerosas ocasiones, nuestros diseños requieren más tiempo de carga, bien por tener que usar grandes imágenes o por funcionalidades requeridas por el proyecto.
Nada más incómodo para un usuario que presentarse delante de su pantalla y esperar ante una página vacía, esperando que cargue el contenido. Esta espera repercute notablemente en la usabilidad, el usuario no sabe si está esperando a que cargue el contenido que quiere ver, o si simplemente la página no funciona. Esto es algo que todos conocemos, lo recomendado es hacer un preload de la página para que luego todo el contenido fluya sin problema.
He llegado a ver incluso preloads que necesitaban un preload para visionarlo, lo cual es totalmente absurdo. Hoy os dejo varios preloads realizados con CSS, el peso es ínfimo y las animaciones son verdaderamente espectaculares y sobre todo fluidas, muy fluidas y con un loop infinito sin ningún corte.
See the Pen Preload CSS by Omar Benyakhlef Domnguez (@gloobs) on CodePen.light
DESCARGAR PRELOADS
