Gallery archive
Abusing text-shadow for fun and profit
2008-09-10 17:29
A while back, when Opera 9.5 was in development, we gained support for getters and setters, and I needed some smoketest to check whether they worked as advertised.
Around the same time, we also added support for text-shadow, as outlined in the documentation for Presto 2.1 standards support (Presto is the core engine of Opera, currently in version 2.1)
So, I ended up testing both at once. See the example. The demo fades some text in and out of the screen, simultaneously deblurring the text as it becomes visible. The fading itself is fairly trivial, with the animation library used taking care of the work.
The script
I'll keep this explanation brief, and gloss over some of the details, but: The majority magic happens in the getters and setters defined. Somewhere in the inlined code on the page, you'll find this:
var e = CSSStyleDeclaration.prototype;
// ... other getters and setters
e.__defineGetter__("blur",function(){ return this._blur_||0; });
e.__defineSetter__("blur",function(val)
{
this._blur_ = val;
this.textShadow = this.shadowX+" "+this.shadowY+" "+val+" "+this.shadowCol;
})
In the actual code, this.shadowX, this.shadowY and this.shadowCol are also attained through getters and setters on a CSSStyleDeclaration, but for the purpose of explaining, you can assume them being hardcoded to 1000px, 0 and #fff, respectively.
So, when the animation library is initialized and animations are set up, we tell it to animate the blur property of the affected element's style
var st = document.getElementById('foo').style;
var anim = new Animator(st,1000,15,
function(){ setTimeout(moveOut,1750) },
forceRepaint);
anim.addProperty("blur",12,1,"px");
So, when the animation is run, the library iterates through all the properties of the animation, and when reaching the blur property, it sets it, but what is actually set is the blur value of the text-shadow, e.g. 1000px 0 3px #fff
The CSS
For the purposes of the CSS, I conjured up a somewhat more minimal example, in the form of a navigation list.
What is happening in this example is pretty much analogous to what is going on in the animated demo. When you hover an element in the list, that element gets some focus, while the rest of the elements are blurred to bring attention to what you currently are hovering.
The first CSS rule to mind here is:
li {
font-weight: bold;
padding: 0.5em 0.5em;
display: block;
overflow: hidden;
color: #333;
background: hsl(40,15%,90%);
border: 2px outset #aaa;
}Specifically, the overflow: hidden rule, which ensures that we clip the element's box if content overflow it. Next, we're applying a rule to all list elements when the list itself is hovered:
ul:hover li {
text-indent: -8em;
text-shadow: 8em 0 0.33em #333;
background: hsl(40,15%,40%);
}
The point of the rule is to move the text out of the element's box, by setting text-indent to -8em and instead setting a text-shadow offset as 8em. Next up here is setting some mild blur (If you can call 0.33em, which I used for dramatic effect), and the same color as the text.
Finally, for this example, the following rule resets the text-shadow to something more sensible:
ul li:hover {
text-indent: 0;
color: #eee;
text-shadow: 1px 1px 2px #333;
background: hsl(40,15%,60%);
}
Closing words
While you can probably do some real cool stuff, and create low-cost effects, I would advise against using it for production use: In both examples, text will become invisible if text-shadow is not supported. From what I have been able to gather, only a limited set of browsers support text-shadow
Either way, it might be fun in 2014 when browsers have caught up to the next level of CSS.
A CSS backgammon board
2007-09-11 19:10
One of the things I usually do when I want to get to know a new API, new functionality, or learn something old, is to play around with it.
Since Opera 9 added better (read: Near complete) support for selectors from the CSS3 Selectors working draft, I felt the need to familiarise myself with more of the spec, and a challenge from Rune, I wanted to take a stab at creating a rendering of a backgammon board using only CSS, and completely devoid of any markup cruft.
Without further ado, I present the CSS Backgammon board using a variety of selectors and CSS Border Slants. Renders correctly in Opera 9.50, breaks in Firefox 2 and MSIE. Status for other browsers unknown.
More <canvas> Runny image
2006-01-02 10:14
Now, before I get back to my regular programming, I’ll do one more canvas effect:
Should work in Opera 9 and Firefox 1.5.
In addition, I’ve done modifications to the code in the image manipulation examples. At least the fade effect works in FF 1.5 now.
<marquee> on acid: Sine scroller
2005-12-30 18:48
Doing canvas stuff was so much fun, I decided to try my some more old-school demo effects. This is a small sine scroller:
- View the sine scroll demo
- Works in Opera 9 - fails in FF 1.5 (FF doesn’t seem to support clip?) — Other browsers untested.
Image manipulation in <canvas>
2005-12-29 16:50
Christmas is a time to meet family and friends. Incidentally it’s also a time to code on all the stuff you never have a chance to do during regular working hours. During my one-week holiday, I’ve spent some nights playing with the <canvas> element, creating a few demos of image manipulation.
Canvas: Mandelbrot
2005-10-21 15:03 – Five comments
In the first of my series of postings about the canvas element: A mandelbrot generator that allows you to save the generated image
Ultra-simple rounded CSS tabs
2004-01-05 12:22 – Six comments
Rounded tabs using CSS pseudo elements :before and :after.
Rounded corners with CSS
2003-08-06 21:27 – Nine comments
Rounded Corners in CSS that can be added to any existing design. These corners will fit boxes of any size, and uses the CSS pseudo elements :before and :after.
More fun with :target
2003-08-01 19:12 – Three comments
A prototype GUI, using CSS :target to minimize complicated Javascript. Draggable, semi-transparent windows, with an added 58 lines of Javascript to make windows draggable.
Fun with :target
2003-07-09 16:44 – 13 comments
A prototype GUI, using CSS :target to minimize complicated Javascript. Draggable, semi-transparent windows.
Javascript performance
2003-05-15 12:00 – Leave a comment
Two different javascript performance tests using a real-world script that adds syntax highlightning and code collapsing to code fragments in HTML pages.
CSS Media queries test
2003-04-10 13:07 – Leave a comment
Simple, collected test to determine support for various aspects of CSS3 Media Queries
Alt and title for images
2003-01-30 00:39 – One comment
A short guide on the correct usage of the alt and title attributes for images in HTML/XHTML.
Transparent PNG
2003-01-23 00:28 – One comment
Quick tutorial/demo to show how 24-bit PNGs can be used to create transparency effects on web pages.