5 Cool CSS tricks for beginners

In this tutorial you are going to learn five awesome css hacks, so get ready

1. Change text selection color and style

Ever tired of seeing the normal text selection color?

Then it is actually very easy to customize it by using the ::selection selector in css. But some browsers don't support it and some are supported by using prefixes.

Here is a sample code:

::-moz-selection { /* Prefix for Firefox browser */
  color: white;
  background: red;
}
::selection {
  color: white;
  background: red;
}

2. Horizontal centering an element

There is an easy trick to center an element in html but you need to set the width in order to do that.

The following code will center the div with the class container inside its parent.

.container {
  width: 600px;
  margin: 0 auto;
}

3. Responsive Fluid Image

You can create responsive images that resize according to the browser width by using this code.

img {
  max-width: 100%;
  height: auto;
}

Use width rather than max-width if you don't want to scale up the image to be larger than its original size.

4. CSS Shapes

CSS Triangle

The idea of making the triangle is first we create a div with zero width and height and its border is going to become the triangle so we set its border width to a non zero value. Then we are going to set the color of its three side to transparent so the other side become triangle shaped.

<div class="triangle"></div>

.triangle {
  border-color: transparent transparent #0088ff transparent;
  border-style: solid;
  border-width: 0px 300px 300px 300px;
  height: 0px;
  width: 0px;
}

CSS Circle

The circle can be created by using border-radius property.

<div class="circle"></div>

.circle {
  width: 300px;
  height: 300px;
  background-color: #0088ff;
  border-radius: 150px;
  -moz-border-radius: 150px;
  -webkit-border-radius: 150px;
}

5. Cross-Browser Transparency

The cross-browser transparency can be achieved using the following css code:

.transparency {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Thanks for reading this article. Ask questions in the comments Section