CSS Atoms | CSS3 Tutorials, Tips, and Articles http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Custom CSS Dividers http://cssatoms.com/styling/custom-css-dividers/ http://cssatoms.com/styling/custom-css-dividers/#comments Thu, 01 May 2014 20:03:32 +0000 http://cssatoms.com/?p=1029 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 <section> tag to layout […]

The post Custom CSS Dividers appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
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 <section> 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.

Custom CSS Dividers

Setting Up the Document

First we will need to set up our document. For this example we are keeping it simple and will not make our document responsive. This is merely a demo to show you how to utilize two CSS properties to design your site. We will setup three sections and give each one a class that can be used again in future classes.

<!doctype html>
<html>
<head>
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<section class="bg-style-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a laoreet ipsum. Nulla luctus eleifend leo, eu bibendum velit blandit convallis. Fusce malesuada ultrices nisi at consectetur. Donec at egestas urna. Ut lacinia enim sed nisi consequat, vel tincidunt massa suscipit. Nunc eget faucibus tortor. Suspendisse hendrerit luctus elit, sit amet eleifend lectus venenatis a. Cras nec nunc sodales, accumsan ligula non, imperdiet sapien. Suspendisse sit amet feugiat nulla, ut laoreet metus. Etiam a orci hendrerit, bibendum lectus in, imperdiet ligula. Mauris eu sem facilisis, ultricies nulla id, dignissim velit. Donec ac aliquet risus. Donec quis arcu nunc.</p>
</section>
<section class="bg-style-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a laoreet ipsum. Nulla luctus eleifend leo, eu bibendum velit blandit convallis. Fusce malesuada ultrices nisi at consectetur. Donec at egestas urna. Ut lacinia enim sed nisi consequat, vel tincidunt massa suscipit. Nunc eget faucibus tortor. Suspendisse hendrerit luctus elit, sit amet eleifend lectus venenatis a. Cras nec nunc sodales, accumsan ligula non, imperdiet sapien. Suspendisse sit amet feugiat nulla, ut laoreet metus. Etiam a orci hendrerit, bibendum lectus in, imperdiet ligula. Mauris eu sem facilisis, ultricies nulla id, dignissim velit. Donec ac aliquet risus. Donec quis arcu nunc.</p>
</section>
<section class="bg-style-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a laoreet ipsum. Nulla luctus eleifend leo, eu bibendum velit blandit convallis. Fusce malesuada ultrices nisi at consectetur. Donec at egestas urna. Ut lacinia enim sed nisi consequat, vel tincidunt massa suscipit. Nunc eget faucibus tortor. Suspendisse hendrerit luctus elit, sit amet eleifend lectus venenatis a. Cras nec nunc sodales, accumsan ligula non, imperdiet sapien. Suspendisse sit amet feugiat nulla, ut laoreet metus. Etiam a orci hendrerit, bibendum lectus in, imperdiet ligula. Mauris eu sem facilisis, ultricies nulla id, dignissim velit. Donec ac aliquet risus. Donec quis arcu nunc.</p>
</section>
</body>
</html>

The markup is relatively simple and requires very little structuring. This will make it each to add to our site and make it maintainable in the future.

Adding the CSS

We will break down the CSS into four parts. The first part is simply a foundation for us to work off of. This typically consists of resetting the body and defining common styles. Notice that in the Section CSS properties that we have declared the :before and :after to be absolute positioned so we have control over the elements positions.

body{
    padding:0;
    margin:0;
    font-family:Verdana, Geneva, sans-serif;
    color:white;
    min-width:1200px;
    background-color:#3498db;
}

p{padding:20px;}

section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
    top:100px;
    z-index:999;
}

Section Style 1

This first CSS divider will place a slanted line on the top of your section. This is a good trick to add a splash of color to each section instead of having a dull solid top border. By transforming a darker blue square and laying it behind the section we are able to get this effect.

.bg-style-1 {
    z-index: 1;
    padding-top: 6em;
    padding-bottom: 6em;
    background: #2072a7;
}
 
.bg-style-1::before {
	top: 70px;
    z-index: -1;
    width: 100%;
    height: 20%;
    background: #116094;
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    transform-origin: 3% 0;
    -moz-transform-origin: 3% 0;
    -webkit-transform-origin: 3% 0;
}

Section Style 2

The next style is a rather simple solution and similar to the first style. This time it is the same color as the section, making you believe that the section itself is something other than a square.

.bg-style-2 {
    z-index: 3;
    padding-top: 6em;
    padding-bottom: 6em;
    background: #3498db;
}
 
.bg-style-2::before {
    top: 375px;
    z-index: 2;
    width: 100%;
    height: 15%;
    background: #3498db;
    transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

Section Style 3

Our last example gets a little bit trickier. We will create two shapes using both the :before and :after elements and combine them to make a “V” shape on the top of our section.

.bg-style-3 {
    z-index: 999;
    padding-top: 6em;
    padding-bottom: 6em;
    background: #2072a7;
} 
.bg-style-3::before {
    top: 830px;
    z-index: 2;
    width: 100%;
    height: 8%;
    background: #2072a7;
    transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}
.bg-style-3::after {
    top: 750px;
    z-index: 1;
    width: 100%;
    height: 8%;
    background: #2072a7;
    transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

Wrapping It Up

This technique can be very useful when modernizing the look of your site and trying to create a “Flat UI” look to your site. Test out the different values in these examples and see what other results you can get.

The post Custom CSS Dividers appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/styling/custom-css-dividers/feed/ 0
CSS3 Animated Dropdown Menu http://cssatoms.com/advanced/css3-animated-dropdown-menu/ http://cssatoms.com/advanced/css3-animated-dropdown-menu/#comments Mon, 07 Apr 2014 17:06:58 +0000 http://cssatoms.com/?p=1019 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 post CSS3 Animated Dropdown Menu appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
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.

CSS3 Animated Dropdown Menu

Setting Up the Document

The main idea is that we want our menu to function properly based off the HTML given. There are ways are making the sub menu become hidden (which we highly suggest not doing since search engines will not be able to find your sub category links to other pages) but we find the best way is to have the sub-links positioned somewhere off the screen and will move to the position once hovered. With this in mind we can start making our markup.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>CSS3 dropdown menu</title>
</head>
<body >
    <nav>
        <ul id="navMenu">
            <li><a href="#"> Home</a></li>
            <li><a href="#"> About</a>
                <ul>
                <li><a href="#">Our Company</a></li>
                <li><a href="#">Our Qualifications</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Our Locations</a></li>
                </ul>
            </li>
            <li><a href="#"> Contact</a>
            	<ul>
                <li><a href="#">Our Company</a></li>
                <li><a href="#">Our Qualifications</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Our Locations</a></li>
                </ul>
            </li>
            <li><a href="#"> Newsletter</a>
            	<ul>
                <li><a href="#">Our Company</a></li>
                <li><a href="#">Our Qualifications</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Our Locations</a></li>
                </ul>
            </li>
            <li><a href="#"> Misc </a></li>
        </ul>
    </nav>
</body>
</html>

Our menu is comprised of five main links with three of them having four sub-links. As a way to separate our links and better organization, we gave our first ul and ID so we can control all links after.

Adding the CSS

Now it is time to add a little style to our menu. We will first need to style our first level ul and #navMenu using the direct descendent operator &gtl. This will allow us to choose the first level ul and not the secondary ul that are nested later down the DOM tree. We have also made notes using the /**/ CSS comment to point out certain properties that are very important to making this dropdown menu work.

/*Our Reset*/
body{
margin:0;padding:0;
}

 /*Our Menu*/
#navMenu{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
float:left;
width:100%;
margin:0;
padding:0;
background-color:#03aed9;
z-index:999;/**/
}

#navMenu > li{
float:left;
position:relative;
display:block;
margin:0 auto;
transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
}

