TEMAS de CSS

Mostrando del 1 al 10 de 101 registros
<<>>
Imágen de perfil

internetCSS grid: diseño con función inteligente


CSS

Publicado el 10 de Marzo del 2021 por Administrador
668 visualizaciones desde el 10 de Marzo del 2021
Al crear un sitio web, gran parte del trabajo consiste en disponer correctamente los distintos elementos que la componen. El diseño debe ser atractivo, pero claro al mismo tiempo, y se debe comprender de forma intuitiva. Las hojas de estilo en cascada (CSS) constituyen una herramienta para diseñar sitios web con esas características. Mientras que HTML muestra el contenido de forma rudimentaria, CSS es apto para diseños complejos. La tecnología de la web está en constante desarrollo y ahora, con CSS3, han aparecido técnicas nuevas que permiten aplicar el lenguaje en el Internet móvil y utilizar el diseño responsivo.

Índice de contenidos:
1.- ¿Por qué se usa CSS grid layout?
2.- CSS grid: tutorial con ejemplos
2.1.- Crear contenedores y elementos
2.2.- Rejilla, columnas y filas
2.3.- Disposición de los elementos
2.4.- Asignación de áreas
2.5.- Ajustar la alineación
2.6.- Ajustes automáticos para usar diseño responsivo

Screenshot_20210310_161822
Imágen de perfil

internetInsertar una imagen responsive


CSS

Publicado el 4 de Enero del 2021 por Administrador
332 visualizaciones desde el 4 de Enero del 2021
Una cuestión muy importante en CSS, sobre todo en tiempos de mobile-first, es poder trabajar con imágenes que se vean bien en cualquier dispositivo, y esto adquiere mayor importancia cuando son imágenes de fondo.

Screenshot_20210104_001722
Imágen de perfil

internetCrear un menu desplegable básico con HTML, CSS y jQuery


HTML

,

CSS

,

JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 17 de Diciembre del 2020 por Administrador
580 visualizaciones desde el 17 de Diciembre del 2020
Algo que es muy útil y recurrente dentro de mis proyectos es el menú desplegable, este elemento le da un toque moderno a nuestras webs, además de ahorrar espacio sobre todo cuando se trata de diseños para dispositivos móviles. Hacemos clic sobre un botón y que despliega el contenido que queremos ver en lugar de llenar la página de texto y tener que hacer scroll hasta encontrar lo que se busca. Por lo que también estamos aportando usabilidad a nuestra página web.

Este artículo muestra como crear un menú, pero podría ser simplemente un botón que despliega un contenido como las características de un producto por ejemplo y la acción podría dispararse al pasar el ratón por encima.

Screenshot_20201217_213117
Imágen de perfil

.htmlIntroducción a las animaciones CSS


CSS

Publicado el 29 de Octubre del 2020 por Administrador
496 visualizaciones desde el 29 de Octubre del 2020
Completa introducción a las animaciones CSS, que nos permite realizar efectos dinámicos muy atractivos en la web, por medio de código de Hojas de Estilo en Cascada. Explicaremos conceptos más importantes que debes de conocer para comenzar a usarlas.

Screenshot_20201029_164500
Imágen de perfil

internetClases nativas que te harán más productiva(o) en Bootstrap 4


Bootstrap

,

CSS

Publicado el 26 de Abril del 2020 por Administrador
558 visualizaciones desde el 26 de Abril del 2020
En la versión 4 del popular framework para Frontends existen clases CSS que te pueden facilitar la maquetación de tu proyecto, solo es cuestión que las pongas en práctica y las uses hasta que las hagas parte de tu trabajo en maquetación y veras lo rápido que avanzarás, estas clases te ahorran muchas líneas de código CSS que sueles escribir para darle cierto aspecto a un elemento del proyecto. Veamos las clases en el siguiente tutorial.

Screenshot_20200426_174239
Imágen de perfil

internet9 tips para escribir CSS de forma productiva


CSS

Publicado el 16 de Marzo del 2020 por Administrador
419 visualizaciones desde el 16 de Marzo del 2020
Vamos a proponeros una serie de reglas básicas con las que mejorar la escritura de CSS, de modo que con estas pautas el trabajo será más sencillo de hacer, sobre todo cuando haya que afrontar retos con hojas de estilo muy grandes o con hojas de estilo en las que trabaja mucha gente a la vez.

Screenshot_20200316_210013
Imágen de perfil

internetMaquetación con flexbox


CSS

Publicado el 11 de Marzo del 2020 por Administrador
713 visualizaciones desde el 11 de Marzo del 2020
¿Todavía usando tablas para maquetar? ¿Harto de usar floats? ¿Ni pajolera idea de cómo alinear verticalmente elementos? Pues con flexbox todo se hace más fácil.

Índice de Contenidos:
1.- Historia de la maquetación
2.- Introducción a flexbox
3.- Contenedor
4.- Hijos
5.- Responsividad avanzada
6.- Comparativa
7.- Conclusión

Screenshot_20200311_130112
Imágen de perfil

internetComo hacer un formulario estilo Material Design con HTML, CSS y Javascript


HTML

,

CSS

,

JavaScript

Publicado el 2 de Febrero del 2020 por Administrador
1.083 visualizaciones desde el 2 de Febrero del 2020
Aprenderás como hacer un formulario con el famoso estilo de google conocido como Material Design.

Puedes utilizar este diseño de formulario para cualquier cosa, ya sea un formulario para registrar usuarios o un formulario de contacto, ademas este formulario es adaptable a dispositivos móviles por lo que es una buena alternativa a los formularios tradicionales y aburridos.

Screenshot_20200202_202925
Imágen de perfil

internetAnimate css - Cómo crear animaciones CSS rápido


CSS

Publicado el 29 de Enero del 2020 por Administrador
685 visualizaciones desde el 29 de Enero del 2020
¿Tienes una web y no sabes cómo crear animaciones para darle ese toque diferenciador? Pues sigue leyendo, porque en este artículo veremos cómo crear animaciones con CSS con poco esfuerzo. Si no tienes conocimientos previos de CSS no te preocupes porque en este articulo veremos una manera de tener animaciones sin tener que tocar nada de CSS ¿mola no?

Lo primero que vamos a ver es una librería CSS que nos da animaciones ya creadas, las típicas, por ejemplo, fade, slide, bounce, etc

Si esto te parece poco y quieres crear tu mismo las animaciones, no te preocupes, porque también las vamos a crear de manera manual animaciones CSS, para que tengas un control total de las animaciones de tu página web.

Screenshot_20200129_184205