cssatoms.com Tutorials

Home » Search Sites » cssatoms.com

Custom CSS Dividers
In this tutorial, we will go over how to create Custom CSS Dividers for your website. A new modern trend in webdesign is to use the tag to layout stacks of content on top of each other. Most of the time these sections are decorated with dividers of different color or shape. In order to get this effect, we must utilize CSS’s :before & :after properties to place content before and after the sections. Our example will look like the image below.

CSS3 Animated Dropdown Menu
In previous tutorials, we have gone over how to create a navigation menu using CSS3. We are going to take it a step further and add a dropdown menu to the mix. We will learn how to create a CSS3 animated dropdown menu using some creatives techniques in css transitions and positioning to display our dropdown.

Multiple Animated Backgrounds Using CSS
In this CSS tutorial, we will go over how to create Multiple Animated Backgrounds Using CSS. A new trend occurring recently in modern web design is animating your backgrounds at different speeds to give a dimensional or parallax feel. There are different ways of accomplishing this technique, but the simplest way is through using CSS Multiple Backgrounds and adjusting their position on hover. Here is what our end result should look like.

Corner Tuck Paper Effect
In this tutorial, we will learn how to create a cool corner tuck paper effect, similar to business card holders in bi-fold folders and resume folders. This may be helpful to help stylize your online resume and show off some of your CSS skills. to do so we will need to utilize the :before and :after pseudo classes and CSS transform property.

Create CSS Gradient Text Effects
In this tutorial we will go over show you how to make a cross browser friendly CSS Gradient Text Effect. We will be incorporating PNG’s and will be laying them over our text to help give the appearance of color transition. This means you will need a photo edit to create a 1px x 31px image with gradients or whatever design you want on it. We will show you three basic examples.

CSS Coverflow using Transforms and Transitions
In this tutorial we will create a CSS Coverflow image display using some of the new properties introduced in CSS3. Many of the properties that we will be dealing with like Perspective and transform: matrix3D deal with manipulating Divs on the X, Y, and Z axis to give it the illusion it is being rotated on a 3D plane. Other properties like Transition and Box-Reflect will help add some nice styles to better the User Experience. Here is an example of what we will be making today.

Creative CSS3 Box Shadows
In this tutorial we will look at some creative approaches in using the CSS3 Box Shadow property. As it’s name implies, Box Shadows let you place a shadow effect behind an element. In most cases the box shadow is used to give depth to web layouts and is purely a web aesthetic. Most of the times it is used to enhance the user experience by adding a glow or something grab the user’s attention and guide them through a process. The possibilities are endless. That is why we will be going over some creative ways to implement the Box Shadow property into your design.

Modern CSS3 Buttons
CSS3 and HTML5 have brought many great features to web design that have made development quicker and easier. With HTML5 introducing more elements, we can save time have to designate and create new classes and ID’s. With CSS3 animations, we do not have to rely on complex Javascripts to animate our elements. In this tutorial we will look at some modern CSS3 button trends that will help with designing your website.

Creating a Parallax Effect in CSS3
In the ancient video game days, although you may have assumed you were actually moving a character around, you probably weren't. Games like Sonic the Hedgehog and Mario World used a technique known as parallax scrolling. This is a method used to achieve a "movement" effect, when really all that is happening is the background is scrolling from right to left. Today, we'll see how to achieve a similar effect using some clever positioning and some CSS3 transitions.

Multiple Borders
Although some may not see a use for having more than one border on a CSS element, it can really be a useful tool in more than one situation. I've seen the effect used most often in image galleries and such, and it can really help elements on your page to stand out a bit more by giving them more depth. Today, we'll see how to implement multiple borders in CSS using some not so common pseudo classes.

Creating CSS3 Pop-Up Dialogue Boxes
This tutorial describes how to create a pop-up dialogue using CSS3. Today, we'll combine a few of the new features we've learned thus far to create a dialogue box that pops up and displays more information about a link in our page. We'll come across some transitions, some shadows, and even some rounded corners.

CSS3 Transitions
A tutorial describing how to use CSS3 transitions. Today, we'll start simple and build a rather cool looking button with a color transition, as well as a background transition.

Creating a Dialogue Bubble in CSS
Today we'll learn how to create a dialogue bubble in CSS, which is a great way to learn to create circles and triangles. Let's get started!

Create a 3D Cube in Pure CSS3
CSS3 comes with a few amazing properties to help us create 3D shapes from nothing but standard HTML Divs. The transform: skew property is the one we are interested in today particularly, and we'll see how this comes into play when creating our 3D cube.

Create a Pure CSS3 Ribbon
A recent trend in modern web design is the use of CSS3 to add depth to normally bland-looking elements. Things like rounded corners and shadows are being used in extremely creative ways, and today we'll see how to create one of the more commonly used effects known as the ribbon technique.

Home » Search Sites » cssatoms.com