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


65 visualizaciones el último mes

HTML

,

CSS

,

JavaScript

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

internetAprende a usar los pseudo-elementos :before y :after en CSS


48 visualizaciones el último mes

CSS

Publicado el 23 de Julio del 2013 por Administrador
22.703 visualizaciones desde el 23 de Julio del 2013
Los pseudo-elementos :before y :after se utilizan junto con la propiedad content para añadir contenidos antes o después del contenido original de un elemento. En este artículo vamos a ver a fondo qué son los pseudo-elementos :before y :after, y cómo sacarles el máximo partido en nuestros diseños web.
A pesar que la W3C incluye otros pseudo-elementos, como son los conocidos :link, :hover o no tan conocido :first-child, en este artículo nos vamos a centrar exclusivamente en los pseudo-elementos :after y :before y explorar algunas de las cosas que podemos hacer con ellos para enriquecer nuestros diseños.
Imágen de perfil

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


37 visualizaciones el último mes

HTML

,

CSS

,

JQuery

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

internetCSS grid: diseño con función inteligente


30 visualizaciones el último mes

CSS

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

internetLa guía rápida para aprender CSS básico desde cero


28 visualizaciones el último mes

CSS

Publicado el 29 de Diciembre del 2015 por Administrador
3.038 visualizaciones desde el 29 de Diciembre del 2015
Sencilla guía de introducción a CSS nivel básico.
Contiene:
1. Aprender CSS es fácil si te lo planteas bien
2. ¿Cómo funcionan las hojas de estilo en cascada?
3. Los conceptos clave en las hojas de estilo CSS
3.1. Reglas, selectores y propiedades
3.2. La cascada: herencia, sobreescritura y conflictos de estilos
4. Un ejemplo práctico
5. Propiedades básicas que deberías conocer
5.1. Maquetación básica
5.2. Fuentes y texto
5.3. Color y fondos
5.4. Listas
5.5. Bordes
6. Vincular los estilos CSS a páginas HTML
6.1. Hojas de estilo CSS inline
6.2. Hojas de estilo CSS internas
6.3. Hojas de estilo CSS externas
7 Personalizar CSS en blogs: WordPress y Blogger
7.1. CSS en Blogger
7.2. CSS en WordPress.org
7.3. CSS en WordPress.com
8. Referencias para profundizar más
Imágen de perfil

internetInsertar una imagen responsive


26 visualizaciones el último mes

CSS

Publicado el 4 de Enero del 2021 por Administrador
652 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

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


21 visualizaciones el último mes

CSS

,

HTML

,

WordPress

Publicado el 5 de Noviembre del 2018 por Administrador
1.214 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

internet¿Cómo limpiar estilos no usados de tu CSS para liberar espacio?


19 visualizaciones el último mes

CSS

Publicado el 13 de Febrero del 2019 por Administrador
1.439 visualizaciones desde el 13 de Febrero del 2019
Quiero compartir con vosotros una técnica realmente útil para tener vuestro blog o web como los chorros del oro. Personalmente me parece interesante ya que he estado tiempo buscando cómo podría hacer esto y al final he visto una solución que puede resultar bastante efectiva. Voy a contar de qué se trata y cómo usarlo.
Imágen de perfil

internet8 técnicas CSS que deberías de conocer


18 visualizaciones el último mes

CSS

Publicado el 12 de Abril del 2013 por Administrador
10.680 visualizaciones desde el 12 de Abril del 2013
Los estilos CSS es lo que nos permite dar la apariencia que deseamos a nuestros desarrollos, por lo que forma parte fundamental de estos. Hoy vamos a ver un listado de 8 técnicas que nos pueden servir a la hora de realizar nuestros desarrollos.
1. Trabajar con medidas relativas
2. Utilizando columnas múltiples
3. Evitando el salto de línea
4. Rotando imágenes
5. Rotando texto
6. Estilizando enlaces según su destino
7. Centrando un elemento
8. Sombra interna
Imágen de perfil

internetResponsive Slider utilizando FlexSlider


18 visualizaciones el último mes

CSS

Publicado el 8 de Mayo del 2013 por Administrador
13.836 visualizaciones desde el 8 de Mayo del 2013
En este pequeño tutorial vamos a crear un slider animado con jquery y lo vamos a hacer responsive, es decir que se adapte a cualquier dispositivo que el visitante este utilizando, para esto vamos a trabajar con un plugins que nos facilitara el trabajo, se trata de FlexSlider un plugins de Jquery de código abierto que nos facilitará este trabajo y lo optimiza para los dispositivos móviles.
Imágen de perfil

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


18 visualizaciones el último mes

Bootstrap

,

CSS

Publicado el 26 de Abril del 2020 por Administrador
870 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

.pdf2017 CSS3 CheatSheet


17 visualizaciones el último mes

CSS

Publicado el 4 de Diciembre del 2017 por Administrador
1.427 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

internetCSS sprites - Principios básicos


15 visualizaciones el último mes

CSS

Publicado el 17 de Febrero del 2012 por Administrador
4.762 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

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


15 visualizaciones el último mes

CSS

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

internetCreando fácilmente imágenes de relleno para tus prototipos


14 visualizaciones el último mes

CSS

