Share
En este Consejo rápido, te mostraré cómo crear un fondo de gradiente atractivo, utilizando cualquier imagen y un par de líneas de CSS. Además, hablaré sobre el rendimiento y explicaré la propiedad de adjuntos de fondo a medida que avanzamos.
Estamos viviendo en un mundo en el que la web (de manera comprensible) prefiere CSS y las imágenes generadas por el navegador sobre las imágenes. Las imágenes tienen una resolución limitada, lo que las hace bastante inflexibles. También pueden afectar el rendimiento de un sitio web, lo que cuesta más solicitudes de servidor más ancho de banda.
A veces, sin embargo, podemos apoyarnos en imágenes para obtener imágenes agradables. No tienen que ser enormes en términos de tamaño de archivo o resolución y el efecto no se verá afectado en gran medida, incluso en pantallas de alta resolución y retina. Echemos un vistazo al uso de una imagen (en lugar de CSS) para un fondo degradado.
Si desea usar, modificar o compartir imágenes, sin desembolsar dólares ganados con esfuerzo, siempre puede confiar en la Búsqueda avanzada de imágenes de Google. En la parte inferior de la página, puede seleccionar qué tipo de derechos de uso desea buscar. En este caso usaré una imagen que se puede compartir, modificar y es de uso gratuito..
Abre Photoshop y crea un nuevo archivo. Ajuste el ancho a 300px, la altura a 300px y la resolución a 72 PPI.
Ahora importe la imagen que desea modificar como un fondo degradado y amplíela proporcionalmente para que se ajuste al tamaño del lienzo.
Para obtener un gradiente atractivo, haga clic en Filtro> Desenfoque> Desenfoque gaussiano y configúrelo en 40 (en su caso, puede aumentar o disminuir el número según su imagen). Eso es.
Si te sientes perezoso, también puedes echar un vistazo a 100 Free Blurry Textures en pepsized.com.
Después de completar esos primeros pasos, es el momento de guardar nuestro fondo de degradado y de reducir el tamaño tanto como podamos, a la vez que mantenemos una calidad razonable. Haga clic en Archivo> Guardar para Web y configure el formato de imagen en JPEG.
Ahora para la compresión. Cuando modifique la calidad (Máximo, Muy alto, etc.) verá una vista previa del resultado final. Vaya lo más bajo que pueda, afine con precisión tecleando el valor real en el campo de calidad (80 en este caso) y establezca Desenfoque en 2. Incrementando el desenfoque se afeitará un poco más del tamaño del archivo y suavizará aún más cualquier pixelación que tenga.
Compruebe "Progresivo". Esto influye en cómo se carga la imagen en el navegador. La carga progresiva significa que se cargará en varias pasadas; primero carga completamente en baja calidad, luego un poco más alto, luego un poco más alto, en lugar de cargar línea por línea.
Haga clic en "Guardar" para guardar su imagen de degradado. En la parte inferior izquierda de la ventana, verá cuán bajo ha logrado obtener el tamaño de su imagen..
Una vez que haya establecido la configuración que considere adecuada, ¿por qué no guardarla para un acceso rápido en el futuro? Antes de pulsar "Guardar", haga clic en el pequeño icono de menú en la parte superior derecha del cuadro de diálogo Guardar para Web y haga clic en "Guardar configuración".
A pesar de que hemos creado una imagen pequeña, debido a su naturaleza borrosa, se puede extender efectivamente a resoluciones mucho más grandes sin reducir visiblemente la calidad. Para cargar esta imagen en el fondo de tu sitio web usa este pequeño fragmento de código CSS:
Accentsconagua
cuerpo margen: 0; fondo: url ('img / bg.jpg'); tamaño de fondo: 100% 100%; adjunto de fondo: fijo; margen: 0 - Esto puede no ser necesario si, para empezar, has restablecido correctamente tu CSS. Elimina los espacios en blanco alrededor de su imagen, o bordes en el punto de vista de su navegador.fondo: url ('bg.jpg') - Ruta de acceso a su imagen de fondo. Establecer el camino dentro de la url (").tamaño de fondo: 100% 100%; - Esto ajusta el ancho y la altura de su imagen de fondo. El primer valor es el ancho, el segundo es la altura. La razón por la que elegí el sistema de porcentaje es porque sigue siendo el mismo tamaño relativo a la ventana gráfica en cada dispositivo, dependiendo del valor que haya establecido. El 100% llenará la ventana gráfica de cualquier navegador..fondo adjunto: fijo - Usando esta propiedad podemos especificar si el fondo será desplazable o fijo. En nuestro caso, queremos que nuestro fondo sea fijo; no se desplazará con el contenido. Voy a hablar de esta propiedad en más profundidad a continuación.Una desventaja del uso de imágenes es que al insertar cada una en el navegador se agrega una solicitud de servidor adicional. La cantidad de solicitudes paralelas que se pueden hacer es limitada, por lo que puede ocurrir un estrangulamiento en los casos en que se descargan muchos activos. Para solucionar esto, es posible convertir su imagen a Base-64 e insertarla directamente en su archivo CSS utilizando un URI de datos.
Hay muchos servicios que realizan esta tarea por usted, pero la autoproclamada "herramienta dataURI super simple" duri.me es sumamente fácil de usar.
Para obtener más información sobre cómo funciona esto, consulte la introducción de URI de datos de Chris Brown.
Eche un vistazo a nuestra pequeña imagen de 300 píxeles, que se extiende por toda la ventana. También puedes ver la demostración en vivo..
fondo adjunto La propiedad de adjuntos de fondo se utiliza principalmente para especificar si las imágenes de fondo deben desplazarse o fijarse en relación con su elemento principal.
Lo hemos utilizado en su forma más simple:
body background-image: url ("img / imgname.png"); adjunto de fondo: fijo; También admite varias imágenes de fondo, aceptando múltiples valores separados por comas. En este ejemplo, la primera imagen de fondo ("image1.png") se desplazará, la segunda ("image2.png") se corregirá:
body background-image: url ("image1.png"), url ("image2.png"); Fondo de archivo adjunto: desplazamiento, fijo; Echa un vistazo a la demo..
Esta es una forma sencilla de lograr gradientes de aspecto fresco como un nuevo fondo de sitio web, en minutos. No olvides evaluar si crees que vale la pena usar gradientes CSS, pero espero que te haya gustado este tutorial, gracias por leer!
