28 ejemplos destacados de CSS

Es sorprendente lo que se puede hacer con CSS en estos días. La compatibilidad con las propiedades CSS3 más recientes es sólida en las últimas versiones de los principales navegadores, incluso Internet Explorer, y las posibilidades de tipografía y animación. y la interactividad nunca ha sido tan grande. Pero encontrar inspiración para el diseño web puede ser complicado.

En esencia, el secreto de un gran sitio web no se trata de lucirse con imágenes elegantes y características geniales, sino que radica en crear una gran experiencia para los usuarios a través de un diseño y navegación que los guíe a donde quieren ir de forma rápida y sin esfuerzo. Dicho esto, si también puede verse hermoso, esa es la guinda del pastel.

Aquí enumeramos 28 excelentes ejemplos de sitios CSS que brindarán una explosión de inspiración para el diseño web. CSS también es excelente para agregar movimiento a sus sitios; consulte nuestra guía para Ejemplos de animación CSS y cómo recrearlos para algunos consejos.

01. Términos de tipo

Los términos de tipo se crearon en parte como una excusa para experimentar con la animación CSS

Los términos de tipo se crearon en parte como una excusa para experimentar con la animación CSS

Type Terms es una hoja de trucos animada creada por el equipo de Supremo, una agencia de diseño web en Manchester. Después de investigar un poco, descubrieron que la mayoría de la información en línea existente sobre terminología tipográfica utilizaba imágenes simples y estáticas. El equipo estaba buscando una razón para experimentar con la animación SVG y CSS, y esta era la oportunidad perfecta.

'Decidí crear algo que fuera más atractivo visualmente, lo que ayudaría a los nuevos diseñadores a aprender todos los términos tipográficos clave en un instante', dice el diseñador Dan Heywood.

El equipo enfatiza la importancia de que los diseñadores tengan un buen conocimiento de la tipografía. Para aquellos que aprenden las reglas por primera vez, o para diseñadores experimentados que necesitan un repaso, esta hoja de referencia es tanto educativa como un placer de explorar. El contenido está enfocado, la información es clara y las animaciones son suaves como la seda. Eche un vistazo e impresione a sus amigos diseñadores con su vocabulario tipográfico.

02. Revisión de tecnología del MIT

Tech Review utiliza CSS para crear una sensación limpia y suiza

Tech Review utiliza CSS para crear una sensación limpia y suiza

MIT Technology Review, una publicación de 117 años que cubre la tecnología de una manera que cualquiera puede entender, fue relanzada a principios de este verano por el estudio de diseño de Boston Upstatement. 'Somos súper fanáticos de Tech Review, así que cuando Erik Pelletier [vicepresidente de producto] se acercó a nosotros para trabajar en el sitio, estábamos emocionados', dice Mike Swartz, socio de Upstatement.

En estos días, es inusual ver que el sitio web de una publicación no está tan diseñado en torno a imágenes, por lo que es refrescante la primera vez que navega por el diseño limpio y aparentemente inspirado en Suiza de Tech Review. 'Realmente queríamos capturar el espíritu y el alma de Tech Review con el sistema de diseño del sitio y crear un lienzo para que sus directores de arte lo usaran de manera creativa', dice Swartz. 'El director creativo Tito Bottitta y el jefe de diseño Nathan Hass diseñaron un sistema que está destinado a mostrar arte excelente y ser un placer leer'.

En lugar de utilizar la versión predeterminada del sistema de Helvetica que todos conocemos hoy en día, el sitio presenta Neue Haas Grotesk, la versión original de Helvetica, que realmente impulsa la sensación moderna. Junto con Miller Text para el texto del cuerpo, la tipografía se siente clásica pero contemporánea. El uso de imágenes es reflexivo, deliberado y permite que la tipografía brille.

03. BucketListly

Inspiración para el diseño web: BucketListly

Bucketlistly permite a los viajeros y aventureros compartir sus historias y animar a otros a tener sus propias aventuras.

