CSS Atoms | CSS3 Tutorials, Tips, and Articles » Miscellaneous http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Learn How to Style a Basic Tabbed Navigation Menu Using CSS3 http://cssatoms.com/basic/learn-how-to-style-a-basic-tabbed-navigation-menu-using-css3/ http://cssatoms.com/basic/learn-how-to-style-a-basic-tabbed-navigation-menu-using-css3/#comments Thu, 12 May 2011 10:04:51 +0000 http://cssatoms.com/basic/learn-how-to-style-a-basic-tabbed-navigation-menu-using-css3/ Having nice-looking, easy to navigate, simple navigation bars is very important for any web-site. Luckily, we have CSS to style our navigation with colors, fonts, images, etc… In this CSS […]

The post Learn How to Style a Basic Tabbed Navigation Menu Using CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

Having nice-looking, easy to navigate, simple navigation bars is very important for any web-site. Luckily, we have CSS to style our navigation with colors, fonts, images, etc… In this CSS tutorial we are going to learn how to style an unorganized list to create a basic tabbed navigation for your web-site. We will start with a basic unorganized list with anchors, and then we will be adding style to each part and element of our list. Let’s get started!

STEP ONE:

Let’s start by writing a basic HTML list. Structure an unorganized list using 4 or more list elements:

<ul >
 
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>SCHEDULE</li>
<li>PRICES</li>
<li>CONTACT</li>
 
</ul>

Now we are going to add anchor tags <a></a> to convert each list item into a link and we are going to specify the unorganized list with a unique ID, called “nav”:

<ul id="nav">
 
<li><a href="#" title="">HOME</a></li>
<li><a href="#" title="" >ABOUT</a></li>
<li><a href="#" title="">GALLERY</a></li>
<li><a href="#" title="">SCHEDULE</a></li>
<li><a href="#" title="">PRICES</a></li>
<li><a href="#" title="">CONTACT</a></li>
 
</ul>

I created an ID, just in case you need to create more unorganized lists within your HTML file.

STEP TWO:

It is time to start styling our list by linking a Cascading Style Sheet.
Create a CSS file, name it “style”, and attach it to your HTML page:

<link href="style.css" rel="stylesheet" type="text/css" />

STEP THREE:

The first thing we need to style is the entire list; hence, we are going to add a declaration for ul #nav and add different properties to it.

Before you start writing the declaration for it, make sure to save in your images folder two images, one for the navigation main background and one for the current link. I used Photoshop CS5 to make the following images:
Step Three A Step Three B
Images zoomed in to 400%.

The smallest image has a size of 1px by 37px. I am going to use it for the background of my entire navigation bar. I named, “NavigationBg.jpeg”.
The largest image has a size of 1px by 43px. I am going to use it for the background when a link is selected. I named, “CurrentBg.jpeg”.

Now that we have our images ready, let’s write the declaration for our unorganized list:

ul#nav {
 
width: 100%;
height: 43px;
font-size: 11pt;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
background-image: url(images/NavigationBg.jpg);
background-repeat: repeat-x;
background-position: left top;
 
                }

As you can see, our unorganized list width depends on the user browser’s window and the height of our navigation will have the same height of our “Current.jpeg” image. Each word within the list is going to have a size of 11pt with a bold sans-serif font.
Also, we set none for each <li> element’s style, so no bullets will be added. At the end, we stated the background image properties for our unorganized list.

If you preview the file in your browser, you should obtain the following:
Step Three Preview

STEP FOUR:

Next, we are going to fix how each link is displayed. We are going to add a declaration for each <li> tag by writing, ul#nav li.
Let’s use the display property to generate a block box before and after each link and let’s float each link to the left with a 5px margin between each link:

ul#nav li {
 
display: block; 
float: left; 
margin: 0 0 0 5px;
 
                }

Preview in browser:
Step Four Preview

Getting there!

STEP FIVE:

Each link needs more space and they also need more style. We are going to fix that by adding a declaration for each link’s anchor <a>:

ul#nav li a {
 
height: 43px;
color: #666;
text-decoration: none;
display: block;
float: left;
padding-top: 8px;
padding-right: 15px;
padding-bottom: 5;
padding-left: 15px;
 
                }

Preview in browser:
Step Five Preview

Great! Now each link has its own space and color. We only need to add two more properties to style their hover and current state.

Subsequent, our links hover state doesn’t need too much style. Let’s just add a color to them:

ul#nav li a:hover {
 
                color: #48A1C3;
 
                }

