Tag: CSS3

Gradient in CSS3

Check out my previous post about text-shadow ,  box-shadow  and Draw simple drawing board application using HTML5 Canvas.

This post is about how to use gradient background or gradient color without using any image which is purely using HTML5
CSS3 style sheet.

let’s look at the syntax:

background: linear-gradient([Direction] [color] [percentage]);

Direction: (Top/45 deg/Left/Radial) in which direction you need to spread color

Color: which color to fill

Percentage: what percentage of the areal to be filled with Color.

there are multiple syntax supported by different browser.

check out the following CSS3 syntax for different browser.

background: #b3dced; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(135deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

check out the following ultimage css3 gradient generators from others:

http://www.colorzilla.com/gradient-editor/

http://gradients.glrzad.com/

and one more

Box-Shadow using CSS3

CSS3 come with really interesting list of features for website designer, which allow them to make amazing website.
One of them is box-shadow.

let look at the syntext:

box-shadow: x-shadow y-shadow blur spread inset/outset(default);

as wordpress hosting does not allow me to use <Style> tag in post I have posted some interesting box-shadow examples on my personal blog at following link

http://blog.jigneshpatel.com.au/css3-box-shadow/

hope you like it, Looking forward to receive feedback from you. 🙂

Text shadow using CSS3

There are many features introduced in new css3, and one of them was text shadow. you can create text border using text-shadow property in css3. check-out the last example.

Syntax for text shadow in css3 goes like this

h1{ text-shadow: 0 0 .2em #999 }

Sample Shadow

There is four parameters in text-shadow syntax

first x, y position of shadow , third blur of shadow and fourth is color.

and you can have multiple text-shadow property to one element. for define text-shadow multiple time just follow the syntax:

text-shadow{ x y [blur] [color], x y [blur] [color], ..}

here are some of amazing examples using text shadow.

Style:

style="text-shadow:0 0 .2em #333;

Demo:

Sample Shadow

Style:

style="text-shadow:1px 1px 0 #00ff00, 2px 2px 0 #00dd00, 3px 3px 0 #00aa00, 4px 4px 0 #009900;"

Demo:

Sample Shadow

Style:

style="text-shadow:2px 2px 0 #aaa, 4px 4px 0 #bbb, 6px 6px 0 #ccc;

Demo:

Sample Shadow

Style:

style="text-shadow:-6px -6px 0 #aaa, -4px -4px 0 #bbb, -6px -6px 0 #ccc;"

Demo:

Sample Shadow

Style:

style="text-shadow:0 0 .2em #ff0000;

Demo:

Sample Shadow

Style:

style="text-shadow:0 0 .2em #ff0000, 3px 3px 1em #eeff00;"

Demo:

Sample Shadow

Style:

style="text-shadow:-2px -2px 0 #d3ffd5, -4px -4px 0 #89ff8d, -6px -6px 0 #4efc54, -8px -8px .2em #00fc08,4px 4px 0 #b0e6fc, 6px 6px 0 #66d3ff, 8px 8px 0 #1ebdfc, -10px -10px .2em #049cd8"

Demo:

Sample Shadow

Style:

style="color: yellow;text-shadow: 0px 1px #ff7200,0px 2px #ff7200,0px 3px #ff7200, 0px 4px #ff7200,0px 5px #ff7200,0px 6px #ff7200,-1px 0 #ff1900, 0 1px #ff1900, 1px 0 #ff1900, 0 -1px #ff1900;"

Demo:

Sample Shadow

you can also use text-shadow property to create amazing text border around the font.

Style:

style="color:#ffe900; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;"

Demo:

This is text with border

Set Background glow shadow

set following CSS in body or html tag

noise

background-color: #f7931e;
	background-image: url("../images/noise.png"), -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 750, color-stop(0%, #f7931e), color-stop(100%, #f15a24));
	background-image: url("../images/noise.png"), -webkit-radial-gradient(top center, #ffffff, #ead1fc 750px);
	background-image: url("../images/noise.png"), -moz-radial-gradient(top center, #ffffff, #f15a24 750px);
	background-image: url("../images/noise.png"), -o-radial-gradient(top center, #ffffff, #f15a24 750px);
	background-image: url("../images/noise.png"), -ms-radial-gradient(top center, #ffffff, #f15a24 750px);
	background-image: url("../images/noise.png"), radial-gradient(top center, #ffffff, #f15a24 750px);
}
Background Glow
Background Glow