Showing posts with label css. Show all posts
Monday, April 12, 2010

5 css3 semantic code generators

Css3 become more and more popular , because it has many and  many features and the full support from browsers . you can see on my blog that I'm using it  for several items and i think it gives a great look instead of images .
Css3 can make you a great designer by following it’ features to make your site more elegant and usable .
In the following are a set of web apps that generates a semantic css3 code to be more productive and discover the power of it.Enjoy!

CSS3, Please!

css3please

Css3 please is an amazing tool for generating live css3 code , it support #font-face, border-radius, box_transitions and more for Mozilla-based and WebKit-based browsers . Just you can edit the underlined values in the page and you can see the changes live.

Wednesday, March 24, 2010

simple tips for creating a printer-friendly page

Every website should have it's own css file that define how the pages will looks properly on tha peper not only the screen .Imagine you were to print a web page exactly as it appears on your screen , you will wasting a lot of ink and paper.The print style can decrease a lot of ink  and increase the user experience and make you website more friendly .

First i want to show the difference  between  the other popular  media types .

All : used for all media the devices .

Print : used for documents viewed on screen in print preview mode.

Screen : used for color computer screen .

there are many type of media types such as (braille, handheld , speech and tv) but they are  not popular.

1 - Creating a print.css file .

The first thing to do is to create a new css file that dictates how a page looks when printed and set the media property to print .


<link rel="stylesheet" type="text/css"  href="css/print.css" media="print" /> 

You can also use one stylesheet for all media by set the media property to all


<link rel="stylesheet" type="text/css"  href="css/print.css" media="all" /> 

or you can use one stylesheet for more than one media by separate the media types with comma


<link rel="stylesheet" type="text/css"  href="css/print.css" media="print,screen" /> 
 

Use the first method for the print type and the other two methods are just for more information about the media types .

Thursday, March 19, 2009

How to hiding text with css3 ?

In this tutorial i make an new css3 tutorial by use selection declaration in css3 to change the default
blue color when you select text on page but it is not supported by iE
first type your xhtml such as

then type css code like this


::-moz-selection is very important for firefox
This is how it should look:

JavaScript String lastIndexOf OnTwik