STEP SIX:

To conclude with our tabbed navigation, we need to specify how each selected link will look. Here is where we apply our “CurrentBg.jpeg” image to give to our navigation a tabbed look. Because I don’t have linked pages for each link, I am going to add a class to one of the links so you can see how the current state works.

<li><a href="#" title="" class="current">GALLERY</a></li>

ul#nav li a.current {
 
color: #FFF;
padding: 5px 15px 0;
background-image: url(images/CurrentBg.jpg);
background-repeat: repeat-x;
background-position: left top;
 
                }

Preview in browser:
Final Result

That’s all readers! Download and modify the file to fit your needs.

Download Source Files

The post Learn How to Style a Basic Tabbed Navigation Menu Using CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/learn-how-to-style-a-basic-tabbed-navigation-menu-using-css3/feed/ 0
Learn the Fundamentals of CSS3 Syntax http://cssatoms.com/basic/learn-the-fundamentals-of-css3-syntax/ http://cssatoms.com/basic/learn-the-fundamentals-of-css3-syntax/#comments Wed, 11 May 2011 10:04:22 +0000 http://cssatoms.com/basic/learn-the-fundamentals-of-css3-syntax/ The presentation, style, and design of a web site is accomplished by using Cascading Style Sheets (CSS). CSS helps web developers and web designers to control the layout of their […]

The post Learn the Fundamentals of CSS3 Syntax appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
The presentation, style, and design of a web site is accomplished by using Cascading Style Sheets (CSS). CSS helps web developers and web designers to control the layout of their web-sites and take them to the next level. In order to know how CSS works you need to have a solid understanding of HTML standards and elements. In this CSS tutorial you will learn the fundamentals of CSS and what its syntax consists of.

First let’s learn some important facts about CSS:

  • CSS is used to separate design from content. It is good for presentation, usability, accessibility, and formatting.
  • CSS is composed of statements for specific elements, classes, Ids, or images.
  • CSS specify in English the names of each element and its properties.
  • The specification of each element is called a rule or a declaration.
  • With the help of CSS you can stylize every element in your HTML page.
  • You can add as many CSS as you like, but is better to maintain a single main sheet.
  • You can use and add different CSS for specific tasks; for example, you can create a specific CSS if the viewer wants to print the website.

Now let’s see how the basic syntax of CSS looks like:
Syntax Example 1
First we need to specify which element we want to style, in this case h1.
Second, we need to add braces {}.
Inside the braces we put what property or properties we want to add to our element. I wanted to add color to my headings, so I wrote color and give it a gray value of #333.
After each property remember to add a semicolon (;).

Here is another example:
Syntax Example 2

As you can see, each rule/declaration always contains a property and a value. It allows you to add as many properties and values as you like.

Let’s take a look at a basic HTML page and how I stylized each element using a Cascading Style Sheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fundamentals of CSS Syntax</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div class="header">
    <!-- end .header --></div>
<div class="container">
  <div class="content">
    <h1>Fundamentals of CSS Syntax</h1>
    <p>The presentation, style, design of a web site is accomplished by using Cascading Style Sheets (CSS). 
    CSS helps web developers and web designers to control the layout of their web-sites and take them to the 
    next level. In order to know how CSS work you need to have a solid understanding of HTML standards and elements. 
    In this CSS tutorial you will learn the fundamentals of CSS and what its syntax consists of.
    </p>
    <br />
    <!-- end .content --></div>
<!-- end .container --></div>
<div class="footer">
</body>
</html>

@charset "utf-8";
 
 
body {
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #FFF;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 80%;
	line-height: 1.4;
}
 
h1 {
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 20px;
	text-align: center;
}
 
p {
	margin-top: 0;	
	padding-right: 15px;
	padding-left: 15px; 
}
 
a:link {
	color: #42413C;
	text-decoration: underline; 
}
 
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
 
.header {
	background-image: url(images/HeaderBg.jpg);
	background-repeat: repeat-x;
	height: 121px;
}
 
.container {
	width: 960px;
	background: #FFF;
	margin: 0 auto;
}
 
.content {
 
	padding: 10px 0;
}
 
.footer {
	background-image: url(images/FooterBg.jpg);
	background-repeat: repeat-x;
	height: 101px;
	padding-top: 30px;
	padding-right: 0;
	padding-left: 0;
	text-align: center;
	color: #666;
}

That’s all readers! Practice by styling more elements and you will see that is not that hard as it looks. If you know HTML you know CSS. Best of luck!

