NotesEmulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.FeedUnfurl
Notes"Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall."Unfurl
Notes"By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo."Unfurl
Notes"Iāve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldnāt find much documentation about it on the web so I thought I would describe it here."Unfurl
Notes"Just like higher-level programming languages compile to assembler, so Sass compiles to CSS. And just as higher-level programming languages eventually replaced the regular usage of assembler, so Sass (or a language like it) will eventually replace CSS.
Now, donāt get me wrong. I am sure CSS has many more years ahead of it, but Sass and languages like it are the future. Yes, you can complain about the syntax. You can complain about the generated code. But ultimately, the productivity and simplicity that languages like Sass offer will win over the masses. Of that you can be sure."Unfurl
Notes"The iTunes LP experience is accomplished with HTML 4.01, CSS and JS. The interface feels very Flash-like, but there is no trace of it. The CSS animations are elaborate and smooth. ... As a music fan, and as a web developer, I couldnāt be more pleased with the new iTunes LP offering. If your audience is significantly Apple-oriented (e.g. a site about Mac rumors or a popular iPhone app) this proves that you can provide an incredible experience using only JavaScript and some proposed CSS3 properties."FeedEmbedUnfurl
Notes"Have you ever filled a textarea on a page, which had a limit to how many characters you could type into it? ... How to effectively communicate how many characters you can type into a box, and have it look good. ... Add the number counter as the background of the textarea!"Unfurl
Notes"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)."Unfurl
Notes"No doubt there is more. I'm not an expert on ie6 debugging, but for the greater part these are issues that pop up with every project, and getting these fixes in as quickly as possible makes for much easier ie6 debugging afterwards. Whether you create your ie6 css alongside your main css or run through your main css to construct a ie6 css when everything is finished is entirely up to you. But when you make sure all the above is taken care of, ie6 will look like a much nicer browser. "Unfurl
Notes"Your web developers will overflow their box model when they see you sporting this hilarious new t-shirt! Then they'll go back to using tables. "Unfurl
Notes"1. Padded block links 2. Typesetting buttons 3. Using contrast to manage focus 4. Using color to manage attention 5. White space indicates relationships 6. Letter spacing 7. Auto-focus on input 8. Custom input focus 9. Hover controls 10. Verbs in labels"FeedUnfurl
NotesHuh, I didn't know you could customize the text selection highlight color in CSS. "::selection { background: #CF0000; color: white; /* Safari */ } ::-moz-selection { background: #CF0000; color: white; /* Firefox */ } "Unfurl
Notes"Iām sure you all know that itās possible to create plugins and extend various aspects of the jQuery JavaScript library but did you know you could also extend the capabilities of itās selector engine?"FeedUnfurl
Notes"With CSS you can make text wrap around an image using the float property and for most purposes this is quite adequate. However, it doesn't take into account the actual image and treats it as one big block, even if you'd prefer the text to wrap around the actual content in the picture, magazine style.Since we now have pixel access (in cool browsers, anyway) via the Canvas element, this technique can now be implemented dynamically with a bit of JavaScript."Unfurl
Notes"Skinning Ubiquity is easy; Firefox supports CSS3, which also adds a great number of features to make styling dependent on CSS alone easier. "Unfurl
Notes"One of the biggest issues of CSS layouts is that not all columns are the same height which makes it hard to style them in a traditional manner."Unfurl
Notes"Scrollovers are a way to quickly and easily add flare to your web pages, giving your users an experience they weren't expecting." Lens flare, then rounded corners, now this.Unfurl
Notes"You have an element in the DOM sitting somewhere below the fold (see above the fold), and youād like to know when it has breached through the bottom threshold of your screen as a user is scrolling down a page."Unfurl
Notes"Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly differentUnfurl
Notes"It strikes me as odd that there isnāt a standard method for treating Flash (or other types of rich media) in a similar fashion to CSS. With the exception of video assets, there really arenāt many types of content on the web these days that canāt beUnfurl
Notes"The script will intercept the attempt to retrieve something from the javascript directory and will notice that you want to fetch multiple files at once. It will then concatenate the requested files, compress it and send it as one to the browser."Unfurl
NotesDid this at Organic over a year ago. "Faust is a process for writing accessible sites where the page seen by users with Flash installed uses the same HTML as the page seen by users without Flash. ... parses content right out of the HTML page. "Unfurl
Notes"Once you know how to design and manipulate the space outside, inside, and around your content, youāll be able to give your readers a head start, position products more precisely, and perhaps even begin to see your own content in a new light."Unfurl
Notes"a Greasemonkey script that adds calls to external JavaScript libraries and CSS files to a given page and, once they are loaded, passes the YAHOO global object to the code inside the Greasemonkey script."Unfurl
Notes"there are several problematic issues that might make us question our decision to use the REL attribute as a means of indicating that content is ānot suitable for workā"Unfurl
Notes"This document describes the enhanced support for the Cascading Style Sheets (CSS) specification provided by Microsoft Internet Explorer 6 or later."Unfurl
CSS background image hacks ā Nicolas Gallagher
Super Awesome Buttons with CSS3 and RGBa - ZURB Playground - ZURB.com
universal-ie6-css - Project Hosting on Google Code
Some Notes On iTunes LP Ā· Jay Robinson
how to make ie6 behave - work blog - onderhond.com
New CSS Sticky Footer - 2009
Conditional stylesheets vs CSS hacks? Answer: Neither! ā Paul Irish - Javascript, front-end web development, and hackery
10 Useful Techniques To Improve Your User Interface Designs | How-To | Smashing Magazine
Extending jQueryās selector capabilities - James Padolsey
Eric's Archived Thoughts: JavaScript Will Save Us All
Labs/Ubiquity/Skins/ - MozillaWiki
Particletree Ā» Rediscovering the Button Element