CSS Atoms | CSS3 Tutorials, Tips, and Articles » Styling http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Custom CSS Dividers http://cssatoms.com/styling/custom-css-dividers/ http://cssatoms.com/styling/custom-css-dividers/#comments Thu, 01 May 2014 20:03:32 +0000 http://cssatoms.com/?p=1029 In this tutorial, we will go over how to create Custom CSS Dividers for your website. A new modern trend in webdesign is to use the <section> tag to layout […]

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

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

Custom CSS Dividers

Setting Up the Document

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

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

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

Adding the CSS

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

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

p{padding:20px;}

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

Section Style 1

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

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

Section Style 2

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

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

Section Style 3

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

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

Wrapping It Up

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

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

]]>
http://cssatoms.com/styling/custom-css-dividers/feed/ 0
Corner Tuck Paper Effect http://cssatoms.com/styling/corner-tuck-paper-effect/ http://cssatoms.com/styling/corner-tuck-paper-effect/#comments Thu, 20 Mar 2014 19:54:45 +0000 http://cssatoms.com/?p=1009 In this tutorial, we will learn how to create a cool corner tuck paper effect, similar to business card holders in bi-fold folders and resume folders. This may be helpful […]

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

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

Corner Tuck CSS

HTMl structure

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

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

CSS stylings

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

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

.bottom-corners { 
	height:100%;
}

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

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

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

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

Wrapping It Up

All together you document should look like the example below.

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

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

.bottom-corners { 
	height:100%;
}

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

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

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

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

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

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

]]>
http://cssatoms.com/styling/corner-tuck-paper-effect/feed/ 0
Create CSS Gradient Text Effects http://cssatoms.com/styling/create-css-gradient-text-effects/ http://cssatoms.com/styling/create-css-gradient-text-effects/#comments Tue, 31 Dec 2013 20:57:32 +0000 http://cssatoms.com/?p=991 In this tutorial we will go over show you how to make a cross browser friendly CSS Gradient Text Effect. We will be incorporating PNG’s and will be laying them […]

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

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

Css3 Gradient Text effects

White Gradient Text Effect

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

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

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

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

Metal Gradient Text Effect

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

Let’s Update the CSS

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

Let’s Update the HTML

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

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

Stripe Gradient Text Effect

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

Let’s Update the CSS

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

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

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

Let’s Update the HTML

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

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

Wrapping it Up

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

Download Source Files

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

]]>
http://cssatoms.com/styling/create-css-gradient-text-effects/feed/ 0
CSS Coverflow using Transforms and Transitions http://cssatoms.com/styling/css-coverflow-using-transforms-transitions/ http://cssatoms.com/styling/css-coverflow-using-transforms-transitions/#comments Fri, 27 Dec 2013 21:11:51 +0000 http://cssatoms.com/?p=981 In this tutorial we will create a CSS Coverflow image display using some of the new properties introduced in CSS3. Many of the properties that we will be dealing with […]

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

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

long shadow css3

The HTML Markup

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

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

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

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

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

Box-Reflect

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

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

Transition and Transform

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

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

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

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

A Little Perspective

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

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

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

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

The Hover State

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

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

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

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

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

img:hover{

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

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

Wrapping it Up

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

Download Source Files

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

]]>
http://cssatoms.com/styling/css-coverflow-using-transforms-transitions/feed/ 0
Creative CSS3 Box Shadows http://cssatoms.com/styling/creative-css3-box-shadows/ http://cssatoms.com/styling/creative-css3-box-shadows/#comments Thu, 12 Dec 2013 20:49:56 +0000 http://cssatoms.com/?p=970 In this tutorial we will look at some creative approaches in using the CSS3 Box Shadow property. As it’s name implies, Box Shadows let you place a shadow effect behind […]

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

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

Long Shadow

long shadow css3

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

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

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

Nav Bar Shadow

nav bar shadow

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

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

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

Glossy Button

glossy button css3

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

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

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

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

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

Inset Box

inset box css3

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

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

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

Wrapping it Up

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

