Use percentages instead of xed widths. When that's not possible, use viewport-relative units (vw, vh, vmin, vmax), which resolve to a fraction of the viewport width or height

Media query thresholds should not be dictated by speci c devices, but by the design itself

Don't forget to set a max-width of 100% for replaced elements such as img, object, video, and iframe

In cases when a background image needs to cover an entire container, background-size: cover can help maintain that regardless of said container's size

We are able to adjust this behavior when it's not convenient, through the background-clip property. Its initial value is border-box, which means that backgrounds are clipped at the outer edge of the element's border box. If we want our background to not extend underneath the border, all we have to do is to give it the value padding-box, which tells the browser to clip the background at the padding edge

By now, most of us have probably (over)used box-shadow to create shadows. However, it is little known that it accepts a fourth parameter (called “spread radius”), which makes the shadow larger (positive lengths) or smaller (negative lengths) by the amount you specify. A positive spread radius combined with zero offsets and zero blur creates a “shadow” that looks more like a solid border

the good thing about boxshadow is that we can have as many of them as we want, comma separated

The only thing to keep in mind is that box-shadows are overlaid one on top of the other, with the rst one being the topmost

Shadows don't work exactly like borders, as they don't affect layout and are oblivious to the box-sizing property. However, you can emulate the extra space a border would occupy via padding or margins (depending on whether the shadow is inset or not)

The method we demonstrated creates fake “borders” on the outside of elements. These do not capture mouse events such as hovering or clicking. If this is important, you can add the inset keyword to make the shadows be drawn on the inside of your element. Note that you will need to add extra padding to produce suf cient spacing

In some cases, if we only need two borders, we can use a regular border and the outline property for the outer one. This also gives us exibility regarding the border style

By default, background-position refers to the padding box, so that borders don't end up obscuring background images

Background-origin. By default, its value is (quite predictably) padding-box. If we change it to content-box, as in the following code, the side and corner keywords we use in background-position will refer to the edge of the content box

outlines do not follow the element's rounding (and thus, have sharp corners) but box-shadows do

bennettfeely.com/gradients

lea.verou.me/css3patterns

Pie charts

box-shadow: 2px 3px 4px rgba(0,0,0,.5); It's moved 2px to the right and 3px to the bottom. It's blurred by 4px with a Gaussian blur algorithm (or similar). This essentially means that the color transition on the edges of the shadow between the shadow color and complete transparency will be approximately as long as double the blur radius (8px, in our example)

The solution lies in the lesser known fourth length parameter, speci ed after the blur radius, which is called the spread radius. The spread radius increases or (if negative) decreases the size of the shadow by the amount you specify

Better box shadow: filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

filter: sepia()

frosted glass: filter: blur(20px);

hyphens. It accepts three values: none, manual, and auto. Its initial value is manual, to match the existing behavior

dd + dd::before { content:

; font-weight: normal; }

tab-size: 4;

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

bigger click area: border: 10px solid transparent; background-clip: padding-box;