BucketListly es una comunidad que se propone ayudar a los usuarios a desbloquear logros en la vida real mientras inspira a otros a hacer lo mismo. Construida con Ruby on Rails con HTML5, SCSS, CoffeeScript y jQuery, la plataforma tiene la capacidad de permitir que los viajeros y aventureros compartan sus historias con sus amigos en el sitio, así como con sus redes sociales conectadas.

Cuando un usuario comparte una historia en BucketListly, la plataforma rastrea automáticamente qué, cuándo y dónde han completado ese objetivo de vida, lo que les permite ganar insignias especiales y mostrar todos esos datos en una hermosa línea de tiempo y mapa.

04. 96 elefantes

Inspiración para el diseño web: 96 elefantes

96 Elefantes lleva el nombre de la cantidad de elefantes que se matan todos los días en África

Viget Labs, con sede en EE. UU., Ha creado una experiencia web centrada en la conciencia para obtener apoyo para la misión de la Wildlife Conservation Society de proteger a los elefantes africanos. Su campaña más reciente es 96 elefantes, llamada así porque esa es la cantidad de elefantes que mueren cada día en África.

La narrativa educativa se cuenta a través de una serie de capítulos de una sola página, cada uno de los cuales detalla las complicaciones reales en juego en el esfuerzo continuo para poner fin al acto ilegal de matar elefantes por sus colmillos. A pesar del objetivo principal de generar registros para una petición, el equipo de Viget ha hecho un trabajo ingenioso al equilibrar la inmediatez que presenta la omnipresente llamada a la acción con el contenido más emocionalmente convincente e impulsado por la historia.

Al frente y al centro está la inquietante dirección de arte que te obliga a detenerte y enfrentarte a la misión emocional. La hermosa fotografía de borde a borde y el diseño similar a una revista hicieron que el esfuerzo por construirlo de manera receptiva fuera un desafío. En lugar de comenzar con el escritorio, el sitio se creó para dispositivos móviles. Eso permitió que las decisiones de diseño se consideraran a propósito para pantallas pequeñas en lugar de actuar como un proxy diluido de la experiencia de escritorio.

05. Fusionar registros

Inspiración para el diseño web: Merge Records

Con bandas como Arcade Fire, Superchunk y The Mountain Goats en la lista, Merge Records en Durham, Carolina del Norte, buscó un socio digital local Novedoso para construir una experiencia de comercio electrónico de clase mundial que coincida con la calidad de sus artistas.

Construido sobre NewfangledCMS, el CMS patentado basado en PHP de Newfangled, con HTML5 y CSS3, el sitio responde maravillosamente a diferentes tamaños de dispositivos. El nuevo sistema ahora está automatizado para garantizar que todos los activos de la etiqueta estén disponibles y gestionados de forma centralizada. El nuevo director de operaciones Chris Butler dice:

`` Siempre que se agrega un producto, tenemos que averiguar cómo corresponde a una parte del inventario físico que se encuentra en una base de datos diferente y cómo representa una parte del inventario digital que se encuentra en otro sistema. Tuvimos que averiguar esa logística '. Con numerosas llamadas a bases de datos diferentes en cada página, era importante acertar en el orden de prioridad de los datos.

06. Enviado

Las transiciones CSS se utilizan para ayudar en la demostración de Envoy

Las transiciones CSS se utilizan para ayudar en la demostración de Envoy

Enviado , un producto que se centra en el registro de visitantes en su oficina, ofrece una elegante interfaz basada en iPad para recopilar nombres, capturar firmas e imprimir credenciales de visitantes en el lugar. Para el sitio web que promociona la aplicación, 'el objetivo principal era permitir que nuestros clientes visualizaran cómo sus propios visitantes pueden experimentar Envoy en sus oficinas', explica el cofundador y diseñador Vítor Lourenço. 'Decidimos que una demostración interactiva sería la forma más atractiva de demostrar esto'.

