Mataga,Vanessa A IT-303 Assignment No.2 1.

Box Shadows

Mr. Roger Wyne Doctor Dec. 12, 2011

.shadow { -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000;box-shadow:inset 0 0 10px #000000;}

-moz-box-shadow: 0 0 5px 5px #888;-webkit-box-shadow: 0 0 5px 5px#888;box-shadow: 0 0 5px 5px #888;}

-moz-box-shadow: inset -5px -5px #888;-webkit-box-shadow: inset -5px -5px #888;box-shadow: inset -5px -5px #888;}

-moz-box-shadow: inset 0 0 5px 5px #888;-webkit-box-shadow: inset 0 0 5px 5px#888;boxshadow: inset 0 0 5px 5px #888;}

-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;box-shadow: 0 0 10px 5px black, 40px 30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;}

2. Round Corners of a Border

<p style="border: solid 10px #ddddff; padding: 15px; -moz-border-radius: 15px; -khtmlborder-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">;

3. Text Shadow

{text-shadow: 0.1em 0.1em 0.2em black}

4. Gradient

background-image: linear-gradient(bottom, rgb(179,233,235) 29%, rgb(235,111,206) 74%); background-image: -o-linear-gradient(bottom, rgb(179,233,235) 29%, rgb(235,111,206) 74%); background-image: -moz-linear-gradient(bottom, rgb(179,233,235) 29%, rgb(235,111,206) 74%); background-image: -webkit-linear-gradient(bottom, rgb(179,233,235) 29%, rgb(235,111,206) 74%); background-image: -ms-linear-gradient(bottom, rgb(179,233,235) 29%, rgb(235,111,206) 74%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.29, rgb(179,233,235)), color-stop(0.74, rgb(235,111,206)) );

5. Rotate/ skew Mozilla: -moz-transform: rotateX / rotateY (degree); google chrome and safari: -webkit-transform: rotateX / rotateY (degree); opera: -o-transform: rotateX / rotateY (degree); internet explorer: Transform: rotateX / rotateY (degree); Example: Transform: rotateY (30deg);

6. Opacity

img{ opacity:.50; filter:alpha(opacity=50); filter: alpha(opacity=50); }

7. Floating DIV div{ float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center;}

8. Roll-over effect with CSS .rollover_img { width: 280px;height: 150px; background-image: url(land.jpg); backgroundposition: top;-moz-border-radius:10px;- webkit-border-radius:10px; border:10px solid #ccc; font:13px normal Arial, Helvetica, sans-serif; line-height:18px; float:left; margin:0 10px 10px 0; } .rollover_img a { color: #fff; width: 280px; height: 150px; display: block; text-decoration: none; } .rollover_img a:hover {background:#000; opacity:.60; filter:alpha(opacity=60); } .rollover_img a span { display: none; width: 280px; padding:5px; } .rollover_img a:hover span { display: block; }

9. CSS codes: .chromestyle{ width: 99%; font-weight: bold; } .chromestyle:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .chromestyle ul{ border: 1px solid #BBB; width: 100%; background: url(chromebg.gif) center center repeat-x; padding: 4px 0; margin: 0; text-align: center; } .chromestyle ul li { display: inline; } .chromestyle ul li a{ color: #494949; padding: 4px 7px; margin: 0; text-decoration: none; border-right: 1px solid #DADADA; } .chromestyle ul li a:hover, .chromestyle ul li a.selected{ background: url(chromebg-over.gif) center center repeat-x; } .dropmenudiv{ position:absolute; top: 0; border: 1px solid #BBB; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px;

z-index:100; background-color: white; width: 200px; visibility: hidden; }

.dropmenudiv a{ width: auto; display: block; text-indent: 3px; border-bottom: 1px solid #BBB padding: 2px 0; text-decoration: none; font-weight: bold; color: black; } * html .dropmenudiv a { width: 100%; } .dropmenudiv a:hover{ background-color: #F0F0F0; } Javascript: var cssdropdown={ disappeardelay: 250, dropdownindicator: '<img src="down.gif" border="0" />', enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)] enableiframeshim: 1, dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {}, getposOffset:function(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; }, css:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add" && !needle.test(el.className)) el.className+=" "+targetclass }, showmenu:function(dropmenu, e){

if (this.enablereveal[0]){ if (!dropmenu._trueheight || dropmenu._trueheight<10) dropmenu._trueheight=dropmenu.offsetHeight clearTimeout(this.revealtimers[dropmenu.id]) dropmenu.style.height=dropmenu._curheight=0 dropmenu.style.overflow="hidden" dropmenu.style.visibility="visible" this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10) } else{ dropmenu.style.visibility="visible" } this.css(this.asscmenuitem, "selected", "add") }, revealmenu:function(dropmenu, dir){ var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1] if (curH<maxH){ var newH=Math.min(curH, maxH) dropmenu.style.height=newH+"px" dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1 } else{ //if done revealing menu dropmenu.style.height="auto" dropmenu.style.overflow="hidden" clearInterval(this.revealtimers[dropmenu.id]) } }, clearbrowseredge:function(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15 var dropmenuW=this.dropmenuobj.offsetWidth if (windowedge-this.dropmenuobj.x < dropmenuW) edgeoffset=dropmenuW-obj.offsetWidth } else{ var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18 var dropmenuH=this.dropmenuobj._trueheight if (windowedge-this.dropmenuobj.y < dropmenuH){ edgeoffset=dropmenuH+obj.offsetHeight if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either? edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset

}, dropit:function(obj, e, dropmenuID){ if (this.dropmenuobj!=null) this.hidemenu() this.clearhidemenu() this.dropmenuobj=document.getElementById(dropmenuID) this.asscmenuitem=obj //reference associated menu item this.showmenu(this.dropmenuobj, e) this.dropmenuobj.x=this.getposOffset(obj, "left") this.dropmenuobj.y=this.getposOffset(obj, "top") this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px" this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px" this.positionshim() }, positionshim:function(){ if (this.iframeshimadded){ if (this.dropmenuobj.style.visibility=="visible"){ this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px" this.shimobject.style.height=this.dropmenuobj._trueheight+"px" this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px" this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px" this.shimobject.style.display="block" } }