CSS Atoms | CSS3 Tutorials, Tips, and Articles » Advanced http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 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
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
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
Pure CSS Image Map http://cssatoms.com/miscellaneous/pure-css-image-map/ http://cssatoms.com/miscellaneous/pure-css-image-map/#comments Tue, 26 Apr 2011 10:02:09 +0000 http://cssatoms.com/miscellaneous/pure-css-image-map/ What is an Image Map? A CCS Image Map allows multiple clickable hotspots on a single image. For this tutorial I am going to use an image of a map […]

The post Pure CSS Image Map appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
What is an Image Map? A CCS Image Map allows multiple clickable hotspots on a single image.

For this tutorial I am going to use an image of a map (you can use any image). When I hover over each continent, a square will appear. Clicking over each continent will take me to that continent’s website.
Tutorial Image
Although, this techniques mixes presentation with content, it is still valid for HTML.

Let’s begin:

STEP ONE:

Save any image for web and add it to your HTML page inside a named div:

<div id="image">
 
<img src="images/OurContinents.jpg" width="576" height="452" alt="Our Continents" />
 
    </div>

STEP TWO:

After the image div let’s add a list of links to each continent. (Include the list inside the “image” div).
Each list is going to have a new class (to identify each continent), a title attribute for each link (to contain the continent’s name), and a “_blank” target (to open the link in a new window).

<div id="image">
 
    <img src="images/OurContinents.jpg" width="576" height="452" alt="Our Continents" />
 
    <ul>
 
    <li class="NorthAmerica">
    <a href="http://en.wikipedia.org/wiki/North_America" title="North America" target="_blank"> 
    North America
    </a>
    </li>
 
    <li class="SouthAmerica">
    <a href="http://en.wikipedia.org/wiki/South_America" title="South America" target="_blank">
    South America
    </a>
    </li>
 
    <li class="Europe">
    <a href="http://en.wikipedia.org/wiki/Europe" title="Europe" target="_blank">
    Europe
    </a>
    </li>
 
    <li class="Asia">
    <a href="http://en.wikipedia.org/wiki/Asia" title="Asia" target="_blank">
    Asia
    </a>
    </li>
 
    <li class="Africa">
    <a href="http://en.wikipedia.org/wiki/Africa" title="Africa" target="_blank">
    Africa
    </a>
    </li>
 
    <li class="Australia">
    <a href="http://en.wikipedia.org/wiki/Australia" title="Australia" target="_blank">
    Australia
    </a>
    </li>
 
    </ul>
 
    </div>

STEP THREE:

Let’s add the style for our “image” id. Open your CSS file, specify the style for the image using: #image.
In there we are going to set the width, height, and position of the div.
- The width and height (using pixels).
- The position property is going to be “relative”. It will allow the links to be positioned absolutely, in relation to the edges of the div.

#image {
            width: 576px;
            height: 452;
            position: relative;
}

STEP FOUR:

We don’t want the list bullets to show. So, let’s eliminate them by setting a new style for our unordered list <ul>, and adding a list-style property.

#image ul {
            margin: 0;
            padding: 0;
            list-style: none;
}

STEP FIVE:

Let’s add the style for our links and move them to the top-left corner by adding an absolutely position. Set the preferred hit area by setting the links widths and heights. Then, let’s hide the links by setting a negative text indent.

#image a {
            position: absolute;
            width: 80px;
            height: 80px;
            text-indent: -1000em;
}

STEP SIX:

It’s time to position our links over the relevant continents. In order to do this, we are going to give a placement position (top and left) to the classes we applied before to each link.

#image .NorthAmerica a {
            top: 80px;
            left: 80px; 
}
 
#image .SouthAmerica a {
            top: 200px;
            left: 100px;
}
 
#image .Europe a {
            top: 180px; 
            left: 300px;
}
 
#image .Asia a {
            top: 190px;
            left: 390px;
}
 
#image .Africa a {
            top: 220px;
            left: 220px; 
}
 
#image .Australia a {
            top: 330px;
            left: 370px; 
}

STEP SEVEN:

To conclude, let’s apply a color border to the links to create a rollover effect.

#image a:hover {
            border: 1px solid #C4DFF0; 
}

Preview your project in your browser. Mouse over the image, you should see something similar to this:
Final Result

By using an unordered list you learned how to use the positioning technique to create a pure CSS image map and remote rollover.

Image provided by fotolia.