Para lograrlo, el sitio muestra la funcionalidad de la aplicación y los estados de la pantalla encima de una maqueta de iPad. A medida que se desplaza por el sitio de una página, los estados se actualizan en la demostración. Las transiciones CSS se utilizan para ayudar en la demostración, mejorando la experiencia sin interferir con el contenido.

'Pasamos muchas horas trabajando en pequeños detalles', agrega el cofundador e ingeniero Larry Gadea. 'Nos encanta la forma en que se dibuja la firma del visitante cuando se desplaza más allá de la pantalla NDA, o cómo se imprime la insignia de visitante al final del flujo'.

07. Mas sueño

Mas sueño , una agencia creativa de Berlín, tiene un sitio atrevido. “Nuestro objetivo era mostrar tres proyectos que representan nuestra experiencia, en lugar de mostrar todo el trabajo que hemos realizado hasta ahora”, dice el director técnico Torsten Bergler.

Los valores de tamaño de fuente grande, los efectos de desplazamiento prolijos y un esquema de color contrastado y rojo intenso hacen que este sitio se destaque. “Lo que es único es la presentación del trabajo: visualizar el proceso del proyecto, guiar a los visitantes a través de él y contar una historia sobre el trabajo que hemos realizado”, dice el líder de dirección de arte Stefan Schuster.

CSS las transiciones facilitan la navegación por las páginas y el contenido. Las propiedades de tamaño de fondo se utilizan para controlar la escala de imágenes en diferentes tamaños. Incluso el formulario de suscripción al boletín tiene un estilo que combina con el aspecto y la sensación limpios.

08. Registro agradecido

Registro agradecido permite a las parejas crear un registro de bodas único y personalizado a partir de cualquier regalo que deseen desde cualquier lugar de Internet. El sitio fue creado por Crush + Lovely ; Jeff Schram y Michael Phillips de su equipo de frontend querían que el CSS fuera tan hermoso como el diseño. Se tomaron un tiempo para planificar cuidadosamente su estructura SCSS para esta aplicación.

'En un entorno de múltiples desarrolladores, es fundamental que el código esté organizado, sea fácilmente transitable y comentado a fondo', explica Phillips. El arduo trabajo se muestra en la estética del sitio con una tipografía fuerte e imágenes grandes y poderosas. El equipo no quería ocultarlos en ninguna ventana y correr el riesgo de perder su significado.

'Creamos un sistema receptivo que se desliza por toda la página para revelar las principales opciones de navegación. Esto nos permitió mantenernos enfocados en las magníficas imágenes y también brindar a los usuarios una experiencia de respuesta única ”, dice Schram.

09. Vida en mis zapatos

Life In My Shoes es una poderosa campaña multiplataforma dirigida a
jóvenes que desafían el miedo y la incomprensión que rodea al VIH. Agencia digital con sede en Londres Tráfico se le informó sobre el desarrollo de un sitio web que atraería a un público joven.

La fuente de la marca, Houshka Rounded Medium, se implementó utilizando font-face para darle al sitio web una apariencia y sensación frescas. Las imágenes decorativas y los acentos amarillos dramáticos proporcionan una estética atractiva.

La página 'Acerca de nosotros' presenta un efecto de paralaje animado que se ajustó para tabletas y teléfonos inteligentes. 'Escribimos una consulta de medios para estos dispositivos que cambia el archivo adjunto de fondo de fijo a scroll y establece las posiciones de fondo individuales para que las imágenes se ubiquen en el lugar correcto', explicó el equipo de Tráfico.

10. Solo

Solo es una herramienta de gestión de proyectos todo en uno diseñada para ser utilizada por autónomos. Rentable y fácil de usar, la aplicación combina una gran funcionalidad, facilidad de uso y un hermoso diseño.

El sitio que promociona el producto está lleno de maravillas CSS3. 'Decidí utilizar HTML5 y CSS3 desde el offset, solo para navegadores web modernos', explica Jerome Iveson , diseñador de la aplicación. “Solo el tres por ciento de los visitantes de nuestro sitio utilizan Internet Explorer. Debido a que nuestro mercado objetivo no parece utilizarlo, parecía haber pocas razones para que Solo lo apoyara '.

