TEMAS de CSS

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

internetGuía: usar Google Fonts en blogs o páginas web


CSS

Publicado el 27 de Octubre del 2021 por Administrador
275 visualizaciones desde el 27 de Octubre del 2021
La vía principal para transmitir un mensaje son las palabras y tener una tipografía fácil de leer y elegante, lo cual le da una personalidad a lo que quieres decir. Así que si quieres retocar tu estilo un poco, este artículo es para ti. Hoy te presento la forma más fácil de usar las tipografías correctas en tu blog, página web o app con Google Fonts desde hoy mismo.

Hoy te mostraré la importancia de usar la tipografía correcta en tu diseño de marca y la opción de Google Font. Aprenderás a instalar cualquier fuente disponible en tu web y algunos consejos para parecer más profesional.

Screenshot_20211027_160958
Imágen de perfil

internetCSS grid: diseño con función inteligente


CSS

Publicado el 10 de Marzo del 2021 por Administrador
1.214 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
558 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
1.035 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
678 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
788 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
587 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
951 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.553 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