#navMenu > li:hover{
background-color:#006882;
}

#navMenu > li > a{
color:#fff;
float:left;
text-decoration:none;
padding:18px 25px;
letter-spacing:.1em;
}

 /*Our DropDown Menu*/
#navMenu ul {
position:absolute;/**/
z-index:-1;/**/
top:-999px;/**/
list-style:none;
padding:0;
margin:0;
background:#006882;
transition:.3s;/**/
-moz-transition:.3s;/**/
-webkit-transition:.3s;/**/
}

#navMenu ul li a{
color:#fff;
text-decoration:none;
display:block;
padding:6px 10px;
font-size:14px;
line-height:2em;
}

#navMenu ul li:hover{
background-color:#00485a;
}

#navMenu li:hover ul {
display:block;/**/
top:55px;
min-width:200px;
}

Our first section uses the > operator to style only the first level ul section. The second section styles target only the dropdown. As you can see everything looks pretty normal until we start styling the dropdown menu. Everything mostly relies on the #navMenu ul selector. Here, you will see the content is absolute positioned off the page. We are able to bring the sub-menu back onto the page by targeting the #navMenu li:hover ul selector by changing the top value.

There are other key factor into play here that are worth pointing out. In order to get the animated effects you see, we utilize the transition property that will tell the computer to move the elements within a given time frame (we chose .3s as our parameter). Another key component in making this dropdown menu work normally is the z-index property. By adjusting the Z-index of the elements, we can place the dropdown menu behind the navigation menu to give the illusion that is is appearing from within the menu. If not, then the sub menu will inherently float above the menu.

Wrapping It Up

If you are for a beginner’s web design solution to creating a drop down menu, you will find a lot of great resources and ideas within this tutorial. Although it is a very effective solution, it does have some draw back regarding Responsive Design and cross browser compatibility. To solve these issues, we suggest looking into a jQuery fallback solution to make the ultimate drop down menu.

The post CSS3 Animated Dropdown Menu appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/advanced/css3-animated-dropdown-menu/feed/ 0
Multiple Animated Backgrounds Using CSS http://cssatoms.com/advanced/multiple-animated-backgrounds-using-css/ http://cssatoms.com/advanced/multiple-animated-backgrounds-using-css/#comments Thu, 27 Mar 2014 15:12:57 +0000 http://cssatoms.com/?p=1014 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 […]

The post Multiple Animated Backgrounds Using CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
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.

Multiple Animated Backgrounds using CSS

Setting up the Background Images

First, let’s start with setting up our code and placing images into the CSS background. In this example we will be utilizing three images: The background sky, a racetrack, and a car. All three will be moving at different speeds. The slowest will be the sky since it is the furthest, the racetrack will move moderately faster, and the car will move the fastest since it is the closest. Here is our set up code:

<!doctype html>
<html>
<head>
<style>
.racetrack{
	background:url('car.png') no-repeat, url('racetrack.png') no-repeat, url('clouds.png') no-repeat ;
	width:300px;
	height:271px;
	margin: 0 auto;
}
</style>
</head>
<body>
<div class="racetrack"></div>
</body>
</html>

With this code we have successfully placed all our images into one div. You may notice that the order in which you place the images (separated by commas) is very important in displaying the layering of each image. It is also important to note that you must state ‘no-reapeat’ in order to display the image once instead of a repeating pattern. Let’s update the CSS to include our initial starting position for each image.

<!doctype html>
<html>
<head>
<style>
.racetrack{
	background:url('car.png') no-repeat left 200px, url('racetrack.png') no-repeat bottom left, url('clouds.png') no-repeat center;
	width:300px;
	height:271px;
	margin: 0 auto;
}
</style>
</head>
<body>
<div class="racetrack"></div>
</body>
</html>

We are now adding to our CSS background short-hand with the coordinates for our image. The CSS background property takes five different values. The most important ones to note is using a px value, a % value, or a general position value (like left top or right bottom). It is also important to note that each one of these values take the X position first and the the Y position second. In our demonstration of our car.png we stated that we wanted it to be placed on the left side of the div and 200px from the top. Now we will look into animating our background images.

Animating the Background Images

In order for our images to animate, we must include an event at which the CSS knows to trigger the animation. We also must add a transition to our .racetrack class to tell the browser how long the animation has to last. By using the :hover pseudo-class, we can store our new background-position coordinates and have the browser update the images when we hover over the div. Let’s update our CSS.

<!doctype html>
<html>
<head>
<style>
.racetrack{
	background:url('car.png') no-repeat left 200px, url('racetrack.png') no-repeat bottom left, url('clouds.png') no-repeat center;
	width:300px;
	height:271px;
	margin: 0 auto;
	transition:background-position .75s;
}

.racetrack:hover{
	background-position: right 200px, bottom right, top right;
}
</style>
</head>
<body>
<div class="racetrack"></div>
</body>
</html>

As you can see, we essentially just replaced our old background-position coordinates with new ones when the div is hovered over. A rather simple and code efficient solution to creating a smooth animation.

Wrapping It Up

This is only one of the few ways in which you can animate your CSS background. If you want to challenge your coding skills, try to use Javascript to time the animation on scroll events. This will give you the most control over your animations and will better the user experience.

The post Multiple Animated Backgrounds Using CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/advanced/multiple-animated-backgrounds-using-css/feed/ 0
Corner Tuck Paper Effect http://cssatoms.com/styling/corner-tuck-paper-effect/ http://cssatoms.com/styling/corner-tuck-paper-effect/#comments Thu, 20 Mar 2014 19:54:45 +0000 http://cssatoms.com/?p=1009 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 […]

The post Corner Tuck Paper Effect appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
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.

Corner Tuck CSS

HTMl structure

First we must build our html structure to tie the CSS we create later to. by looking at the picture you will notice there are four corner tucks. We are only allowed two pseudo classes (:before and :after) per div, so that means we need to create two separate divs with their own classes. These two divs will essentially sit on top of each other and act as placeholders the corner tucks. The white page will just be the content area for text. Here is an example of our HTML.

<!doctype html>
<html>
<head>
<title>Corner Tuck Paper Effect</title>
</head>
<body>
<div class="top-corners">
<div class="bottom-corners">
   <div class="content">Professional</div>
</div>
</div>
</body>
</html>

CSS stylings

The provided css will give you the desired effect to each class

body {
    background: #e6e6e6;
}
.top-corners { 
    background:#f9f7d4;
    height: 700px;
    margin: 50px auto;
    max-width: 600px;
    position: relative;
    width: 80%;
    -webkit-box-shadow: 0 1px 7px rgba(0,0,0,.2);
       -moz-box-shadow: 0 1px 7px rgba(0,0,0,.2);
            box-shadow: 0 1px 7px rgba(0,0,0,.2);
}

.bottom-corners { 
	height:100%;
}

.content { 
    background: #ffffff;
    margin:0 auto;
    padding:10px;
    width: 80%;
    height:100%;
    position:relative;
    box-sizing:border-box;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    letter-spacing:.4em;
    text-transform:uppercase;
    text-align:center;
    font-size:2em;
    -webkit-box-shadow: 0 1px 7px rgba(0,0,0,.2);
       -moz-box-shadow: 0 1px 7px rgba(0,0,0,.2);
            box-shadow: 0 1px 7px rgba(0,0,0,.2);
}

/* Corner Effect */
.top-corners:after,
.top-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    z-index:999;
    -webkit-box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
       -moz-box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
            box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
}
.top-corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.top-corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

