CSS
In: CSS
19 Apr 2011Ever 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 using [...]
In: CSS
16 Sep 2010To have rounded corners on your page elements you should only use border-radius, as CSS property. However – in reality it won’t work on all browsers. To make CSS rounded corners work in IE, you should use snippet shown. To use border-radius CSS property in IE, you will need border-radius.htc file. This is a behavior [...]
In: CSS
9 Aug 2010Until 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
26 Jul 2010To position div in center of your HTML, you should set divs margin to auto. Use style from following snippet to position your div in center of html. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <head> <style> div.center { margin: 0 auto; width: 200px; height: 200px; background: #2abada; [...]
In this snippet we shall see what is the way of using CSS file with no cache. In order to achieve this, we could include different CSS file every time. We won’t actually include different CSS file, but we shall send new param. This way, we will trick browser into thinking that there is a [...]
In: CSS
13 Jul 2010CSS3 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, transparent), [...]
Whenever writing CSS for a new website, it is a good practice to use CSS reset before writing any line of code. It is a good practice doing this, since various browsers have different default settings, and you want to start on good foundations. You probably don’t want to ignore browser compatibility issue. I love [...]