Download Source Files

The post Pure CSS Image Map appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/miscellaneous/pure-css-image-map/feed/ 0
CSS3 Transitions Pt. 2 http://cssatoms.com/miscellaneous/css3-transitions-pt-2/ http://cssatoms.com/miscellaneous/css3-transitions-pt-2/#comments Wed, 20 Apr 2011 12:49:50 +0000 http://cssatoms.com/miscellaneous/css3-transitions-pt-2/ DIGGING DEEPER: In our last tutorial, we created a fairly simple html link/button with a pretty cool color and background-color transition, which showed us a lot about how the new […]

The post CSS3 Transitions Pt. 2 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
DIGGING DEEPER:

In our last tutorial, we created a fairly simple html link/button with a pretty cool color and background-color transition, which showed us a lot about how the new CSS transition property works. Today, we’ll be expanding on the previous tutorial, so if you haven’t checked out “CSS3 Transitions Pt.1”, I suggest you take a look at it to get up to speed. We’ll see how to transition multiple properties, and dive into some animation techniques as well. The source code is available for download at the bottom of this page, but you could start from scratch if you’d like as I’ll be posting all of the code snippets as we go along. Let’s get started!

A BIT OF ANIMATION:

CSS animation is brand spanking new, but we can now use our newfound transitions to help us accomplish some pretty neat things. Our button has undergone a slight makeover, and here’s what the CSS looks like now:

.link{
	border:1px solid; 
	color:black; 
	display:block; 
	font-size:20px; 
	height:30px; 
	margin: 100px auto 0px auto;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	width:200px;
	-webkit-border-radius:10px;
	-webkit-transform-origin:0 0;
	-webkit-transform:rotate(30deg); 
}
 
.link:hover{
	color: #ffffff;
	background: #000;
}

First off, to make it more pretty, we’ve gone from red text to white text in the final phase of the transition. The red was terribly ugly, my apologies. We also went ahead and threw in some rounded corners to make it look more like a button. Secondly, we’ve used a property that we’ll discuss later, transform, to rotate our button slightly, and moved the button to a more central location in our page. Let’s go ahead and animate our button to make it rotate back to its original position, expand slightly, and fade in a drop-shadow. Sound good? Let’s take a look at the code:

.link{
	border:1px solid; 
	color:black; 
	display:block; 
	font-size:20px; 
	height:30px; 
	margin: 100px auto 0px auto;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	width:200px;
	-webkit-border-radius:10px;
	-webkit-transform-origin:0 0;
	-webkit-transform:rotate(30deg); 
	-webkit-transition-property: -webkit-box-shadow,color,background-color,height,width,-webkit-transform:rotate();
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear, ease-in;
}
 
.link:hover{
	color: #ffffff;
	background: #000;
	-webkit-box-shadow: 4px 5px 7px #888;
	height: 75px;
	width: 250px;
	-webkit-transform:rotate(0deg);
}

In our .link selector, we’ve added the following properties:

  1. -webkit-transform-origin: This sets the origin of our rotation to 0,0. That way it only rotates from the very top left corner.
  2. -webkit-transition-property: This allows us to select multiple properties to transition.
  3. -webkit-transition-duration: Since we’ve selected multiple elements to transition, we need to use the longhand value to set how long the transition will take.
  4. -webkit-transition-timing-function: Describes how the animation will repeat over time.

Lastly, we added a rotate transformation to our .link: hover selector, that way it rotates to the normal position when we’re hovering over it. Now, when we load up the HTML file in the browser and hover over our button, we’ll see it rotate, expand, fade in a back-color, and fade in a drop shadow as well. This was all accomplished with a bit of creativity, and an even smaller bit of CSS. In Part 3, we’ll start from scratch and build a working, small-scale solar system using CSS3. Where today we’ve simply put together a few transitions to look like an animation, our next tutorial will introduce true CSS animation using most of the transitions and transformations we learned today. See you next time!

Download Source Files

The post CSS3 Transitions Pt. 2 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/miscellaneous/css3-transitions-pt-2/feed/ 0
CSS3 Transitions Pt.1 http://cssatoms.com/miscellaneous/css3-transitions-pt-1/ http://cssatoms.com/miscellaneous/css3-transitions-pt-1/#comments Tue, 19 Apr 2011 12:46:38 +0000 http://cssatoms.com/miscellaneous/css3-transitions-pt-1/ Transitioning into the future CSS is really growing up. Essentially, we now have the ability to perform moderately complex animations using nothing but good old cascading style sheets. Prior to […]

