Top Web2 » CSS http://topweb2.net/blog Javascript , CSS , XHTML , Web 2 ,PHP and more Tue, 11 May 2010 13:56:31 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 css3 magic http://topweb2.net/blog/css3-magic http://topweb2.net/blog/css3-magic#comments Wed, 23 Sep 2009 19:39:07 +0000 Net Code http://topweb2.net/blog/?p=76 we will talking today about the awesome css3 features the implemented by w3 supported with many browsers on top of them safai and google chrome and of cource firefox

1- background image size:-

with css2 it was impossible to define a size to background image  but with css3 you can simply define the background image size by a few css lines

you can add something like that if we want 100% background size in css3

background:transparent url(img/simplebg.jpg) no-repeat;
background-size: 100%;

simple , isn’l :) , but wait

you tried it and it  didn’t work with you ??

unforunately that will face you much when you dealing with css 3 issues becasue it doesnt implemented the same way in all browsers and doesn’t implemented yet in browsers such as internet explorer

so we will add some lines to work in the most browsers

-o-background-size for opera browser

-webkit-background-size for webkit engine browsers -> safari and google chrome

unfortunately it didn’t work with firefox

so our code will be

background:transparent url(img/simplebg.jpg) no-repeat;
background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%

2- multi background :-

another awesome feature in css3 is multi background

you can add multi background to one container , you think its hard look at this

background:url(img/twiter.png) no-repeat top right,url(img/simplebg.jpg) no-repeat top left;

simple and easy  thats it

important note :-

the order is very important here because the first image will be above the next one etc..

we can merge the previous features together like that

background:url(img/twiter.png) no-repeat top right,url(img/simplebg.jpg) no-repeat top left;
-webkit-background-size:auto  auto, 100%;

3 - background-border :-

yes you can now define a background to be a border to a container

see the  next image

you can define the border cordinations like that

border-image:url("img/simpleborder.png") 25% 30% 12% 20%

we can use some reserved words like (stretch,repeat,round)

and we will add some extentions to work with most common browsers

-webkit-border-image:url("img/simpleborder.png") 25% 30% 12% 20%;
-moz-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;
-o-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;
-khtml-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;

4-  transparent colors:-

we was doing transparent colors by making the global container transparent via obacity features  but now you can simply make the  background colors only transparent by rgba

rgba(0,0,0,0.5)

the first 3 values is the rgb  values and the last value is the obacity value

note: there is a code from webdesignerdepot http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today

]]> http://topweb2.net/blog/css3-magic/feed 0 css is not only for screen its for print too http://topweb2.net/blog/css-print-stylesheet http://topweb2.net/blog/css-print-stylesheet#comments Wed, 08 Apr 2009 16:33:40 +0000 Net Code http://topweb2.net/?p=30 CSS Print Stylesheet:-

many of us working on css to style web page for the visitors
you may added this line before in your page

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

ok the css file now will affect the screen but what if we want the css affect the print

yes we want the visitor print the page but without the menu , advertisement .. etc

ok we will now create a  css file and we will name it print.css

now add this line to your page

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

do you notice someting ??
yes , media=”print” this tells the browser to use this css file when print

concepts of print style sheet:-

1- adjust body margin

adjust the body margin so printed page margin will be as you want not the browser default
you can use this for example

body{margin:0;

border:1px solid #000000;

}

2- use one measure for your fonts and line height and related things:

you must use one measure for font size and related things like pt , em so it can display good on your printer

:)

3- page break

the biggest problem will face any developer in print issues is page break , the browsers differ in page break , many times before i used print css if web page is longer than one page it cause pagebreak but if there is image in the middle of that break it will cut and there is a disaster

so you can adjust the page break by

page-break-beforepage-break-after

it tells the browser where to break the page before or after element

for example if you want page to break after the div named “break-div” you may type this line in print.css

#break-div{page-break-after:always;

}

4- other tips:

- don’t ever use background color or background image in your print stylesheet the visitor will hate you :P

- try to be very simple the visitor when he wants to print your page he wants to keep the information in your page not the design

- just use the print css :) its better and more professional

enjoy and see you in another post :)

]]> http://topweb2.net/blog/css-print-stylesheet/feed 0 transparent in css http://topweb2.net/blog/transparent-in-css http://topweb2.net/blog/transparent-in-css#comments Sat, 04 Apr 2009 16:13:34 +0000 Net Code http://topweb2.net/?p=17 lets start today talking about exciting issue in lovely css
how to make transparent div in css working in firefox ,internet explorer and opera

ok first lets make a small div

hi i am transparent

ok now in css lets type

.transparent_div{
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
}

now you can see your div transparent
i tested the code on firefox , internet explorer and opera
have fun and see u

]]> http://topweb2.net/blog/transparent-in-css/feed 0