Comments on: Blendy Backgrounds Explained

By: 555333

555333 — Wed, 03 Jun 2009 10:53:09 +0000

very iteresting, thanks

By: Ruerup

Ruerup — Wed, 18 Mar 2009 15:58:20 +0000

a little bit old, but still interesting.

By: erichansa

erichansa — Mon, 13 Oct 2008 13:04:29 +0000

great article.

By: backgroundsMaster

backgroundsMaster — Thu, 05 Jun 2008 04:32:26 +0000

nice trick, but sometime IE acts strange when using filter to load png image. I haven’t figure yet why it happens yet

By: przeprowadzki

przeprowadzki — Wed, 12 Mar 2008 09:54:21 +0000

Its good to know Ajax, but you should get to know java first.

By: Fernstudium

Fernstudium — Sun, 21 Oct 2007 11:18:00 +0000

Also thanks. I enjoyed reading the article

By: Hotels in Bremen

Hotels in Bremen — Wed, 10 Oct 2007 13:31:04 +0000

a very iteresting articel, thank you very much

By: Make Money

Make Money — Thu, 09 Aug 2007 10:51:29 +0000

Remember one thing about design is that it really isn’t so much about what you PUT IN but what you LEAVE OUT that makes for a good, simple, but creative design. Few designers realise this. With the increasing popularity of CSS and web 2.0 environments, this is becoming more the norm (simple) but I’m worried that creativity is now being lost in the process. Everyone looks the same, functions the same. While I’d rather have standardization on a more clean look (in other words, in the 90′s the standard was â€œmessy, links everywhere, and horrible bannersâ€) we mustn’t throw creativity out all together!

By: Tee

Tee — Mon, 11 Jun 2007 19:54:58 +0000

great sit with good information
many greetings from germany Tee

By: Onlineshop

Onlineshop — Mon, 28 May 2007 15:11:05 +0000

I think these blog is really useful for new comers and Excellent resource list.
ItÂ´s a very interesting Blog and simple answer of many questions.
Keep up the good work!
Thanks it helps me a lotâ€¦

By: clever vv

clever vv — Sun, 27 May 2007 21:00:39 +0000

Ihre Website ist wirklich sehr informativ-ich werde sicherlich noch Ã¶fters vorbeikommen und mir den ein oder anderen Tipp hier herauslesen.
thx

By: Dave Probert

Dave Probert — Sat, 09 Dec 2006 19:07:13 +0000

Hmm, looks like a lot of the commenters haven’t actually read the article. You can create fixed size gradients in “Your favourite pixel editor”, but you can’t make them stretch to fill a non-pre-defined space. The img and background colour route certainly works and is nicely controlled by the css for the container (div,etc).

(Like Igor said :) )

The author has tried to make this cross platform – so using a specific MS filter is Ok, if you don’t care about actually being cross-platform (and having extra code to handle the start/end colours – the authors route simply sets the background colour of the container!)

In my opinion, it’s a good article and nicely covers the cross-platform and current limitiations of HTML, etc.

Good work.

By: truly webmaster

truly webmaster — Sat, 09 Dec 2006 18:21:27 +0000

you bunch of stupid people!!!! try to use that blendy with a gif in another background than white and you’ll see the results. this great example is used to combine the alpha opacity power of the png graphic (natively supported by firefox) with internet explorer, in a way that you can rezise the document and it’ll fit well. Of course it ani’t the best to do it, but it the most practical and efficient way to achieve that results.

By: Igor Escobar

Igor Escobar — Fri, 08 Dec 2006 11:35:10 +0000

All this code to make this ?
I make a same thing in five minuts making a texture in photoshop and it repeat-x….done.

By: Jason Haley

Jason Haley — Fri, 08 Dec 2006 02:01:22 +0000

Interesting Finds: December 7, 2006

By: Paradise Pete

Paradise Pete — Thu, 07 Dec 2006 22:43:26 +0000

Dear Ajaxian,
before posting any articles, please check with Mike to see if he’s already heard of it.
Thanks!

By: Hedger Wang

Hedger Wang — Thu, 07 Dec 2006 21:53:47 +0000

For IE6-, use gradient filter will be easier

.foo{
_zoom:1;
_filter:progid:dximagetransform.microsoft.gradient(enabled=’true’, startcolorstr=#ffffff, endcolorstr=#4be22d)
}

a simple gradient

By: Eric

Eric — Thu, 07 Dec 2006 20:45:20 +0000

Ugh. I really wanted to like this. But…
This requires adding an element inside the

.
What happens when you’re tired of the blendy look? You have to change both the CSS and HTML, most likely removing the unsemantic . Everywhere.
I’d prefer to see something like this confined to the CSS.
So, how many blendy colors do you need for a site? Hopefully no more than 5 or so. But even if it’s 10, prepare each in your favorite graphics tool, throw them into the CSS, and be done with it.
Now, lets clean up the semantics. Class names like “box grad pink” are presentation-specific. What if the client wants to change pink to orange? Again, changes in the HTML. I like a class to reflect the meaning of an element, rather than its appearance — like “action cancel”.
Finally, for button-like elements, the entire rectangular area should probably be active, rather than just the text. One way to do this is to style a link as a block.
So we end up with something like:
Buy Now
and…

a.action {

    display: block;

    width: 10em;

    float: left;

    background:skyblue url(skyblue-blendy.gif) repeat-x;

}

By: mdm-adph

mdm-adph — Thu, 07 Dec 2006 17:32:33 +0000

Old news, but still very cool!

(there, i fixed it for you.)

By: Oliver Tse

Oliver Tse — Thu, 07 Dec 2006 16:10:43 +0000

Very nice! I will try it out!