TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

CSS3 Patterns Gallery

84 pointsby Chairmonkeyabout 12 years ago

19 comments

ux-appabout 12 years ago
As a technical demo they're great. In practice though, I wouldn't recommend using these techniques because:<p><pre><code> - Many are completely broken in FF - Crashed my FF (19.0.2) and strangely sent my GPU fan into overdrive - These techniques hurt performance badly. In the case of gradients the browser has to first generate the bitmaps from the gradient definitions, apply any clipping/masks and then composite any other overlaying elements. This is far more taxing than simply grabbing a bitmap and painting into a region.</code></pre>
评论 #5361336 未加载
sergiotapiaabout 12 years ago
"amazing"? These look terrible and would make any website look like a throwback from Geocities.<p>Neat that it's done with CSS3, not practical for any real purpose though.
评论 #5361789 未加载
评论 #5361434 未加载
评论 #5362000 未加载
评论 #5361437 未加载
评论 #5363700 未加载
scotch_drinkerabout 12 years ago
To me, these are amazing in the same way fingernails on chalkboard are amazing. Every time someone nicked the chalkboard with their fingernail in school, I felt as if someone was ripping my spine out. And every time I clicked one of those circles, I felt like someone was ripping my eyes out.
gokhanabout 12 years ago
Nice, but oh my poor Firefox. What's wrong with images as bg?<p>Some numbers:<p>The one with hearts is 944 bytes (css file), 232 bytes gzipped (with 7zip), 304 bytes as gif (Photoshop. Can be smaller with hand optimizations. Need extra css code to tile as bg)<p>Just a tech demo IMO.
评论 #5361768 未加载
评论 #5361496 未加载
评论 #5361707 未加载
degenerateabout 12 years ago
Is it trivial to animate these? For example how easy would it be to have one of the rainbow-bokeh bubbles slowly move upward ?
评论 #5361421 未加载
flexieabout 12 years ago
A lot of these look great :-) If only they worked in IE 7, 8 and 9 they could be used in real projects...
评论 #5365806 未加载
评论 #5361211 未加载
__herson__about 12 years ago
I do not like theese backgrounds, some of them really hurt my eyes.<p>I prefer these <a href="http://subtlepatterns.com/" rel="nofollow">http://subtlepatterns.com/</a> ...I know they are just png, but works and look better.
mnicoleabout 12 years ago
Calm down, guys. As stated on her site, these are purely experimental. This page has also been up for a few years at this point.
omegoteabout 12 years ago
They look like crap (not only the color, but also the jagged edges), the performance is also crap... I don't know, sometimes I think these hipster web devs are getting too much attention nowadays for things that aren't that complicated or innovative in comparison to, say, many things c++ programmers face on daily basis.
mtgxabout 12 years ago
Only IE+? No doubt because IE is so ridiculous behind the other browsers in HTML5 support. I can't believe even Firefox 3.6 which was released in like 2010 had proper support for CSS3 that only IE10 has now, from all the IE versions.
planetjonesabout 12 years ago
Bad performance and support only for IE10+ will put these out of consideration for many. I think the real world appeal of these will be limited to say the least.
deanclatworthyabout 12 years ago
These look great, but performance is really poor.
评论 #5361196 未加载
pacomerhabout 12 years ago
Good as an experiment, but I honestly wouldn't use any of these backgrounds.
nodataabout 12 years ago
Nice. Please make the Escape key work to close the pattern popup!
lttlrckabout 12 years ago
Real tartan doesn't have diagonal lines like that. Sorry :)
zhangtaiabout 12 years ago
It looks good, until you apply to background.
slaprestaabout 12 years ago
Why exploiting CSS3 when SVG will do?
dave_sidabout 12 years ago
not working for me with css supplied.
vicky_rockstarabout 12 years ago
need to improve performance...