Advertise here


Tag cloud


 

Posts Tagged ‘CSS’

Prevent web page being printed

Posted on Monday, July 5th, 2010 in CSS

icon for CSS articlesHere is a great way to prevent web pages from being printed. You simply set the CSS media type (@media) to print and change the body display to none as shown below.

/*inside print.css*/
body { display:none }

Link to CSS file
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Or per page if you only need to block a few pages:

<style type="text/css"> @media print { body { display:none } } </style>

You can be more creative with this:  for instance if you don’t want certain parts of a page to print then you can simply give an element a class name or id and set it’s display to none inside the print.css file.

This is not a fool proof method to prevent a page from being printed but it is a reasonably good fix to the issue.


Any font on your web page

Posted on Sunday, July 4th, 2010 in CSS

icon for CSS articlesIn the past web designers where restricted to only web safe fonts like Arial or Times New Roman but now it is possible to use any font on the web with out using images. Using the CSS method @font-face it is possible to include any font that does not exist on any computer. Read more


Text Shadow

Posted on Sunday, July 4th, 2010 in CSS3

icon for CSS articlesUsing the CSS3 text shadow effect – it is possible to create some cool looking shadow effects. Internet Explorer does not support this feature but you can use its shadow filter to achieve a similar effect but unfortunately its limited.
text-shadow: none
[ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]
Read more


Drop Shadow

Posted on Monday, June 21st, 2010 in CSS3

icon for CSS articlesDrop shadow is a great feature and should help reduce creating images just to apply a shadow effect to a box. It was also improve on performance and accessibility because of the reduction of images used. How to apply the drop shadow effect in CSS 3. Read more


Setting Opacity IE 5.5 to IE 8, Firefox, Opera, Safari, Chrome

Posted on Sunday, June 6th, 2010 in CSS

icon for CSS articlesEver needed to know how to set opacity for elements across all web browsers, well here it is. Something to remember about opacity is all the child elements inherit it so they will become semi-transparent as well.

This code works in IE 5.5 to IE 7. You set the opacity by changing the number between the brackets which ranges from 100 to 0.
Read more


Format styles for standard HTML elements

Posted on Sunday, June 6th, 2010 in CSS

icon for CSS articlesBelow is a small and simple CSS style sheet for formatting all HTML elements.

This will improve cross browser compatibility and create consistency through your web site. Especially when you have designed a site for a client and they have chosen to maintain it, who knows what tags they will use. This will hopefully prevent the client from have odd looking bits on their site. Read more



Web Design Essex | Richard Kotze – Web Technology, Design and Development powered by WordPress | Entries (RSS)