Download Source Files

The post Learn the Fundamentals of CSS3 Syntax appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/learn-the-fundamentals-of-css3-syntax/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
Creating a Rollover Button Using CSS http://cssatoms.com/basic/creating-a-rollover-button-using-css/ http://cssatoms.com/basic/creating-a-rollover-button-using-css/#comments Mon, 25 Apr 2011 10:02:20 +0000 http://cssatoms.com/basic/creating-a-rollover-button-using-css/ Let’s learn how to create a rollover button without the need of JavaScript. Yeap, that’s right! NO more complicated JavaScript, just HTML and CSS. How come? Just use two background […]

The post Creating a Rollover Button Using CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
Let’s learn how to create a rollover button without the need of
JavaScript. Yeap, that’s right! NO more complicated JavaScript, just
HTML and CSS. How come? Just use two background images and the “:hover pseudo-class“.

Let’s begin:

STEP ONE:

Using your program of choice create two button images and save them for web. (make sure they have the same size).
One is going to be the “Up State“, let’s name it: “button“. The other one is going to be the “Hover State“, let’s name it: “button_hover“.
Button Image Sample  button.jpeg

Button Hover Sample  button_hover.jpeg

STEP TWO:

Time to implement our Cascading Style Sheet! Attach a CSS file to your HTML page.

a:link, a:visited {
	display: block;
	height: 46px; /* ~~ define height and width for IE 5.x ~~ */
	width: 234px;
	line-height: 40px; /* ~~ text will sit in the middle of the box ~~ */
	color: #000;
	text-decoration: none;
	background-color: #80ABCE;
	background-image: url(../images/button.jpg);
	background-repeat: no-repeat;
	text-indent: 50px;
}
 
a:hover {
	background-color: #F8EEEC; 
	background-image: url(../images/button_hover.jpg);
	background-repeat: no-repeat;
}

That’s all! Use your creativity to implement this technique to
navigation, images, oversized buttons, etc… Possibilities are endless!

Download Source Files

The post Creating a Rollover Button Using CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/creating-a-rollover-button-using-css/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
Working With Gradients in CSS3 http://cssatoms.com/basic/working-with-gradients-in-css3/ http://cssatoms.com/basic/working-with-gradients-in-css3/#comments Thu, 14 Apr 2011 11:15:12 +0000 http://cssatoms.com/basic/working-with-gradients-in-css3/ CSS3 is enabling us to ditch our photo editors in favor of its pure goodness. We can now give our elements the most subtle of gradients, and give our pages […]

The post Working With Gradients in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
CSS3 is enabling us to ditch our photo editors in favor of its pure goodness. We can now give our elements the most subtle of gradients, and give our pages that extra spark that used to require the help of programs like Photoshop. Even better, CSS gradients can be used cross-browser without any headaches. Today, we’ll see how each browser implements the gradient property, and create a rather stylish looking rectangle.

STEP ONE:

The HTML

The HTML is pretty standard, and contains a simple Div element inside of the body. We’ve given the Div a class called “gradient” that will allow us to target this Div with CSS.
Have a look at the HTML page:

<body>
 
   <div class="gradient">
   </div>
 
</body>

Note that I’ve only included the body section; the rest of the HTML source code can be found in the downloadable folder for this tutorial.

Simple enough right? We’ll be targeting this div with CSS in the following section.

STEP TWO:

The CSS

Our CSS will target the “gradient” Div and assign the gradient property to it, making sure to include all of the major browser’s implementation of the gradient property.

Since each vendor has its own specification, we’ll go ahead and step through each style one by one.
Take a look at what the full CSS declaration will look like, and then we’ll come back for an explanation.

