- All Topics:
- apps
- css
- dashboard
- games
- javascript
- php
- tehcl
- textmate
- tools
- video
Topic: css
- published:
- 2009.12.02
- topics:
- css
- javascript
- video
FlipBox is another LightBox clone (a JavaScript photo gallery tool) where the new twist is a fun "3D" tile flipping animation effect. It is much easier to demonstrate than to explain, so I decided to do my first screencast with audio (be gentle!) so I could show you what FlipBox is all about. Incidentally, Mac OSX 10.6 Snow Leopard has a great free screen capture tool built into QuickTime. Sorry in advance if the volume is a little low. Real action starts at 0:45:
More About FlipBox
FlipBox is jQuery-based and makes use of my rotate3Di plugin to create a 3D-like isometric tile flipping effect using the CSS3 transform property currently only supported by Safari, Chrome, and Firefox 3.5+. (That's another reason why I wanted to record a video demo.) If you happen to have an awesome web browser, you can check out a live demo of FlipBox.
In it's current state, with only a little preparation by the user, FlipBox is already a simple to use LightBox-like tool. There's a few other demos with this concept I hope to put together, and I would also like to write proper documentation and do a release.
- published:
- 2009.08.07
- topics:
- css
- javascript
I have created a monkey patch for jQuery 1.3.1+ which enables you to independently set and/or animate both the scale and rotation of any HTML content with jQuery. This code uses the scale() and rotate() CSS transformations that are only supported by Webkit, Safari, Chrome, and Firefox 3.5 at this time.
As an example I have some spinning HTML content below. You can click the content to increase its scale while it continues to spin. Try it out:
After applying my patch, the following jQuery code is used to create this example:
setInterval(
function () {
$('#at_ex1').animate({rotate: '+=10deg'}, 0);
},
200
);
$('#at_ex1').click(
function () {
$(this).animate({scale: '+=0.33'}, {queue: false, duration: 1000});
}
);
Features of this Patch:
- Get and set rotate and scale CSS transforms independently with the added custom jQuery methods
rotate() and scale(). These work like setting any other CSS property, i.e. you are rotating to an angle not rotating by an angle. Example syntax:
$('#example').rotate('30deg'); // rotates to 30deg
$('#example').scale(1.5); // scales to 150%
$('#example').rotate('45deg'); // rotates to 45deg
$('#example').rotate(); // will return '45deg'
$('#example').scale(); // will return '1.5'
- Animate rotate and scale CSS transforms independently using jQuery's
animate() method. This works like any other jQuery CSS animation, i.e. you can rotate to a specific angle, or you can increase or decrease the angle of rotation by any number of degrees. Here are examples of both syntaxes:
// Rotate to 30deg and scale to 125%
$('#example').animate({rotate: '30deg', scale: '1.25'}, 1000);
// Rotate by 30deg from current position and scale down by 10%
$('#example').animate({rotate: '+=30deg', scale: '-=0.1'}, 1000);
Download and Usage
Download a zip file of the patch now or visit the project on GitHub.
This patch requires another one of my jQuery patches that adds CSS transform support to jQuery. The file jquery-css-transform.js should be included in your download.
To use this patch, load jquery-animate-css-rotate-scale.js after loading jQuery and
jquery-css-transform.js. For example:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-css-transform.js" type="text/javascript"></script>
<script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
- 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:
