Friday, June 26th, 2009
Category: CSS
, Examples
Zach Johnson is at it again, this time giving us a fun Friday treat with CSS text shadow, all via:
JAVASCRIPT:
-
-
document.getElementById('text-shadow-box').onmousemove = function(e) {
-
var xm = e.clientX - 300;
-
var ym = e.clientY - 175;
-
var d = Math.sqrt(xm*xm + ym*ym);
-
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
-
-
xm = e.clientX - 600;
-
ym = e.clientY - 450;
-
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
-
}
-
Tuesday, June 23rd, 2009
Category: CSS, Performance
There have been many tools to help make image spriting easier, by packaging up your images into one large image and splitting it up again via CSS.
Steve Souders just showed off a new little tool he created, Sprite Me at the Velocity conference that kicked off today. He has made it easier to work with sprites by:
- finds background images: SpriteMe generates a list of all background images in the page. Hovering over the its URL displays the image.
Each of the DOM elements that use that image are also listed. [DONE]
- groups images: It's hard to figure out which images can be sprited together, and how they should be laid out. For example, background images that repeat horizontally must fill the entire width of the sprite. Background images positioned
left bottom must be at the right top of the sprite if their container might be bigger than the image. SpriteMe determines which images should be sprited together based on these constraints.[IN PROCESS]
- creates sprites: SpriteMe generates the sprite for each grouping of images. This is done using open source tools, such as CSS Sprite Generator. [TBD]
- updates CSS: The final tricky part of using sprites is changing the CSS. Sometimes the CSS is a rule in a stylesheet. Or it might be a rule in an inline style block. Or it might be specified in an element's style attribute. Because SpriteMe runs inside your web page, it can find the CSS that needs to be updated. It makes the changes in realtime, so you can visually check to confirm the sprites look right.You can export the modified CSS to integrate back into your code. [TBD]
Great, a simple new bookmarklet to work with Sprites. It is always a good idea to sprite up right? Not exactly.
Vlad Vuki?evi?, a leader in the Mozilla community (and brought us cool stuff like Canvas 3D!) has spoken up on the internals of the browser, which shows you the trade-offs for the spriting approach:
The biggest problem with CSS sprites is memory usage. Unless the sprite image is carefully constructed, you end up with incredible amounts of wasted space. My favourite example is from WHIT TV's web site, where this image is used as a sprite. Note that this is a 1299x15,000 PNG. It compresses quite well — the actual download size is around 26K — but browsers don't render compressed image data. When this image is downloaded and decompressed, it will use almost 75MB in memory (1299 * 15000 * 4). If the image didn't have any alpha transparency, this could be maybe optimized to 1299 * 15000 * 3, though often at the expense of rendering speed. Even then, we'd be talking about 55MB. The vast majority of this image is blank; there is nothing there, no useful content whatsoever. Just loading the main WHIT page will cause your browser's memory usage to go up by at least 75+MB, just due to that one image.
That's not the right tradeoff to make for a website.
What alternatives are there? None right now.... but they are hopefully on the way. Some folks have been talking about the idea of packaging up images in zip files, and then the browser can manage more than just the download process, but also only load up what it needs:
Many browsers have support for offline manifests already; it might be possible to extend that to allow downloading one file (like a jar/zip file) that contains a manifest of resources and equivalent URLs that are contained inside it.
Rob Sayre, also of Mozilla, broached the subject:
Sprites have the advantage of working right now, but maybe there should be a way to serve up a multipart response with your sprite images as well. That would cut down on CSS rule count and maintenance, but still group the images in one HTTP request. Authors are already giving up the advantages of separate resources in return for speed, so maybe this is worth doing.
You can (in theory… haha) get some of these advantages with HTTP pipelining, but a multipart response would allow the server optimize the response order as they do with sprites today.
Monday, June 22nd, 2009
Category: CSS, Video
How about starting the week with something fun. Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS like this:
CSS:
-
-
.face {
-
position: absolute;
-
width: 200px;
-
height: 200px;
-
overflow: hidden;
-
font-family: monospace;
-
font-size: 24px;
-
}
-
-
.top {
-
top: 0;
-
left: 89px;
-
background: #fff;
-
color: #999;
-
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-
}
-
-
.left {
-
top: 155px;
-
left: 0;
-
background: #999;
-
color: #333;
-
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-
-moz-transform: rotate(15deg) skew(15deg, 15deg);
-
}
-
-
.right {
-
top: 155px;
-
left: 178px;
-
background: #ccc;
-
color: #666;
-
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
-
}
-
-
.shadow {
-
top: 310px;
-
left: -89px;
-
background: black;
-
opacity: 0.5;
-
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-
}
-
Chris Blizzard posted his Open Video Conf talk on connecting HTML5 video showcasing the great demos of Paul Rouget :)
Monday, June 15th, 2009
Category: CSS
CSS3 properties can greatly improve your workflow, making some of the most time-consuming CSS tasks a breeze and allowing for better, cleaner and more lightweight markup. Some properties are still not widely supported, even by the most recent browsers, but that doesn’t mean we shouldn’t experiment with them or give visitors with modern browsers advanced features and CSS styling.
In this regard, keep in mind that educating our clients is both useful and necessary: websites don’t have to look exactly the same in every browser, and if a difference doesn’t negatively affect the aesthetics or usability of a website, it should be considered. If we continue to waste valuable time and money making every detail pixel-perfect (instead of adopting more flexible and future-oriented solutions), users won’t have an incentive to upgrade their browsers, in which case we would have to wait a long time before older browsers become legacy browsers and robust modern browsers become the standard.
The earlier we experiment with and adapt new CSS3 properties, the earlier they will be supported by popular browsers and the earlier we’ll be able to use them widely.
The words above are a conclusion in a piece in Smashing Magazine on taking your design to the next level with CSS3.
The post goes into details with case studies and examples for a huge set of enhancements available in modern browsers:
- Selector improvement
- RGBA and Opacity
- Multi-Column Layout
- Multiple Backgrounds
- Word Wrap
- Text Shadow
- @font-face Attribute
- Border Radius
- Border Image
- Box Shadow
- Box Sizing
- Media Queries
- Speech
Take a walk through the article and play with the ideas. I really like Tim Van Damme's site!
Wednesday, June 10th, 2009
Category: CSS, Examples
Have you ever wanted to just <a href="path" action="post">? Remember the hub-ub with the old Google Web Accelerator and how it started to crawl links to delete actions that were mistakenly using GET?
Natalie Downe has written up a piece on styling HTML buttons as links which means that you can somewhat get the same effect. It shows how you can use an inline span to get the hover effect, taking:
HTML:
-
-
<button type="submit" class="link"><span>Hello there I am a button
</span></button>
-
and styling it with:
CSS:
-
-
button {
-
overflow: visible;
-
width: auto;
-
}
-
button.link {
-
font-family: "Verdana" sans-serif;
-
font-size: 1em;
-
text-align: left;
-
color: blue;
-
background: none;
-
margin: 0;
-
padding: 0;
-
border: none;
-
cursor: pointer;
-
-
-moz-user-select: text;
-
-
/* override all your button styles here if there are any others */
-
}
-
button.link span {
-
text-decoration: underline;
-
}
-
button.link:hover span,
-
button.link:focus span {
-
color: black;
-
}
-
You can see the simple example in action.
Tuesday, June 2nd, 2009
Category: CSS, Utility
John Allsop has created a very cool CSS gradient exploration tool that lets you get the gradient you need, with the resulting sample and code right there.
You could use it to do what he did, and recreate the Apple navigation bar in pure CSS instead of using images.
John didn't stop there, and has already created tools for Box Shadows Shadows and Radial Gradients.
Wednesday, May 27th, 2009
Category: CSS
Chris Williams has been having some fun with CSS gradients on a quest to create nice looking elements without images.
He uses CSS like this:
CSS:
-
-
.albumInfo {
-
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));
-
height: 8em;
-
padding: 1em;
-
border-top: 1px solid #858585;
-
border-bottom: 1px solid #505050;
-
}
-
-
.albumInfo h1 {
-
font-weight: bold;
-
text-shadow: 0px -1px 1px black;
-
font-size: 1.2em;
-
}
-
-
ul.tracks {
-
background: -webkit-gradient(radial, 50% -70, 0, 50% 0, 200, from(#595959), to(#0d0d0d)) #0d0d0d;
-
width: 25.7em;
-
}
-
-
ul.tracks li.odd {
-
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,.05)));
-
}
-
to create elements like this:
Tuesday, May 26th, 2009
Category: CSS, Python
We have mentioned Sass and other CSS abstraction libraries before, but somehow CleverCSS slipped by.
The nesting DSL looks similar to other solutions:
CSS:
-
-
ul#comments, ol#comments:
-
margin: 0
-
padding: 0
-
-
li:
-
padding: 0.4em
-
margin: 0.8em 0 0.8em
-
-
h3:
-
font-size: 1.2em
-
p:
-
padding: 0.3em
-
p.meta:
-
text-align: right
-
color: #ddd
-
But, you can also use attributes:
CSS:
-
-
#main p:
-
font->
-
family: Verdana, sans-serif
-
size: 1.1em
-
style: italic
-
Define constants:
CSS:
-
-
background_color = #ccc
-
-
#main:
-
background-color: $background_color
-
Implicit concatenation:
CSS:
-
-
padding: $foo + 2 + 3 $foo - 2
-
-
// returns: padding: 15 8; if $foo is 10
-
Calculations:
CSS:
-
-
// calculations with numbers / values
-
42px + 2 -> 44px
-
10px * 2 -> 20px
-
1cm + 1mm -> 11mm
-
(1 + 2) * 3 -> 9
-
-
// string concatenation
-
foo + bar -> foobar
-
"blub blah" + "baz" -> 'blub blahbaz'
-
-
// You can also calculate with numbers:
-
#fff - #ccc -> #333333
-
cornflowerblue - coral -> #00169d
-
-
// You can also add or subtract a number from it and it will do so for all three channels (red, green, blue):
-
crimson - 20 -> #c80028
-
Nice :)
Friday, May 8th, 2009
Category: CSS
Paul Hayes has been playing with CSS transformations and making 3D cubes:
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform (documentation) and Safari 3.2+ -webkit-transform (documentation).
This resulted in:
A 3D cube created with CSS
Supported browsers: Safari 3.2+, Google Chrome, Firefox 3.5+
Experiment with multiple cubes and CSS transitions, still no JavaScript
Supported browsers: Safari 4+, Google Chrome
WebKit initially put this in (iPhone needed it after all!) and it will be interesting to see what users come out of it. The full CSS for the simple example is below:
CSS:
-
-
.cube {
-
position: relative;
-
top: 200px;
-
}
-
-
.rightFace,
-
.leftFace,
-
.topFace div {
-
padding: 10px;
-
width: 180px;
-
height: 180px;
-
}
-
-
.rightFace,
-
.leftFace,
-
.topFace {
-
position: absolute;
-
}
-
-
.leftFace {
-
-webkit-transform: skewY(30deg);
-
-moz-transform: skewY(30deg);
-
background-color: #ccc;
-
}
-
-
.rightFace {
-
-webkit-transform: skewY(-30deg);
-
-moz-transform: skewY(-30deg);
-
background-color: #ddd;
-
left: 200px;
-
}
-
-
.topFace div {
-
-webkit-transform: skewY(-30deg) scaleY(1.16);
-
-moz-transform: skewY(-30deg) scaleY(1.16);
-
background-color: #eee;
-
font-size: 0.862em;
-
}
-
-
.topFace {
-
-webkit-transform: rotate(60deg);
-
-moz-transform: rotate(60deg);
-
top: -158px;
-
left: 100px;
-
}
-
Thursday, April 30th, 2009
Category: CSS, Design, Utility
Andrée Hansson has created 960 Gridder, a grid layout tool for web developers that you can either use as an integrated component to layout your websites or use it as a bookmarklet. The grid is fully customizable but it defaults to the "960px grid standard".
960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it.
It injects your website of choice and you can then work with this tool to help you out with whichever layout/design task you find it useful for.
By default, it is set to work with 12 columns, 60 pixel wide columns with a 10 pixel spacer left and right of the column, making it a 20 pixel wide gutter (which actually is the ones this gridder renders).
You can see and read about the "960 standard" at http://960.gs.
Tuesday, April 28th, 2009
Category: CSS, jQuery
Alexis Deveria of "When Can I Use..." fame recently told us about his latest project:
A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the "CSS Advanced Layout Module".
His full blog entry goes into a bit more detail.
We covered John Resig's thoughts on the CSS3 Advanced Layout Module before; you know, the idea of visually writing a table layout in your CSS file?
Alexis' project is hosted at Google Code, and it includes various examples. Check it out!
Category: CSS, Design
Sean Martell is my hero. He did the Bespin logos and a bunch of the Mozilla works in general. When Ben and I were in Toronto we got to see him at work at his WACOM tablet, and it is a sight to behold.
I wish I could do that kind of design work, but for me it isn't to be.... my design is left to code :/
Anyway, he has been working a lot on the Fennec (Firefox mobile) design and just
wrote about using CSS3 to build flexible UI elements without recutting UI graphics all over:
Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space. Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there. Not only are we talking resolution differences, but the screen DPI can change from device to device as well.
So after resizing and re-slicing the Fennec UI for the second time, I quickly realized that this could be a full-time job for a team of designers depending on the list of handsets Fennec will be appearing on.
Hold the phone… whats this? Firefox 3.5 enables a new slew of fun CSS3 design styles eh? Rounded edges eh? Embedded fonts eh?
* gears turning, monkeys typing, hamsters running *
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.
Here are some nice dark toggles:
with code looking like:
CSS:
-
-
.toggleONleft {
-
font-family: ‘DroidSans-Bold’;
-
text-transform:uppercase;
-
padding: 0px 8px 0px 12px;
-
-moz-border-radius-topleft: 0.5em;
-
-moz-border-radius-bottomleft: 0.5em;
-
-webkit-border-top-left-radius: 0.5em;
-
-webkit-border-bottom-left-radius: 0.5em;
-
border-top: 4px solid #aaa;
-
border-left: 4px solid #ccc;
-
border-right: 4px solid #ccc;
-
border-bottom: 4px solid #ccc;
-
-moz-border-top-colors:#aaa #bbb #ccc #ddd;
-
-moz-border-left-colors:#aaa #bbb #ccc #ddd;
-
-moz-border-bottom-colors:#aaa #bbb #ccc #ddd;
-
-moz-border-right-colors:#aaa #bbb #ccc #ddd;
-
background-color: #ddd;
-
display: inline;
-
}
-
-
.toggleOFFright {
-
font-family: ‘DroidSans-Bold’;
-
text-transform:uppercase;
-
color:#414141;
-
padding: 0px 12px 0px 8px;
-
-moz-border-radius-topright: 0.5em;
-
-moz-border-radius-bottomright: 0.5em;
-
-webkit-border-top-right-radius: 0.5em;
-
-webkit-border-bottom-right-radius: 0.5em;
-
border-top: 4px solid #ccc;
-
border-left: 4px solid #ccc;
-
border-right: 4px solid #ccc;
-
border-bottom: 4px solid #aaa;
-
-moz-border-top-colors:#aaa #fff #fff #fff;
-
-moz-border-right-colors:#aaa #dedede #efefef #fafafa;
-
-moz-border-left-colors:#aaa #dedede #efefef #fafafa;
-
-moz-border-bottom-colors:#aaa #dedede #efefef #fafafa;
-
background-color: #fff;
-
display: inline;
-
}
-
Friday, April 24th, 2009
Category: CSS, Tip
Paul Irish tries not to use CSS browser hacks anymore and instead "uses IE's conditional comments to apply classes to the body tag, but he put up a concise list of browser specific hacks he has used:
CSS:
-
-
/***** Selector Hacks ******/
-
-
/* IE 6 and below */
-
* html #uno { color: red }
-
-
/* IE 7 and below */
-
*:first-child+html #dos { color: red }
-
-
/* IE 7 and modern browsers */
-
html>body #tres { color: red }
-
-
/* Modern browsers (not IE 7) */
-
html>/**/body #cuatro { color: red }
-
-
/* Opera 9.27 and below */
-
html:first-child #cinco { color: red }
-
-
/* Safari */
-
html[xmlns*=""] body:last-child #seis { color: red }
-
-
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
-
body:nth-of-type(1) #siete { color: red }
-
-
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
-
body:first-of-type #ocho { color: red }
-
-
/* saf3, chrome1+ */
-
@media screen and (-webkit-min-device-pixel-ratio:0) {
-
#diez { background: #FFDECE; border: 2px solid #ff0000 }
-
}
-
-
/***** Attribute Hacks ******/
-
-
/* ie6 and below */
-
#once { _color:blue }
-
-
/* ie7 and below */
-
#doce { *color: blue } /* or #color:blue */
-
-
/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */
-
He has included a test page and you can view the different browsers via browsershots.
Finally, he links to another concise list... of JavaScript sniffs.
Wednesday, April 15th, 2009
Category: CSS
Yusuf Akyol has created a simple fluid design library inspired by emastic that puts power into the em.
Check out the test page and resize the browser to see the layout and font size change before your eyes.
You use the framework via a little CSS and:
HTML:
-
-
-
fluidLayoutinit(yourFontSize, yourScreenSize);
-
// yourFontSize is a hundred percent value at yourScreenSize
-
// yourScreenSize is a pixel value for yourFontSize
-
</script>
-
The work is done by:
JAVASCRIPT:
-
-
var fluidLayout = {
-
-
myFontSize: 100,
-
-
getBrowserWidth: function() {
-
if (document.documentElement && document.documentElement.clientWidth != 0) {
-
return document.documentElement.clientWidth;
-
} else if (document.body) {
-
return document.body.clientWidth;
-
}
-
return 0;
-
},
-
-
dynamicLayout: function () {
-
var defaultFontSize = fluidLayout.myFontSize * 100;
-
var browserWidth = fluidLayout.getBrowserWidth();
-
document.body.style.fontSize = (defaultFontSize * browserWidth / 100000) + "%";
-
},
-
-
addEvent: function (obj, type, fn) {
-
if (obj.addEventListener) {
-
obj.addEventListener( type, fn, false );
-
} else if (obj.attachEvent) {
-
obj["e"+type+fn] = fn;
-
obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); }
-
obj.attachEvent( "on"+type, obj[type+fn] );
-
}
-
},
-
-
init: function(fontSize) {
-
this.myFontSize = fontSize;
-
this.addEvent(window, 'load', this.dynamicLayout);
-
this.addEvent(window, 'resize', this.dynamicLayout);
-
}
-
}
-
Thursday, April 9th, 2009
Category: CSS, IE, Performance
Web performance guru Steve Souders noted some time ago in his book that @import is harmful to web page rendering times, but today he elaborated on this claim in a longish blog post:
There are two ways to include a stylesheet in your web page. You can use the LINK tag:
<link rel='stylesheet' href='a.css'>
Or you can use the @import rule:
<style>
@import url('a.css');
</style>
I prefer using LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance, too.
He shows that while always using @import by itself is actually okay, there are a number of scenarios where @import can jack you up:
- link mixed with @import breaks parallel downloads in IE
- using @import from within a LINKed stylesheet breaks parallel downloads in all browsers
- LINK blocks @import embedded in other stylesheets in IE
- @import causes resources to be downloaded out-of-order in IE
His conclusion:
It’s especially bad that resources can end up getting downloaded in a different order. All browsers should implement a small lookahead when downloading stylesheets to extract any @import rules and start those downloads immediately. Until browsers make these changes, I recommend avoiding @import and instead using LINK for inserting stylesheets.
See the full blog post for fancy charts and more detail.
Wednesday, April 8th, 2009
Category: CSS, Utility
Chris Brainard wrote in to tell us about his new CSS Sprite Creator:
Cool!
Next Page »
