- All Topics:
- apps
- css
- dashboard
- games
- javascript
- php
- tehcl
- textmate
- tools
- video
Topic: css
- published:
- 2010.07.28
- topics:
- css
- javascript
- video
Galaxy Box is a CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, I used 3D CSS properties available in Safari 5 and on the iPhone and iPad. Check out this video of the demo in action and then interact with the 3D CSS3 Galaxy demo yourself.
Each star is a div with border-radius applied to make it round and a white or light blue box-shadow to add glow.Since the stars are actually flat 2D objects, normally when you rotate them this would become very apparent and destroy the illusion. The trick is that when the galaxy is being rotated each individual star is being rotated in the exact opposite direction so that it is always facing the viewer.
Take a look at my rotate function:
function rotate()
{
volumeEl.style.WebkitTransform = 'rotateX(' + rotX + 'deg)'
+ ' rotateY(' + -rotY + 'deg)'
+ ' scale3d(' + scale + ', ' + scale + ', ' + scale + ')';
i = starSpans.length;
while (i--)
{
starSpans[i].style.WebkitTransform = 'rotateY(' + rotY + 'deg)'
+ ' rotateX(' + -rotX + 'deg)';
}
}
The stars are placed procedurally by JavaScript, and I also used JavaScript to add interaction to the demo. You can rotate or spin the galaxy with some momentum on the desktop. On iOS you can also rotate and spin the galaxy with your fingers, or pinch to zoom. Try the demo now in Safari!
- published:
- 2010.04.27
- topics:
- css
- video
I was feeling inspired after seeing the cool pure CSS pulsing rings on the Transmit 4 website that launched this morning so I put together this demo. (Did you notice the rings? You had to browse there with Safari to see them.)
Check out my pure CSS map markers live demo in Safari or Chrome.
- updated:
- 2010.04.27
- published:
- 2010.03.28
- topics:
- css
- javascript
Update: The CSS2 text-shadow property sure is versatile. If you combine it with some CSS3 animations you can create a pretty decent vanishing smokey text effect.
A few months ago I made a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow. I posted it on Twitter but never got around to posting it here. Today I pulled together another text effect, shining text, by using CSS3 properties and animation. I thought I'd cover both in one post.
Flaming Text Using CSS2 text-shadow
Now we're cooking with gas.
Most readers should see the previous line of text on fire since it just uses the CSS2 property text-shadow. If you don't see that you're probably using Internet Explorer or something. Do note, there's no use of images, and the text is still selectable.
The key to this effect is using multiple text shadows applied to the same text, each with a different color, position, and blur.
text-shadow: color1 x1 y1 blur1, color2 x2 y2 blur2, …;
Then you just jostle them around with some JavaScript. Open my flaming text example and view source. There's not a lot to it.
Shining Text Using CSS3 WebKit Properties
Check out the shine on this.
To see this effect, you're going to have to check it out in Safari, Chrome, or WebKit. Again, this effect uses no images and the text is selectable, and this time there isn't even any JavaScript involved. If you have an iPhone, the above effect is remarkably similar to the "slide to unlock" text animation on your lock screen.
This effect is created through a combination of a CSS3 gradient in the background, a CSS3 background clipping property which clips the background to the text, and a CSS3 animation to move the background gradient. I was inspired by a demo done by Trent Walton, and took it to the next level by removing the use of any image files. Open my shining text example and view source.
The background gradient is created with the -webkit-gradient CSS3 property. Firefox 3.6 added support for CSS gradients to the Firefox browser family.
The animation is created with a CSS3 animation. You can read more about these in Safari's Visual Effects Guide. CSS3 animations and transitions are on their way to Firefox 3.7.
The "trick" CSS property here to complete this effect is the CSS3 property -webkit-background-clip. This defines the region to which the CSS background property will be clipped. By using transparent or semi-transparent text and -webkit-background-clip: text I can make the background gradient only visible where the text is.
Welp, that's about it. I hope you found it enjoyable. Happy hacking!
- updated:
- 2009.12.31
- published:
- 2009.12.21
- topics:
- css
- javascript
My latest project is a little "Web Two-Point-Snow" fun I put together as my personal holiday gift to the internet, or should I say winternet… winternet? Ok, I'll stop. Anyway, the Winternetizer adds festive, fancy, 100% Flash-free flakes of falling snow to any website.
You'll have a much better experience using a browser that Santa has on his Nice List such as Safari, Firefox 3.5+, or Chrome. In fact, in those browsers, I'd go so far as to say the snow looks so real you will find yourself flopping on the ground to make snow angels. Give it a try now before you read about the super cool technical details behind it:
(Incidentally, you can also add the JavaScript directly to your own site to delight your visitors. The Winternetizer project page has details.)
The Secrets to Better Snow
Yes, it is true that falling snow scripts go back probably over a decade. We've all seen it done using falling snowflake GIFs, or falling periods, or the trusty asterisk (which to be fair, is a great six-sided stand-in for an actual flake).
However, if you have a modern browser, you will have noticed that my falling snow script has depth-of-field blurring and parallax, flakes that rotate as they fall, and you lucky Mac users no doubt noticed the pretty actual snowflake graphics. The total effect is accomplished with text, CSS, and JavaScript — no Flash, no PNGs, no GIFs, no Canvas.
- published:
- 2009.12.21
- topics:
- css
- javascript
Add festive and 100% Flash-free falling flakes of snow to any web site. Friend of the winternet using Firefox 3.5+, Safari, or Chrome will enjoy fancy depth-of-field and rotation effects accomplished entirely with CSS and a little JavaScript!