es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Desarrolla Modals usando Pure CSS con CSS Modal

En el diseño web, debe tener una buena organización de contenidos. Esto ayuda a brindar a los usuarios información más legible y funcional. Puede hacerlo creando un diseño limpio y ordenado en el sitio web. Para organizar el contenido, hay muchos elementos y estructuras de interfaz que puede usar, y el diálogo modal es uno de ellos.

Si ha estado creando un diálogo modal con jQuery u otros complementos, tenemos algunas buenas noticias para usted. Con la biblioteca CSS Modal, solo necesitará CSS puro.

Hans Christian Reinl, quien desarrolló CSS ​​Modal, ha incluido muchas ventajas que vienen con él. Algunas de las ventajas son que se puede usar como un complemento SASS, existe soporte para navegadores cruzados, está optimizado para dispositivos móviles, puede insertarse con medios (imagen, video y sonido), y es pequeño y rápido.

Casi todos los navegadores modernos son compatibles con CSS Modal . Ha sido probado en Chrome, Firefox, Safari 6, Opera 12, IE8, IE9 +, Windows Phone 8, iOS 6 y Android. Si bien todavía tiene problemas menores para Android 2.3 (el desplazamiento es el mayor problema, al momento de escribir), sigue funcionando bien.

Marcado HTML

CSS Modal tiene tres partes para trabajar: encabezado, contenido y pie de página . El header es donde puede poner el título para el modal. El contenido es para mostrar la información importante que desea resaltar. Esta parte es compatible con texto, imágenes y código incrustado. En cuanto al footer, puede agregar información adicional aquí, como un botón de cerrar, un botón de abrir una nueva ventana, etc.

Para crear un cuadro de diálogo modal, debe usar la etiqueta de section y algunos data-attributes predefinidos, clase e id. Dentro de la etiqueta de section, debe incluirse un elemento envuelto con .modal-inner clase .modal-inner . Aquí está el marcado básico:

La id en la etiqueta de section se usa para llamar al modal desde otra función, por ejemplo, mediante un enlace, y el valor se puede cambiar según sea necesario. a etiqueta en el código, se usará como el botón de cierre modal. El atributo del href debe dejarse como se muestra arriba, ya que evitará que la página se desplace hacia la parte superior cuando se haga clic.

El header y el footer son partes opcionales, que puede incluir (o no). Pero tenga en cuenta que, si usa un encabezado, debe agregar un nombre de ID único y cambiar el atributo aria-labelledby al mismo valor.

No se olvide de incluir la biblioteca de CSS Modal, que puede descargar desde su página de GitHub, a su proyecto.

 ..  .. 

Javascript adicional

Todavía existen algunos problemas cuando utiliza CSS Modal con CSS puro, como por ejemplo:

  • Problemas con la compatibilidad con IE 8
  • Teclado Botón de escape para salir
  • Desplazamiento de prevención de fondo
  • Efecto de enfoque al modal y de regreso a la página después de cerrarlo

Entonces, para solucionar esos problemas, aún se necesita JavaScript aquí. Afortunadamente, CSS Modal le ha proporcionado un código fuente javascript liviano para su conveniencia. Incluya este código antes de su etiqueta de body cierre.

Pensamiento final

Crear modal con CSS puro todavía tiene algunos inconvenientes, pero puede convertirse en una herramienta alternativa para enriquecer aún más tu sitio web. Y probablemente quieras probar algo ligeramente diferente. Con un poco de creatividad, podrías hacer algunos modals increíbles. Dale un tiro.

El iStick: la primera unidad flash USB del mundo para dispositivos iOS

El iStick: la primera unidad flash USB del mundo para dispositivos iOS

Los dispositivos iOS de Apple son geniales, pero todos comparten el mismo problema importante: la falta de compatibilidad con USB. La transferencia de archivos desde su iPhone o iPad a una computadora solo funciona a través del incómodo iTunes o a través de una conexión Wi-Fi. Por supuesto, puede recurrir a aplicaciones y servicios de almacenamiento en la nube de terceros, pero es posible que tenga preocupaciones de seguridad y privacidad de las que preocuparse.Aqu

(Consejos de tecnología y diseño)

Diseñadores: 7 maneras de ser más prolífico

Diseñadores: 7 maneras de ser más prolífico

Con la demanda de diseño aumentando cada día, también lo hace la cantidad de diseñadores que compiten por los mismos trabajos. Ya no es suficiente ser simplemente un buen diseñador .Los clientes buscan diseñadores que no solo superen sus expectativas, sino que lo hagan en un tiempo récord. Aquí le mostramos cómo hacer más diseños en menos tiempo, ganándose más dinero y clientes leales en el proceso.Escriba sus

(Consejos de tecnología y diseño)