- All Topics:
- apps
- css
- dashboard
- games
- javascript
- mobile
- node
- php
- tehcl
- textmate
- tools
- video
Topic: css
- published:
- 2009.06.22
- topics:
- css
- javascript
After my last post about the CSS text-shadow property it occurred to me that it could be used to create some fun pseudo-realtime lighting effects.
In the example below I am using a PNG to create a spotlight, and I am using JavaScript to update the text-shadow style on the text in order to simulate realtime shadows from a single light source. Move your mouse over the box to cast a shadow with the spotlight.
Should work in Firefox 3.5, Safari, Opera, and Chrome. Apparently still no support in IE8? Big shocker there.</sarcasm>
View the example in a new window.
- published:
- 2009.06.15
- topics:
- css
- video
The isometric "3D" cube shown in the demo is created using HTML and CSS transforms available in Firefox 3.5, Safari, and Chrome. Users of these browsers should also see some video on one of the faces of the cube thanks to the new HTML5 <video> tag.
A detailed blog post about the isocube was published on hacks.mozilla.org as part of their Upgrade the Web in 35 Days series.
View the isocube in a new window.
- published:
- 2009.06.13
- topics:
- css
With the Safari supported CSS property text-shadow coming to Firefox 3.5, I thought I'd play around with the feature a bit more. Because shadows can be positioned, colored, and blurred — and because you can do multiple shadows — they actually let you do more that just create shadows. You can create programmatically blurred copies of text. You can create outer glows. You can create pseudo-3D effects. Playing around with what was technically possible, I did discover a few interesting things. None of the examples below are mean to be beautiful from a design perspective. They are more about exploration of the technology.
The Examples
Make the text color the same as the background color for "knocked out" text, and do multiple shadows for "3D" text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
#shex-one {
color: white;
text-shadow: 1px 1px 0 black, 2px 2px 0 black;
}
By negatively offsetting the text, and then pushing the text's shadow back where the text should be, you can create text that seems to be unselectable. Also, I set the CSS here to overflow: scroll; to show that text shadows in Firefox 3.5 (as of beta 999) affect the width of their container:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
#shex-two {
text-indent: -999em;
text-shadow: 999em 0 0 red;
overflow: scroll;
}
In Safari, text-shadows are the same opacity as the text they shadow. Text with CSS set to color: transparent; doesn't show up at all. Firefox doesn't do this, which actually lets you make text that turns invisible when you select it:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
#shex-three {
color: rgba(0, 0, 0, 0.1);
text-shadow: 1px 1px 1px green;
}
And finally, some fun with text that is blurred/out of focus until you mouse over it. A little extra pizzaz added in Safari which supports animated CSS transitions:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
#shex-four {
color: blue;
text-indent: -999em;
text-shadow: 999em 0 8px blue;
overflow: hidden;
-webkit-transition: text-shadow 0.25s linear;
}
#shex-four:hover {
text-shadow: 999em 0 0 blue;
}
Update: Even Cooler Demos!
If you are interested in more exciting uses of the CSS text-shadow property, then be sure to check these out:
- updated:
- 2009.06.23
- published:
- 2009.03.11
- topics:
- css
- javascript
- tools
Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS Transforms are used to create this visual "3D" isometric effect. Supported browsers are Safari, Chrome, Webkit, Firefox 3.5+, IE9+, and Opera 11+. The plugin's functionality includes: setting or animating HTML content to an arbitrary isometric rotation angle, as well as flipping, unflipping, or toggling the flip state of an object.
- updated:
- 2009.03.13
- published:
- 2009.03.11
- topics:
- css
- javascript
- tools
One of the things I've been spending quite a bit of time on lately has been my new project: rotate3Di, an effect plugin for jQuery. This plugin enables "3D" isometric perspective rotation and animation via CSS transformations. I'm happy to announce the release of version 0.9 today.
Rotate3Di Project
This plugin is somewhat ahead of its time. Not in the sense that I am any sort of visionary, but in the fact that I didn't wait for Firefox 3.1 to be in wide use. Because I've chosen to use native CSS transformations to produce the visual effect, you will currently only see the "3D" perspective using WebKit/Safari or Firefox 3.1 beta. (Update: Supported now in Safari, Chrome, Firefox 3.5+, IE9+, and Opera)
Firefox 3.0 and Internet Explorer are not presently supported, but it does seem within the realm of possibility using SVG and proprietary IE CSS Filters. Though, having gone down this road in IE once before, I will say the behavior is quite different due to element clipping/resizing, a different transform origin, and speed issues.
When the true full 3D perspective transformations move from iPhone Mobile Safari into the desktop WebKit/Safari, I will introduce support for those effects into this plugin as well.
Basic usage of this plugin is very similar to the jQuery animate() method. A usage example and more on what I learned from this project, including jQuery's custom animation system, after the jump.