The post CSS3 Transitions Pt.1 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
Transitioning into the future

CSS is really growing up. Essentially, we now have the ability to perform moderately complex animations using nothing but good old cascading style sheets. Prior to what CSS3 calls transitions, even the simplest animations would require a 3rd party plugin, or on a smaller scale, a .png image. We’ve always had CSS pseudo-classes like :hover and :active, but with transitions added to the mix, we can make these states perform far more than allowed in the past. Today, we’ll start simple and build a rather cool looking button with a color transition, as well as a background transition. We’ll be focusing on webkit based browsers in this tutorial, because this is where the transitions are most supported. In pt.2, we’re going to be creating a full blown animation in CSS. Excited yet? Let’s get started.

The Color Transition

We’ll start by using basic CSS to get a hover effect on a link. Our link will start off black, and when hovered over, will turn a dark red. Here’s the code to get our link up and running. First, the html file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Transitions</title>
<link rel="stylesheet" type="text/css" href="transitions.css" />
</head>
 
<body>
 
<a class="link" href="#"> Hello World! </a>
 
</body>
</html>

Now that you’ve got that, have a look at the CSS.

.link{
	border:1px solid; 
	color:black; display:block; 
	font-size:20px; height:30px; 
	padding: 10px;
	text-align: center;
	width:200px;
}
.link:hover{
	color: #e60909;
}

As you can see, I’ve also made the link element display as a block so that I could add a border, some height and width, as well as some padding. This will help us to give our link the appearance of a button in our next tutorial. Now, we simply have our link set up to change colors upon the user hovering over it. Let’s see how adding a CSS transition effect to our link can make this look far cooler than the standard hover. Here’s what the link code looks like now:

.link{
	border:1px solid; 
	color:black; display:block; 
	font-size:20px; height:30px; 
	padding: 10px;
	text-align: center;
	width:200px;
	-webkit-transition:color 1s ease-in;	
}
.link:hover{
	color: #e60909;	
}

So as you can see, we’ve added the transition property for each browser. These are shorthand declarations, and can be broken down for more fine-grained control. Each transition property takes 3 values.

  1. The property to be transitioned which in our case is color.
  2. The duration of the transition which in our case is 1 second.
  3. The type of transition which in our case is ease-in. This transition starts slowly, and speeds up toward the end of the duration.
  4. Now, if you load up the html file into your browser and hover over the box, you’ll see our link and the box transition from the standard black color into a glowing red. We’ve created a simple, yet elegant effect that can be built upon to make buttons and links far more dynamic.

The Background-Color Transition

Let’s make our link look even more sweet. We’re going to add a background-color transition so that when a user hovers over our link, the background color will fade into view slowly. This can be used to make buttons look amazing, and several sites are already implementing this transition. Here’s what the style sheet should look like now:

.link{
	border:1px solid; 
	color:black; display:block; 
	font-size:20px; height:30px; 
	padding: 10px;
	text-align: center;
	width:200px;
	-webkit-transition:color 1s ease-in;	
	-webkit-transition:background-color 0.5s linear;
}
.link:hover{
	color: #e60909;
	background: #000;
}

Now when you hover over the link button, you’ll see the background color gradually fade into view. Once you stop hovering over the link, the background-color will fade out.

This is a very powerful feature of CSS3 that when used properly, can turn a not-so flashy button into one that stands out. These transitions are very similar to things that are currently being done in Javascript and Jquery, so if you’re not too familiar with those, this may be a viable solution for you. In pt.2, we’ll visit how to use rotation in our transition, and get into some basic animation. See you then!

Download Source Files

The post CSS3 Transitions Pt.1 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/miscellaneous/css3-transitions-pt-1/feed/ 0
Create Sticky Notes in CSS3 http://cssatoms.com/miscellaneous/create-sticky-notes-in-css3/ http://cssatoms.com/miscellaneous/create-sticky-notes-in-css3/#comments Mon, 18 Apr 2011 11:40:43 +0000 http://cssatoms.com/miscellaneous/create-sticky-notes-in-css3/ We, web developers and designers, now have access to a plethora of new tools thanks to HTML5 and CSS3. Combining these two languages can help us to create awesome effects, […]

