CSS posts

How to use CSS3 animation

In CSS3 we have two ways of creating animations: We have CSS Transitions that allow us to create some simple effects for things like hover; and we also have CSS Animations for more complicated effects. We can in fact create pretty much any animation we want using pure CSS and since it works with keyframes it uses a system we are already used to seeing in software like After Effects and Flash. In this article I'll get you through the basics of animating with vanilla CSS.   Browser support ... CSS Animations...
read more

How to use CSS3 transforms

CSS has developed exponentially in a relatively short time. From a language that began with simple style choices, we’ve developed a sophisticated way of laying out content. CSS3 has tons of amazing features, and one of the key aspects is the ability to modify an element using CSS Transforms.   Browser support ... Browser support for transforms is actually fairly extensive; 2D transforms are supported by all major browsers, including IE9 and above; 3D transforms are supported by all modern...
read more

How to easily use Google Fonts with Sass

In this post, we are going to explore open source fonts and CSS pre-processing. I am going to give you an easy way to add web fonts to any website in just a few lines of code. What are Google Fonts? ... Google Fonts makes it quick and easy for everyone to use web fonts. Google Fonts is a collection of open source fonts that are hosted on Google's servers and with their API, it is easy for anyone to integrate their fonts into any web project. Best of all, it's free. (To learn more and explore the hundreds of fonts available,...
read more

How to style file input fields

One area we always have some difficulty when it comes to styling is input fields and in particular the file input. This type of input doesn't usually allow for much customization but with some JavaScript tricks we can create our own file input that matches our website's look and feel.   The HTML ... Using the default HTML element for file input we can't create much so in this article we will create our file input that will be hidden and we will create another button that with some javascript magic will...
read more

15 Online resources for learning web design

There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don't know where to start? Don't worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML,...
read more

How to create a beautiful login form

In this tutorial we will be creating a login form using only CSS3 and HTML5, we will be recreating Orman Clark’s Elegant Login Form. We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements. Next week we will show you how to add a sign up page to your login form so be sure to check back. Step 1: The HTML Markup ... The first...
read more

25 must read HTML, CSS and jQuery books

Everyone knows that in order to create the best websites you need to be up-to-date with the latest trends and developments. We asked experts and long timer designers and developers to share with us their favorite books, and the result is a selection of the very best books that everyone should read. Our list includes 25 books that all developers must read if they want to create great web sites. We cover everything from HTML to CSS, JavaScript and jQuery books. 1. Introducing HTML5 ...    ...
read more

CSS3 Stitched Effect

When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s. Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra "pop" needed to make things stand out and look great without making the site look busy and thrown together. The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the...
read more
Load more