Articles for CSS3
In: CSS
19 Apr 2011Tweet Ever wondered how to make CSS3 inner shadow? Quite easy actually! Take a look at this CSS3 inner shadow snippet, and example below it. -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.4); -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.4); box-shadow: inset 0 4px 6px rgba(0,0,0,.24); Example of CSS3 inner shadow CSS3 inner shadow I hope you’ll enjoy [...]
In: CSS
9 Aug 2010Tweet Until recent, not many of CSS3 properties have been used. There is one function though that has been used a while: opacity. To use opacity on your website, you should setup opacity property in your CSS file, like shown in snippet. 1 2 3 4 5 div.my_box { opacity: 0.5; width: 100px; height: 100px; [...]
In: CSS
13 Jul 2010Tweet CSS3 reflection is a nice way to get reflection effect without using JavaScript. To use CSS3 reflection, use command: box-reflect: <direction> <offset> <mask-box>; Just copy/paste following snippet to use CSS3 reflection from example below: 1 2 3 4 5 6 <img src="http://stuntsnippets.com/demo/css3-transitions.png" width="200" height="200" style="-webkit-box-reflect: right 1px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(0.4, [...]
In: CSS
10 Jul 2010Tweet CSS3 supports a lot of nice features that we could only make through JavaScript in past. One of features is CSS3 transitions. In this simple example, we shall show you how to code and use CSS3 transitions. First, we shall define CSS in which we’ll have CSS3 transitions defined for our object on HTML. [...]
In: CSS
4 Jul 2010Tweet To use CSS3 gradient, copy and paste following code on your project. To understand CSS3 gradient better, see “Explanation of CSS3 gradient”. 1 2 background: -moz-linear-gradient(center top , #FFFFFF, #CCCCCC 1px, #FFFFFF 100px); background: -webkit-gradient(linear, left top, left 100, from(#FFFFFF), color-stop(1%, #CCCCCC), to(#FFFFFF)); Explanation of CSS3 gradient There are Webkit and Gecko type of [...]
In: CSS
1 Jul 2010Tweet To add CSS3 shadow to an element, use following code: 1 2 3 4 box-shadow: 10px 10px 20px #888; -webkit-box-shadow: 10px 10px 20px #888; -moz-box-shadow: 10px 10px 20px #888; padding: 65px 5px 5px 10px; Explanation of CSS3 shadow snippet: CSS3 shadow is written like box-shadow: Xpx Ypx Lpx #COLOR; where: box – is has [...]