The post Create Sticky Notes in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
We, web developers and designers, now have access to a plethora of new tools thanks to HTML5 and CSS3. Combining these two languages can help us to create awesome effects, build stunning interfaces, or, with the help of JavaScript, full- fledged programs. Today, we’ll see how to make some very cool looking sticky notes in a web browser using only HTML5, and CSS3. Ready? Let’s go.

STEP ONE:

The Basic Sticky Note

We’ll start by building some basic squares onto our page that will eventually become our sticky notes. Our framework for the notes is a simple unordered list containing 6 list items, each wrapped up into a link. Here’s what our simple HTML code looks like:

<ul>
		
        <li> 
          <a href="#">
            <h2> Title 1 </h2>
            <p> text content 1 </p>
          </a>
        </li>
 
		<li> 
          <a href="#">
            <h2> Title 2 </h2>
            <p> text content 2 </p>
          </a>
        </li>
 
        <li> 
          <a href="#">
            <h2> Title 3 </h2>
            <p> text content 3 </p>
          </a>
        </li>	
        	
        <li> 
          <a href="#">
            <h2> Title 4 </h2>
            <p> text content 4 </p>
          </a>
        </li>
 
		<li> 
          <a href="#">
            <h2> Title 5 </h2>
            <p> text content 5 </p>
          </a>
        </li>
 
        <li> 
          <a href="#">
            <h2> Title 6 </h2>
            <p> text content 6 </p>
          </a>
        </li>
	</ul>

It’s simple to make our list items look more like sticky notes:

* {
    margin: 0px;
    padding: 0px;   
}
 
body {
    background-color:#616161;
}
 
h2 {
    font-weight: bolder;
}
 
ul {
    overflow: none;
    position: relative;
    top: 60px;
    left: 60px;    
    width: 50em;
}
 
ul li {
    list-style: none;
    float: right;
    margin: 15px;
}
 
ul li a {
    background-color: #fcffa3;
    color: black;
    display: block;
    height: 10em;
    padding: 2em;
    text-decoration: none;   
    width: 10em; 
}

We first reset the margin and padding of all of the elements to avoid cross-browser headaches, and took away any styling of our list items such as bullets. We’ve also changed the background color so that the list items look a little bit more like sticky notes. Now if you load up the HTML file into your browser, you’ll already have some pretty good looking sticky notes:
Step One

Let’s make them even more impressive shall we?

STEP TWO:

Shadow and Fonts

We want our sticky notes to stand out from the page, so we’re going to add some drop shadows, and make our fonts look like real handwriting. The Google Fonts API provides a very simple way to implement fonts that you wouldn’t normally see in a web page, and is completely standards compliant. We’ll be using a font called “Reenie Beanie”, which looks a lot like my handwriting to be honest. Using it is just like using a style sheet. We simply need to add the following line into the head of our HTML file:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

Now, we can call this font from anywhere we’d like to within our CSS file. We’ll go ahead and add this font to our list items like so:

ul li p {
	font-family:'Reenie Beanie', serif;
	font-size: 180%;
}

This new styling will make our notes look more realistic, and as you can see we’ve made the text large and easily readable:
Step Two A

The next piece of the magic will be the CSS3 drop shadow. This will help our notes to stand out from the page, and give a bit of depth to our project:

ul li a {
    background-color: #fcffa3;
    color: black;
    display: block;
    height: 10em;
    padding: 2em;
    text-decoration: none;   
    width: 10em; 
    -moz-box-shadow: 5px 5px 5px #191919;
    -webkit-box-shadow: 5px 5px 5px #191919;
    box-shadow: 5px 5px 5px #191919;
}

So you can see that we’ve added the box-shadow declarations for all of the major browsers. If you refresh your page now, you’ll see some rather outstanding looking sticky notes:
Step Two B

STEP THREE:

Rotation

Next, we’ll give our sticky notes a bit of rotation. CSS3 provides us with a transform declaration that can do things like scale an element’s size, rotate an element, and much more. Here’s the code that we’ll add to our CSS file in order to make give our sticky notes some tilt:

ul li a {
    background-color: #fcffa3;
    color:black;
    display: block;
    height: 10em;
    padding: 2em;
    text-decoration: none;   
    width: 10em; 
    -moz-box-shadow:5px 5px 5px #191919;
    -webkit-box-shadow:5px 5px 5px #191919;
    box-shadow:5px 5px 5px #191919;
    -moz-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
    -o-transform:rotate(6deg);   
}

