CSS

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.

CSS / 19 Jul 2017

12 Fun CSS Text Shadows You Can Copy and Paste

Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity.

Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.

CSS / 13 Jul 2017

10 Great Google Font Combinations You Can Copy

The average man considers which flavor of Doritos will taste good with his Heineken. The sophisticated man considers which cheese will pair well with his choice of wine. The designer of course considers which two fonts will look great on the same page.

Today we’re going to use the Google Font API as a playground for mixing fonts and finding ideal pairings. You’ll be able to skim through and instantly grab out selections that you think are appropriate for your projects.

The best part? You need only to copy and paste our code to implement these fonts on your site. It’s completely free and there are no downloads required.

CSS / 28 Jun 2017

5 Ways to Learn Web Design: Which Is Right for You?

The web design education industry has exploded from a small niche to a powerful, continually expanding force. Countless people all over the planet are interested in learning about how to build and design websites, and tons of companies are cropping up promising the ultimate solution.

The good news for you is that increased competition in this field is a great thing for customers. You have more options than ever for learning just about anything you want to know concerning web technologies. The big question though is, with so many options available, which is the right one for you? We’ll go over a number of different strategies being used to teach web development and discuss how you can figure out the most appropriate for your unique learning style. We’ll also include some resources to get you started on each available path.

CSS / 3 May 2017

How to Add Touches of Magic to Your Interactions

Every time a user does something with your design, an interaction is created. Some interactions, such as clicks, go almost unnoticed by the user. But other interactions include a certain bit of magic that makes the user want to play with the design even more.

There’s a fine line between an interaction that has the touch of magic and one that can be completely overwhelming. The most magical interactions are a bit unexpected, simple, create an emotional response and make the user want to use it again.