Los Temas más visitados de CSS

Listado de los Temas más visitados durante los últimos 30 días
Imágen de perfil

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


35 visualizaciones el último mes

HTML

,

CSS

,

JavaScript

Publicado el 2 de Febrero del 2020 por Administrador
2.478 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

internetCódigos CSS y HTML para editar tu página web en WordPress


34 visualizaciones el último mes

CSS

,

HTML

,

WordPress

Publicado el 5 de Noviembre del 2018 por Administrador
1.524 visualizaciones desde el 5 de Noviembre del 2018
Los gestores de contenido como WordPress permiten hacer casi todo muy fácil sin necesidad de saber código web, pero en ocasiones resulta interesante poder hacer cosas muy concretas con tu plantilla para ir un poco más allá en cuanto a la personalización del tema y conseguir un resultado aún mejor que el que a priori podrías lograr. ¡Te lo cuento en este post!

Si vas a tu web y das a botón derecho y a continuación Ver código fuente de la página, lo que verás es el código HTML y CSS con el que está construido tu sitio. Estos códigos los crea automáticamente tu CMS para que tu web pueda verse en internet. Si trabajas con un gestor de contenidos no tienes que implementarlos manualmente, pero conociéndolos un poco puedes hacer verdaderas maravillas.

Las plantillas premium suelen tener una amplia sección de opciones para modificar fácilmente casi todos los elementos de tu web, como colores, fondos, estilos de letra, etc. Pero, ¿y si hay elementos y zonas de la plantilla que no puedes modificar porque no vienen incluidos en las opciones?
Imágen de perfil

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


31 visualizaciones el último mes

HTML

,

CSS

,

JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 17 de Diciembre del 2020 por Administrador
1.765 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

internetDiseño y maquetación web para smartphones y tablets


22 visualizaciones el último mes

CSS

Publicado el 16 de Junio del 2014 por Administrador
2.618 visualizaciones desde el 16 de Junio del 2014
En este artículo os mostraré como maquetar una web para que se adapte a diferentes resoluciones de pantallas, smartphones y tablets. Tendencia que en inglés se llama Responsive Design.
Imágen de perfil

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


22 visualizaciones el último mes

CSS

Publicado el 27 de Octubre del 2021 por Administrador
583 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

internetCódigos CSS y HTML para editar tu página web en WordPress


19 visualizaciones el último mes

CSS

,

HTML

,

WordPress

Publicado el 13 de Febrero del 2019 por Administrador
1.543 visualizaciones desde el 13 de Febrero del 2019
Los gestores de contenido como WordPress permiten hacer casi todo muy fácil sin necesidad de saber código web, pero en ocasiones resulta interesante poder hacer cosas muy concretas con tu plantilla para ir un poco más allá en cuanto a la personalización del tema y conseguir un resultado aún mejor que el que a priori podrías lograr.
Imágen de perfil

internetEstilizando Formularios con CSS


18 visualizaciones el último mes

CSS

Publicado el 8 de Febrero del 2008 por Administrador
5.460 visualizaciones desde el 8 de Febrero del 2008
Este es un artículo que te servirá de guía para crear formularios totalmente accesibles usando XHTML y hojas de estilo en cascada (css) para darle formato.
Imágen de perfil

internetEquivalencias en tamaños tipográficos (CSS)


18 visualizaciones el último mes

CSS

Publicado el 23 de Abril del 2012 por Administrador
3.710 visualizaciones desde el 23 de Abril del 2012
En la siguiente tabla se encuentran las equivalencias entre las distintas unidades de medida que podemos encontrar en CSS (la equivalencia es aproximada, no exacta, en última estancia depende de la fuente, el navegador y el sistema operativo).
Imágen de perfil

internetCSS grid: diseño con función inteligente


18 visualizaciones el último mes

CSS

Publicado el 10 de Marzo del 2021 por Administrador
1.719 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

internetEl Modelo de Caja en CSS


17 visualizaciones el último mes

CSS