Verá estas reglas CSS en acción a lo largo de este diseño, lo que hace que la gestión de proyectos sea más divertida con una gran cantidad de coloridas sombras de cuadros CSS. Fuentes como Clarendon y Bryant proporcionan un buen equilibrio entre sofisticación y diversión.

Cambiar el tamaño del sitio o verlo en un teléfono móvil le permite ver cómo el diseño se adapta a diferentes tamaños y resoluciones de pantalla. 'Me gustó mucho quedar atrapado en el lado de las consultas de medios. Me parece muy interesante desde la perspectiva del diseño ”, dice Iveson.

11. La forma sigue la funcion

ejemplos de CSS

El estilo es mínimo y utiliza la proporción áurea, así como una tipografía interesante.

La forma sigue la funcion (FFF) es una muestra de experimentos de HTML5 y CSS bellamente diseñada por un desarrollador coreano Jongmin Kim que trabaja como desarrollador interactivo en Multimedia primogénito en Nueva York.

Kim explica que el nombre de su sitio refleja su objetivo de perseguir siempre un 'diseño negativo en lugar de diseños positivos' y tenga en cuenta que la forma sigue a la función. Dice que su estilo es mínimo y usa el proporción áurea así como una tipografía interesante. FFF se hizo 'por diversión' y Kim tardó tres semanas en crearlo, incluido pasar sus vacaciones trabajando en él.

12. El gentilmente loco

Inspiración para el diseño web: The Gently Mad

El encabezado grande y la lista de episodios bien diseñada le dan un toque personal a este diseño.

El gentilmente loco es un podcast independiente del tema sobre creadores web. Adam Clark , la mente detrás de él, se alejó de un diseño de blog tradicional al diseñarlo para crear algo con un poco más de impacto.

El encabezado grande y la lista de episodios bien diseñada transmite que hay un toque personal en este diseño. Clark comenzó con transiciones y desvanecimientos CSS3 'más locos', pero los eliminó, nos dice. 'Sentí que las elecciones de diseño que había hecho (color, diseño, tipografía) funcionaban mucho mejor simplemente dejándolas tranquilas', dice.

13. Laboratorios Amazee

ejemplos de CSS

Con competencia y confianza, este sitio web es un hermoso ejemplo de CSS

Creando nuevos sitios web y soluciones comunitarias, Laboratorios Amazee para llevar su marca al mundo en línea basado en el moderno marco de código abierto Drupal. Con competencia y confianza, su propio sitio web es un hermoso ejemplo de CSS.

Ya creando sitios para cadenas de televisión, agencias digitales, organizaciones benéficas y empresas, está claro que su sitio ha impresionado a casi todo el mundo. No podríamos estar más de acuerdo.

14. A&W

Las transformaciones de rotación CSS se utilizan en el texto del encabezado, lo que le da al sitio de A&W una sensación divertida de menú de impresión

Las transformaciones de rotación CSS se utilizan en el texto del encabezado, lo que le da al sitio de A&W una sensación divertida de menú de impresión

El grupo en Cornett IMS quería un sitio para A&W eso era más que un logo, hamburguesas y cerveza de raíz.

`` Nuestro amor por A&W tenía que ver mucho con los recuerdos compartidos en los restaurantes de nuestros lugares de origen, por lo que queríamos trascender la singularidad de cada tienda, conectando a una nueva generación de fanáticos con su A&W local '', explica el director creativo David Coomer en propósito del sitio.

El uso de @ font-face para servir las fuentes Metroscript y Century Gothic crea un sistema de tipografía personalizado y agradable. Las transformaciones de rotación CSS se utilizan en el texto del encabezado, lo que le da al sitio una sensación divertida de menú de impresión.

25. Nolowene Nowak

ejemplos de CSS

Nolowene Nowak muestra sus habilidades con este divertido portafolio en línea

