CSS is used to control the style and layout of Web pages. Having CSS3 as the latest standard for CSS. CSS3 offers a great variety of new tricks to make a big impact regarding your web design that would make your site look better and more professional. Front-end developers can now easily create sophisticated visual effects using CSS3 without even using Photoshop. Most of the top websites use a stunning css trick which captures the eyes of their viewers and make them come back again and again. You can do the same thing as they did. Have your site embellish with this cool CSS3 tricks and give your site an impression with a big “WOW”. With no further do, these are the showcase of some css3 tricks that would help you a lot.

Letterpress effect

The letterpress effect has grown rapidly popular in web design, and with the modern browsers which now supports the text-shadow CSS3 property, now it’s simple and easy to create this effect with pure CSS. No need of Photoshop anymore just to have this.

Pure CSS3 Letterpress Effect

<em id="__mceDel">
<style type="text/css">

* { margin, padding: 0; }

body {

background: #474747 url(bg.png);

margin: 70px;

}

h1 a {

display: block; text-decoration: none;

font: 150px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;

text-align: center;

color: #999; text-shadow: 0px 3px 8px #2a2a2a;

}

h1 a:hover {

color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;

}

h2 {

font: 70px Tahoma, Helvetica, Arial, Sans-Serif;

text-align: center;

color: #222; text-shadow: 0px 2px 3px #555;

}

