CSSBlog ES » fondos

30 bonitos ejemplos de fondos en diseño web

Pedro CM — Wed, 10 Nov 2010 15:44:16 +0000

Últimamente existe la moda de incluir grandes fondos en los sitios web para darle mayor interés al diseño y al tema que tratamos, pero es importante crear un balance entre todos los elementos del diseño: tipografías, iconos, texturas… Para aumentar vuestra inspiración aquí os traigo 30 interesantes ejemplos sobre grandes fondos utilizados en el diseño web, seguro que os son útiles.

Stephan Siegrist

Noah Stokes – Es Bueno

Grand Canyon Skywalk

Yes I am Precious

Because Studio

Sur La Piste – Carlos

Immersive Garden

Sayonara

Mavic

Derek Welsh

Airwalk

Piero Martinello

Studio Tilt

Giles Revell

BVD

Chicago L-Shirts

SabotagePKG

Mike Stocker Photography

Coal Headwear

Twelve Restaurant

Go To China

Festival Mundo

Paul Smith

Merus

Medis Bar

The Squad

Summer Love

Free Agent Depot

160over90

Turkish Cosmetics

Vía | WDL, Site Inspire, The Best Designs, CSS Mania

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

30 ejemplos sobre bonitos diseños de logotipos

30 creativos ejemplos de fondos ilustrados en Twitter

100 nuevos y bonitos fondos para integrar en tu sitio web

30 creativos ejemplos de fondos ilustrados en Twitter

Pedro CM — Tue, 27 Oct 2009 21:58:37 +0000

Twitter puede ser una gran herramienta de comunicación y marketing, pudiendo expander todavía más el eco de nuestro servicio/producto. Para atraer a los clientes no hay nada como ser curioso y original. Si creas un fondo original y creativo para Twitter, tendrás mayores posibilidades de que las personas se fijen en ti. En esta entrada os muestro una lista de 30 originales ejemplos de fondos ilustrados en Twitter. Fíjate en ellos para obtener mayor inspiración e ideas para diseñar el tuyo:

@arinee

@shirtpizza

@mj12982

@spurrachel

@peachpops

@Go_Media

@boxmodel

@chadworth

@DesignerDepot

@carywood

@smashingmag

@meghunt

@mikebithell

@mailchimp

@doubleolee

@anousone

@canvascubed

@sickbrain

@fragments77

@happytreefriend

@Hicksdesign

@Malarkey

@meetblink

@sallid

@carsonified

@KrisColvin

@bongobrian

@Krftd

@Vectips

@djambazov

Vía | WDL

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

30 bonitos ejemplos de fondos en diseño web

Fondos de escritorio oficiales de CSSBlog.es

12 generadores online de fondos

50 texturas de hojas gratis y de alta calidad

Pedro CM — Thu, 03 Sep 2009 05:00:05 +0000

Si alguna vez deseamos montar un proyecto relacionado con la naturaleza o, queremos darle un toque natural a nuestro sitio, este pack de texturas sobre hojas nos vendrá muy bien. Se muestran una gran variedad de texturas de hojas de todo tipo y de gran calidad, todas ellas totalmente gratuitas (aunque recomiendo mirar la licencia antes de usarlas):

Autor

Más texturas de hojas

Leaf Texture Pack 1

Texture Pack Leaves

13 Grass and Leaf Textures

10 High-Quality Free Leaf Textures

Vía | Naldzgraphics

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

40 texturas grunge de alta calidad

185 texturas gratis de alta calidad

Lista de 1009 texturas y fondos de alta calidad

70+ bonitos fondos y texturas de damasco

Pedro CM — Thu, 27 Aug 2009 06:00:32 +0000

Damasco es una tela de seda o lana de un solo color, en la que se trazaban dibujos o adornos para ornamentar dicho tejido. Estos fondos y texturas pueden ser muy útiles para determinados proyectos, así que, si este es tu caso, allá van unos 70 bonitos fondos y texturas de damasco (son gratuitos, pero algunos requieren atribución, así que recomiendo leer la licencia):

Floral Vector Pattern

Free damask seamless pattern

Birthday Special

Teal Brown Grunge Damask

