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. This is in fact a mask applied to the <video> element. We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image) Use of a mask results in a stacking context being created (similar to how opacity and transforms work). Here are two sample images. The result looks like this:
Atomic CSS CSS Reference style-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] See the index of selectors, pseudo-classes, and pseudo-elements below. The syntax for each specified value depends on the data type defined for each specified property. Style rule examples For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. An Introduction To Object Oriented CSS (OOCSS) 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
Full property table previous next contents properties index Appendix F. Full property table Note: Several sections of this specification have been updated by other specifications. Please, see "Cascading Style Sheets (CSS) — The Official Definition" in the latest CSS Snapshot for a list of specifications and the sections they replace. 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. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt. Enter display: inline-block This is where the magic value inline-block for the display property comes into play. 01. 02. ul#display-inline-block-example, 03. ul#display-inline-block-example li { 04. /* Setting a common base */ 05. margin: 0; 06. padding: 0; 09. ul#display-inline-block-example li { 10. display: inline-block; 11. width: 100px; 12. min-height: 100px; 13. background: #ccc; 15. 17. 18. 19. 20. 21. 1.
CSS character escape sequences There are some other cases where you might want or need to escape a character in CSS. You could be writing a selector for a funky id, class, attribute or attribute value, for example; or maybe you want to insert some weird characters using the content property without changing your CSS file’s character encoding. Identifiers and strings in CSS The spec defines identifiers using a token diagram. The grammar for identifiers is used for various things throughout the specification, including element names, class names, and IDs in selectors. The spec definition for strings says that strings can either be written with double quotes or with single quotes. As you can see, character escapes are allowed in both identifiers and strings. How to escape any character in CSS Here’s a simple list of rules you should keep in mind when escaping a character in CSS. Leading digits If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. Whitespace characters
LESS « The Dynamic Stylesheet language Formalize CSS - Teach your forms some manners! 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. 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. 1 <div class="chat-bubble">2 Buongiorno! This technique doesn’t work in ie6 as is, mainly because ie6 doesn’t allow transparent borders, but there is a fix for that.