Looking for an easy April Fool's gag? Look no further.
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-o-transform: rotate(180deg);
Of course, there are probably practical uses for this as well...
We were discussing drop shadows around the office today. CSS natively supports it, it turns out – as long as you're running Safari or Opera. For the rest of us, we can get around it with a little trickery.
The method I'm using doesn't require Javascript, but Javascript automates the process, meaning you don't have to duplicate everything by hand.
<script type="text/javascript"><!--
$(function() {
$('.shadowed').each(function (index, elem) {
$(elem).append('<div class="drop-shadow" style="opacity: 0.25;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);position:absolute;top:2px;left:2px;">' + $(elem).text() + '</div>');
$(elem).parent().height($(elem).parent().height() + 4);
$(elem).children('.drop-shadow').css('font', $(elem).css('font'));
$(elem).children('.drop-shadow').css('color', $(elem).css('color'));
$(elem).children('.drop-shadow').width($(elem).width());
$(elem).css('position', 'relative');
});
});
-->
</script>Then, all you have to do is declare an element with the "shadowed" class and let Javascript take care of the rest. The drop shadow will automatically assume the correct position and style.
For simplicity's sake, the CSS for the drop-shadow class is declared in the script. You may want to move it into your CSS file to de-clutter things.
Caveat: If the parent element to your shadowed element is subject to resizing, you will need to update the drop-shadow element's width when the parent width changes. Also, you will want the parent element to have some padding to keep the drop shadow from overrunning it.
Warning: This is a really stupid web design trick. You are almost always better off using an animated GIF instead of relying on the browser to animate your image for you. The only excuse that makes this even marginally acceptable is that you might need the partial alpha transparency PNGs afford.
That said, it's really easy to create animations with Javascript's setInterval command:
<script type="text/javascript"><!--
setInterval(function() {animate('myElement');}, 1000); // change frames every 1000 ms
function animate(id) {
var elem = document.getElementById(id);
var img = elem.style.backgroundImage;
if (img == null) return;
if (img.indexOf('images/image2.png') != -1) {
elem.style.backgroundImage = 'url(images/image1.png)';
} else {
elem.style.backgroundImage = 'url(images/image2.png)';
}
}
--></script>The preceding example will animate the background image of the element with the ID "myElem."
Again, I don't recommend using this without a good reason. So here it is; take it with a grain of salt.
A project I'm working on called for the login fields to display the words "EMAIL ADDRESS" and "PASSWORD" in gray, until the user clicked on them, at which point the fields were to behave normally. Here's the script I used -- this is vanilla Javascript, no jQuery.
function convertField(field, isPassword) {
field.style.color = '#000000';
field.style.backgroundColor = '#FFFFFF';
field.onfocus = null;
field.value = '';
if (isPassword) {
var field2 = field.cloneNode(false);
field2.type = 'password';
field2.onfocus = null;
field.parentNode.replaceChild(field2, field);
setTimeout(function () { field2.focus(); }, 5);
}
}For your HTML, you want something like this:
<input type="text" value="EMAIL ADDRESS" onfocus="convertField(this, false)">
<input type="text" value="PASSWORD" onfocus="convertField(this, true)">
The password field is text-type; that's not a mistake. It will become a password field when focused, but until then, we want the contents to be displayed in plain text.
An example in action (with a little extra styling):
I spent a significant chunk of my time today looking for a simple way to crossfade one element into another on hover. Nothing I found was a great fit, and the one I eventually decided to try degraded until I realized I wasn't actually using any of the code I'd picked up. Here's what I ended up with:
$(document).ready(function() {
$('.crossfade').css('position', 'relative');
$('.crossfade').children().css({position: 'absolute', top:0, left:0}).each(function(i) {
$(this).css('z-index', i);
});
$('.crossfade img:last-child').hide();
$('.crossfade').hover(function() {$(this).children('img:first-child').fadeOut(500); $(this).children('img:last-child').fadeIn(250);},
function() {$(this).children('img:first-child').fadeIn(250); $(this).children('img:last-child').fadeOut(500);});
});<div class="crossfade">
<img src="image1.png" /> <!-- this is the regular image -->
<img src="image2.png" /> <!-- this image shows up on hover -->
</div>That's it -- the only other thing you need to do is make sure your div is the right size. Very easy to plug into your page. Note that the fadeIn is faster than the fadeOut; this makes the transition smoother.
This script can easily be adapted to use other triggers or to work with non-image elements.
And an example – hover to try it out:
