Fondos para paginas web html elegantes

Inicio » Fondos para paginas web html elegantes

Fondo punteado Css

Pero aunque soy programador, quiero que mis sitios tengan un aspecto atractivo. En parte por vanidad y en parte por realismo. Vanidad porque quiero que la gente piense que mi trabajo es bueno, y realismo porque la investigación muestra que la gente no pensará que un sitio es creíble a menos que también parezca atractivo.

Durante mucho tiempo, después de convertirme en programador, el diseño me daba miedo. El diseño parecía consistir en reglas complicadas que no estaban escritas en ninguna parte, además de un sentido del gusto que no se puede aprender y que sólo posee una élite vestida de negro.

Pero hace un tiempo, decidí hacer todo lo posible para hackear lo necesario para que mis propios proyectos tuvieran un aspecto vagamente atractivo. Y aunque esto no se acerca al efecto que podría lograr un diseñador profesional, reunir estos recursos para mejorar el aspecto de un sitio ha sido realmente útil.

Si no hubiera descubierto algunos atajos básicos de diseño, es poco probable que un hack de fin de semana mío hubiera acabado en la página tres del Daily Mail. Y ahora veo con demasiada frecuencia excelentes proyectos de programación que no llegan a la audiencia que merecen, simplemente porque su diseño no coincide con su ejecución.

Patrones de fondo Css

¿Has notado que tu pantalla se ve un poco más oscura últimamente? No eres el único. Los fondos negros están apareciendo en todas partes. A medida que los sitios web en modo oscuro crecen en popularidad -con sistemas operativos, navegadores y aplicaciones- también lo hace su prevalencia en el diseño web moderno.

Aunque parezca novedoso, los sitios web en modo oscuro y su uso en el diseño no es nada nuevo. Si alguna vez usaste un ordenador en los años 80 con una pantalla monocromática (o si los has visto en las películas -¿Ferris Bueller? ¿Alguien, alguien?), conoces el aspecto. La mayoría de los primeros ordenadores domésticos mostraban texto verde o blanco sobre un simple fondo negro.Siga leyendo para conocer los pros y los contras de crear sitios web en modo oscuro con fondos negros, y vea 14 ejemplos de sitios con fondos oscuros bien hechos.¿Qué es el modo oscuro? También llamado modo negro, tema oscuro o modo nocturno, el modo oscuro es un término que se utiliza para describir cualquier esquema de colores claros sobre oscuros que muchos usuarios prefieren utilizar en entornos con poca luz. En su versión más básica, piense en un texto blanco en negrita sobre un fondo negro intenso.

Efectos de imagen de fondo Css

Esta pregunta se hizo antes pero la solución no es aplicable en mi caso. Quiero asegurarme de que ciertas imágenes de fondo se impriman porque son parte integral de la página. (No son imágenes directamente en la página porque hay varias de ellas que se utilizan como sprites CSS).

Tienes muy poco control sobre los métodos de impresión de un navegador. A lo sumo puedes SUGERIR, pero si la configuración de impresión del navegador tiene “no imprimir imágenes de fondo”, no hay nada que puedas hacer sin reescribir tu página para convertir las imágenes de fondo en imágenes flotantes “en primer plano” que resultan estar detrás de otro contenido.

Como dijo @ckpepper02, la opción body content:url funciona bien. Sin embargo, he descubierto que si lo modificas ligeramente puedes usarlo para añadir una imagen de cabecera de tipo utilizando el pseudoelemento :before de la siguiente manera.

Utilice los pseudoelementos. Mientras que muchos navegadores ignoran las imágenes de fondo, los psuedo-elementos con su contenido establecido en una imagen no son técnicamente imágenes de fondo. De este modo, puede colocar la imagen de fondo aproximadamente en el lugar donde debería ir la imagen (aunque no es tan fácil ni preciso como la imagen original).

Fondo interactivo

Los patrones son un recurso muy útil para el diseño de sitios web, ya que nos permiten animar nuestros fondos utilizando imágenes diminutas de pocos kb. Un gráfico repetido es una buena estrategia para el diseño responsivo, ya que se adapta perfectamente a todas las resoluciones de pantalla. Los patrones se repiten indefinidamente tanto en horizontal como en vertical, y podemos jugar con una gran variedad de formas y colores, mapas de bits o vectores, y diferentes estilos.

Aquí tienes una buena recopilación de recursos y herramientas, como las galerías de patrones, los patrones CSS3 y los generadores de patrones, además de algunos ejemplos de sitios web con patrones de fondo para inspirarte.

Si buscas algo diferente a los patrones disponibles en las galerías, ¿por qué no pruebas un generador de patrones para crear tus propios patrones personalizados?    Algunos incluyen la opción de generar como código CSS3 en lugar de como archivo de imagen.

Ir arriba