Diseñador web e ilustrador Nolowene Nowak ha creado una cartera en línea divertida, un gran ejemplo del uso de CSS con un efecto brillante. Si se desplaza hacia abajo y echa un vistazo a la sección de la línea de tiempo, notará que el diseño basado en CSS especifica de manera inteligente reglas básicas para crear un módulo que cambia de un diseño horizontal a vertical en pantallas más pequeñas.

El sitio es tan agradable de usar como de crear: 'Fue una experiencia realmente rica que me dio la capacidad de crear algo único que era simplemente yo', dice el desarrollador. Christophe Dumont . 'Queríamos ofrecer al visitante la misma experiencia que cuando era un niño descubriendo un juguete nuevo'.

Durante el desarrollo, Dumont utilizó Zurb's Fundación : un marco CSS receptivo creado con Sass. 'Su soporte realmente hace que el diseño receptivo cobre vida', dice.

16. Diseño Caava

El sitio web atrae a los usuarios con pistas de animación de desplazamiento y funciones de paralaje.

El sitio web atrae a los usuarios con pistas de animación de desplazamiento y funciones de paralaje.

Estudio de diseño Caava tiene un hermoso sitio nuevo. Los usuarios se sienten atraídos por pistas de animación de desplazamiento y funciones de paralaje, mientras que el foco principal permanece en la cartera. 'Intentamos ofrecer una experiencia lineal nueva y única sin golpear a la gente con ella', explica el propietario de Caava, Cody Small.

Al desplazarse por el sitio, las flechas que unen las diferentes secciones animan las posiciones superior e izquierda, manteniendo la experiencia cohesiva. 'Dado que tenemos muchos destellos animados, tomó algo de tiempo hacer que se sintiera natural y que apoyara el diseño', dice el desarrollador Brandon Lavigne.

Las flechas son consistentes en todo el diseño, como cuando se explora el área de trabajo. Mirando de cerca, verá que se crean con bordes y transformaciones CSS. Esto es súper ordenado y útil, ya que los proyectos tienen diferentes esquemas de color, y los colores de las flechas se pueden cambiar fácilmente con propiedades CSS para que coincidan.

17. Fitbit

Inspiración para el diseño web: Fitbit

El diseño del sitio de Fitbit es brillante y animado, con iconos y gráficos de estadísticas coloridos

Fitbit crea rastreadores de actividad y básculas para registrar la actividad, controlar el sueño y documentar su peso y grasa corporal. Esta información se publica de forma inalámbrica en Fitbit, donde los usuarios pueden ver gráficos, establecer objetivos, competir y compartir su progreso con otros. '¡Nuestra misión es nada menos que utilizar la tecnología para hacer del mundo un lugar más saludable!' comenta el desarrollador Biagio Azzarelli.

El diseño del sitio es brillante y animado. Los iconos y los gráficos estadísticos coloridos ayudan a dar vida a los fragmentos informativos sin aburrir a los usuarios. La cuadrícula bien utilizada debería facilitar la transformación del sitio en un diseño fluido en el futuro.

Azzarelli dice que disfrutó desarrollando el sitio basado en análisis de usuarios. 'A medida que nuestra base de usuarios continúa adoptando navegadores de categoría A, podemos aprovechar las partes agradables de CSS3 con una degradación aceptable en IE7 y 8.'

18. Mammothbooth

ejemplos de CSS

El equipo detrás de MammothReach creó este genial fotomatón MammothBooth

Los artistas de Detroit de MamutReach quería crear el fotomatón más espectacular que el mundo haya visto y con eso, el MamutBooth nació el sitio web.

'Deseábamos un sitio que fuera fluido, instantáneo y divertido', recuerda el diseñador y desarrollador Nick Keebaugh, 'y así es exactamente nuestro stand. En general, queríamos una sensación completamente personalizada en todo el sitio que reflejara quiénes somos como empresa y qué hace nuestro producto en su esencia. El sitio web es la extensión en línea de MammothBooth de principio a fin.