Publicado el 7 de Junio del 2007 por Administrador
6.503 visualizaciones desde el 7 de Junio del 2007
La utilización del estándar de marcado CSS (en español Hojas de Estilo en Cascada) definido por el World Wide Web Consortium (W3C) permite a diseñadores y programadores definir estilos coherentes para páginas web y aplicar la plantilla a varias páginas. Un aspecto especialmente relevante de CSS es el Modelo de Caja. Este artículo brinda una primera aproximación a su arquitectura y a las distintas posibilidades que ofrece.
Imágen de perfil

internetUnidades de medida de fuentes en CSS 3


17 visualizaciones el último mes

CSS

Publicado el 17 de Abril del 2014 por Administrador
3.015 visualizaciones desde el 17 de Abril del 2014
Para fijar las dimensiones de las fuentes de textos, disponemos de un buen grupo de unidades de medida estandarizadas en CSS 3. Este artículo te explica como usarlas.
Imágen de perfil

internetCrear Múltiples columnas en los artículos con CSS3 Multicolumn


16 visualizaciones el último mes

CSS

Publicado el 21 de Agosto del 2012 por Administrador
3.915 visualizaciones desde el 21 de Agosto del 2012
Esta propiedad de css3 nos va a permitir extender el contenido de un elemento html en múltiples columnas, igual como se utilizan en los periódicos y revistas. Esto sirve para no hacer ver una columna de texto muy larga y tediosa a la vista, si no que al insertar múltiples columnas vamos a poder ver un solo artículo en un tamaño determinado en un solo pantallazo del navegador, y así no evitamos el hacer scroll, que a mucha gente aburre.
Con CSS3 Columns el navegador determina cuando pone fin a una columna y comienza la siguiente columna, sin necesidad de algún código extra vamos a conservar la flexibilidad para cambiar el número de columnas así como sus anchuras.
Imágen de perfil

internet7 consejos para hacer buen responsive design


16 visualizaciones el último mes

CSS

Publicado el 17 de Enero del 2013 por Administrador
5.839 visualizaciones desde el 17 de Enero del 2013
Este 2012 es el año de la prima de riesgo, Lana del Rey, las pelis de superhéroes y el diseño sensible o responsive design (amigo lector, esto es sólo la intro del post, no centres tus iras en ella…). Por eso, cuando he visto un post en uno de mis blogs de desarrollo de cabecera, Cats who Code, con una serie de consejos o tips para crear diseños responsive de calidad, me he visto en la obligación ética y moral de compartirlo con toda la comunidad de Genbeta Dev. En total son 7 consejos para hacer buen responsive design y tengo que reconocer que los comparto todos y cada uno.
Imágen de perfil

internetCómo mostrar imágenes pixeladas con CSS 3


16 visualizaciones el último mes

CSS

Publicado el 23 de Febrero del 2015 por Administrador
2.460 visualizaciones desde el 23 de Febrero del 2015
Las imágenes son una de las partes más importantes del diseño web. Normalmente dejamos que sean los navegadores los que redimensionen y escalen las imágenes para que encajen bien en el diseño y se vean lo mejor posible. No obstante, en ocasiones es mejor controlar explícitamente cómo se escalan las imágenes.
Imágen de perfil

internetRotación de palabras con animación CSS3


15 visualizaciones el último mes

CSS

Publicado el 27 de Febrero del 2015 por Administrador
2.417 visualizaciones desde el 27 de Febrero del 2015
En este artículo voy a explicar como crear una rotación de palabras con animación tan sólo usando CSS3.
Imágen de perfil

internetComo redondear las esquinas de un DIV con jquery.corners


14 visualizaciones el último mes

CSS

Publicado el 28 de Junio del 2010 por Administrador
3.606 visualizaciones desde el 28 de Junio del 2010
Si hay algo que me gusta usar en mis proyectos son cuadros con esquinas redondeadas. Siempre queda bien y le da un aire moderno a la web. Es muy facil de hacer y tiene un monton de utilidades como por ejemplo para marcos de fotos, redondear tablas, botones o simplemente divs redondos.
Imágen de perfil

internetCSS sprites - Principios básicos


14 visualizaciones el último mes

CSS