Although this does look pretty cool, we’d rather have our sticky notes look randomly placed. In order to do this, we’ll use the nth-child selector provided by CSS. This selector allows us to select things like only even numbered children, only odd numbered children, etc. We’ll target our list’s even elements, 3rd element, and 5th element to get the desired random effect:

ul li:nth-child(even) a {
    -moz-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    position: relative;
    top: 5px;    
}

ul li:nth-child(3n) a {
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    position: relative;
    top: -5px;    
}

ul li:nth-child(5n) a {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    position: relative;
    top: -10px;    
}

STEP FOUR:

Zoom

When we hover over our sticky notes, we’d like them to appear as if we’ve zoomed in on them some. To achieve this effect, we’ll need to use the CSS transform scale property. Scale is simply the overall height and width of an element. It’s used just like the rotate property, only we pass in a value for how many times we’d like to multiply the original height and width. We’ll add this to our hover and focus selector:

ul li a:hover, ul li a:focus {
    background-color: #6CF;
    -moz-box-shadow: 10px 10px 7px rgba(0,0,0,.7); 
      -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); 
      box-shadow: 10px 10px 7px rgba(0,0,0,.7); 
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    position: relative; 
    z-index: 5; 
}

You’ll see that we’ve also added the z-index property to make sure our zoomed in sticky note hovers above the rest of them. Now, if you load the page up in your browser and hover over a sticky note, you’ll see it rotate back to the original position, grow in size, and appear to hover.
Step Four

STEP FIVE:

Transitions

The last step will be to add a CSS transition to our page. A transition basically says “Hey CSS don’t just switch to my hover styling immediately. Bring it in gradually, and make it look smooth!” This allows for an animation-like effect to take place when we hover instead of an instant switch. Here, we’ll add a CSS transition for each browser:

ul li a {
    background-color: #fcffa3;
    color: black;
    display: block;
    height: 10em;
    padding: 2em;
    text-decoration: none;   
    width: 10em; 
    -moz-box-shadow: 5px 5px 5px #191919;
    -webkit-box-shadow: 5px 5px 5px #191919;
    box-shadow: 5px 5px 5px #191919;
    -moz-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    -o-transform: rotate(6deg);   
    -moz-transition: -moz-transform .15s linear; 
      -o-transition: -o-transform .15s linear; 
      -webkit-transition: -webkit-transform .15s linear;   
}

That does it for our tutorial today! You now have 100% sexy sticky notes done in only CSS3 and HTML. We’ve even got a zoom effect implemented with no JavaScript required. There are several ways that CSS3 can spruce up a page and make our sites and applications look far better. Get used to the transforms and transitions, as we move into the future of the web I’m sure you’ll be seeing a lot more sites using these techniques.

Download Source Files

The post Create Sticky Notes in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/miscellaneous/create-sticky-notes-in-css3/feed/ 0
Create a 3D Cube in Pure CSS3 http://cssatoms.com/miscellaneous/create-a-3d-cube-in-pure-css3/ http://cssatoms.com/miscellaneous/create-a-3d-cube-in-pure-css3/#comments Fri, 15 Apr 2011 11:22:09 +0000 http://cssatoms.com/miscellaneous/create-a-3d-cube-in-pure-css3/ Gone are the days when we had to use fancy technologies to render 3D objects to the screen. CSS3 comes with a few amazing properties to help us create 3D […]

The post Create a 3D Cube in Pure CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
Gone are the days when we had to use fancy technologies to render 3D objects to the screen. 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. Let’s jump right in.

STEP ONE:

The HTML

We’ve created a very simple HTML page with 3 Divs, each with their own unique ID. There’s nothing special about the HTML page at all in fact. Here, have a look for yourself:

<body>
    <div class="face top"></div>
    <div class="face left"></div>
    <div class="face right"></div>
</body>

STEP TWO:

The CSS

Our CSS is a bit more complicated than our HTML; however, is still fairly easy to understand. Again, we’re making extensive use of the transform: skew property, as that is going to give us the illusion of a 3D object. Before I explain exactly what the transform: skew property does, have a look at the CSS:

.face{
	height:200px;
	overflow: hidden;
	position: absolute;
	width: 200px;
}
 
.top{
	background:#09f;
	border: 1px solid;
	top: 0px;
	left: 89px;	
	-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
	-moz-transform: rotate(-45deg) skew(15deg, 15deg);	
}
 