.bottom-corners:after,
.bottom-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: 670px;
    width: 100px;
    z-index:999;
    -webkit-box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
       -moz-box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
            box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
}
.bottom-corners:after {
    left: -50px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
.bottom-corners:before {
    right: -50px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

Many of the stylings that you see are very straight forward. It is important to note that you must designate a relative position for the containing divs. This will help accurately place the corner tucks when we use absolute position to place the corner tucks. It is also important to point out that a z-index of 999 or greater should be placed in the .top-corners and .bottom-corners CSS to ensure that the objects stay above the containing divs. The CSS Transform is very straight forward and allows you to rotate objects (or styled divs in this case) to any degree. The box-shadow effect will help give the illusion that the divs below are tucked away.

Wrapping It Up

All together you document should look like the example below.

<!doctype html>
<html>
<head>
<title>Corner Tuck Paper Effect</title>
<style>
body {
    background: #e6e6e6;
}

.top-corners { 
    background:#f9f7d4;
    height: 700px;
    margin: 50px auto;
    max-width: 600px;
    position: relative;
    width: 80%;
	-webkit-box-shadow: 0 1px 7px rgba(0,0,0,.2);
       -moz-box-shadow: 0 1px 7px rgba(0,0,0,.2);
            box-shadow: 0 1px 7px rgba(0,0,0,.2);
}

.bottom-corners { 
	height:100%;
}

.content { 
    background: #ffffff;
	margin:0 auto;
	padding:10px;
    width: 80%;
	height:100%;
	position:relative;
	box-sizing:border-box;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	letter-spacing:.4em;
	text-transform:uppercase;
	text-align:center;
	font-size:2em;
	-webkit-box-shadow: 0 1px 7px rgba(0,0,0,.2);
       -moz-box-shadow: 0 1px 7px rgba(0,0,0,.2);
            box-shadow: 0 1px 7px rgba(0,0,0,.2);
}

/* Corner Effect */
.top-corners:after,
.top-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
	z-index:999;
    -webkit-box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
       -moz-box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
            box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
}
.top-corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.top-corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

.bottom-corners:after,
.bottom-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: 670px;
    width: 100px;
	z-index:999;
    -webkit-box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
       -moz-box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
            box-shadow: 0 5px 10px -7px rgba(0,0,0,.5);
}
.bottom-corners:after {
    left: -50px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
.bottom-corners:before {
    right: -50px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}
</style>
</head>

<body>
<div class="top-corners">
<div class="bottom-corners">
   <div class="content">Professional</div>
</div>
</div>
</body>
</html>

This is a very effective technique to give your website a realistic or skueomorphic design approach. You can take it a step further by adding texture background images to the paper and site to further emphasis you design look.

The post Corner Tuck Paper Effect appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/styling/corner-tuck-paper-effect/feed/ 0
Create an Animated SVG Icon http://cssatoms.com/advanced/create-animated-svg-icon/ http://cssatoms.com/advanced/create-animated-svg-icon/#comments Wed, 26 Feb 2014 21:29:12 +0000 http://cssatoms.com/?p=998 In this CSS Atoms tutorial, we are going to teach you how to create Scalable Vector Graphics (also known as SVG) and apply some advanced css tricks to make it […]

The post Create an Animated SVG Icon appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
In this CSS Atoms tutorial, we are going to teach you how to create Scalable Vector Graphics (also known as SVG) and apply some advanced css tricks to make it animate. Why use SVG’s? Plain and simple. They are scalable and add very little data to the overall file size. Unlike images, SVG’s can resize to any width and height without loosing clarity or rasterizing. Though they may not be as detailed as most images, they serve a good purpose as icons and can replace unwanted images that are used as icons.

There is a downside though. SVG is not supported by all browsers (notably IE and older versions of browsers), so take this lesson as a learning session and avoid using svg’s unless you plan to have a fallback that will replace the svg’s with an image.

Here is an example of what we will be working on.

Animated SVG Icons

Creating an SVG icon

First we must go over how to create an SVG. Yes we can code the icon from scratch and use a very long and daunting revision process but there is a much easier way. It is best and highly recommended that you use a Vector Editing program such as Adobe’s Illustrator (which we will be using in this lesson) or Inkscape. Both make it easy to create detailed vectors and easily retrieve the HTML code necessary to display the icon on a webpage.

If you do not have access to these programs, that’s OK. Your trusted source Google provides a nice SVG editor on the web at http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html. Here you can make edits and get the SVG code necessary to complete this tutorial. You can also find any icon in SVG format on the web, open it in a text editor program like Notepade or Text Edit to retrieve the SVG HTML code.

Step 1

Let’s start by creating a simple one color icon in Illustrator. Make sure that the graphic is one solid shape and not just grouped together. Now go to Save As, name it Icon and under Save as type select SVG and click Save. Another window will pop up similar to the image below.

Animated SVG Icons 2

Make sure the Type is SVG and click the SVG Code button on the bottom. A webpage will open up display the HTML code you will need to display the SVG on the web page. Go ahead and copy/paste only the code from <svg> to </svg>. You can use the code provided below to help setup your html document and get the Atoms Network icon for you to practice with.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Icon Tutorial</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<path fill="#E1B224" d="M308.682,151.89c-9.006-20.411-32.854-29.657-53.266-20.651c-2.262,0.998-4.377,2.187-6.354,3.524
	c-11.747-8.808-25.817-14.419-40.815-15.932c-0.557-2.281-1.309-4.546-2.289-6.77c-9.005-20.412-32.854-29.657-53.265-20.651
	c-20.412,9.006-29.657,32.853-20.651,53.265c0.904,2.049,1.964,3.979,3.148,5.796c-4.621,6.06-8.427,12.798-11.258,20.101
	c-2.724,7.026-4.422,14.275-5.147,21.575c-2.155,0.548-4.294,1.271-6.396,2.199c-20.411,9.006-29.658,32.854-20.652,53.265
	s32.854,29.657,53.265,20.651c2.022-0.893,3.931-1.936,5.727-3.103c12.017,9.113,26.504,14.856,41.939,16.269
	c0.541,2.069,1.246,4.124,2.137,6.144c9.006,20.411,32.854,29.657,53.265,20.652c20.411-9.006,29.658-32.854,20.652-53.266
	c-0.935-2.118-2.037-4.108-3.271-5.978c9.021-12.105,14.557-26.526,15.937-41.566c2.238-0.554,4.461-1.296,6.644-2.259
	C308.44,196.149,317.688,172.301,308.682,151.89z M260.933,243.308c-11.423-11.915-29.503-16.049-45.479-9
	c-16.075,7.092-25.217,23.391-23.979,39.967c-12.805-1.49-24.831-6.256-35.035-13.607c12.074-11.41,16.301-29.603,9.212-45.67
	c-7.057-15.994-23.227-25.129-39.716-24.002c0.754-6.054,2.259-12.057,4.521-17.893c2.367-6.104,5.48-11.774,9.223-16.938
	c11.413,12.037,29.579,16.242,45.625,9.162c15.868-7.001,24.984-22.974,24.026-39.327c12.451,1.561,24.15,6.213,34.124,13.335
	c-11.674,11.437-15.677,29.334-8.69,45.169c7.021,15.914,23.063,25.038,39.465,24.021
	C272.786,221.038,268.205,233.029,260.933,243.308z"/>
</svg>
</body>
</html>

Save and preview the html in your browser and you will see a nice icon similar to the one below.

Animated SVG Icons 2

You’re probably thinking “Wow that’s a lot of numbers”. To put it the simiplest way possible, each integer is a plot point and direction the draws the line on the web page. The more angles and points you have, the longer the html will be.

Step 2

Now that we have our icon and HTML in place, its time to use CSS to animate our icon. We have two options to animate our icon, we can use Transition and the Animate property. Transition will not give us enough control this time to spin and more our icon, especially since we want to repeat this animation an infinite amount of times (just for fun). As a short reminder of how the Animate property works, we must create Keyframes that will act as goals for our icon to accomplish (ex. halfway through our animation time: move 20 pixels left while rotating). We must also give our animation a name which we can then call it inside of our ID’s properties. Here is the CSS animation to make our icon rotate 2000 degrees while moving right 800px.

<style>
@keyframes iconic{
    0%{
        left:0px;
        transform:rotate(0deg);
    }
    100%{
        left: 800px;
        transform:rotate(2000deg);
    }
}
@-webkit-keyframes iconic{
    0%{
        left:0px;
        -webkit-transform:rotate(0deg);
    }
    100%{
        left: 800px;
        -webkit-transform:rotate(2000deg);
    }
}
@-moz-keyframes iconic{
    0%{
        left:0px;
        -moz-transform:rotate(0deg);
    }
    100%{
        left: 800px;
        -moz-transform:rotate(2000deg);
    }
}
#icon {
    position:relative;
    animation: iconic 2s ease-in-out infinite alternate;
    -moz-animation: iconic 2s ease-in-out infinite alternate;
    -webkit-animation: iconic 2s ease-in-out infinite alternate;
}
</style>

To link the animation to the SVG icon, simply add id=icon inside of the <svg> tag. Save the document and view it in your browser and you will see your scalable SVG icon in action.

Here are a few things to take notes on in this bit of code. We chose to name the Keyframe animation “iconic” which is called inside of the #icon selector. We have to “breakpoints in our keyframe animation. Animating an object must have a point A and point B. In this case point A is 0% (the beginning of the animation) and point B is 100% (the ending of the animation). Inside each keyframe breakpoints are set rules that the icon will follow. Inside of the #icon ID selector are the time frame and animation repetitions. You can control the speed and paramaters of the animation and we suggest checking out W3 for more options.

Wrapping It Up

Your final document should look like the code snippet below.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Icon Tutorial</title>
<style>

@keyframes iconic{
    0%{
        left:0px;
        transform:rotate(0deg);
    }
    100%{
        left: 800px;
        transform:rotate(2000deg);
    }
}
@-webkit-keyframes iconic{
    0%{
        left:0px;
        -webkit-transform:rotate(0deg);
    }
    100%{
        left: 800px;
        -webkit-transform:rotate(2000deg);
    }
}
@-moz-keyframes iconic{
    0%{
        left:0px;
        -moz-transform:rotate(0deg);
    }
    100%{
        left: 800px;
        -moz-transform:rotate(2000deg);
    }
}
 
#icon {
    position:relative;
    animation: iconic 2s ease-in-out infinite alternate;
    -moz-animation: iconic 2s ease-in-out infinite alternate;
    -webkit-animation: iconic 2s ease-in-out infinite alternate;
}

