CSS3 My Most Suggested Quick and Easy Tips

css3

Using CSS3 we can now design creative images, backgrounds, patterns, etc without the use of actual images. This article will cover how to:

  • Create a rounded element (element can be a divider, paragraph, textbox, label, etc)
  • Create a circle from an element
  • Drop shadow of an element
  • Create gradient color in an element
  • Drop text-shadow
  • Creating Columns
  • Background Gradient:
    • Linear
    • Radial
    • Repeated

Rounded Corners using border-radius

A box with all corners rounded:

.roundedCorners{
-moz-border-radius: 15px;  /* to be supported in firefox  we need to add -moz-*/
border-radius: 15px;
}

A box with only one corner rounded:

#OneCornerRounded {
height: 100px;
width: 300px;
-moz-border-radius-bottomright: 20px;    /* for firefox */
border-bottom-right-radius: 20px;              /* the middle can be changed to bottom-left , top-right, top-left */
}

Making a circle:

#circle {
height: 100px;      /* Both height and width have to be the same for a circle */
width: 100px;
-moz-border-radius: 50px;   /* border-radius has to be the half of the height and width */
border-radius: 50px;
}

Drop Shadow of a box using box-shadow:

shadow surrounding a box from all sides:

#AllShadows{
-moz-box-shadow: 0 0 5px 5px #888; /* for firefox */
-webkit-box-shadow: 0 0 5px 5px#888;  /* for Chrome and Safari */
box-shadow: 0 0 5px 5px #888;

/* first 2 options represent the top and left offset, the 2nd represents the blur distance */

/* The 3rd option represents the spread distance  while the last option represents the color of the shadow*/

}

shadow inside a box to create a gradient effect: (Example below is ideal for a button)

.ButtonGradient
{
width: 100px;
padding: 20px;
text-align: center;
background-color: #CCCCCC;

/*Gradient is set to start from top with a very light grey and fades into a darker grey shade*/
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E6E6E6), to(#CCC));
background-image: -webkit-linear-gradient(top, #E6E6E6, #CCC);
background-image: -moz-linear-gradient(top, #E6E6E6, #CCC);
background-image: -ms-linear-gradient(top, #E6E6E6, #CCC);
background-image: -o-linear-gradient(top, #E6E6E6, #CCC);
}

Dropping Shadow on text using text-shadow:

#Shadow{
text-shadow: 2px 2px 2px #000; /* 1st two set how far right and below the shadow does, the 3rd sets the blur distance and the last option sets the color of the shadow */
}

Creating Columns rather than floating dividers:

#DividingIn3:
-moz-column-count: 3;   /* sets the number of columns */
-moz-column-gap: 2em;   /* sets the gap/distance between columns */
-moz-column-rule: 1px solid #CCCCCC;   /* makes a visible divider which I personally do not like */
-webkit-column-count: 3; 
-webkit-column-gap: 2em; 
-webkit-column-rule: 1px solid #CCCCCC;
}

Background Gradient:

Create a liner gradient from left to right: (black to white)

#LinerBackground{

background-repeat: repeat-y;

background: -webkit-gradient(linear, left top, right top, from(#000000), to(#ffffff));

background: -webkit-linear-gradient(left, #000000, #ffffff); //Chrome or safari

background: -moz-linear-gradient(left, #000000, #ffffff); //Firefox

background: -ms-linear-gradient(left, #000000, #ffffff); // IE 10

background: -o-linear-gradient(left, #000000, #ffffff); //Opera

// black: #000000 and white #ffffff  – change as pleases

}

Create a linear multi colour gradient:

#LinerMultiColorBackground{

background-repeat: repeat-y;

background: -webkit-linear-gradient(left, red, yellow, green); //Chrome or safari

background: -moz-linear-gradient(left, red, yellow, green); //Firefox

background: -ms-linear-gradient(left, red, yellow, green); // IE 10

background: -o-linear-gradient(left, red, yellow, green); //Opera

}

Creating a diagonal colour gradient: (as above but replace the 1st parameter “left” with a diagonal degree, example “250deg”

#DiagonalMultiColorBackground{

background-repeat: repeat-y;

background: -webkit-linear-gradient(250deg, red, yellow, green); //Chrome or safari

background: -moz-linear-gradient(250deg, red, yellow, green); //Firefox

background: -ms-linear-gradient(250deg, red, yellow, green); // IE 10

background: -o-linear-gradient(250deg, red, yellow, green); //Opera

}

Creating a Radial gradient:

#RadialGradient {

background-position: center center;

background-repeat: no-repeat;

background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));

background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); //Chrome and Safari

background: -moz-radial-gradient(circle, #1a82f7, #2F2727); //Firefox

background: -ms-radial-gradient(circle, #1a82f7, #2F2727); //IE 10

}

 

Perspective

.perspective {
-webkit-transform: perspective(600px) rotateX(40deg) rotateY(20deg);
-moz-transform: perspective(600px) rotateX(40deg) rotateY(20deg);
-ms-transform: perspective(600px) rotateX(40deg) rotateY(20deg);
-o-transform: perspective(600px) rotateX(40deg) rotateY(20deg);
transform: perspective(600px) rotateX(40deg) rotateY(20deg);
}

The above will make it bend from top and from right. rotateX is used to perspect element upwards while rotateY will perspect element to the right.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s