Dark Teal Damask Wallpaper

Patterns.2 (2 fondos)

Green Grunge Damask

Ornate Textures Lite Pk (9 texturas)

Nouveau Pattern 2

Damask Wallpaper patterns (25 fondos)

Teal Gold Damask

Wallpaper

Orange Damask Wallpaper

Orange Gold Damask

Big Damask Textures (6 texturas)

Ornate Textures Dark Pk (9 texturas)

Gothic Mono

damask wallpaper

damask wallpaper 2

Charcoal Damask

Wintry Damask Wallpaper

Patterns 2 (6 fondos)

Vía | WDL

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

40 bonitos patterns y texturas para fondos adornados

Lista de 1009 texturas y fondos de alta calidad

100 nuevos y bonitos fondos para integrar en tu sitio web

12 generadores online de fondos

Pedro CM — Wed, 26 Aug 2009 05:00:55 +0000

Existen muchos tipos de fondos para crear, de hecho, yo, cada cierto tiempo, os voy mostrando fondos para inspiraros en vuestros proyectos. Pero, ¿no sería mejor hacer todo esto automáticamente? Se pueden encontrar por la red muchas herramientas para crear fondos en línea, ya sean con puntitos, rayas, con posibilidad de ver su previsualización. Os enumero 12 herramientas online para la creación y edición de fondos, que, os ahorrarán mucho trabajo:

http://stripedbgs.com/

Haz fondos a rayas y guardaló fácilmente como tu fondo de pantalla del ordenador o iPhone.

http://www.tartanmaker.com/

http://www.bgpatterns.com/

Crea tus fondos en solo unos minutos. Tamaño ajustable, imágenes, textura, colores y transparencia.

http://www.stripegenerator.com/

http://www.pixelknete.de/dotter/index.php

Una herramienta web 2.0 para generar fondos con textura de puntos.

http://www.stripemania.com/

Generador de fondos a rayas.

http://www.stripedesigner.com/

Con esta herramienta podrás incluir rayas a tus fondos de forma fácil y rápida.

http://bgmaker.ventdaval.com/

Crea fondos dibujando píxel a píxel la textura, y descarga dicho fondo a tu blog o donde desees.

http://lab.rails2u.com/bgmaker/

Creador de imágenes de fondo.

http://www.tilemachine.com/

http://tools.dynamicdrive.com/gradient/

Crea degradados de fondos para ser usados en cualquier parte. (No solo podemos usarlo en fondos, también en botones, por ejemplo).

http://www.ogim.4u2ges.com/

Potente herramienta online para crear una variedad de degradados con nueve puntos de transición de color.

Vía | CSSTea

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

31 generadores de diseño online

30 creativos ejemplos de fondos ilustrados en Twitter

30 inspiradores fondos de pantalla panorámicos

Pack de texturas “Water Splashes” y “Jungle” gratuitas

Pedro CM — Sat, 15 Aug 2009 06:00:35 +0000

Marco me trae un pack de texturas sobre salpicaduras de agua producidas por una lancha, mientras navegaba por Camiguin, en las Filipinas, aprovechando sus vacaciones.

“Water splashes” reune un total de 8 texturas con resolución de 1500 píxeles de ancho.

También nos trae otro pack de texturas sobre la flora de la jungla, un total de 12 texturas con resolución de 1000 píxeles de ancho.

Podemos descargar el pack completo, tanto el de la jungla como el de salpicaduras, haciendo click en este botón:

Descargar pack completo de texturas jungla-salpicaduras

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Los mejores pack de texturas gratis del 2009

Descarga fuentes gratuitas en Fontex

Pack de iconos RSS de las estaciones

30 inspiradores fondos de pantalla panorámicos

Pedro CM — Mon, 27 Jul 2009 11:51:25 +0000

Muchas veces los diseñadores tienen que inspirarse en algo para sacar ideas de donde no las hay. Yo cambio cada cierto tiempo mi fondo de escritorio, ya que me aporta frescura y nuevas dosis de inspiración. Si estáis buscando fondos de pantalla inspiradores, parad de buscar, los tienes en esta entrada. Os mostramos 30 inspiradores fondos de pantalla panorámicos gratuitos (al final de la entrada podréis ver el que tengo yo puesto ahora mismo):

