CSS Archive


7 Tips to Speed Up Your Website Today

website speed

Everyone loves a cool little loading animation, right? But if that divot lasts more than a second or two, it only brings attention to the fact that the website is loading slowly. And that’s a website killer.

Users expect websites to load quickly and efficiently. It’s your job to ensure that the design is not only visually pleasing but also 100 percent functional. If your site is dragging somewhat, you can stop worrying right now because we have seven tips to help you speed up your website with small tweaks to the design. (Make sure to visit each of the websites showcased in the post; they look great and load lightning fast.)

October 1st, 2015 Posted in CSS, HTML, JavaScript

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.

April 15th, 2015 Posted in CSS, Graphics, Inspiration

Coding for the Non-Coder: Designers Can Think Like Developers


There’s been this unwritten divide between designers and developers as long as we have been making websites. People who make things look good versus people who make it work. Those days are over.

Every designer needs to learn how development works in the digital landscape. And every developer should understand basic design theories. Here, we’ll help designers better understand the language of developers, an essential skill in today’s marketplace. (As an added bonus, all of the design examples are created using CSS frameworks.)

April 1st, 2015 Posted in CSS

Drop Caps and Paragraph Text Effects Using CSS3

css3 paragraphs drop cap effects tutorial ux design

Websites have become a medium of sharing information with the entire world. This has transitioned to include media like photos and videos. But text on a webpage is still the predominant choice for web publishing. This would imply that how you structure paragraphs, sentences, and text on the page can greatly impact if a visitor chooses to stick around and read what you have to say.

In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. Legibility and font choices are often directly related to the design itself. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page. Take a peek at my live sample demo to see what we’re trying to build.

March 12th, 2014 Posted in CSS

Building HTML5 and CSS3 Anchor Link Tooltips

tutorial screenshot pure css3 anchor tooltips

There are many tutorials online discussing the idea of CSS-based tooltips. Yet many examples require HTML elements along with the anchor link. Visitors can get a basic tooltip message by using the default title attribute. I’d like to follow this method and update the process just a little bit.

In this tutorial I want to demonstrate how to build CSS3 tooltips which are contextually based on an HTML5 attribute. Using different classes we can incorporate unique color schemes along with CSS3 transition effects. This technique doesn’t require any extra HTML unless you attach the tooltips onto a different element (like a text field). Let’s get started!

February 12th, 2014 Posted in CSS

Coding a Responsive Mini vCard Webpage

tutorial screenshot vcard portfolio layout preview

The use of online portfolios has become a popular choice by many digital artists. The goal would be showcasing yourself and your skills to anyone curious, maybe hiring companies or potential clients. Another simpler way to accomplish this task is to create your own digital vCard page. It’s usually a single page containing a brief resume, your work experience, and some interesting tidbits about yourself.

In this tutorial I want to demonstrate how to build a simple tabbed webpage layout in the style of a simplistic portfolio. We can incorporate jQuery fade effects to switch between the tabs, sticking to a formal responsive design. Take a peek at my live sample demo to see what the final product looks like.

February 5th, 2014 Posted in CSS

Customize Your Own MailChimp E-Mail Newsletter Signup Form

tutorial screenshot mailchimp customize css howto optin form

If you’ve ever signed up for an email subscription you should know about MailChimp. It’s a company which helps webmasters and marketers deliver newsletters and other similar campaigns. They provide some HTML templates to use for signup forms and confirmation pages, but these are so generic that most subscribers are bored of this same interface.

I’d like to demonstrate how to customize the MailChimp signup form into something more unique. Everything is based off the original MailChimp HTML/CSS code and the form submission will use Ajax. It sounds complicated but the whole process is simpler than you might expect. Take a look at my sample demo to get an idea of the full tutorial.

January 22nd, 2014 Posted in CSS
Animating Personal Skill Bars With CSS3 Keyframes

Animating Personal Skill Bars With CSS3 Keyframes

tutorial screenshot css3 keyframes animated skill bars

This design technique is commonly found on personal portfolios or design studio websites. Skill bars represent a level of knowledge related to certain tasks – web design, illustration, branding, character design, you name it! Adding some fancy animations to these skill bars will provide a quicker connection to the viewer.

In this tutorial I want to demonstrate how you can build CSS3 skill bars using keyframe animation. This is also completely possible to run using JavaScript, which would hold up stronger in older legacy web browsers. However CSS3 keyframes are growing in popularity with much wider support these days. Take a peek at my live demo to see the final product.

January 2nd, 2014 Posted in CSS

How to Design Animated Sliding Page Elements With CSS

tutorial screenshot css3 transition animated page elements

There’s a recurring trend of using animated page elements in web design at the moment — as you scroll down the page, items will naturally animate into view. These animations only happen one time, and they only begin once the element is within the browser viewport.

I’ve explored this concept a bit using jQuery, along with CSS3 transitions. In a nutshell, this script checks for special classes on the page and uses jQuery to append a new class for transition effects. Those elements which have already animated are then removed from the event handler. And once there are no more elements to animate, the event handler is completely removed until you refresh the page. Take a look at my demo example to see exactly what we’re creating, and follow along!

December 16th, 2013 Posted in CSS

Building a Hover Detail Panel With CSS3 & jQuery

tutorial hover details product jquery css3 howto preview screenshot

Many online shops and e-commerce websites use a small details panel to offer more information about a product. I remember this from the early days of browsing Template Monster, and it has grown into a common trend for modern web designers.

In this tutorial I’d like to explain how we can duplicate this effect using some very basic code. I’ve provided two different versions, one built on jQuery and another built using CSS3. There are benefits to each one and you can download a copy of my tutorial code to see which you would prefer.

December 5th, 2013 Posted in CSS