border-image

Border-image enables the use of images as borders. It overrides the border-style property which can act as a fallback if the image is unavailable or border-image in not supported.
Border-image is shorthand for the following properties with there initial values:
border-image-source: none;
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;

The image can be sliced using 4 length values: top, right, bottom, left. Which creates a grid of 9 areas, the 4 corners, 4 sides and the center which is unused.

HTML5 anchor name & target

An named anchor, so you could target section of the page, like jump to content, used to be

<a name="content"></a>
notice no href.
You could access it in a link prefixing the name with a '#' like
<a href="#content">Jump to content</a>
This is still supported by browsers but no longer valid HTML5.

"http://validator.w3.org/" wrote:

The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.

Or you could add '#content' without the quotes to the end of the url in the browsers address bar.

:target

The :target pseudo class allows us to select an element on the page that has been targeted in the URL.
The element can be any element with an id: <div id="preview"> or name anchor like: or <a name="preview" ></a> and should be unique on the page.
The target of a url is the part after the '#' symbol eg. 'preview' in this url: http://csscreator.com/content/target#preview
Loading a page with an anchor takes you to that part of the page.

Text-shadow

A text-shadow is specified by suppling a horizontal length a vertical length a blur radius and color. The horizontal length specifies the X coordinate to place the shadow, positive values position the shadow to the right, negative to the left of the text. The vertical length specifies the Y coordinate with positive values placing the shadow below the text and negative above. The blur radius specifies how far to stretch the shadow, causes a blur effect and defaults to 0 if left out.

Multiple comma separated shadows can be applied with layered front to back, first shadow on top.

Clearfix and Browser support

When I first wrote about what's known as the Clearfix technique in 2004, I knew it was going to be useful. It was to solve a problem that previously required us to add extra markup to the page. I had no idea it would still be used in one of it's many forms in most CMS and a large percentage of all websites 8 years later.

Browsers have come a long way since then, most of the browser versions we had to support are not even thought of these days.

Syndicate content