pre {

width: 500px; margin: 0 auto; background: #222; padding: 20px;

font-size: 22px; color: #555; text-shadow: 0px 2px 3px #171717;

-webkit-box-shadow: 0px 2px 3px #555;

-moz-box-shadow: 0px 2px 3px #555;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

</style>


Source: http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

Speech Bubble in Pure CSS

Speech bubbles are a popular effect but some do this trick using presentational html or JavaScript. Now get free with those images and JavaScript and have this effect with pure css.


/* Bubble with an isoceles triangle

------------------------------------------ */

.triangle-isosceles {

position:relative;

padding:15px;

margin:1em 0 3em;

color:#000;

background:#f3961c;

/* css3 */

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

background:-moz-linear-gradient(top, #f9d835, #f3961c);

background:linear-gradient(top, #f9d835, #f3961c);

}

/* creates triangle */

.triangle-isosceles:after {

content:"";

display:block; /* reduce the damage in FF3.0 */

position:absolute;

bottom:-15px;

left:50px;

width:0;

border-width:15px 15px 0;

border-style:solid;

border-color:#f3961c transparent;

}

Soruce: http://nicolasgallagher.com/pure-css-speech-bubbles/

Zebra Striping Effect in a Table with CSS3

Strippen up your table and have this zebra striping effect. Add more spice to your table.


tbody tr:nth-child(odd) {

background-color: #ccc;

}

Source: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

Image Flipping

Using CSS3, you can now easily flip an image. With just a little code you can now have that flipping effect going.


img {

-moz-transform: scaleX(-1);

-o-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

filter: FlipH;

-ms-filter: "FlipH";

}

Source: http://css-tricks.com/snippets/css/flip-an-image/

Change Text Selection Color

You can also change the color of the text selection if you want to by applying only this few lines of code.


/* Mozilla based browsers */

::-moz-selection {

background-color: #FFA;

color: #000;

}

/* Works in Safari */

::selection {

background-color: #FFA;

color: #000;

}

Source: http://css-tricks.com/snippets/css/change-text-selection-color/

Rounded Corners with CSS3

CSS3 is really great it can now even render a rounded corner.


-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px; /* future proofing */

-khtml-border-radius: 10px; /* for old Konqueror browsers */

Source: http://css-tricks.com/snippets/css/rounded-corners/

Style-up your blockqoutes

Add some spice with your blockqoutes and get rid of those common blockqoute displays.


blockquote {

background:#f9f9f9;

border-left:10px solid #ccc;

margin:1.5em 10px;

padding:.5em 10px;

quotes:"201C""201D""2018""2019";

}

blockquote:before {

color:#ccc;

content:open-quote;

font-size:4em;

line-height:.1em;

margin-right:.25em;

vertical-align:-.4em;

}

blockquote p {

display:inline;

}

Source: http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

Animated Buttons

Create an incredibly attractive animated buttons using CSS3. No JavaScript just pure CSS.

<a href="#" role="button">Arsenal Arsenal Arsenal</a>

 


a.button:link,

a.button:visited,

button,

input[type=submit],

input[type=button] {

border: 0;

color: white;

display: inline-block;

font: 600 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif;

height: 32px;

background-color:

#267CC2;

padding: 0 24px;

position: relative;

text-align: center;

text-decoration: none;

text-shadow: 0 1px 0 rgba(0, 0, 0, .25);

white-space: nowrap;

border-radius: .5em;

box-shadow: 0 2px 1px rgba(0, 0, 0, .2), inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 0 rgba(255, 255, 255, .2);

background-color: #267CC2;

background-image: linear-gradient(#42A5E1, #267CC2);

transition-property: -moz-box-shadow,-webkit-box-shadow,box-shadow,line-height;

transition-duration: .2s,.2s,.2s,.2s;

}

a.button:hover,

a.button:focus,

button:hover,

button:focus,

input[type=submit]:hover,

input[type=button]:hover,

input[type=submit]:focus,

input[type=button]:focus {

box-shadow: 0 4px 1px rgba(0, 0, 0, 0.2), 0 -3px 0 rgba(0, 0, 0, 0.2) inset;

line-height: 28px;

text-decoration: none;

}

a.button:active, button.button:active {

box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, .2), inset 0 12px 24px 6px rgba(0, 0, 0, .2), inset 0 0 2px 2px rgba(0, 0, 0, .2);

transition-duration: .1s,.1s,.1s,.1s;

line-height: 34px;

}

Source: http://davidwalsh.name/animated-buttons

CSS3 Grayscale image effect

Have a black and white effect in your images using this CSS3 trick. This will display any colored image having the following css class into black and white.


img.grayscale {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

}

Via - http://demosthenes.info/blog/532/Convert-Images-To-Black–White-With-CSS

Nice Page Top Shadow Effect

A simple trick to give your site a nice page top shadow effect.  Apply this few lines of css then "Voila"!


body:before {

content: "";

position: fixed;

top: -10px;

left: 0;

width: 100%;

height: 10px;

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

box-shadow: 0px 0px 10px rgba(0,0,0,.8);

z-index: 100;

}

Via - http://playground.genelocklin.com/depth/

Double-click detection in CSS3

What? Double-click detection in CSS3? Well that's a big YES, and no need for a JavaScript code. CSS3 can now do that for you. Just apply the code below and see the magic revealed before your very eyes.


<div>

<span><input type="text" value="&nbsp;" readonly="true" />

<a href="http://google.com">Double click me</a></span>

</div>

 


<style type="text/css">

.test3 span {

position: relative;

}

.test3 span a {

position: relative;

z-index: 2;

}

.test3 span a:hover, .test3 span a:active {

z-index: 4;

}

.test3 span input {

background: transparent;

border: 0;

cursor: pointer;

position: absolute;

top: -1px;

left: 0;

width: 101%;  /* Hacky */

height: 301%; /* Hacky */

z-index: 3;

}

.test3 span input:focus {

background: transparent;

border: 0;

z-index: 1;

}

</style>

Via - http://css-tricks.com/examples/CSSDoubleClick/

Get a Triangle in CSS3

You heard it right, a triangle using CSS3. It seems that CSS is more and more self-sufficient and can even make a simple shape like a triangle with no need of any image editing tool. More lightly and elegant you can try this neat trick with just a little amount of code.


/* create an arrow that points up */

div.arrow-up {

width:0px;

height:0px;

border-left:5px solid transparent;  /* left arrow slant */

border-right:5px solid transparent; /* right arrow slant */

border-bottom:5px solid #2f2f2f; /* bottom, add background color here */

font-size:0px;

line-height:0px;

}

/* create an arrow that points down */

div.arrow-down {

width:0px;

height:0px;

border-left:5px solid transparent;

border-right:5px solid transparent;

border-top:5px solid #2f2f2f;

font-size:0px;

line-height:0px;

}

/* create an arrow that points left */

div.arrow-left {

width:0px;

height:0px;

border-bottom:5px solid transparent;  /* left arrow slant */

border-top:5px solid transparent; /* right arrow slant */

border-right:5px solid #2f2f2f; /* bottom, add background color here */

font-size:0px;

line-height:0px;

}

/* create an arrow that points right */

div.arrow-right {

width:0px;

height:0px;

border-bottom:5px solid transparent;  /* left arrow slant */

border-top:5px solid transparent; /* right arrow slant */

border-left:5px solid #2f2f2f; /* bottom, add background color here */

font-size:0px;

line-height:0px;

}

Via - http://davidwalsh.name/css-triangles

Have your math problem solved with CSS calc()

This css trick works like a charm if you want to perform calculations to determine a specific elements dimension in your web browser. It can calculate the size and the shape of an element but specific length is required to do so.


/* basic calc */

.simpleBlock {

width: calc(100% - 100px);

}

/* calc in calc */

.complexBlock {

width: calc(100% - 50% / 3);

padding: 5px calc(3% - 2px);

margin-left: calc(10% + 10px);

}

Via - http://davidwalsh.name/css-calc

Gradient with CSS3

One of the popular things used in the modern web is the gradient effect. Now it's a lot easier to have that with CSS3.


h2[data-text] {

position: relative;

}

h2[data-text]::after {

content: attr(data-text);

z-index: 10;

color: #e3e3e3;

position: absolute;

top: 0;

left: 0;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Via - http://snipplr.com/view/49911/pure-css-text-gradients/

Disable pointer actions with CSS3

CSS3 has newly introduced a new property called "pointer-events" which allows you to disable any pointer events within an affected element. It can disable a valid link not to be clickable by applying the following class.


.disabled {pointer-events: none; }

Source: http://davidwalsh.name/pointer-events

Stitch it up with CSS3

Also a very nice stitch effect can have an elegant look in any element. Now CSS3 can do that.


p {

padding: 5px 10px;

margin: 10px;

background: #ff0030;

color: #fff;

font-size: 21px;

line-height: 1.3em;

border: 2px dashed #fff;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);

-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);

box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);

text-shadow: -1px -1px #aa3030;

}

Via - http://www.catswhocode.com/blog/snippets/stitched-elements-in-css3

Webkit and CSS3 Custom Scrollbars

You can now easily add a new look with the browsers scrollbars. Customize the look and feel of your scrollbars by having this few lines of code. Just a reminder, only webkit renders this code.


::-webkit-scrollbar {

width: 12px;

}

::-webkit-scrollbar-track {

background: none;

}

::-webkit-scrollbar-thumb {

background: -webkit-linear-gradient(left, #547c90, #002640);

border: 1px solid #333;

box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);

}

Source: http://davidwalsh.name/custom-scrollbars

Blurry Text effect

Simply yet nice text blur effect with CSS3. Easy to apply yet elegant in style.


.blur {

color: transparent;

text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

Via - http://css-tricks.com/snippets/css/blurry-text/

Ribbon Effect using Pure CSS3

Lastly, the css3 trick that really amazes me is this fancy corner ribbon effect. A fancy ribbon effect with CSS3 can tart up your website. Having a bit of a long code but it's worth it.

The HTML:


<div>

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

</div>

The CSS:


.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;

position:absolute;

bottom: -3px;

}

.ribbon-green:before {

left: 0;

}

.ribbon-green:after {

right: 0;

}

Via - http://jsfiddle.net/chriscoyier/H6rQ6/1/

So there you have it! Isn't it amazing? I’m sure you have learned a lot from that list of cool css3 tricks that you might gonna used now or in the future in embellishing your site. There's more of that if you widen up your imagination and especially by applying that idea using CSS3. Just always remember that your design can make or break your website's look and feel. Freshen up your web and make a renovation using CSS3.

Avatar Image

Raymond Serion

To Fear God is the beginning of Knowledge...