</style>
</head>
<body>
<svg id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<path fill="#E1B224" d="M308.682,151.89c-9.006-20.411-32.854-29.657-53.266-20.651c-2.262,0.998-4.377,2.187-6.354,3.524
	c-11.747-8.808-25.817-14.419-40.815-15.932c-0.557-2.281-1.309-4.546-2.289-6.77c-9.005-20.412-32.854-29.657-53.265-20.651
	c-20.412,9.006-29.657,32.853-20.651,53.265c0.904,2.049,1.964,3.979,3.148,5.796c-4.621,6.06-8.427,12.798-11.258,20.101
	c-2.724,7.026-4.422,14.275-5.147,21.575c-2.155,0.548-4.294,1.271-6.396,2.199c-20.411,9.006-29.658,32.854-20.652,53.265
	s32.854,29.657,53.265,20.651c2.022-0.893,3.931-1.936,5.727-3.103c12.017,9.113,26.504,14.856,41.939,16.269
	c0.541,2.069,1.246,4.124,2.137,6.144c9.006,20.411,32.854,29.657,53.265,20.652c20.411-9.006,29.658-32.854,20.652-53.266
	c-0.935-2.118-2.037-4.108-3.271-5.978c9.021-12.105,14.557-26.526,15.937-41.566c2.238-0.554,4.461-1.296,6.644-2.259
	C308.44,196.149,317.688,172.301,308.682,151.89z M260.933,243.308c-11.423-11.915-29.503-16.049-45.479-9
	c-16.075,7.092-25.217,23.391-23.979,39.967c-12.805-1.49-24.831-6.256-35.035-13.607c12.074-11.41,16.301-29.603,9.212-45.67
	c-7.057-15.994-23.227-25.129-39.716-24.002c0.754-6.054,2.259-12.057,4.521-17.893c2.367-6.104,5.48-11.774,9.223-16.938
	c11.413,12.037,29.579,16.242,45.625,9.162c15.868-7.001,24.984-22.974,24.026-39.327c12.451,1.561,24.15,6.213,34.124,13.335
	c-11.674,11.437-15.677,29.334-8.69,45.169c7.021,15.914,23.063,25.038,39.465,24.021
	C272.786,221.038,268.205,233.029,260.933,243.308z"/>
</svg>
</body>
</html>

Although SVG objects are not fully accepted yet by all web browsers, it is important to get a head start and learn how to use them now. They are a very beneficial tool and very easy to implement. SVG’s are a very popular trend now and when combined with animations, you have a very flexible and easy tool to really impress clients and users.

Download Source Files

The post Create an Animated SVG Icon appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/advanced/create-animated-svg-icon/feed/ 0
Create CSS Gradient Text Effects http://cssatoms.com/styling/create-css-gradient-text-effects/ http://cssatoms.com/styling/create-css-gradient-text-effects/#comments Tue, 31 Dec 2013 20:57:32 +0000 http://cssatoms.com/?p=991 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 […]

The post Create CSS Gradient Text Effects appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
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.

Css3 Gradient Text effects

White Gradient Text Effect

Let’s start by creating the markup and css for the White Gradient text.

