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. Besides upcoming webinar dates, you can also download recorded versions of previous webinars (some free, some for sale).
Return to ArticlesReturn to p.i.e. This article has been revised as of May 2009 to add improvements to the method which make it possible to have only a single drop shadow image, rather than the three that were required in the original version. This new simplified version of the method was inspired by a question from Antonio Vong, who asked if it was possible to make it work with only one big shadow image. Special Notice: I've written a tutorial for making drop shadows, using the free Gimp graphics editor. On the Web: Go see how Scott Schiller achieved this same four-sides PNG effect. Browser Disclaimer. HTML5 Reset Stylesheet. CSS Masks.
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 Reference.
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. As you can see there are triangles hidden in that square. With a little creativity and tweaking there are lots of shapes that can be made. Now for application: This is a classic chat bubble, no images used. Vertical Text using CSS - Mozilla - HTML / CSS. Testing Shows IE9 Beta Greedy For Web Fonts.
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.
The actual FOUT effect can be seen in the wild, but it varies by browser. Internet Explorer will load the font file as soon as it encounters the @font-face in your CSS, which minimizes FOUT. 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. Ideal Forms, a small framework to build forms. Force File Upload Input Button To Right Side In WebKit. 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. Front-end developers find themselves trying to implement these requests and are faced with CSS rules that behave inconsistently or erratically across different browsers, different operating systems, and even different versions of the same operating system. 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. Bootstrap, from Twitter. Need reasons to love Bootstrap?
Look no further. By nerds, for nerds. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. CSS display: inline-block: why it rocks, and why it sucks. 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 float 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. LESS « The Dynamic Stylesheet language.