Affichage des articles dont le libellé est CSS. Afficher tous les articles
Affichage des articles dont le libellé est CSS. Afficher tous les articles
mercredi 31 août 2011
TransformJS is a jQuery plugin which exposes new CSS properties accessible through .css() and .animate() which you can use to apply and manage transformations to a jQuery element.
TransformJS uses feature detection to analyze the supported features of the browser it is running in and adapts accordingly and it maintains an in-memory matrix which it uses to apply the transforms.
The ability to use transforms without constructing huge stylesheets for x-browser compatability is nice.
Requirements: jQuery
Website: http://transformjs.strobeapp.com/
License: Free
samedi 27 août 2011
Easy, right?
Should be pretty easy right? Just absolutely position the header in the upper left (so it doesn't take up any vertical space) and then rotate it from it's upper left corner 90 degrees with CSS transforms. Yeah... that's cool, but here's the problem: a lot more browsers support absolute positioning than support transforms. That's problematic, because in the case of those browsers, the headers will now be sitting on and obfuscating content.
How I Would Do It: Feature Detection
I think the best way to handle this is to do feature detection with Modernizr. Make a quick custom build that tests for transforms, load it up at the top of the page, and then only apply the absolute positioning and transforms (and other tweaks) when you are in a browser that can deal with it.
And so...
The complete CSS:
aside {
position: relative;
}
aside h3 {
background: #369;
color: #fff;
padding: 5px 10px;
margin: 0 0 10px 0;
}
/* Class name via Modernizr */
.csstransforms aside {
border-left: 34px solid #369;
/* Make a little room */
padding-left: 10px;
}
.csstransforms aside h3 {
/* Abs positioning makes it not take up vert space */
position: absolute;
top: 0;
left: 0;
/* Border is the new background */
background: none;
/* Rotate from top left corner (not default) */
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
The weakness left in this technique is that if the header is longer than the space available, it doesn't push down the aside's height to compensate. There really just isn't a way to do that with just CSS (you can't set the height of something to match the width of something, basically). For the record, you could use JavaScript to do it.
Can we do it without Modernizr?
Christian et al. didn't want to use Modernizr (for reasons I can't possibly comprehend ;). Lennart Schoors, in the comments of his post, came up with this technique, where the paragraph elements themselves were also transformed (moved). By default, there is a bunch of empty space at the top of the aside, and the transform moves them back up to fill that space. Without transforms, the gap is still there, making room for the absolutely positioned header. Pretty smart!
The one shortcoming I can see is that it targets paragraph elements specifically. In a real environment you might not be able to count on that, so you are either writing a selector to cover all possible elements to move, or using an non-semantic wrapper. Also, this is subject to the same weakness as I described about header length above.
Improvements welcome!
vendredi 26 août 2011
Demo : http://css-tricks.com/examples/PopFromTopMessage/
We'll just make a div:
<div id="note">
You smell good.</div>
Then we'll style it and put it on the top of the screen:
#note {
position: absolute;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #fde073;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}Let's animate it
With a keyframe animation, we can "hide" it above the browser window and bring it down for a short while:
@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-50px); }
10%, 90% { -moz-transform: translateY(0px); }
}Er... let's consider other browsers quick
But let's consider browsers that don't have transforms and animations for a second. For those, we'd want to default to just showing the notification bar at all times, with the ability to dismiss it.
So we'll make a custom build of Modernizr to test for transforms and animations, load that up, then we can write CSS to test for those features and only fire off the animations if we're in a browser that supports them.
.cssanimations.csstransforms #note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}
The
1.0s in there is the delay before the animation runs. Best to wait a minute to make the notification more noticeable.
Now we'll add a close button into the HTML:
<div id="note">
You smell good. <a id="close">[close]</a>
</div>
And a tiny bit of JavaScript at the bottom of the page so that the non-supporting browsers can close the notification.
<script>
close = document.getElementById("close");
close.addEventListener('click', function() {
note = document.getElementById("note");
note.style.display = 'none';
}, false);
</script>
Look ma, no libraries.
Since we don't need that close button in browsers that do support the animations, we'll hide it:
.cssanimations.csstransforms #close {
display: none;
}
For the record, this should work OK on mobile browsers (tested Mobile Safari). There is no fixed positioning used here, only absolute, and that's going to be less of a problem moving forward anyway (might want to consider making it fixed so even if the user is scrolled down the page they'll get it).
mercredi 24 août 2011
A few months ago, James Padolsey introduced a cool greyscale technique for non-IE browsers. His technique inspired me to come up with a workaround with a similar effect.
My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.
Tutorial & Download : http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
Bokeh - In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or "the way the lens renders out-of-focus points of light." (from Wikipedia). I'm pretty sure you've seen this effect before, since there are loads of wallpaper roundups and tutorials using this technique. Currently, one of my favourite wallpapers has to be this bokeh effect from -kol.
Today, I want to add another addition to the bokeh "hype", by creating a pure CSS3 bokeh effect. With some help from jQuery, we can add some randomness in colour, size and position for the effect.
Inscription à :
Articles (Atom)