<!doctype html>
<html>
<head>
<style>
*{
	margin:0;
	padding:0;
}
body{
	background-color:#fff;
}
h1 {
  font-family:Arial, Helvetica, sans-serif;
  position: relative;
  color: #464646;
}
h1 span {
  background: url(white.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}
</style>
</head>

<body>
<h1><span></span>White Gradient Text</h1>
</body>
</html>

The gradient is laid over the H1 by using an empty <span> tag and giving it a background image. This background-image is absolute positioned since it is contained within the H1 which has a relative position. We must also designate a width and height for the span in order for it to display the background image along the x-axis.

Metal Gradient Text Effect

To give the appearance of a “Glossy Matte” finish on the text, we will change the font color to white, change the gradient in our photo editor (as well as flip it) and place it against a black background.

Let’s Update the CSS

*{
	margin:0;
	padding:0;
}
body{
	background-color:#fff;
}
h1 {
  font-family:Arial, Helvetica, sans-serif;
  position: relative;
  color: #464646;
}
.black {
  font-family:Arial, Helvetica, sans-serif;
  position: relative;
  color: #fff;
  background-color:black;
}
h1 span {
  background: url(white.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}
#metal{
  background: url(metal.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

Let’s Update the HTML

<h1><span></span>White Gradient Text</h1>
<h1 class="black"><span id="metal"></span>Metallic Gradient Text</h1>

We designated new CSS ID and a class that can be used for our next example. With the new ID we can switch out the white.png gradient with the metal.png we want to use now.

Stripe Gradient Text Effect

Now we are going to get creative with our overlay and show that by matching the right colors you can lay pretty much any pattern over.

Let’s Update the CSS

*{
	margin:0;
	padding:0;
}
body{
	background-color:#fff;
}
h1 {
  font-family:Arial, Helvetica, sans-serif;
  position: relative;
  color: #464646;
}

.black {
  font-family:Arial, Helvetica, sans-serif;
  position: relative;
  color: #fff;
  background-color:black;
}
h1 span {
  background: url(white.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}
#stripe{
  background: url(stripe.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

#metal{
  background: url(metal.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

Let’s Update the HTML

<h1><span></span>White Gradient Text</h1>
<h1 class="black"><span id="metal"></span>Metallic Gradient Text</h1>
<h1 class="black"><span id="stripe"></span>Stripe Gradient Text</h1>

As long as the pattern matches the background color you can place any pattern over your text and rest easy knowing that it works on most major browsers (IE6 does not accept PNG24 sorry…)

Wrapping it Up

Gradients are a great way to add dimension to your web page and add some originality. Be sure that when you use this technique that the <span> element will not overlay any other elements. This could cause your gradient image to overlap other parts of your page. Keep practicing and get creative!

Download Source Files

The post Create CSS Gradient Text Effects appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/styling/create-css-gradient-text-effects/feed/ 0
CSS Coverflow using Transforms and Transitions http://cssatoms.com/styling/css-coverflow-using-transforms-transitions/ http://cssatoms.com/styling/css-coverflow-using-transforms-transitions/#comments Fri, 27 Dec 2013 21:11:51 +0000 http://cssatoms.com/?p=981 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 […]

The post CSS Coverflow using Transforms and Transitions appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
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.

long shadow css3

The HTML Markup

We will start by creating the HTML markup and the basic layout of our project. We will have five images wrapped within a centered div so we can contain our images.

<!doctype html>
<html>
<head>
<title>Coverflow using CSS Transformations and Transitions</title>
<style>
body{
	background-color:#333;
}

#container{
	text-align: center;
	overflow: visible;
	position: relative;
	margin: 20px auto;
	height: 300px;
	width: 960px;
}

img{
	position: relative;
	top: 150px;
	width: 150px;
	height: 150px; 
}
</style>
</head>

<body>
<div id="container">
<img src="display.jpg" width="150" height="150">
<img src="display.jpg" width="150" height="150">
<img src="display.jpg" width="150" height="150">
<img src="display.jpg" width="150" height="150">
<img src="display.jpg" width="150" height="150">
</div>
</body>
</html>

Box-Reflect

To add some visual flare, we will use the Box-Reflect property. Although this only works in Webkit browsers (at this point only Chrome and Safari), it is still a nice CSS3 style to learn. We designate its placement as below, the offset will be 0px from the image, and use a gradient to mask the reflection and have it fade away most of the reflected image. Update the img selector using the code below.

img{
	position: relative;
	top: 150px;
	width: 150px;
	height: 150px; 
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(rgba(255,255,255,0.2))); 
}

Transition and Transform

Next, we will use the transform: matrix3D to adjust the X,Y,Z axis and z-value (Z-value is how close or how far the object is from you). In total there will be 16 numbers that you can adjust. The X,Y,Z and Z-value each get a row and a column that makes it a 4 x 4 grid, thus giving you 16 values. The default values will look something like this:

[1,0,0,0]
[0,1,0,0]
[0,0,1,0]
[0,0,0,1]

After adjusting these values you will be able to see the DIVs transform. To make your images have smooth animations, you will need to add the Transition property and adjust its speed (we chose .04s). Update the img selector CSS code with the code provided below.

img{
	-webkit-transition-duration: 0.4s;
	position: relative;
	-webkit-transform: matrix3d(
	0.7109, 0, -0.703279, 0, 
	0, 1, 0, 0, 
	0.703279, 0, 0.7109, 0, 
	0, 0, 0, 1);
	top: 150px;
	width: 150px;
	height: 150px;
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(rgba(255,255,255,0.2)));  
}

A Little Perspective

Next we will add the Perspective property to the #container ID. The perspective property defines how many pixels a 3D element is placed from the view and allows you to change the perspective on how an element is viewed. The Perspective property is strange. Even though we apply it to the #container, the child element (the img in this case) gets the perspective view. The perspective is measured by pixels. The smaller the pixel value, the more exaggerated. The more the pixel value the less exaggerated the perspective is.

We must also designate the origin which helps defines where a 3D element is in relation to the x and y axis. When we set it to 50% 50%, we are viewing it right in the middle with no shift.

Update your #container CSS with the code below to see the results.

#container{
	perspective: 800px;
	-webkit-perspective: 800px;
	perspective-origin: 50% 50%;
	-webkit-perspective-origin: 50% 50%;
	text-align: center;
	overflow: visible;
	position: relative;
	margin: 20px auto;
	height: 300px;
	width: 960px;
}

The Hover State

The last step is to add the ending animation point and the action that triggers it. This can easily be done by adding a :hover state to the images so when the user hovers over the image, it will toggle an animation. By adding the img:hover line of code AFTER the img selector and changing the values a little on the transform: matrix3D, we will now have a complete animation and an event that will trigger the animation.

That is all we need to create a CSS3 coverflow. Your code should now look similar to the code block below.

<!doctype html>
<html>
<head>
<title>Coverflow using CSS Transformations and Transitions</title>
<style>
body{
	background-color:#333;
}

.container{
	perspective: 800px;
	-webkit-perspective: 800px;
	perspective-origin: 50% 50%;
	-webkit-perspective-origin: 50% 50%;
	text-align: center;
	overflow: visible;
	position: relative;
	margin: 20px auto;
	height: 300px;
	width: 960px;
}

img{
	-webkit-transition-duration: 0.4s;
	position: relative;
	-webkit-transform: matrix3d(
	0.7109, 0, -0.703279, 0, 
	0, 1, 0, 0, 
	0.703279, 0, 0.7109, 0, 
	0, 0, 0, 1);
	top: 150px;
	width: 150px;
	height: 150px;
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(rgba(255,255,255,0.2)));  
}

img:hover{

	-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 150, 1);
	z-index:90;
}
</style>
</head>

<body>
<div class="container">
<img src="display.jpg" width="150" height="150">
<img src="display.jpg" width="150" height="150">
<img src="display.jpg" width="150" height="150">
<img src="display.jpg" width="150" height="150">
<img src="display.jpg" width="150" height="150">
</div>
</body>
</html>

Wrapping it Up

This tutorial is a great exercise in what to expect with future CSS updates. Although it may not be a good idea to implement everything from this tutorial in your final release, it is still worthwhile to learn these techniques as they will eventually become the standard. If you want to practice a little more and see how the perspective property works, visit the W3 editor to test out the different values.

Download Source Files

The post CSS Coverflow using Transforms and Transitions appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/styling/css-coverflow-using-transforms-transitions/feed/ 0
Creative CSS3 Box Shadows http://cssatoms.com/styling/creative-css3-box-shadows/ http://cssatoms.com/styling/creative-css3-box-shadows/#comments Thu, 12 Dec 2013 20:49:56 +0000 http://cssatoms.com/?p=970 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 […]

The post Creative CSS3 Box Shadows appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
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.

Long Shadow

long shadow css3

This effect is a recent trend in modern web design. It may not work in every case, but it is definitely a creative way of using multiple box shadows over make it look like a long shadow is being casted