Download Source Files

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

]]>
http://cssatoms.com/styling/creative-css3-box-shadows/feed/ 0
Modern CSS3 Buttons http://cssatoms.com/styling/modern-css3-buttons/ http://cssatoms.com/styling/modern-css3-buttons/#comments Wed, 27 Nov 2013 18:41:08 +0000 http://cssatoms.com/?p=955 CSS3 and HTML5 have brought many great features to web design that have made development quicker and easier. With HTML5 introducing more elements, we can save time have to designate […]

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

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

css3-buttons

The Markup

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

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

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

CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Button A

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

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

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

Button B

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

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

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

Button C

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

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

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

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

Button D

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

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

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

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

Button Yes

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

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

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

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

Button No

This circle button has a more exaggerated animation.

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

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

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

Wrapping it Up

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

Download Source Files

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

]]>
http://cssatoms.com/styling/modern-css3-buttons/feed/ 0
Styling Lists Using CSS http://cssatoms.com/basic/styling-lists-using-css/ http://cssatoms.com/basic/styling-lists-using-css/#comments Tue, 10 May 2011 10:04:30 +0000 http://cssatoms.com/basic/styling-lists-using-css/ No more default bullet points or simple numbered lists. In this CSS tutorial we are going to learn how to style our HTML list items by using different numbers, letters, […]

The post Styling Lists Using CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
No more default bullet points or simple numbered lists. In this CSS tutorial we are going to learn how to style our HTML list items by using different numbers, letters, bullets, or images.

First, let’s learn the two different types of lists we can create.

  • Ordered Lists: They are specified by using <ol></ol> in our HTML page. Their elements are marked with numbers or letters.
  • Unordered Lists: They are specified by using <ul></ul> in our HTML page. Their elements are marked with bullets or images.

STEP ONE:

Let’s create an HTML page with an unordered list and a ordered list to see how many styles we can give them using CSS.

<li>HTML Atoms</li>
   </ul>
 
   <ol>
   <li>JavaScript Atoms</li>
   <li>PowerShell Atoms</li>
   <li>SQL Atoms</li>
   <li>The Web Made Easy</li>
   </ol>

STEP TWO:

Now that we have our lists ready to style, link a CSS to your HTML page and add an specification for the unordered list and one for the ordered list like shown below:

ul {
}
 
ol {
}

STEP THREE:

First let’s use the list-style-type to style the bullets of our unordered list:

  • Disc: the default marker type:
    ul {
    	list-style-type: disc;
    }

    Preview:
    Disc Type
  • Circle: Gives a small circle as bullet:
    ul {
    	list-style-type: circle;
    }

    Preview:
    Circle Type
  • Square: Gives a small square as bullet:
    ul {
    	list-style-type: square;
    }

    Preview:
    Square Type
  • None: Removes any bullet or marker from the list:
    ul {
    	list-style-type: none;
    }

    Preview:
    None Type

The list-style-type property is also used to style ordered lists. There are 11 different values to style an ordered list. This time, I am going to name the different kinds of ordered list values and give an example of each one.

  • list-style-type: armenian
    list-style-type: armenian
  • list-style-type: decimal (default type)
    list-style-type: decimal
  • list-style-type: decimal-leading-zero
    list-style-type: decimal-leading-zero
  • list-style-type: georgian
    list-style-type: georgian
  • list-style-type: lower-alpha (alphabetical order)
    list-style-type: lower-alpha
    Use list-style-type: upper-alpha to set capitals.
  • list-style-type: lower-greek

  • list-style-type: lower-latin (same as alpha / alphabetical order)
    list-style-type: lower-latin
    Use list-style-type: upper-latin to set capitals.
  • list-style-type: lower-roman
    list-style-type: lower-roman
    Use list-style-type: upper-roman to set capitals.

Now that we know the different available types of ordered list markers. Let’s style our ordered list with upper-roman numbers:

ol {
	list-style-type:upper-roman;
}

Preview:
list-style-type: upper-roman

STEP FIVE:

Did you know that you can set any image as the marker for your list? Yes, instead of using the list-style-type property we can use the list-style-image property to display any graphic.
Let’s give it a try:
Firs, download or make your desired bullet graphic and save it for web inside your images folder.
I am going to use this blue star: Blue Star Bullet

Then, add the list-style-image property to your unordered list specification and add the URL of your saved graphic:

