Web 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.
File I/O in widgets and the browser
2008-05-07 20:28
Ok, so I had a somewhat mystically titled presentation at XTech, titled Going full circle: Giving Web Applications and Widgets access to device and user data. The slides are here (Should work reasonably well in Firefox, WebKit and Opera — does not work in IE. Navigate with PageUp/PageDown or the mouse wheel)
What the presentation was actually about was File I/O in the context of the browser, or more specifically, in widgets. We produced an input paper to be picked up for standardization.
Further, we will release builds on labs.opera.com shortly, so you can get to play with it shortly, and hopefully also with some example code, so you can get your heads wrapped around this.
Edit: There are now public builds for you to play with here — have fun
ACID3: Now with a public build
2008-03-28 15:51
For those that says that a public build of Opera getting 100/100 on ACID3. There now is one — both for Linux and Windows:
As you will notice, this is not a regular Opera desktop build, but a version of WinGogi desktop. This is the Windows version of the reference builds that we use internally for testing Opera’s platform-independent Core. “Desktop” means it is compiled with the same feature set as our regular desktop browser. Still, we do not recommend using this build for regular Web surfing as it lacks some of the security-related features found in our regular desktop versions.
You can catch some more discussion about it over on the Desktop team blog — or you could see what pops up over on reddit.
ACID3: Strike ninety-eight. Make that 100
2008-03-26 21:20
Below is a screenshot of the Acid3, taken straight from one of our developer's machines. It's a screenshot of the builds we use to test core functionality in Opera (cue the weird, minimalistic user interface).
Yes, it says 100/100. I'm not going to say too much about it right now, other than send some Kudos in the general direction of the developers responsible (whom for some reason always seem to keep a low profile), and point to what Anne said earlier when we reached 98.
Note that there is a small rendering glitch left, but we will fix that too in due time. If you want to follow what happens in the future, visit the desktop team blog
These words are not yours to subvert
2007-10-17 14:00
It’s not often I post something solely to say “+1”, but this short rant from Mark Pilgrim about Apple’s subversion of the term “web app” deserves every incoming link it can get. The money quote:
Last week, in a stroke of breathtaking arrogance, Apple redefined “web apps” to mean sites designed for a single hardware platform
So, just let me be clear: Web Apps are for a multitude of platforms, serving many different purposes. These words are not yours to subvert.
Opera 9.5 alpha, Kestrel, released
2007-09-04 14:44 – Leave a comment
The first alpha of Opera 9.5, codenamed Kestrel, is released. The changelog is so long that I can't possibly get through it this decade, but here's a few highlights of improvements, both to the user experience and standards support.
Opera 9.20 beta 1
2007-03-28 15:49 – One comment
Opera 9.20 beta 1 is out the door. Go get it (or come here for a quick tip about one of the new features, speed dial)
Chat with Håkon Wium Lie
2007-02-06 09:59 – Leave a comment
Join an IRC chat session with Håkon Wium Lie
Being compatible with the dark matter of the web
2006-11-17 10:29 – Leave a comment
Chat with me (and Anne) about the Widgets 1.0 Working Draft
2006-11-15 20:24 – Leave a comment
Anne van Kesteren and I will be participating in an Opera-hosted IRC chat session about the Widgets 1.0 specification.
The WHATWG Blog
2006-11-14 10:03 – Leave a comment
There should be one Internet
2006-11-10 15:58 – One comment
Widgets 1.0 Working Draft
2006-11-09 18:18 – Four comments
Today, the W3C published the first working draft of the "Widgets 1.0 specification", and also published a working draft of "Client-Side Web Applications Requirements"
Why I'm giving up reddit
2006-11-04 11:28 – 24 comments
The long title of this post is rather: “Why reddit, which was the last and best hope for social news...
How to ensure I never visit your site twice
2006-11-02 15:03 – Two comments
A guide for losing website visitors, income and business.
Opera Developer Community site launches
2006-11-01 13:29 – One comment
Opera launches a beta of the new Opera Developer Community site, named Dev.Opera. Here's a quick walkthrough
Aptana
2006-07-25 15:37 – Leave a comment
Opera 9
2006-06-20 10:26 – Seven comments
Opera 9 is out. Go get it: Widgets, BitTorrent, improved standards support
Opera 9 beta
2006-04-20 14:40 – Three comments
Today, Opera Software released the first Opera 9 beta. After two technical previews and numerous weekly releases, we are allowing
Web 3.1415: Ajax, Ook! and Brainfuck
2006-04-02 17:08 – One comment
A library to assist in authoring Ook! and Brainfuck files for use on the Web 3.1415. Because authoring Web 2.0 apps has become all to easy.
Opera passes Acid2
2006-03-12 20:06 – Five comments
Opera 9 now passes the Acid2 test, as the second browser to do so, behind Safari.
Hixie's Natural Log: People who don't realise that they're wrong
2006-01-22 12:50 – Leave a comment
AJAX for Mobile Devices Will Be the Hallmark of "Mobile Web 2.0"
2006-01-03 10:57 – Leave a comment
Doctype switching for SGML comments
2005-11-07 09:44 – Leave a comment