Fondos que uso actualmente

Los 3 fondos que uso actualmente (el primero lo cambié ayer por el segundo y después de ese usaré el tercero) son estos:

Number 3 – Divinerror

(Haz click en la imagen para descargar).

Fondo 2

(No recuerdo como se llama ni donde lo saqué):

The One – Divinerror

Este es el que voy a usar:

Si os gustan los fondos de este artista (Divinerror) pronto publicaremos una lista con sus creaciones (solo fondos de pantalla).

¿Y tú, qué fondo estás usando actualmente? (Súbelo por Flickr o similares y enseña la dirección en los comentarios de esta entrada).

Vía | WDL

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

12 generadores online de fondos

30 creativos ejemplos de fondos ilustrados en Twitter

30 bonitos ejemplos de fondos en diseño web

100 nuevos y bonitos fondos para integrar en tu sitio web

Pedro CM — Fri, 24 Jul 2009 22:54:16 +0000

Si estamos buscando un fondo que se integre adecuadamente en tu sitio web/blog, en esta entrada podréis encontrar una lista de 100 bonitos fondos que se integran perfectamente en distintos estilos. La mayoría son gratis, aunque es recomendable mirar la licencia primero:

Retro Grunge (10 fondos)

Patterns 1 (3 fondos)

ETC Grunge Stripes (12 fondos)

Leafy Set 1 (3 fondos)

Antique Engraved

That’s My Dad (20 fondos)

Summer Pattern Pack Vol. 2 (14 fondos)

Summer Pattern Pack Vol. 3 (14 fondos)

Grungy Floral Patterns (10 fondos)

Patterns 2 (3 fondos)

Illuminated Manuscript (10 fondos)

Vía | WDL

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

200 bonitos fondos para tu sitio web

40 bonitos patterns y texturas para fondos adornados

70+ bonitos fondos y texturas de damasco

Fondos de escritorio oficiales de CSSBlog.es

Pedro CM — Wed, 17 Jun 2009 06:00:54 +0000

Debido al gran apoyo que nos demostráis cada día y la fidelidad con que nos seguís, queremos ofreceros un regalo. El regalo es un pack de fondos de escritorio sobre CSSBlog.es, en 7 colores distintos y con resolución 1650 x 1050. Muchas gracias a todos:

Descargar fondos de escritorios sobre CSSBlog.es

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Se abre la exposición de escritorios en CSSBlog ES

30 creativos ejemplos de fondos ilustrados en Twitter

30 bonitos ejemplos de fondos en diseño web

Efecto de imagen borrosa con CSS

Pedro CM — Fri, 08 May 2009 16:00:09 +0000

Cuando definimos una imagen de fondo en CSS, podemos indicar su posición (background-position). Pero a mucha gente se le olvida que hay otra propiedad muy interesante llamada background-attachment.

Mediante dos imágenes de fondo podremos crear un efecto de imagen borrosa. El primer fondo, sólido, se coloca debajo del segundo fondo, que es la misma imagen pero borrosa. Para mantener su posición exactamente igual que la posición fija, debemos definir la propiedad background-attachment del div, con el valor fixed.

CSS

body	 {   background: url(images/bg-solid.jpg) no-repeat; }

#page-wrap {   background: url(images/bg-blurry.jpg) no-repeat fixed;   width: 500px; margin: 40px auto; }

Obviamente necesitamos obtener las imágenes de fondo. En este ejemplo hemos usado estas dos:

Imagen sólida.

Imagen borrosa (blurry).

HTML

Muy sencillo, solo hay que definir el div que posiciona las dos imágenes de fondo, y dentro, poner el texto que queramos, en este caso, un encabezado y un párrafo.


Mi título
Mi párrafo

Ejemplo de su funcionamiento

Podemos ver un ejemplo de su funcionamiento o descargar el ejemplo en .zip.

Estandarización

CSS 2.1 válido.

XHTML 1.0 Strict válido.

Vía | CSS-Tricks

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Efecto de degradado en el bottom con una imagen

Bloques de texto encima de una imagen

Degradar texto con una imagen y CSS