MammothReach utilizó la propiedad de transformación de rotación con una gran imagen de ráfaga en espiral que está en rotación constante. El contenido divertido se desliza a medida que visita las diferentes secciones del sitio con propiedades de estilo animadas. La divertida fuente Arvil Sans encaja perfectamente con la estética y está disponible como una fuente de Cooperativa tipo perdido .

19. Socios de laboratorio

Ejemplos de CSS

Los socios de laboratorio muestran su trabajo con un sitio web colorido y decorativo

El estudio de arte y diseño Lab Partners, dirigido por el equipo de marido y mujer Ryan Meis y Sarah Labieniec, ha lanzado un sitio web colorido y decorativo que es uno de los mejores ejemplos de CSS que existen.

La atención al detalle brilla a través de cada página. La sección de trabajo presenta un diseño curado, que permite que el portafolio se sienta especialmente original. Las miniaturas del proyecto tienen un área de desplazamiento grande que aprovecha la propiedad de opacidad al distinguir claramente el estado de desplazamiento. La sección Tienda se ejecuta en el carrito de compras de Big Cartel, pero se siente como una parte integrada del sitio con CSS personalizado aplicado a los elementos.

'La web realmente se siente como una de las mejores combinaciones de forma y funcionalidad', observa Meis. Continúa explicando que fue divertido y desafiante encontrar un equilibrio entre los dos. 'Al final, cada problema resultó ser una oportunidad para crear una solución en la que no había pensado originalmente'.

20. Cerebro de pizza

Ejemplos de CSS: Pizza Brain

Pizza Brain es totalmente sensible y se ve muy bien en diseños más pequeños

¡Los ejemplos de CSS no son mucho mejores que esto! Fundado por Brian Dwyer, Pizza Brain es el primer museo y restaurante de pizza del mundo. El sitio web promueve comunicados de prensa y un blog que describe el progreso del esfuerzo y presenta la marca diseñada por Michael Almquist.

Las fuentes Pacifico Regular y Bebas Neue se combinan con una paleta de colores cálida similar a la de una pizza que crean una estética amigable que es fácil de leer y, al mismo tiempo, emocionante y divertida. 'Esa naranja, es hermosa y realmente prepara el escenario para el contenido', dice el desarrollador, Arjun Mehta.

Una variedad de esquinas redondeadas y efectos de opacidad completan este aspecto limpio. “Tener cada publicación en su propia sección de contenido de rectángulo redondeado fue en realidad un préstamo del lenguaje visual que se encuentra en las tarjetas de presentación de Pizza Brain”, agrega Mehta. Totalmente receptivo también, el sitio se ve muy bien en diseños más pequeños.

Uno de los mejores ejemplos de CSS en acción, y manténgase atento al sitio ya que se espera que vengan más. 'Estoy entusiasmado con la forma en que el sitio podría crecer y perfeccionarse y desarrollarse aún más a medida que esta increíble empresa se haga realidad con el tiempo', dice Mehta.

21. Postable

Ejemplos de CSS: Postable

Postable proporciona una forma sencilla de capturar direcciones de correo

Dirigido principalmente a los visitantes que buscan enviar invitaciones de boda y tarjetas navideñas, o para aquellos que simplemente desean una libreta de direcciones en línea, Postable proporciona una manera fácil de capturar direcciones de correo.

'Postable tiene un aspecto increíblemente divertido, especialmente para una aplicación web, y quería ser fiel a esos diseños', dice el desarrollador frontend, Kevin Kneife. Desde bordes rayados inspirados en sobres hasta divertidas texturas de fondo y la fuente Omnes Pro robustamente redondeada, el sitio instantáneamente hace que la recopilación de direcciones sea menos complicada.

En todas partes se utilizan ilustraciones divertidas y útiles. Las esquinas redondeadas, las cintas y los estados de desplazamiento inteligentes mantienen la interacción con el sitio entretenido. Es uno de los mejores ejemplos de transformaciones CSS que hemos visto, ya que se utilizan para actualizar el valor de rotación de una imagen de fondo, lo que atrae a los usuarios a las instrucciones sobre la facilidad de uso del sitio.

