7 amazing CSS3 Tricks for Beginner

CSS is a short form of the Cascading Style Sheet. Here I am going to give you the idea about 7 amazing CSS3 Tricks for a beginner, that can help you to furnish your web page. Some techniques are very important and you can’t make a single page without them. So, let’s start with an introduction:

An introduction of CSS:

CSS Selectors: When you make an HTML document you may need to use HTML markup. HTML Markups are very simple to use such as <html> or <h1> etc. For example, open a Notepad and write:

<!doctype html>
<html>
<h1>This is My Heading</h1>
</html>

Now, Save the document with a .html extension, and make sure the save as type is “All files” and see the change in your browser.

It is an HTML document, and each HTML markup is a CSS selector without its bracket. So if you want to alter the color of the heading, you can use the h1 tag as a selector of this HTML element. Let’s use this technique for our newly created .html document.

Insert the CSS into HTML: There are three ways to implement CSS into HTML:

  • External,
  • Internal and
  • Inline method.

Our text is very short so that we can use the inline method.

We said before that h1 is our selector. So we can define the h1 style like that,

<h1 style="color:red;">This is My Heading.</h1>

Now, save the document and see the change. CSS and CSS3 also follow the straightforward and basic way hows the CSS work. But there’s some advanced technique for CSS3 that can make your design work superstar. The primary objective of this article is to introduce you to this method to stay ahead in the world of web design.

Top 7 CSS3 Techniques:

1. Border-radius: A wonderful technique to create rounded borders. Using border-radius, you can easily give a rounded edge to your website background or button.

Let’s see the live example: Open the codepen.io and write down these codes in HTML block:

<!DOCTYPE html> 
<html>
<body> 
<div id="border-radius">
<p>The border-radius property is a wonderful css3 technique that allow you to add visible rounded corners.</p>
</div> 
</body> 
</html>

Here we create a simple HTML document with a paragraph. It is nested by div tag. Let’s say it “border-radius”. You can rename it with any name you want. Now, insert the codes from below in the CSS tab of Codepen:

#border-radius{ 
border: 2px solid #79b538; 
padding: 10px 40px; 
background: #79b538; 
width: 300px; 
border-radius: 15px; 
font-size: 25px; 
color: #fff; 
text-align: center; 
}

2. Background gradient property: This technique is useful for creating a website background with a gradient color. Let’s see the example:

<!DOCTYPE html>
<body> 
<h3>Linear Gradient - Top to Bottom</h3> <div id="gradient"></div> 
</body> 
</html>

And for CSS tab:

#gradient {
height: 200px;
background: -webkit-linear-gradient(red, purple); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, purple); /* For Opera 11.1 to 12.0 */     
background: -moz-linear-gradient(red, purple); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, purple); /* Standard syntax (must be last) */ }To get the left to right or right to left gradient, mixing up the value with the color name. Let’s have a look now. Use the codes instead of the linear properties:

For left, to right gradient, you can use this CSS method:

#gradient {
height: 200px;
background: -webkit-linear-gradient(left, red, purple); /* For Safari  browser v. 5.1 to 6.0 */     
background: -o-linear-gradient(right, red, purple); /* For Opera  browser 11.1 to 12.0 */  background: -moz-linear-gradient(right, red, purple); /* For Firefox  browser 3.6 to 16 */  background: linear-gradient(to right, red, purple); /* Standard syntax (must be last) */
}

3. CSS3 Transform property: With CSS3 transform, you move, turn, spin, scale or skew an element.  It is a new property of CSS3 that can change the shape, size, and position of an element. Here we are going to rotate an HTML rectangle div element into 30 degrees from left to right. To do this, we can use a simple CSS3 transform method. So we are creating the HTML first and then CSS in the Codepen.io. Here is the HTML code:

<!DOCTYPE html> <html>
<body> 
<div>
Hello
</div> 
</body>
</html>

And the CSS for this transform is,

.rotate {
width: 300px; 
height: 200px; 
background-color: Green; /* Rotate div */
ms-transform: rotate(30deg); /* IE 9 */ 
webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */ 
transform: rotate(30deg); /* Standard syntax */ }Try the codes below with a notepad and see the live example:

It is an example of  2d CSS transform rotate method. You will try the other methods too. For instance,

translate()
rotate()
scale()
skew()
matrix()

4. CSS 3d Transform methods: 3d transform method allows you to rotate an element like a 3d object. Now this rule is developed by

rotateX()
rotateY()

These elements are good practices for HTML5 Games.

5. CSS3 Transition: Using this method in CSS3 you can change an element from one style to another without flash or JavaScript. To successfully use this method you need to specify two things:

  • CSS property or value that you want to apply the effect for.
  • The duration of the effect.

Write down the code in codepen.io and see the live example:

<html>
  <body> 
    <div class="transition">
      <p>CSS3 Transitions</p>
    </div> 
  </body> 
</html>

In the CSS tab:

.transition { 
  width: 100px;
  height: 100px;
  background: green;
  transition: width 2s, height 4s;
} 
.transition:hover {
  background: yellow;     
  width: 300px;
  height: 300px;
}

In this code, the main element’s width and height is 100px. By applying the transition property in width and height, we can enlarge it 300px on both sides.

6. CSS3 Animation: It is a wonderful rule of CSS3 that can used as an animation created by JavaScript and Flash. The animation rule is needed to define with @keyframes. When you apply some CSS property with @keyframe rule, your element will gradually show the change.

<!DOCTYPE html> 
<html> 
  <body> 
    <div class="animation"><p>Some Text</p></div> 
  </body> 
</html>

For CSS tab:

.animation {
width: 200px;
height: 200px;
background: green;
-webkit-animation: change 10s; /* Chrome, Safari, Opera */     
animation: change 10s; 
} /* Chrome, Safari, Opera */ @-webkit-keyframes 
change {
from {
background: yellow;
}
to {
background: green;
} 
} /* Standard syntax */ 
@keyframes change {
from {
background: yellow;
}
to {
background: green;
}
}

In this code, we are defining the color of an HTML box-like element that has 200px width and height. In the HTML animation, the background gradually changes from yellow to green. It takes 10 seconds to change.

7. CSS3 Multiple Columns: CSS3 multiple columns let you create multiple columns style as a newspaper without using any extra selector.

<!DOCTYPE html>
<html>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-gap property.</p>
<div class="newspaper">
CSS3 multiple columns let you to create multiple columns style as newspaper without using any extra selector. CSS3 multiple columns let you to create multiple columns style as newspaper without using any extra selector. CSS3 multiple columns let you to create multiple columns style as newspaper without using any extra selector.
</div>
</body>
</html>

And, the CSS style sheet:

.newspaper {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;
}

Okay, that is the CSS3 technique to furnish new design skills in a simple way. Remember, CSS3 is the soul of modern web design. So, we must have a try with these techniques.