Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 227 lines (108 sloc) 9.825 kb
601f25c Site updated at 2012-06-02 22:06:16 UTC
Divya Manian authored
1
2 <!doctype html>
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Bokeh with CSS3 Gradients | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <meta name="description" content="Ever since Lea Verou mentioned about the possibilities of CSS3 Gradients, I have been using them in various shapes and sizes as a replacement for &hellip;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/bokeh-with-css3-gradients.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
20
21 </head>
22
23
24 <body >
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
29 <h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
30
31 </header>
32 <nav class="sitenav"><a href="/">Home</a>
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
35 </nav>
36
37
38
39
40
41
42
43
44 <article>
45 <nav class="article">
46
5dc1495 Site updated at 2012-06-26 03:50:17 UTC
Divya Manian authored
47 <a class="previous" href="/making-pure-css3-demos-better.html" title="Making "Pure CSS3" demos better">&#x276C;</a>
601f25c Site updated at 2012-06-02 22:06:16 UTC
Divya Manian authored
48
49
5dc1495 Site updated at 2012-06-26 03:50:17 UTC
Divya Manian authored
50 <a class="next" href="/unplugged-2011.html" title="Unplugged 2011">&#x276D;</a>
601f25c Site updated at 2012-06-02 22:06:16 UTC
Divya Manian authored
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
63 <time datetime="2011-02-22T00:00:00-08:00" pubdate><span class='month'>Feb</span> <span class='day'>22</span> <span class='year'>2011</span></time>
64
65 <h1 class="entry-title"><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></h1>
66
67
68
69
70 </header>
71 <div class="entry-content"><p>Ever since <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">Lea Verou mentioned about the possibilities of CSS3 Gradients</a>, I have been using them in various shapes and sizes as a replacement for background images. I recently worked on a project which uses a bunch of circles as a decorative background. <a href="http://gf3.ca/">gf3</a> suggested that the circles would look much better like <a href="http://en.wikipedia.org/wiki/Bokeh">bokeh</a>. Today, I finally got down to creating them.</p>
72
73
74
75
76 <h3>Result</h3>
77
78
79 <iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/CPCRU/embedded/result,css"></iframe>
80
81
82
83
84 <h3>Design of the Bokeh</h3>
85
86
87 <p>I referred to some pictures of bokeh, and these were their defining characteristics:</p>
88
89
90 <ul>
91 <li>There should be groups of circles with same color (each circle outlined with the more opaque version of the fill). In each group, circles are close to each other.</li>
92 <li>The color transition from one color group to the other can be accomplished with a very blurry second color group radial gradient overlaid on the first group.</li>
93 <li>Each color group needs to have a very blurry large background circle to base the rest of the circles from.</li>
94 <li>Each color group has 2 or more of smaller circles and one big blurry circle as a base.</li>
95 <li>Colors used are almost transparent so that the background color shows through, and the colors mix well when they are overlaid.</li>
96 </ul>
97
98
99
100
101 <h3>Implementation</h3>
102
103
104 <p>Here is how a single &#8220;tile&#8221; looks like:</p>
105
106
107
108
109 <p><img src="http://nimbupani.com/files/bokeh-graph.png" alt="bokeh-graph.png" border="0" width="420" height="300"></p>
110
111
112
113
114 <p>The black background is the size of the &#8220;tile&#8221;, set by <code>background-size</code> property (the grey area is where our circles spill over). In our demo it is 300px square. Each of these circles is a background image (all gradients are background images), and have a default <code>background-size</code> property set to the top left corner of the tile, which means, the center of each of the circle is at the intersection of the yellow lines in the image above.</p>
115
116
117
118
119 <p>Then, we use <code>background-position</code> to offset them into places we want.</p>
120
121
122 <p>By tweaking the <code>background-position</code> for each of the gradient images, we also move the center of each of the circle - shown in the image above relatively. Do note that what <em>actually</em> moves is the top left corner, but I find it easier to visualize the positioning of radial gradients in this manner.</p>
123
124
125
126
127 <p>By using <code>background-repeat</code>, we can repeat our bokeh across the screen! You can tweak the tile size so you can get some interesting effects.</p>
128
129
130 <p></p>
131
132 <p>Needless to say, this demo <a href="http://caniuse.com/#feat=css-gradients">only works</a> on Firefox 3.6+, Safari 4+, Chrome 10+ all of which support CSS3 radial gradients as it has been finalized in the <a href="http://www.w3.org/TR/css3-images/#radial-gradients">spec</a> (support is coming soon in Opera 11).</p>
133
134
135
136
137 <h3>Update</h3>
138
139
140 <p><a href="http://a.deveria.com/">Alexis</a> has kindly <a href="http://nimbupani.com/bokeh-with-css3-gradients.html#comment-3620">provided an SVG</a> that would work as well for browsers that do not support gradients! I have updated the demo to use <a href="http://modernizr.github.com/Modernizr/2.0-beta/#cssgradients">Modernizr</a> to detect for gradients, and serve the SVG version if the browser does not support it. Whee! Thanks Alexis!</p>
141
142 </div>
143
144 <footer>
145 <p class="meta">This post was posted by
146
147
148 <a href="/about.html">Divya Manian</a>
149 on
150
151
152
153
154
155
156 <time datetime="2011-02-22T00:00:00-08:00" pubdate><span class='month'>Feb</span> <span class='day'>22</span> <span class='year'>2011</span></time> in
157
158 <span class="categories">
159
160 <a class='category' href='/categories/web-development/'>Web Development</a>
161
162 </span>
163
164 . If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2011-02-22-bokeh-with-css3-gradients.md">please send a pull request</a>.
165 </p>
166 </footer>
167 </article>
168
169 <section>
170 <h1>Comments</h1>
171 <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
172 </div>
173 </section>
174
175
176 </div>
177 </div>
178 <aside id="articles">
179 <p><img class="avatar"
180 src="http://a2.twimg.com/profile_images/1696865113/me_normal"
181 height=48> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
182 <h2>Posts on Web Development</h2>
2db5cff Site updated at 2012-06-18 17:59:15 UTC
Divya Manian authored
183 <ul><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
601f25c Site updated at 2012-06-02 22:06:16 UTC
Divya Manian authored
184 </aside>
185 <footer role="contentinfo"><p>
186 Copy to your heart’s content 2012 - Divya Manian -
187 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
188 </p>
189
190
191 </footer>
192
193
194 <script type="text/javascript">
195 var disqus_shortname = 'nimbublog';
196 var disqus_developer = 1;
197
198
199 var disqus_url = 'http://nimbupani.com/bokeh-with-css3-gradients.html';
200 var disqus_identifier = 'http://nimbupani.com/bokeh-with-css3-gradients.html';
201
202
203
204
205 (function () {
206 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
207 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
208 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
209 }());
210 </script>
211
212
213 <script src="/javascripts/octopress.js"></script>
214
215 <script>
216 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
217 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
218 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
219 s.parentNode.insertBefore(g,s)}(document,'script'));
220 </script>
221
222
223
224
225 </body>
226 </html>
Something went wrong with that request. Please try again.