css
Get flash to fully experience Pearltrees
Four Sided PNG Drop Shadows [revised and improved]
Are complex CSS issues making your programmers crazy? I've provided advanced CSS consulting for Milo and many other big sites. Hire me to help you too. Big John's CSS Webinars! Let Big John (yours truly) teach you about CSS in a setting where you can actually ask questions .
We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5 , so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects. The code
HTML5 Reset Stylesheet
WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. Here is a snapshot of the Speed Racer movie trailer clipped to the Safari compass icon.
CSS Masks
This CSS Reference lists all standard CSS properties, pseudo-classes and pseudo-elements , @-rules , and selectors in alphabetic order. It allows you to quickly access detailed information for each of them. It not only lists the CSS1 and CSS2.1 properties, but also is a CSS3 reference that links to any CSS3 property and concept standardized, or already stabilized. See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz ; and WebKit CSS Extensions for WebKit-specific properties.
CSS Reference
css3
Creating Triangles in CSS « Jon Rohan’s Web Developer Field Guide
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. How it works Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent.
Dealing With the Dreaded ‘Flash of Unstyled Text’
The use of custom fonts on the web is finally a viable option for designers. Browser support for CSS’s @font-face rule is pretty solid — even IE 5 can be wrangled into displaying custom fonts loaded from your server. Services like Typekit , which licenses fonts from well-known font foundries, and free services like Font Squirrel are helping to smooth the licensing issues surrounding custom fonts on the web. However, while browser support and licensing is getting sorted quickly, there’s still one big problem with web fonts — the dreaded “Flash of Unstyled Text,” or FOUT. The problem (despite the name, it has nothing to do with Adobe Flash) stems from how browsers render a page: progressively, prioritizing the raw content, then grabbing the stylesheet and then grabbing any external font files.
don’t use @import
In Chapter 5 of High Performance Web Sites , I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo , creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page. LINK vs. @import There are two ways to include a stylesheet in your web page.
Published by Chris Coyier This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear. If you read this blog, there is a 99% chance you've had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it.
How To Create an IE-Only Stylesheet
Putting letter-spacing under a microscope
We’re going to switch gears a bit today and talk a bit about CSS typography. Typography on the web is, to designers, clients and front-end developers alike, a source of frustration for many reasons. Designers who are used to either print or laying out their typography in Photoshop and the like can’t get the same results with CSS text; additionally the number of fonts commonly available for use on the web is limited and they can look stale. Clients often want text to break in certain ways or to fill spaces and not wrap when it’s too large for the space it’s designed for.
Web typography: hyphenation & justification - skinnywhitegirl - skinnywhitegirl
Post in collaboration with Bram Pitoyo , Digital Design Strategist & Typographer at Wieden+Kennedy . Firefox joined Safari in supporting hyphenation. Despite CSS coming out 14 years ago in 1996, we’re just now getting some of the fine-grained controls necessary for beautiful typography. Details of the proposed spec at Mozilla Developer Network. -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;
Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block . Problems with f loat The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it.