Después de crear una cuenta, agregar un contacto se logra a través de un formulario fácil de usar que presenta cuadros de selección de CSS puro que Kneife diseñó por completo. Él revela: 'Esto implicó enmascarar los cuadros de selección en los formularios con un div externo, agregar transparencia y el uso de -webkit-apariencia. El resultado es una caja que se ve bien en todos los navegadores y se degrada con elegancia '.

22. Robby Leonardi

Ejemplos de CSS: Robby Leonardi

El sitio web presenta ilustraciones coloridas y estilos de dibujos animados.

La casa del diseñador Robby Leonardi cuenta con ilustraciones coloridas y estilos de dibujos animados, que aportan una personalidad alegre al trabajo. Como dice Leonardi, 'siempre es bueno hacer sonreír a la gente, y creo que este sitio web lo hará'.

Es uno de los grandes ejemplos del uso de CSS para crear imágenes asombrosas. Las imágenes de fondo se superponen para crear efectos de paralaje horizontales nítidos en el área del encabezado. Abajo de la página, las transformaciones de rotación CSS se utilizan para mover los engranajes a los lados del área de visualización. Las piezas de la cartera están enmarcadas dentro de ventanas de madera que tienen flotadores animados.

Los bloques de madera se hicieron a partir de la representación de modelos 3D de Leonardi. Él explica: 'Combiné todas esas representaciones en una sola imagen y cambio la propiedad izquierda de CSS cada vez que el usuario se desplaza por la página. ¡Es bastante sorprendente que un simple truco CSS pueda producir un efecto tan bueno! '

23. Libor Zezulka

Ejemplos de CSS: Libor Zezulka

Libor Zezulka es una cartera personal limpia e inteligente

El sitio web de una página de Libor Zezulka es un portafolio personal limpio e inteligente entre degradados que aparecen y texto que pide ser leído, gracias al uso inteligente de las sombras de texto CSS.

El diseñador principal y desarrollador frontend Martin Pospisil de Madeo disfruté trabajando en el sitio. '[Teníamos] la libertad de jugar con el diseño y la tecnología', explica. Esto se nota en el factor de diversión del sitio. El diseño es simple, pero efectivo, ya que las secciones se distinguen claramente. Pospisil reconoce que 'el poder reside en los iconos y las combinaciones de colores'.

Otro toque único son las ventanas emergentes de la caja de luz. Los botones de este sitio se distinguen como accionables por la imagen de sombra debajo. El botón de cierre está un poco separado de la caja, lo que proporciona una interfaz fácil de usar.

34. Empanadas emporio

El sitio web de Emporium PIes le dará ganas de probarlos todos

El sitio web de Emporium PIes le dará ganas de probarlos todos

'Los Sitio web de Emporium Pies tiene un trabajo: hacer que quieras comer más pastel, 'Kyle Turman, director interactivo de Colectivo de fundición afirma. Y chico, ¿está diciendo la verdad? El sitio receptivo bien diseñado de la tarta y cafetería con sede en Dallas le dará hambre. Realmente hambriento.

'El director de operaciones Paul Wilkes capturó algunas tomas realmente excelentes de los pasteles, y las priorizamos en la jerarquía del diseño tanto como fue posible', continúa Turman. 'Pensamos que era importante dejar que los pasteles hablaran por sí mismos y no llenar el sitio con un montón de copias incoherentes'.

Echa un vistazo a los efectos de desplazamiento en la página de pasteles. Utiliza transformaciones CSS 3D combinadas con la propiedad de visibilidad del reverso en las imágenes de los pasteles para revelar el nombre y más información sobre el postre.

25. El futuro del coche compartido

Ejemplos de CSS: el futuro del coche compartido

UX simplificado con este encantador sitio de desplazamiento horizontal

Future of Car Sharing, una colaboración entre Fondo colaborativo y Hyperakt con el apoyo de Asociación Startup America , está repleto de información sobre la alternativa cada vez más popular a la propiedad de un automóvil. Descifrar las diferencias entre el uso compartido de automóviles entre pares, de empresa a consumidor y sin fines de lucro es fácil gracias a este encantador sitio de desplazamiento horizontal.

