CSS Triangles

/* create an arrow that points up */
div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; /* left arrow slant */
border-right:5px solid transparent; /* right arrow slant */
border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}

/* create an arrow that points down */
div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}

/* create an arrow that points left */
div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-right:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}

/* create an arrow that points right */
div.arrow-right {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-left:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}

Css3 maker

http://css3maker.com/index.html

 

http://www.colorzilla.com/gradient-editor/

 

http://css-tricks.com/examples/ButtonMaker/

The 30 CSS Selectors you Must Memorize

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

CSS3 support for Internet Explorer 6, 7, and 8

http://fetchak.com/ie-css3/

 

How to use it

Just add CSS styles as you normally would, but include one new line:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

Add music / sound in html page

add this in the header
<bgsound src=”signature_tune.mp3″ loop=”infinite”>

add this code in the html body
embed src=”signature_tune.mp3″ autostart=”true” loop=”10″ loop=”true” hidden=”true”></embed

How to use clear gap inside the div (css and Xhtml code)

body
{
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px auto;
vertical-align:top;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color: #181123;
font-size:12px;
line-height: 16px;
color:#333333;
text-align:left;
background: url(../images/bg.jpg) no-repeat center center fixed;
}

#container
{
width: 990px;
height: auto;   /*important */
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
border: 1px solid #00FF00;
}

div.clgap{
clear: both;
width: 100%;
height: 0px;
padding: 0px;
margin: 0px;
}

 

css code for using a background image

body
{
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px auto;
vertical-align:top;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color: #6ab9d4;
font-size:12px;
line-height: 16px;
color:#FFFFFF;
text-align:left;
background-image: url(../images/bg.jpg);
background-size: 100%;
background-attachment:fixed;
background-repeat:no-repeat;
}

 

New code for BG

html {
background: url(../images/bg1.jpg) no-repeat center center fixed #181123;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body
{
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px auto;
vertical-align:top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 16px;
color:#333333;
text-align:left;

}