Snipplr

(CSS) Cross Browser CSS Opacity - blueocto

Thu, 28 Apr 2011 19:10:45 UTC

(CSS) Replace H1 tag with Image - blueocto

Sun, 20 Feb 2011 12:47:02 UTC

(CSS) Create a centred horizontal navigation - blueocto

Wed, 16 Feb 2011 00:11:40 UTC

(CSS) The New Bulletproof @Font-Face Syntax - blueocto

Fri, 04 Feb 2011 23:24:46 UTC

We've tested on: Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11

(CSS) CSS Rounded Corners - blueocto

Fri, 21 Jan 2011 22:24:30 UTC

(CSS) 12 Examples of Paragraph Typography - blueocto

Tue, 11 Jan 2011 22:55:37 UTC

(CSS) Cross Browser Transparency - blueocto

Tue, 11 Jan 2011 22:04:56 UTC

The CSS3 standard introduces the opacity property for making elements opaque or transparent. Older browser also have support for opacity using various other properties and, in the case of Internet Explorer, filters. This post looks at how to achieve cross-browser, and backward compatible transparency.

(CSS) CSS Curly Quotes - blueocto

Tue, 11 Jan 2011 21:18:49 UTC

Simon Collison recently explained how to create Swooshy Curly Quotes Without Images using CSS. Itâ€™s a nice technique that works cross-browser, but you have to add < span > tags to your markup for it to work. Here is an alternate technique that requires no changes to your markup that will work in modern CSS2 compatible browsers like Firefox.

(CSS) 3 Columns, liquid width, left rail tallest - blueocto

Tue, 11 Jan 2011 21:16:15 UTC

(CSS) 3 Columns, liquid width, content - blueocto

Tue, 11 Jan 2011 21:15:34 UTC

(CSS) 3 Columns, fixed width, content tallest - blueocto

Tue, 11 Jan 2011 21:14:52 UTC

(CSS) 2 Columns, liquid, right rail, rail tallest - blueocto

Tue, 11 Jan 2011 21:14:01 UTC

(CSS) 2 Columns, liquid, left rail, rail tallest - blueocto

Tue, 11 Jan 2011 21:12:27 UTC

(CSS) Drop shadow with CSS for all web browsers - blueocto

Mon, 03 Jan 2011 07:41:35 UTC

Believe me or not, but all of these web browsers we can offer shadows with CSS:

* Firefox 3.5+
* Safari 3+
* Google Chrome
* Opera 10.50
* Internet Explorer 5.5

The first value describes the x-offset (could be a negative value as well), the second the y-offset, the third the radius of the shadow and the fourth the color of it. Opera 10.50 (currently only available on Windows) is the first web browser to have an implementation without a vendor-prefix, whereas Firefox, Safari and Google Chrome all need it for now.

(The problem with the DropShadow filter is that the shadow is solid, and not fluffy as desired, although it offers easy values for X and Y. The Shadow filter on the other hand offers a nice shadow, but instead of x and y offset, we need to specify direction and strength the set the length of the shadow.)

So, this code makes it work in all those web browsers:

(CSS) Vertical centering with line-height - blueocto

Sat, 01 Jan 2011 03:17:06 UTC

When you have a container with fixed height you can use line-height property to vertically center the content.

(CSS) Prevent oversized content to break fixed width floated layouts - blueocto

Sat, 01 Jan 2011 03:16:26 UTC

When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.

(CSS) Prevent line breaks in links - blueocto

Sat, 01 Jan 2011 03:15:40 UTC

This little trick will prevent line breaks on your links. I recommend using this with long text to avoid having links break into 2 lines.

(CSS) Always show Firefox scrollbar - blueocto

Sat, 01 Jan 2011 03:14:55 UTC

Firefox hides vertical scrollbar by default. So, when you browse a site that have different page heights you notice a horizontal shift. This code will always display a scrollbar and prevent shifting.

(CSS) Centering block elements horizontally - blueocto

Sat, 01 Jan 2011 03:14:09 UTC

For all modern browser this line of css is enough to horizontally center a block level element.

(CSS) Remove vertical textarea scrollbar in IE - blueocto

Sat, 01 Jan 2011 03:13:21 UTC

Textareas in IE have vertical scrollbar visible by default. If you want those removed (I know I do) use this line.

(CSS) Force page breaks when printing your document - blueocto

Sat, 01 Jan 2011 03:12:32 UTC

With this line of code you can control places where you want your pages to break when printing a document.

(CSS) Remove active link borders - blueocto

Sat, 01 Jan 2011 03:11:02 UTC

This will remove dotted outline from focused or active links.

(CSS) Wordpress Stylesheet - blueocto

Wed, 29 Dec 2010 10:40:50 UTC

In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments. The stylesheet must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first. The following is an example of the first few lines of the stylesheet, called the stylesheet header, for the Theme "Twenty Ten":