.left{
	border: 1px solid;
	top: 155px;
	left: 0px;
	background: #09f;
	-webkit-transform: rotate(15deg) skew(15deg, 15deg);
	-moz-transform: rotate(15deg) skew(15deg, 15deg);		
}
 
.right{
	border: 1px solid;
	top: 155px;
	left: 178px;
	background: #09f;
	-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
	-moz-transform: rotate(-15deg) skew(-15deg, -15deg);	
}

The transform: skew property essentially changes the perspective of an element on the page. In our CSS, we’ve skewed each of our faces so that they take the proper perspective for a cube, and rotated them to fit properly as well. If you load up the HTML file in your browser, you should see a perfectly shaped cubed object. This effect was accomplished by using the proper skew and rotates values for the 3 sides of the cube that you can see.

Preview in Design View:
Preview in Design View

Preview in Browser:
Preview in Browser

As you can see, there wasn’t much at all involved in our 3D cube. We declared the 3 faces in our HTML file, and then we rotated and skewed them to the proper values in the CSS file. Combining this process with transforms, shadows, and other animation techniques can take this cube to the next level. Experiment and see what you can build. See you soon!

Download Source Files

The post Create a 3D Cube in Pure CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/miscellaneous/create-a-3d-cube-in-pure-css3/feed/ 0
Creating CSS3 Pop-Up Dialogue Boxes http://cssatoms.com/miscellaneous/creating-css3-pop-up-dialogue-boxes/ http://cssatoms.com/miscellaneous/creating-css3-pop-up-dialogue-boxes/#comments Wed, 30 Mar 2011 19:42:34 +0000 http://cssatoms.com/miscellaneous/creating-css3-pop-up-dialogue-boxes/ There’s been a huge advancement in the capabilities of CSS with the introduction of CSS3, and we’re seeing a lot of projects already using the new features. Today, we’ll combine […]

The post Creating CSS3 Pop-Up Dialogue Boxes appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

There’s been a huge advancement in the capabilities of CSS with the introduction of CSS3, and we’re seeing a lot of projects already using the new features. 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. Are you ready? Let’s go!

STEP ONE:

The HTML

<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title> Pure CSS3 popups </title>
    <link rel="Stylesheet" href="style.css" />
</head>
<body>  
    <section id="awesomeLinks">
      <ul>
        <li id="link1">
            <a href="#"> Sasuke Sarutobi </a>
            <div class="popup">
                <span class="popText">
                    A world renowned ninja known for his acrobatic abilities and absolute loyalty
                </span>
            </div>
        </li>
        <li id="link2">
            <a href="#"> Momochi Sandayu </a>
            <div class="popup">
                <span class="popText">
                    A famous ninja who lead 3 even more famous ninja families
                </span>
            </div>
        </li>
        <li id="link3">
            <a href="#"> Fujibayashi Nagato </a>
            <div class="popup">
                <span class="popText">
                    A famous ninja known for his courage and gallantry
                </span>
            </div>
        </li>
      </ul>
    </section>
</body>
</html>

We’ve tried to keep the HTML as semantic as possible, while still making it accessible enough to accomplish our goal.

  1. We set up a “wrapper” for our links called “awesomeLinks”. This will help us to keep all of the elements together and easily positional.
  2. Inside of the “awesomeLinks” wrapper, we create an unordered list to hold each of our Divs as list items.
  3. In each list item we set up a link to the Ninja and a Div below it to hold the details.

The goal is to be able to hover over a link, and have a popup show us the details about the ninja we are hovering over. Now, we can go ahead and start adding some CSS.

STEP TWO:

The CSS

First, we need to have some basic CSS to get us started on our way. Our basic CSS will position our “awesomeLinks” wrapper near the center of the screen, slightly increase the font size, and remove the default list item decorations. We’ll also lay the links out horizontally at this point. Here’s what our initial CSS looks like, note that we’ll be adding much more:

#awesomeLinks
{
 font-family: Verdana;
    font-size: 2em;
    position: absolute;
    top: 10em;
    left: 10em;    
}

#awesomeLinks ul
{
    list-style-type: none;    
}

#awesomeLinks li
{
    float: left;    
}

Go ahead and load the page up in your browser so you can see where we’re beginning. All you should have is the three links layered out horizontally at about center screen and the detail text below each link.