<!doctype html>
<html>
<head>
<style>
/*Long Shadow*/
.ls-wrap{
  width: 98%;
  background: #e0e0e0;
}
.long-shadow{
  width: 100%;
  height: 3px;
  background-color:#fff;
  border:1px solid #EEE;
  box-shadow: 0 2px rgba(0,0,0,0.125), 32px 32px rgba(251,251,251,0), 31px 31px rgba(251,251,251,0), 30px 30px rgba(249,249,249,0.063), 29px 29px rgba(249,249,249,0.063), 28px 28px rgba(247,247,247,0.125), 27px 27px rgba(247,247,247,0.125), 26px 26px rgba(245,245,245,0.188), 25px 25px rgba(245,245,245,0.188), 24px 24px rgba(243,243,243,0.25), 23px 23px rgba(243,243,243,0.25), 22px 22px rgba(241,241,241,0.313), 21px 21px rgba(241,241,241,0.313), 20px 20px rgba(239,239,239,0.375), 19px 19px rgba(239,239,239,0.375), 18px 18px rgba(237,237,237,0.438), 17px 17px rgba(237,237,237,0.438), 16px 16px rgba(235,235,235,0.5), 15px 15px rgba(235,235,235,0.5), 14px 14px rgba(233,233,233,0.563), 13px 13px rgba(233,233,233,0.563), 12px 12px rgba(231,231,231,0.625), 11px 11px rgba(231,231,231,0.625), 10px 10px rgba(229,229,229,0.688), 9px 9px rgba(229,229,229,0.688), 8px 8px rgba(227,227,227,0.75), 7px 7px rgba(227,227,227,0.75), 6px 6px rgba(225,225,225,0.813), 5px 5px rgba(225,225,225,0.813), 4px 4px rgba(223,223,223,0.875), 3px 3px rgba(223,223,223,0.875), 2px 2px rgba(221,221,221,0.938), 1px 1px rgba(221,221,221,0.938);
}
</style>
</head>
<body>
<h3>Long Shadow</h3>
<div class="ls-wrap">
  <div class="long-shadow"></div>
</div>
</body>
</html>

A wrapping div is used in this case to help contain and position the element with the long-shadow class. The effect is done by adding multiple box shadows, one after the other going from dark to light or fade into the background color. Finding the right color and position of each shadow takes time but it is a very nice detailed effect to give your design the extra “pop” it needs.

Nav Bar Shadow

nav bar shadow

In many websites, you may have noticed that as you scroll, the top navigation bar follows you down the page. To give the illusion that the nav bar is floating and to help the user to distinguish the floating bar from the rest of the page, you can implement the box shadow technique.

