Making Hyperlink Icons with CSS

Hyperlinks can link to any number of different sources (pdfs, emails, external links, popups). By placing an icon beside each of these types it will take the surprise out of clicking on a hyperlink for the user. The plan is to do this in an intelligent manner so users don’t have to worry about placing a class on each link. This is especially handy if you’re building for CMS users that aren’t HTML savvy…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS hacks & browser version detection – a new approach

How to target almost any browser from the server side using PHP.

The workflow…

  1. Style everything for a web standards compliant browser like Firefox or Opera.
  2. Load an additional PHP file which outputs CSS styles with specific hacks.
  3. That’s it you’re done.
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Mastering CSS, Part 1: Styling Design Elements

CSS isn’t nearly as tricky as some people tend to believe. Below are fresh tips and techniques for creating and styling design elements with CSS. They’re a good place to start if you’re new to CSS but are valuable even if you’re a veteran designer. Not all the techniques are strictly CSS; some include integration with JavaScript or XHTML to extend the functionality of your site…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Sticky Fixed SideNav Layout with CSS

Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

A Look at Some of the New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. It will allow designers and developers to implement designs much easier and quicker than before. Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

The 5-Minute CSS Mobile Makeover

More people are surfing the Web via mobile device than ever before. It’s just so convenient to have that mobile access to anything you need. Sadly, most websites have not yet considered their mobile visitors, who probably move on to the next site before trying to make sense of a jumbled mess. Those of you who surf the Mobile Web know exactly what I’m talking about here: sites that “get it” are a joy to visit, but those that don’t are a total pain. What’s to get? Well, for one, if you do nothing else for your mobile visitors, take five minutes and implement a basic stylesheet to make your site readable via mobile device. This tutorial will show you how to retain visitors and reduce bounce rate with a super-easy 5-minute mobile makeover…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Cross-browser drop shadows using pure CSS

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. Do websites need to look exactly the same in every browser?

One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly. All of this begins to degrade page performance, when really the drop shadow is merely a secondary design flourish. CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow…

VN:F [1.9.22_1171]
Rating: -2 (from 2 votes)

CSS Opacity That Doesn’t Affect Child Elements

This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc.

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)