STEP THREE:

Styling the Pop-Up Dialogue

Our popup box is going to have much of the attention in or CSS file, so it’s probably best we start there. Have a look at the styling and then I’ll explain in detail what’s going on:

.popUp
{
    background-color: #410591;
    border: 1px solid #000;
    color: #fff;
 
    visibility: hidden;
 
    font-size: smaller;
    padding: 1em;
    position: relative;
    right: 1em;
    width: 10em; 
    -moz-border-radius: 15px;
    -moz-box-shadow: 3px 3px #000;
    -webkit-border-radius: 15px;
    -webkit-box-shadow: 3px 3px #999;   
}
<p>We've added a selector for our <strong>PopUp Class</strong> and filled it in with quite a few declarations. First, we changed the <strong>background color</strong> to a <strong>royal purple</strong>, added a <strong>border</strong>, and changed the <strong>font color</strong> to white (<strong>#FFF</strong>). Next, we've made the font slightly smaller than the font of the link itself, and added a bit of <strong>padding</strong> to better center the text within the Pop-Up. We then move on to centering the Pop-Up below the link by using the <strong>position: relative </strong>declaration, and moving it from the right <strong>1em</strong>. Finally we added a <strong>width</strong> declaration to shrink our Pop-Up bubbles some, and threw in some rounded corners and shadows as a final touch. The page should now look like this:</p>
<p>
<img src="/AtomsNetwork/Files/262/1.jpg" alt="Sample" /></p>
<p>Our Pop-Up dialogue boxes are all styled and ready to go, and the next step will be to implement the sexy CSS transitions.</p>
<h3>STEP FOUR:</h3>
<br />
<strong>Creating the Transitions</strong>
<br />
In order to begin, we'll have to make our beautiful Pop-Ups disappear. Don't worry, they'll be back, but for now we'll need to add a <strong>visibility: hidden</strong> declaration to our <strong>popUp Class</strong> like this:</p>
<pre lang="css">
.popUp
{
    background-color: #410591;
    border: 1px solid #000;
    color: #fff;
 
    visibility: hidden;
 
    font-size: smaller;
    padding: 1em;
    position: relative;
    right: 1em;
    width: 10em; 
    -moz-border-radius: 15px;
    -moz-box-shadow: 3px 3px #000;
    -webkit-border-radius: 15px;
    -webkit-box-shadow: 3px 3px #999;   
}

Now, all you should be able to see on the page are the links to each Ninja’s details.
Before we can start our transitions, we’ll want to make sure that our Pop-Ups work without them. This means we’ll need to setup a :hover pseudo-class to help us accomplish this. When a user hovers over a link, we’ll need to make the Pop-Up visible again, and then move it so it sits above the link. Have a look at our :hover pseudo-class:

#awesomeLinks li:hover .popUp
{
    visibility: visible;
    bottom: 9em;
}

Now, when we hover near one of the list items, we’ll see our Pop-Up appear above the link that we’re over top of.

The final step is to add the transitioning effect. Recall that in CSS3, to create a transition we need to specify how long we’d like the transition to take, as well as the type of transition. Here’s how to change the popUp Class to reflect our new transitions:

.popUp
{
    background-color: #410591;
    border: 1px solid #000;
    color: #fff;
    visibility: hidden;
    font-size: smaller;
    padding: 1em;
    position: relative;
    right: 1em;
    width: 10em; 
    -moz-border-radius: 15px;
    -moz-box-shadow: 3px 3px #000;
    -webkit-border-radius: 15px;
    -webkit-box-shadow: 3px 3px #999; 
    
    -webkit-transition: .3s ease-in-out;  
}

NOTE: We’ve only included the webkit version.

Now, go ahead and view the page in a browser so you can bask in the wonderful glory of CSS3. The Pop-Ups are finished, and took very little CSS and absolutely no JavaScript.
Final Result

As you can see, CSS3 has moved the old version of CSS into a whole different level. Just so you’re aware, what you’ve just created used to take far more effort. Be sure to get familiar with the rounded corners, shadows, and transitions as you’re sure to see more use of these properties as the internet continues to progress. Join us next time to learn how to make some more cool CSS3 projects. See you then!

DownloadCSS PopUp Dialogue Boxes Source Files

The post Creating CSS3 Pop-Up Dialogue Boxes appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/miscellaneous/creating-css3-pop-up-dialogue-boxes/feed/ 0