detect browser

Latest CSS Tutorial for Beginners

I love CSS, CSS is the only way to make the web look better. So, if you want web designing, should understand CSS. CSS is a language that is simple, easy to learn and read. My main reference is W3School. There, you can learn the basics of CSS.

CSS associated with a web browser. Because web browsers will translate into a display CSS. Therefore, always use the latest web browser, check in to know the latest version of the web browser. Did you know that by updating the web browser, you’ll get the full experience of using the web. Latest web technologies can be enjoyed in the latest web browsers, including CSS. Currently, CSS has been developed until version 3.

Update your browser will improve security for internet browsing.

Ok, back to the issue of CSS. You know, with CSS you can create beautiful web, animation, color combinations, various effects and others. This time I want to share a collection of CSS tutorial that I found on the web. From this tutorial, we can learn a lot about CSS.

Let’s start, use your favorite text editor.

1. Creating gradient Effect with CSS

This tutorial will guide you how to make a color gradient effect. In earlier times, gradient colors can only be made ​​with the image. That is, loading the website becomes longer. Each browser is different in dealing with gradient color. Not all browsers use the same code. This is due to the different rendering engine.

gradient colour

Read more / Or you can learn from basic

2. Size Unit in CSS

This tutorial will discuss the fundamental differences between Px vs Em vs Percent vs. Pt. Sometimes I am still confused with the unit. I personally often use px unit, because it is more familiar, but after I read, a lot of things that can be done with the unit, you can create a lot of things

size unit in css

Read more

3. List Tutorial in CSS

This tutorial will explain how to deal with list. List is useful for displaying menus, navigation even layouts

deal with list

Read more

4. CSS Rounded Corner

Design trend in 2013/2014 is a rounded corner, like the bootstrap. Well, this tutorial will menjarkan to you and me how to make a rounded corner of a div

rounded corner

Read more

5. Example CSS Media Queries and Implementation

CSS media queries are used to display different designs, depending on the size of the browser (in smartphones, laptops, PCs and other media).

css media queries

Read more

6. CSS Transition and Animation Tutorial

It turned out that we could make a move with the CSS animation. This is because the development of the browser and CSS3. This tutorial will discuss how to create animations with CSS.

css animation, transitions

Read more

7. Flip Div with CSS

This tutorial will discuss how to make the flip animation with CSS

flip animation with css

Read more

8. Create Corner Ribbon with CSS

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>


.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  bottom: -3px;

.ribbon-green:before {
  left: 0;
.ribbon-green:after {
  right: 0;


9. Simple Sticky Footer and Header with CSS

Simple tutorials to make-sticky headers and footers. Sticky typically used to display the menu and the navigation or it could be used to make the notification. Read more



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.