Rounded Corners

<br /><%%KEEPWHITESPACE%%>     border-radius: 10px;<br /><br /><%%KEEPWHITESPACE%%>     /*It's the same as below*/<br /><br /><%%KEEPWHITESPACE%%>     border-top-left-radius: 10px;<br /><%%KEEPWHITESPACE%%>     border-top-right-radius: 10px;<br /><%%KEEPWHITESPACE%%>     border-bottom-left-radius: 10px;<br /><%%KEEPWHITESPACE%%>     border-bottom-left-radius: 10px;<br />

Text Shadow

<br /><%%KEEPWHITESPACE%%>     text-shadow: 5px 5px 7px #232323;<br /><br /><%%KEEPWHITESPACE%%>     /*The first value is an horizontal offset*/<br /><%%KEEPWHITESPACE%%>     /*The second value is an vertical offset*/<br /><%%KEEPWHITESPACE%%>     /*The third value is the blur radius*/<br /><%%KEEPWHITESPACE%%>     /*The last value is the color of the shadow*/<br />

Box Shadow

<br /><%%KEEPWHITESPACE%%>     box-shadow: 5px 5px 7px #232323;<br /><br /><%%KEEPWHITESPACE%%>     /*The first value is an horizontal offset*/<br /><%%KEEPWHITESPACE%%>     /*The second value is an vertical offset*/<br /><%%KEEPWHITESPACE%%>     /*The third value is the blur radius*/<br /><%%KEEPWHITESPACE%%>     /*The last value is the color of the shadow*/<br />

In case you see that the above styles aren’t working, lets see if specifying them for certain browsers work. You can also use the below technique if the style looks funny in one browser but not the other (just change the values for the browser type you seek to alter):

<br /><%%KEEPWHITESPACE%%>     -moz-box-shadow: 5px 5px 7px #232323; /* targets Mozilla Firefox */<br /><%%KEEPWHITESPACE%%>     -webkit-box-shadow: 5px 5px 7px #232323; /* targets Safari and Chrome */<br /><%%KEEPWHITESPACE%%>     -o-box-shadow: 5px 5px 7px #232323; /* targets Opera */<br /><%%KEEPWHITESPACE%%>     -ms-box-shadow: 5px 5px 7px #232323; /* targets Internet Explorer */<br />

Font Family (will not work on some browsers)

The @font-face property was something they tried to implement in CSS2 but it only accepted one font format – the oet. With the release of some newer browsers, you can use any license TrueType (ttf) or OpenType font (otf) in your pages.

<br /><br /><%%KEEPWHITESPACE%%>     @font-face {<br /><%%KEEPWHITESPACE%%>          	font-family: VariableName; src: url('fonts/nameofyourfile.otf');<br /><%%KEEPWHITESPACE%%>     }<br /><br /><%%KEEPWHITESPACE%%>     p {<br /><%%KEEPWHITESPACE%%>          	font-family: VariableName; /*This is the same as what you made in the previous declaration*/<br /><%%KEEPWHITESPACE%%>     }<br /><br />

For more information about the @font-face property, read this article.

Tweet