.gradient{
	background: -webkit-gradient(linear,left top,right bottom,from(#264aff),to(#FFFFFF));
	background: -moz-linear-gradient(top, #264aff, #FFFFFF);
	filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#264aff', endColorstr='#FFFFFF');
	border: 1px solid;
	height: 400px;
	width: 400px;	
}

First, in the CSS is the webkit-gradient declaration. Notice that the webkit version is implemented as a value of the background property. The webkit-gradient declaration needs a bit of information to do its’ job; namely, the type of gradient (linear), the starting position of the gradient (left top), the ending position (right bottom), and the 2 colors from which to build the gradient (#264aff, #FFFFFF).
The second background declaration, the Mozilla version, is very similar to the webkit version, however it only asks for a starting point and 2 colors. Microsoft’s implementation is a bit more convoluted, but still accomplishes the same effect. It uses a Direct X class to call the gradient into the page, and it simply asks for the 2 colors to transition between.

Preview:

As you can see, it takes very few lines of code to create a nice looking gradient effect on our page. Normally, this would be used to create buttons, badges and things of that nature. For simplicity sake, we used a div element today. It’s highly recommended that you mess around with the gradients, and look around the net to see examples of how they are being used. This is a very popular feature of CSS3, and you’ll be sure to see more of it used as the standard continues to grow.

Download Source Files

The post Working With Gradients in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/working-with-gradients-in-css3/feed/ 0
Basics of CSS3 Animation http://cssatoms.com/basic/basics-of-css3-animation-3/ http://cssatoms.com/basic/basics-of-css3-animation-3/#comments Wed, 13 Apr 2011 12:17:09 +0000 http://cssatoms.com/basic/basics-of-css3-animation-3/ Not long ago, in a land where Cascading Style Sheets were just landing on the pages of web designers everywhere, no-one would have ever thought that little old CSS would […]

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

]]>
Not long ago, in a land where Cascading Style Sheets were just landing on the pages of web designers everywhere, no-one would have ever thought that little old CSS would grow up big enough to handle its own animations. Welcome to the now. Well, actually, CSS animation has been around for a while, but wide range support is now starting to flourish. Today, we’ll build a “splash screen” of sorts, with a rotating spinner to let a visitor know that our site is loading. Normally, this could be done by going and grabbing one of the ten-bazillion .gif loading images off of the internet and slapping it on your web page, but that poses a multitude of problems. The main problem being that a .gif image has to have the background color set, so if we changed the background of our website, we’d have to go back and make sure our .gif image was changed to suit the new design. Using CSS transitions, we can recreate the loading effect in a more manageable, customizable way.
Let’s get started!

NOTE: This effect only works with WebKit-based browsers; Safari, Mobile Safari or Google Chrome. I’m positive that Mozilla and Opera will catch up with these CSS features.

STEP ONE:

The HTML

This couldn’t be any more simple. All we need is one HTML element that we can attach our image to. Here’s what our brilliant piece of HTML code looks like:

<p id="spinner"> Please wait while we make some magic happen </p>

Simple enough right? Next we’ll add a bit of CSS to attach our image to the element, center it in the screen, and make the text inside disappear:

STEP TWO:

The CSS
The most important declaration here is -webkit-mask-image. This is the declaration that makes our image appear on the screen. Webkit-mask-image is overlaying our image onto our paragraph element.

#spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 200px;
	margin: -100px 0px 0px -100px;
	width: 200px;
	text-indent: 250px;
	white-space: nowrap;
	overflow: hidden;
	-webkit-mask-image: url(spinner.png);
}

Pretty, awesome stuff right? Let’s make it even more awesome with some animation.

STEP THREE:

The Animation

Our spinner isn’t spinning at all yet, so let’s fix that. When animating in CSS, we need to declare a name for the animation, the duration of the animation, how many times it’s to be repeated, and the style of the animation. We do this with the following properties respectively:

  1. -webkit-animation-name
  2. -webkit-animation-duration
  3. -webkit-animation-iteration-count
  4. -webkit-animation-timing-function

Here’s what our CSS declaration looks like now:

#spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 200px;
	margin: -100px 0px 0px -100px;
	width: 200px;
	text-indent: 250px;
	white-space: nowrap;
	overflow: hidden;
	-webkit-mask-image: url(spinner.png);
	-webkit-animation-name: RotateSpinner;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

Now that we’ve defined all of the properties of our animation, the last step is to actually make it work. We’ll need to use the @-webkit-keyframes call to run our animation. The full declaration looks like this:

@-webkit-keyframes RotateSpinner {
	from { 
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}	
}

Preview in browser:

We first call the @-webkit-keyframes declaration, and the name of our animation. The “from” statement wants to know where our animation starts, and in our case it is at the original point with no rotation. The “to” statement wants to know where the animation ends, which in this case is once it reaches a full 360 degree rotation. Once it reaches this point, the animation starts again.

The possibilities of the CSS3 animation functionality are absolutely endless. With a bit of creativity, it’s easy to see just how far this can be pushed. As CSS grows, so will its ability to animate elements, and right now is the time to get the hang of using them. Until next time, keep on coding!

Download Source Files

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

]]>
http://cssatoms.com/basic/basics-of-css3-animation-3/feed/ 0