Publicado el 17 de Febrero del 2012 por Administrador
4.878 visualizaciones desde el 17 de Febrero del 2012
La técnica de los sprites, consiste en sustituir el mayor número de imagenes posibles de una página web, por una sola. La idea, es unir todas las imágenes que aparecen en un web condensadas en una sola, para aumentar la velocidad de carga de un web. No parece lógico que cinco imágenes pequeñas, tarden (por ejemplo) más en cargar que una sola imagen grande que las contenga a todas ellas, pero es así.
Imágen de perfil

internetForzar un salto de página en la impresión


13 visualizaciones el último mes

CSS

Publicado el 17 de Mayo del 2007 por Administrador
5.204 visualizaciones desde el 17 de Mayo del 2007
Imprimir de manera organizada. En este taller conocerá cómo controlar saltos de página en la impresión de un documento HTML.
Imágen de perfil

internetBordes punteados con CSS


13 visualizaciones el último mes

CSS

Publicado el 26 de Febrero del 2010 por Administrador
5.204 visualizaciones desde el 26 de Febrero del 2010
Para dar efectos distintos a elementos estructurados, como las tablas, podemos recurrir a las clases, parte integrante de las hojas de estilo (CSS).
Imágen de perfil

.pdf2017 CSS3 CheatSheet


13 visualizaciones el último mes

CSS

Publicado el 4 de Diciembre del 2017 por Administrador
1.576 visualizaciones desde el 4 de Diciembre del 2017
Nueva edición (2017) de la CSS3 Cheatsheet (lenguaje de hojas de estilo) en formato PDF, incluyendo nuevos módulos como Flexbox, Grid o Motion Paths.
Imágen de perfil

internetEl Modelo de Caja CSS


12 visualizaciones el último mes

CSS

Publicado el 20 de Febrero del 2007 por Administrador
6.206 visualizaciones desde el 20 de Febrero del 2007
La utilización del estándar de marcado CSS (en español Hojas de Estilo en Cascada) definido por el World Wide Web Consortium (W3C) permite a diseñadores y programadores definir estilos coherentes para páginas web y aplicar la plantilla a varias páginas. Un aspecto especialmente relevante de CSS es el Modelo de Caja.
Imágen de perfil

internetImágenes en diseño web responsive con CSS


12 visualizaciones el último mes

CSS

Publicado el 17 de Junio del 2014 por Administrador
2.750 visualizaciones desde el 17 de Junio del 2014
El principal cambio de conceptualización que ha traído el diseño web responsive ha sido sin duda la sustitución del pixel por unidades relativas. Es cierto, antes ligábamos todos los elementos del diseño (tamaño de tipografía, contenedores, imágenes, márgenes…) a una unidad fija. El pixel. Pero con el responsive todo es distinto. Trabajamos con unidades relativas: porcentajes (%), ems, rems…y las imágenes sin duda son uno de los elementos más afectados.
Imágen de perfil

internetCrea tu propio framework CSS con Stylus


12 visualizaciones el último mes

CSS

Publicado el 30 de Enero del 2015 por Administrador
2.751 visualizaciones desde el 30 de Enero del 2015
Gracias a preprocesadores como Stylus podemos crear un CSS mucho más sencillo de mantener y editar. Aprovechando sus funciones podemos crear un pequeño framework a medida, nuestro propio Bootstrap, pero personalizado con las utilidades que necesitemos en nuestros proyectos.
Imágen de perfil

internetMaquetación con CSS Grid


12 visualizaciones el último mes

CSS

Publicado el 27 de Octubre del 2019 por Administrador
1.382 visualizaciones desde el 27 de Octubre del 2019
La maquetación con CSS siempre ha sido… inesperada. Llena de tablas con infinitas columnas y filas, incontables floats y clears sin ton ni son. Y por supuesto con Bootstrap, aunque claro, si querías salir de lo establecido mucha suerte. Todo esto cambia con Grid.

Índice de Contenidos:
CSS Grid
Colocar elementos en la grilla
Layouts con grid-template-areas
Repeat
Responsividad avanzada
Conclusión

Screenshot_20191027_231348