How to Create Social Media Buttons Using CSS3

CSS3 is truly amazing. It gives web designers the ability to create flexible and easily reusable design elements, and reduces our reliance on images and graphics editors. This is a guide shows you how to create stylish social media buttons using CSS3, HTML, and some freely available social media icons.

• View Demo 1: Inset Buttons
• View Demo 2: Outset Buttons
• Download Source

CSS Typography: Techniques and Best Practices

In the first part of this series, we discussed some fundamental concepts pertaining to CSS typography. Now we are going to cover some excellent techniques, tips, tricks and best practices for dealing with typography on websites.

This is the second part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.

• CSS Typography: The Basics
• CSS Typography: Techniques and Best Practices
• CSS Typography: Examples and Tools

Better Web Typography with @font-face

For normal text blocks, using smart font stacks (as discussed in the first part) is a good idea, but for headings and short text blocks, more interesting fonts can be used with the help of @font-face.

When implemented correctly, @font-face is compatible with a wide range of browsers — yes, even IE.

Embracing and Using CSS3 Pragmatically

Web design is an industry where things change very fast. Over the last year or two,CSS3 has taken web design potential to a new level. It’s not that many more features are available in this latest iteration of the CSS specifications, it’s that CSS3 makes it easier to work with things that typically involved more work, more technologies, and more software. For example, basic animation and dynamic image capabilities such as color gradients were previously only possible with JavaScript, Flash, and image editing software like Photoshop. Not anymore.

There’s a lot to learn about CSS3, and it can be overwhelming if you’re just catching yourself up with what’s going on around you. Let’s look at how CSS3 — even though it’s not supported by all browsers (like IE6) — can be pragmatically implemented into your website production process.

CSS Typography: Examples and Tools

In the previous part of this series, we discussed some techniques and best practices for CSS typography. Let’s now delve into the subject further by looking into some case studies, tools, as well as a showcase of excellent CSS typography on the web.

This is the third part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.

• CSS Typography: The Basics
• CSS Typography: Techniques and Best Practices
• CSS Typography: Examples and Tools

A Guide to CSS Colors in Web Design

With the exceptions of typography and layout, nothing has a more profound impact on the way we design and craft websites than color — from the visuals we showcase through images and media to the simple choice of whether to use salmon pink or neon green to give a website that ’90s "Help, I’m going blind!" appeal. This simple guide will look into CSS colors. You’ll also find excellent color charts and tools to help you work with color values.

Let’s set our objectives:

• Examine the variety of options that exist
• Analyze basic code examples for each color type
• Examine opacity, transparency and more
• Explore simple color theory and psychology

Are You Using CSS3 Appropriately?

CSS3 is exciting. When it was introduced, it seemed like the untapped potential of Web Design was finally unlocked.

It proposes speedier web page response times due to the reduction of images needed for things such as text effects and web buttons for our UIs.

It cuts back our dependency on JavaScript for visual presentation purposes such as animation effects, not only resulting in less code (always a good thing) but also equating to even better web page performance.