'Desde el principio se tomó la decisión de llevar esta pieza lo más lejos posible', aconseja Simon Corry, arquitecto de información de Hyperakt. 'Esto significaba que, mientras proporcionábamos compatibilidad con versiones anteriores para navegadores más antiguos siempre que fuera posible, el énfasis estaba en probar los límites de las propiedades de CSS3. Siempre he sido un fanático de los videojuegos y con el nivel actual de soporte del navegador para CSS3 pude disfrutar de ese nivel de animación e ingeniería a través de CSS.

'La belleza de CSS3 está en su simplicidad, lo que lo convierte en un lenguaje perfecto para cualquier creativo', dice Corry.

26. La vida en Greenville

Ejemplos de CSS: Greenville

El sitio le da la bienvenida con la tipografía Kulturista

La vida en Greenville echa un vistazo a vivir y trabajar en Greenville, Carolina del Sur. 'Todos nosotros en CoWork Me encanta Greenville y quería crear un sitio web que ayudara a la gente a entender por qué ”, dice el desarrollador líder Sean Gaffney.

El sitio le da la bienvenida con el tipo de letra Kulturista con un tamaño de fuente de 53 píxeles que llama la atención sobre una imagen de héroe de ancho completo y receptiva. El diseño limpio lo mantiene comprometido y con ganas de aprender más con el contenido fácilmente accesible. El logotipo ligeramente animado al pasar el mouse también proporciona algo de alegría.

El equipo aprovechó la plantilla de Skeleton para ayudar a construir los estilos. 'Skeleton proporciona un conjunto de anchos base realmente agradable para diseñar, por lo que solo se redujo a ajustar algunos elementos en el diseño para cada tamaño de pantalla', dice Gaffney.

27. True Fish Tales

Ejemplos de CSS

True Fish Tales fue construido usando una combinación de CSS3 y JavaScript

True Fish Tales realmente te engancha. Juega con la idea de que los pescadores son famosos por contar historias fantásticas reuniendo algunos asombrosos 'cuentos reales' de los monstruos que acechan bajo el mar. Lo que lo distingue es su interactividad fluida y fácil de usar, que hace que descubrir el contenido sea una experiencia divertida y entretenida.

La infografía fue elaborada por Brian Maier y Mark Shelton de la agencia de Kentucky DBS> Interactivo como parte de un esfuerzo continuo para agregar contenido nuevo a Marina unida sitio web.

Maier y Shelton utilizaron una combinación de CSS3 y JavaScript para crear la infografía. “Muchas de las animaciones y gráficos se manejan con CSS3”, explica Lewis, “pero usaron JavaScript en algunos lugares para adaptarse a los navegadores más antiguos que aún no son compatibles con esta tecnología.

28. Estación cuatro

Ejemplos de CSS

Este año, Station Four ha sido rediseñado para mejorar su marca.

Agencia web Estación cuatro ha pasado por un proceso de cambio de marca y ha diseñado un nuevo sitio web para mejorar su personalidad y marca. 'Empezamos a concebir el nuevo sitio web en torno a la idea de mostrar, no decir, a los clientes potenciales lo que podemos hacer', explica el director creativo y copropietario de Station Four, Christopher Olberding.

En consecuencia, la nueva página de inicio utiliza un gran cartel de trabajo destacado para mostrar el trabajo más reciente de Station Four.

La página 'Experiencia' tiene un diseño de navegación interesante: utiliza imágenes de círculos grandes como enlaces. Estos aprovechan las propiedades del radio del borde para lograr el aspecto y también les aplican animaciones.

¿Nos perdimos tu ejemplo favorito de CSS en acción? ¡Cuéntanoslo en los comentarios a continuación!

Colaboradores : Chris Cashdollar y Rich Clark

Estas revisiones se publicaron originalmente en revista net , la revista más vendida del mundo para diseñadores y desarrolladores web.