Publicado el 4 de Diciembre del 2013 por Administrador
2.292 visualizaciones desde el 4 de Diciembre del 2013
Al crear prototipos o wireframes de sitios y aplicaciones web, es habitual incluir contenidos de relleno por no disponer de los contenidos definitivos. Rellenar texto es muy sencillo con el famoso Lorem Ipsum y otras técnicas que ya presentamos en este mismo sitio. Sin embargo, incluir imágenes de relleno no es tan fácil, ya que requiere mucho tiempo preparar imágenes con diferentes tamaños.
La librería holder.js, creada por el diseñador y programador Ivan Malopinsky, soluciona este problema creando las imágenes de relleno directamente en el navegador. Las imágenes se crean mediante el elemento canvas y otras técnicas similares, por lo que funciona bien en todos los navegadores móviles y de escritorio, incluyendo Internet Explorer.
Imágen de perfil

internetDiseño responsive: ¿cómo configurarlo correctamente?


14 visualizaciones el último mes

CSS

Publicado el 29 de Mayo del 2019 por Administrador
1.407 visualizaciones desde el 29 de Mayo del 2019
¡Cada día está más claro! El PC está perdiendo el combate contra la cantidad de dispositivos con los que podemos acceder hoy en día a la red, hasta tal punto que la venta de tablets y smartphones han superado a las ventas de los ordenadores tanto de sobremesa como portátiles.

Hasta hace algunos años era imprescindible utilizar el ordenador para navegar por internet; ahora en cambio, es muy probable que la mayoría de accesos se realicen desde plataformas mobile o móviles. Hoy en día todos llevamos un smartphone encima y nos comunicamos y buscamos información constantemente, por lo que se ha convertido en algo esencial optimizar los sitios web para un buen uso en estos tipos de dispositivos.

Screenshot_20190529_161800
Imágen de perfil

internet9 tips para escribir CSS de forma productiva


14 visualizaciones el último mes

CSS

Publicado el 16 de Marzo del 2020 por Administrador
639 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

internetComo hacer columnas sin tablas en CSS


13 visualizaciones el último mes

CSS

Publicado el 12 de Junio del 2009 por Administrador
4.479 visualizaciones desde el 12 de Junio del 2009
Esta página muestra como usar la propriedad float de CSS para hacer páginas con dos o tres columnas, sin usar tablas (el elemento table del HTML, que se debe usar solo para datos tabulados)..
Imágen de perfil

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


13 visualizaciones el último mes

CSS

,

HTML

,

WordPress

Publicado el 13 de Febrero del 2019 por Administrador
1.359 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

.htmlIntroducción a las animaciones CSS


13 visualizaciones el último mes

CSS

Publicado el 29 de Octubre del 2020 por Administrador
748 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

.pdfReferencias CSS


12 visualizaciones el último mes

CSS

Actualizado el 15 de Mayo del 2019 por Administrador (Publicado el 19 de Mayo del 2009)
5.792 visualizaciones desde el 19 de Mayo del 2009
Articulo en formato pdf de las referencias CSS más importantes. Esquematizado en tres columnas: Propiedad, descripción y valores.
Imágen de perfil

internetColocar un mapa de Google Maps como imagen de fondo de tu web


12 visualizaciones el último mes

CSS

Publicado el 22 de Abril del 2011 por Administrador
6.159 visualizaciones desde el 22 de Abril del 2011
Google Maps, se ha convertido en un elemento prácticamente imprescindible en nuestras aplicaciones webs, para que todos nuestros usuarios puedan saber donde nos encontramos. Pero que pensaríais si os damos la opción de ponerlo como fondo de nuestra web.
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.243 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
Imágen de perfil

internetComo redondear las esquinas de un DIV con jquery.corners


11 visualizaciones el último mes

CSS

Publicado el 28 de Junio del 2010 por Administrador
3.465 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

internetEquivalencias en tamaños tipográficos (CSS)


11 visualizaciones el último mes

CSS

Publicado el 23 de Abril del 2012 por Administrador
3.603 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. Menús flotantes


11 visualizaciones el último mes

CSS

Publicado el 7 de Mayo del 2013 por Administrador
10.434 visualizaciones desde el 7 de Mayo del 2013
Muchas son las propuestas para insertar menús en nuestras páginas Web, típicamente se han utilizado desde simples esquemas con hipervínculos, listas numeradas, rutinas en JavaScript, applets de Java, plug-ins de Abobe Flash, … por citar algunas soluciones populares.
En el presente artículo presentamos una alternativa que consideramos solvente y muy eficiente en varios aspectos, como su apariencia totalmente personalizable y facilidad de programación, o como en el escaso sobrecosto que puede suponer para el transito a través de Internet, tanto en tamaño, como en código potencialmente peligroso. Lo que entraría en el ámbito más general de la optimización de código HTML.
Nos basaremos en la aplicación de estilos a listas no ordenadas de entradas con hipervínculos –que serán las opciones del menú resultante-, convirtiendo dichas listas en verdaderos menús flotantes, con la toda la apariencia y prestaciones de los habitualmente utilizados.
A modo de resumen, trataremos:
1. La aplicación de los estilos básicos para la conversión en un menú
2. Control de anchos, fuentes y cursores
3. Menús horizontales y verticales
4. Menús con efectos de bordeados, sombras, centrados y demás