CSS

CSS / 7 Aug 2019

The Lowdown on :before and :after in CSS

We previously took a look at :active, an extremely handy pseudo-class selector that can be used to create some awesome mouse-down effects. Today we’re going to take a step back and explore some other “pseudo” items, this time we’ll be looking at the pseudo-elements :before and :after.

You’re probably beginning to see these used all over the web in advanced CSS examples so you might as well jump in and learn to use them yourself.

What is a pseudo-element and how does it differ from a pseud-class? Why do pseudo-elements sometimes have one colon and sometimes have two?

How are :before and :after implemented in CSS? What are some ways that developers all over the web are using these tools to perform amazing feats of modern coding?

Read on to find out.

CSS / 6 Aug 2019

The Lowdown on Absolute vs. Relative Positioning

When I was first learning web development, the style side of CSS seemed straightforward and fun, but performing layout feats seemed like a confusing mess. I sort of felt my way around without a solid understanding of how things like positioning and floats worked and as a result it would take hours to perform even simple tasks. If this situation sounds familiar, then this article is for you.

One of the real revelations that I had early on was when I was finally able to wrap my head around how positioning contexts worked, especially when it came to the difference between absolute and relative positioning.

Today we’re going to tackle this subject and make sure you know exactly how and when to apply a specific positioning context to a given element.

CSS / 30 Jul 2019

5 Really Useful Responsive Web Design Patterns

Responsive web design requires a very different way of thinking about layout that is both challenging and exciting. The art of layout was already complex enough for the centuries that it was defined by fixed elements, now things are becoming exponentially more complicated as layouts become increasingly adaptive.

To help reprogram your brain to consider layouts in new ways, we’re going to take a look at some interesting responsive design patterns that are being implemented by talented designers all over the web.

CSS / 23 Jul 2019

Mobile First Design: Why It’s Great and Why It Sucks

Historically, most web designers and their clients have approached the desktop side of any project first, while leaving the mobile part as a secondary goal that gets accomplished later. Even with the rise of responsive design, many of us begin with the “full size” site and work our way down.

There’s a growing trend in the industry though to flip this workflow on its head and actually begin with mobile considerations and then work up to a larger desktop version.

Why would you ever approach a project this way? What are some of the pros and cons of this strategy? Read on to find out!

CSS / 10 Jul 2019

Inner Shadows in CSS: Images, Text and Beyond

Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow. But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text?

Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows.

CSS / 25 Feb 2019

5 New CSS Techniques to Master in 2019

Web designers are fascinated with ways to try new CSS techniques and push the boundaries of what CSS can do. Well-planned CSS can control almost any aspect of a design, and contribute to better overall user experiences—with cleaner and more consistent code.

But what techniques are trending? What should you learn next? We have a few ideas for the latest developments to watch this year. Dive in, see what’s hot, and try some of these new CSS tips and techniques to give your next project an exciting edge.

CSS / 29 Aug 2018

The 10 Best Script and Handwritten Google Fonts

A good script font is hard to find. I’m extremely picky when it comes to this particular area of typefaces and tend to hate most of what I see. With this post, you can skip the work of sorting through the junk, and cut straight to the best script and handwritten Google Fonts that are readable, attractive and perfect for your site.

All of the fonts are shown with a unique CSS treatment (and provided with the code you need for quick implementation!) They’re also all served up with Google Fonts so you’ll be up and running with a quick copy and paste, no downloads required!

CSS / 22 Aug 2018

15 Tips for Designing Terrific Tables

Tables of information are boring. In a sense, they’re meant to be that way. A good table communicates a lot of information in a concise, easy to understand way. Because the emphasis really should be on the information, over-designing a table can kill the effectiveness. However, in the right hands, clever design can not only make a table more attractive but can actually increase readability.

Today we’ll take a look at several ways you can improve the functionality and aesthetics of your tables. One of the most common places we currently find tables online is on a web app’s pricing page so most of our examples will take this form, just keep in mind that these principles can apply to any type of informative grid (whether or not it’s actually a table).

CSS / 20 Aug 2018

The Best CSS Gradient Generators for Designers

We’re taking a look at ten of the best CSS gradient generators that you can use to create a variety of gradient styles (and have the CSS output directly!). Coding a gradient by hand is no fun (especially once you get past a simple two-color gradient), so these tools are a must-have in your bookmark folder.

One of the trendiest elements in website design is using a gradient background or color overlay. A two-color linear gradient is the most popular variation of this trend. And while gradients might look fancy and complicated, they are actually quite easy to create and deploy… if you are using the right tool!

CSS / 22 Mar 2018

20+ Awesome Resources for Bootstrap Lovers

Bootstrap has simply exploded in the web development community. There will always be skeptics and haters but on the whole, the project has been a smashing success and can constantly be seen at the top of the Forked and Watched charts at GitHub.

As a result of Bootstrap’s fame, lots of great related resources have been put forth by the development community. Today we’ve collected our favorites into a list of everything you need to get started with Bootstrap. From introductory tutorials to wireframing kits and custom generators, there’s something here for every Bootstrap lover.

CSS / 26 Feb 2018

13 Best Ways to Learn CSS Grid

CSS Grid an increasingly popular method for creating complex responsive web design layouts that render more consistently across browsers. Now is the time to familiarize yourself with CSS Grid, so we’ve collected 13 of the best ways to get started learning today.

Rather than old-school methods such as tables or the box model, CSS Grid allows you to create more asymmetrical layouts and more standardized code that is cross-browser compatible. Most major website browsers already support CSS Grid and it is a W3C Candidate Recommendation, which would formalize it as a standard practice. It’s widely believed that CSS Grid will be the future of website layouts.

CSS / 11 Sep 2017

An Introduction to Animation in Web Design

Animation is not just for cartoons anymore. From full-screen moving images to small hover effects, touches of animation are popping up everywhere. Animation is trendy, fun and user friendly.

And the obstacles to using animation have started to fall. With most users on high-speed connections and the ease of creating anything from simple movements or a silly gif to several minutes of action, animations have become practical and useful web design tools.