CSS Font Shorthand Property Cheat Sheet
# Linked to 17 March 2010, 20:39 in Tips by Sam Brown
A printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property.
Easier print CSS coding using Firebug and Web Developer Toolbar
# Linked to 16 March 2010, 11:20 in Tips by Sam Brown
Print stylesheets are an aspect of front-end engineering that rarely get any love, and they’ll often be ignored until the last possible moment before launching a site. Sometimes they might even be forgotten altogether, but you should always make time to write at least a basic stylesheet that formats things neatly, and reveals any elements that only make sense on paper while hiding things like interactive controls that will be useless when printed.
8 Simple Ways to Improve Typography In Your Designs
# Linked to 11 March 2010, 21:17 in Tips by Kevin Holesh
These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. While these details can be applied across different types of media, in this articles we’re going to focus on how to apply them to web design using CSS. Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.
The article is almost a year old, but it’s advice is still true and easy to implement. By Antonio Carusone
Recreating CNN’s Beveled Navigation Buttons with Pure CSS
# Linked to 5 March 2010, 11:00 in Tips by Sam Brown
When CNN recently redesigned their website, they created a strongly-branded and beautiful header section that includes a navigation bar with beveled buttons. Although CNN’s navigation bar utilizes CSS sprites for highlighted and active buttons, the primary design of the buttons (the beveled effect) is done with pure CSS.
A quick note on border radius
# Linked to 2 March 2010, 10:53 in Tips by Sam Brown
Regarding the previous link CSS Border Radius Harry Roberts points out that it is quicker to use the shorthand instead of multiple lines. Interestingly though the -webkit- shorthand property works in Chrome but not Safari? Read Harry’s post for more details.
How to create drop caps with CSS (and CSS3)
# Linked to 1 March 2010, 17:31 in Tips by Sam Brown
Drop caps are a nice typographic detail that look great on many websites and the :first-letter pseudo-element is a great way of creating these. In this post, I explain some basic styles using :first-letter for drop caps and I show some drop cap examples. Where it gets more interesting is the use of CSS3 properties like border-radius, box-shadow and gradients in combination with :first-letter to create some attractive drop caps without the use of images.
IE CSS3 pseudo selectors
# Linked to 18 January 2010, 11:10 in Tips by Sam Brown
ie-css3.js allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE.
CSS Variables with PHP
# Linked to 5 December 2009, 13:14 in Tips by Sam Brown
When people are asked about features they would like to CSS, “variables” always seems to come up. Whether or not this is a good idea is still something I personally haven’t decided on, but I’d lean toward yes. Regardless, using PHP, it is trivially easy to use variables in CSS. This is certainly not a new trick, but I’ve never specifically covered it so I thought I ought to.
Designing CSS Buttons: Techniques and Resources
# Linked to 18 November 2009, 19:00 in Tips by Ross Chapman
Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system. Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. We’ll also address usability.
5 Simple, But Useful CSS Properties
# Linked to 9 November 2009, 19:47 in Tips by Sam Brown
This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. I’m not talking about the new fancy CSS3 properties. I’m referring to the old CSS2 properties such as:
clip,min-height,white-space,cursor, anddisplaythat are widely supported by all browsers.