<!doctype html>
<html>
<head>
<style>
/*Nav Bar Shadow*/
.nav-shadow{
position:fixed;
height: 60px;
width: 100%;
background: #6CF;
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index:99;
</style>
</head>
<body>
<h3>Nav Bar Shadow</h3>
<div class="nav-shadow"></div>
</body>
</html>

Two new properties are very important in order to have your nav bar “float” over you page. the first is the position:fixed anchor your element to one spot on the window no matter where you scroll. Second is the z-index property. If you are not familiar with the z-index property, the easiest way to explain it is that it helps you layer and organize your elements on top of each other.

Glossy Button

glossy button css3

In most cases you may have simple “flat” buttons for your website. For many designers, they like to detail and add depth to their layouts. This calls for gradient colors, text-shadows and (you guessed it) box-shadows. A neat trick though is that you can use box shadows to add highlights to your elements to give them a “glossy” look.

<!doctype html>
<html>
<head>
<style>
/*Button*/
.button {
color: #fff;
width: 190px;
padding:10px 20px;
cursor: pointer;
font-size:1.5em;
font-weight: bold;
border-width:1px;
border-color:#0053a6 #0053a6 #000;
border-radius: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #6891e7;
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
}

.button:hover {
border-color: #002d59 #002d59 #000;
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
}

.button:active {
border-color: #000 #002d59 #002d59;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
}
</style>
</head>
<body>
<h3>Glossy Button</h3>
<div class="button">Click Me</div>
</body>
</html>

In this example, we have multiple background gradients to help round our button. Gradients are great, but if you want your button to really stand out it needs a lighting source. By setting the box-shadow to inset, you can place the box-shadow inside the element instead of the outside. You can now control the color and range of the inner-shadow to add a sharp, crisp highlight to your button.

Inset Box

inset box css3

Our last example will use the same inset technique we learned about. This time, instead of making the element pop off the page, we are going to make it press into the page.

<!doctype html>
<html>
<head>
<style>
/*Inset Box*/
.inset-box {
width: auto;
background: #f5f5f5;
padding: 20px 20px 10px;
margin: 10px 0 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<h3>Inset Box</h3>
<div class="inset-box"><p>Hello World</p></div>
</body>
</html>

This technique has to use a little design theory to it. If something is pushed in, it will look darker as if it were going down. We also need to add an inner-shadow and a slightly darker border to help separate the element a little from the page.

Wrapping it Up

We provided four examples of how to use the box-shadow effect. The box-shadow is a great tool to help bring dimension and style to your web designs. As you can see, in order to get more detail in your elements, you need to add more box-shadows and gradients. Try practicing combining and adding these two techniques and see what you come up with.

Download Source Files

The post Creative CSS3 Box Shadows appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/styling/creative-css3-box-shadows/feed/ 0
Modern CSS3 Buttons http://cssatoms.com/styling/modern-css3-buttons/ http://cssatoms.com/styling/modern-css3-buttons/#comments Wed, 27 Nov 2013 18:41:08 +0000 http://cssatoms.com/?p=955 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 […]

The post Modern CSS3 Buttons appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
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.

css3-buttons

The Markup

We’ll start by writing out the HTML markup. We will create six different buttons with a :hover and :active state. We will wrap the <button> in the link <a> tag. This will make the whole button clickable.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Modern CSS3 Button Styles</title>
		<link rel="stylesheet" type="text/css" href="default.css" />
	</head>
	<body>
		<section>
			<p>
				<a href="#"><button class="btn btn-blue btn-a">Button A</button></a>
				<a href="#"><button class="btn btn-blue btn-b">Button B</button></a>
			</p>
			<p>
				<a href="#"><button class="btn btn-blue btn-c">Button C</button></a>
				<a href="#"><button class="btn btn-blue btn-d">Button D</button></a>
			</p>
			<p>
				<a href="#"><button class="btn btn-blue btn-yes">Yes</button></a>
				<a href="#"><button class="btn btn-blue btn-no">No</button></a>
			</p>
		</section>
	</body>
</html>

We kept this example simple by containing our buttons within a <section> tag and can control the spacing of each button by changing the properties within the <p> tag.

CSS3

Now that we have our markup we can start styling our code with some CSS. First we will need to reset some properties so our buttons will be easier to work with

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html {padding: 0; margin: 0; height: 100%;font-family:Arial, Helvetica, sans-serif;}

body {
	font-family:Arial, Helvetica, sans-serif;
	color: #89867e;
	background-color-color: #c0c0c0;
}

a{
	text-decoration:none;
	color:#fff;
}

section {
	margin: 0 auto;
	padding: 5em 3em;
	text-align: center;
	color: #fff;
}

section p {
	margin: 0;
	padding: 1em;
}

You may be unfamiliar with some of the values used in the coding. Here is a brief overview:

The “*” – The * targets every element in the HTML language. Since we will also be using the :before and :after pseudo class we must specify the *:before and *:after as well to add the same values as well.

box-sizing: border-box – Box-sizing lets you adjust the origin of the padding and the margin. By default the Padding and Margin are contained inside of a element but by using the border-box value we can adjust the Padding and Margin on the outside of an element.

em – We use em as a value, not like the typical <em> tag. 1 em is equal to the current font size, so if your font size is 12pt then 1 em equals 12pt etc.

Next we will set up a standard style button to work off of.

/* Basic Button Style*/
.btn {
	border: none;
	font-family:Arial, Helvetica, sans-serif;
	background-color: none;
	cursor: pointer;
	padding: 15px 60px;
	display: inline-block;
	margin: 10px 30px;
	letter-spacing: 2px;
	font-weight:700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
}

.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
}

/* Blue Buttons */
.btn-blue {
	background-color: #417ab0;
	color: #fff;
	box-shadow: 0 6px #2a557e;
}

We’ve placed transitions to add a subtle animation that will give our buttons some nice added effects. You can adjust the speed of the animation but changing the seconds. Most button animations look better when they are fast and clean since the user spends very little time viewing the button animation once it is clicked. If you would like to change the default color of your button or have more than one colored button, you can make the changes on the .btn-blue class or duplicate the class and change the name (ex. for a red button copy the class and change to .btn-red and change the background-color to red).

Button A

Button A is a standard effect mimicking the animation of a button being pushed in once clicked.

/* Button a */
.btn-a:hover {
	box-shadow: 0 4px #2a557e;
	top: 2px;
}

.btn-a:active {
	box-shadow: 0 0 #2a557e;
	top: 6px;
}

Button B

Button B has a more dramatic click effect by moving up on hover and a more noticeable animation when clicked.

/* Button b */
.btn-b:hover {
	box-shadow: 0 8px #2a557e;
	top: -2px;
}

.btn-b:active {
	box-shadow: 0 0 #2a557e;
	top: 6px;
}

Button C

Button C mimics the the shrinking effect by adding a larger border-radius when clicked.

/* Button c */
.btn-c{
	border-radius:5px;
}

.btn-c:hover {
	box-shadow: 0 4px #2a557e;
	top: 2px;
}

.btn-c:active {
	border-radius:10px;
	box-shadow: 0 0 #2a557e;
	top: 6px;
}

Button D

Button D is similar to the popular capsule button with a noticeable animation.

/* Button d */
.btn-d {
	border-radius: 20px;
}

.btn-d:hover {
	box-shadow: 0 4px #2a557e;
	top: 2px;
}

.btn-d:active {
	box-shadow: 0 0 #2a557e;
	top: 6px;
}

Button Yes

This is a more of a circular button that will work best if you have multiple buttons in one row.

/* Button yes */
.btn-yes {
	border-radius: 50%;
	width: 60px;
	height: 60px;
	padding: 0;
}

.btn-yes:hover {
	box-shadow: 0 4px #2a557e;
	top: 2px;
}

.btn-yes:active {
	box-shadow: 0 0 #2a557e;
	top: 6px;
	background-color: #2a557e;
}

Button No

This circle button has a more exaggerated animation.

/* Button no */
.btn-no {
	border-radius: 50%;
	width: 60px;
	height: 60px;
	padding: 0;
}

.btn-no:hover {
	box-shadow: 0 8px #2a557e;
	top: -2px;
}

.btn-no:active {
	box-shadow: 0 0 #2a557e;
	top: 6px;
	background-color: #2a557e;
}

Wrapping it Up

By using simple values as border-radius, :hover, :active we are able to create very unique and stylized buttons. You can get more creative by adding borders, text-shadows, and gradients to your buttons to give it more personality and style. Try it out and find out which one works best for your website.

Download Source Files

The post Modern CSS3 Buttons appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/styling/modern-css3-buttons/feed/ 0
The Basics of CSS3 Media Queries http://cssatoms.com/advanced/basics-css3-media-queries/ http://cssatoms.com/advanced/basics-css3-media-queries/#comments Tue, 08 Oct 2013 19:27:03 +0000 http://cssatoms.com/?p=926 Media Queries serve the purpose of expanding the functionality of CSS2 media types. In the past, CSS2 media types were predefined and not very flexible, some examples of these types […]

The post The Basics of CSS3 Media Queries appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
Media Queries serve the purpose of expanding the functionality of CSS2 media types. In the past, CSS2 media types were predefined and not very flexible, some examples of these types are screen and print.

With new CSS3 Media Queries your css document can specify css rules based on variables specific to the user’s device.

The @media selector

Like the Media Type, the basis of all Media Queries in CSS3 is the @media attribute.

Example of previous usage of the @media attribute:

@media screen {
/* define your rules here */
}

@media print {
/* define your rules here */
}

These worked well, but they lack the flexibility needed for today’s wide array of screen sizes.

Modern usage of CSS3 Media Queries:

@media all (min-width: 768px) {
body { background-color:gray; }
}

body {
background-color:white;
}

In the above example we are making our body element’s background color gray. This rule only appears when the browser window’s width is equal to or greater than 768px. So if you viewed our site on an iPad the background would be gray. If you viewed it on an iPhone or desktop, it would be white. The media type all selects every media type available.

If we wanted this rule to exclusively style handheld media types:

@media handheld (min-width:768px) {
body {background-color:gray;}
}

body {
background-color:white;
}

Types

While HTML4 had set types of media which are still valid: aural, braille, handheld, print, projection, screen, tty, and tv. HTML5 doesn’t have a set amount of media types, and new ones can be created as needed.

The syntax for using types is as follows:

@media screen {
/*some rules*/
}

Dimensions

You can use height and width to query the dimensions of the current browser. You can use a min or max prefix on these dimensions which allows for more flexibility for your queries.

@media (min-width: 1200px) {
/* some rules */
}

You can also use device-width and device-height which specifies the screen size of the user’s device. Min and max are also available as prefixes on these dimensions.

@media (min-device-width: 640px) {
/* some rules */
}

Orientation

On handheld devices it’s popular practice to query the orientation of the user’s device like so:

@media (orientation:portrait) {
/* some style */
}

You can also obviously use (orientation: landscape).

Aspect Ratio

You may need to find the aspect ratio in your query:

@media screen and (device-aspect-ratio: 16/9) {
/* some style rules */
}

These are only the basic ways to use CSS3 Media Queries. If you would like to see more, check out the spec on W3.org.

The post The Basics of CSS3 Media Queries appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/advanced/basics-css3-media-queries/feed/ 0