background preloader

Css

Facebook Twitter

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. Will wonders never cease? Learn about the cascade and its arcane mysteries, or dive into the cesspool of IE6 with Big John as your lifeguard. 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. On the Web: Browser Disclaimer Alert! The Basic Code Conclusion. 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. 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: 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.

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. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored. 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! Vertical Text using CSS - Mozilla - HTML / CSS. Testing Shows IE9 Beta Greedy For Web Fonts. Dealing With the Dreaded ‘Flash of Unstyled Text’ 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. You can use the LINK tag: 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. @import @import I’m going to walk through the different ways LINK and @import can be used. <style> @import url('a.css'); @import url('b.css'); </style> If you always use @import in this way, there are no performance problems, although we’ll see below it could result in JavaScript errors due to race conditions. LINK @import in a.css: 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. Our interest in this topic was stirred when a client requested a letter-spacing change for some copy.

An aside – The Firebug Effect Does it render? (text ©NYTimes) 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; Words need to be hyphenated because paragraphs need to be justified. But do you know why most justified texts aren’t very readable even though it looks visually pleasing at a glance? Mental exercise: why is the documents you’ve justified in MS Word so hard to read compared to a book? Margin kerning.

Justified text in a word processor doesn’t look pleasing because, well, the application doesn’t come with most of these settings. But how far ahead (or behind) are web browsers in this department? Firefox does allows for fine control of letterspacing, although it’s the only browser that does. 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.

LESS « The Dynamic Stylesheet language.