ul {
	list-style-image: url(images/marker.jpg);
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

NOTE: For cross-browser compatibility, I set the list-style-item property to none and padding and margin to 0px.

Preview:
List Style Image

This is it! As you can see, lists can be styled just like any other element. Go ahead and make your past HTML lists appealing!

Download Source Files

The post Styling Lists Using CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/styling-lists-using-css/feed/ 0
Styling Borders with CSS Border-Style Property http://cssatoms.com/basic/styling-borders-with-css-border-style-property/ http://cssatoms.com/basic/styling-borders-with-css-border-style-property/#comments Tue, 03 May 2011 10:02:59 +0000 http://cssatoms.com/basic/styling-borders-with-css-border-style-property/ To go beyond the simple, default web pages, we need to learn how to add style to our content. To do that, we need to create a Cascading Style Sheet […]

The post Styling Borders with CSS Border-Style Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

To go beyond the simple, default web pages, we need to learn how to add style to our content. To do that, we need to create a Cascading Style Sheet and add some properties to our content. One common property is the Border-Style. The Border-Style property consists of nine border styles that allow us to change the visual style of any box. This property is simple to use. Getting to know it will help you to create more designed web pages. Let’s take a look at all the different ways we can style our boxes’ borders:

  • NONE:
    border-style: none;
    Is the default property. No border is displayed.
  • DOTTED:
    border-style: dotted;
    A sequence of dots is displayed:
  • DASHED:
    border-style: dashed;
    A sequence of short lines form the border:
    dashed
  • SOLID:
    border-style: solid;
    A single line segment round the border. The “original” border:
    solid
  • DOUBLE:
    border-style: double;
    Two solid line segments form the border:
    double
  • GROOVE:
    border-style: groove;
    Looks like an indentation:
    groove
  • RIDGE:
    border-style: ridge;
    A raised border effect:
    ridge
  • INSET:
    border-style: inset;

    An insertion drops into the box:
    inset
  • OUTSET:
    border-style: outset;

    An inception of the border rises from the box:
    outset

IMPORTANT FACTS:

  • To specify the visual style of a border use the border-style property.
  • The default style is: None. To display a border the property needs to be set.
  • Borders are added on top of the box’s background; so, make sure to add padding.
  • The following styles require a border-color property: Groove, Ridge, Inset, and Outset.
  • The border-style property can be set to style the entire border, or just the top, right, bottom or left side of the box. Consequently, it can have from one to four values.
  • This property is NOT inherited.
  • This property is supported in the majority of browsers. Firefox (1), Internet Explorer (4, 5, and 6) – earlier versions require inline elements to be absolute positioned, Mozilla (1), Netscape (6 and 7), and Opera (3, 4, 5, 6, 7, and 8).
  • Shorthand version of the “border-style” property is “border”.

Now you can go beyond the simple, default Web pages. Add a special touch to your design using the border-style property.

Download Source Files

The post Styling Borders with CSS Border-Style Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/styling-borders-with-css-border-style-property/feed/ 0
Multiple Borders in CSS http://cssatoms.com/basic/multiple-borders-in-css-2/ http://cssatoms.com/basic/multiple-borders-in-css-2/#comments Wed, 30 Mar 2011 19:43:29 +0000 http://cssatoms.com/basic/multiple-borders-in-css-2/  A Brief Introduction   Although some may not see a use for having more than one border on a CSS element, it can really be a useful tool in more […]

The post Multiple Borders in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
 A Brief Introduction

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

Step 1: The HTML

All we’ll need in order to learn about multiple borders is a box that we can add some styles to. Our page will have a slightly off-white background, and our box will be a more vivid white. Let’s have a look at the initial HTML setup:

<body>
    <div id="box">
    
    </div>
</body>

That’s all we’ll need in our HTML file, let’s go ahead and dive into the CSS.

Part 2: The CSS

We’ll be using a couple of pseudo-classes that we’ve never mentioned before; :before and :after. These 2 classes will allow us to essentially “insert” content before or after the element that we apply them to. This lesser-known technique is extremely handy, and we’ll see how it can produce some subtle but cool results. First, let’s style the box so that it has the right dimensions and colors. We’ll add a height and width definition, as well as an all white background color and some positioning values. Have a look at the CSS for the ‘box’ div:

#box
{
    background-color: #ffffff;
    border: 1px solid;
    height: 500px;
    margin: 180px auto 0px auto;
    position: relative;
    width: 500px;
}

Great! Now you should see that the box we’ve created is slightly more white than the background, and at this point has only a single border surrounding it. The next step will be to add the :before and :after pseudo-classes to give the illusion of multiple borders. Have a look at the first class here:

#box:before
{
    content:"";
    border: 1px solid white; 
    width: 498px;
    height: 498px; 
    position: absolute;  
}

What we’ve done here is essentially told CSS what to add before the box. By default, it basically adds an element with no styles, and expects us to style it. We’ve added an element before our ‘box’ that has no content, a white border, a height and a width declaration that is 2 pixels smaller than our ‘box’ div, and absolute positioning. What this does is create a second box inside of our div. The div ends up being inside of the box because we’ve made the height and width 2 pixels smaller, therefore shrinking it to the inside of the ‘box’ div even though we’re using the before pseudo class. If you view the page in a browser, you should be able to see the newly added border, although it is very subtle and you may have to zoom in to notice it. 
The next step would be the :after pseudo-class. This will be written exactly the same way as the :before class with the exception of the height and width declaration which, again, need to be made 2 pixels smaller than the :before class’s declarations. This will add yet another border to the inside of our ‘box’ div, making our subtle border a bit more noticeable. You can find the :after class declaration in the full source code.

A Few Last Words

Subtlety is beauty when it comes to CSS, and today’s tutorial was about subtleties. The border may not jump out and scream at you, but it is a very nice way to add a sense of depth and elegance to a normally plain rectangle. Join us next time for another round of CSS creations. See you there!

Download Source Files

The post Multiple Borders in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/multiple-borders-in-css-2/feed/ 0
Creating Drop Caps in CSS http://cssatoms.com/basic/creating-drop-caps-in-css/ http://cssatoms.com/basic/creating-drop-caps-in-css/#comments Wed, 30 Mar 2011 19:39:21 +0000 http://cssatoms.com/basic/creating-drop-caps-in-css/ Drop caps are a very useful technique for making your paragraphs stand out a bit. Today, we’ll have a look at how to implement drop caps with care, and some […]

The post Creating Drop Caps in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
Drop caps are a very useful technique for making your paragraphs stand out a bit. Today, we’ll have a look at how to implement drop caps with care, and some of the pitfalls surrounding their use.

STEP ONE:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

Now, we’ll need to target the first letter of our paragraph. To do this, we’ll wrap the first letter in a span tag, and give it a unique class name. Here’s what the HTML will look like:

<p><span class="firstletter">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

Great, now we can start styling the first letter to create our drop caps effect.

STEP TWO: The CSS

We’ll need to shrink our paragraph a little bit, since right now it just runs completely across the screen. Let’s give it a height and width definition to bring it down to size:

p {
height: 400px;
width: 400px;
}

Wonderful, now our paragraph is smaller and more manageable. Next, we’ll go ahead and start styling the first letter. Let’s make it 4 times bigger than the other text and a bit bolder as well:

p {
height: 400px;
width:400px;
}

.firstletter {
font-size: 400%;
font-weight:bolder;

Now, when you view the page in a browser, you’ll see that our drop caps implementation is already beginning to take shape. However, notice that the text after the first letter runs along the bottom of the drop caps and normally should run somewhere nears the top.

Beginning to style the first letter

If we float the first letter to the left, we almost get the desired effect. Here’s how to float the first letter:

p {
height: 400px;
width:400px;
}

.firstletter {
font-size: 400%;
font-weight:bolder;
float: left:
}

You’ll notice that the letters following the drop caps are still a bit higher than the drop caps itself.

Floating the first letter

The last step will be to add a slightly negative top margin to pull our drop caps up a notch. Here’s what the finished CSS looks like:

p {
height: 400px;
width:400px;
}

.firstletter {
font-size: 400%;
font-weight:bolder;
float: left:
margin-top: -10px;
}

Preview:

Final Result

CSS drop caps are all the rage, and as you can see, aren’t very hard to implement at all. You could also give the first letter a more elegant style font to make it really stand out from the rest of the text. Experiment with different styles to find a drop caps that suits your site. Join us next time when we discuss the line-height property and what it does. See you then!

Download Source Files

The post Creating Drop Caps in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/creating-drop-caps-in-css/feed/ 0