HTML5 & CSS3 Quick Codes
/* style sheet linking */ <link rel="stylesheet" type="text/css" href="folder.css" /> Top
/* drop down menu html */ <div class="nav"> <ul id="menu"> <li><a href="restituo.html" class="transition">Home</a></li> <li> <a href="restituo.html">My Work</a> <ul> <li><a href="http://mariablaeuer.com/" target="_blank">attorney site</a></li> <li><a href="http://ihmparadise.org/" target="_blank">church site</a></li> <li><a href="http://www.rosariesandthings.com/NOPE/index.html" target="_blank">ghost site</a></li> <li><a href="http://www.rosariesandthings.com/" target=_blank">e-commerce site</a></li> </ul> </li> <li><a href="#">Tools Used</a> <ul> <li><a href="galysh/htool.html">HTML5 tools</a></li> <li><a href="galysh/css.html">CSS3 tools</a></li> <li><a href="galysh/edit.html">editor tool</a></li> </ul> </li> <li><a href="galysh/pics.html" >Gallery</a></li> <li><a href="galysh/contact.html" class="transition">Contact</a></li> </ul> </div> Top
/* drop down css */ #menu{ width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 0px; border-radius: 0px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; } #menu li{ float: left; padding: 0 0 10px 0; position: relative; } #menu a{ float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a{ color: #fafafa; } *html #menu li a:hover{ /* IE6 */ color: #fafafa; } #menu li:hover > ul{ display: block; } /* Sub-menu */ #menu ul{ list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 5px; border-radius: 5px; } #menu ul li{ float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a{ padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a{ /* IE6 */ height: 10px; width: 150px; } *:first-child+html #menu ul a{ /* IE7 */ height: 10px; width: 150px; } #menu ul a:hover{ background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child a{ -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul li:first-child a:hover:after{ border-bottom-color: #04acec; } #menu ul li:last-child a{ -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ Top
/* h1 3D text effect float: right */ h1 { float:right; font:normal 30pt Arial; color:#000; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } Top
/* hover effect on links */ /* ~~ Styling for links must remain in this order - including the group of selectors that create the hover effect. ~~ */ a:link { color:#000; text-decoration: none; } a:visited { color: #000; text-decoration: none; } a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ color: #900; text-decoration: none; } Top
/* container div */ /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */ #container { width: 80%; margin-left: auto; margin-right: auto; margin-top: 10px; min-width: 780px; background: #FFF; padding: 0px; border-style:solid; border-width:thin; border-color: #000; } Top
/* shadow effect */ .shadow { -moz-box-shadow: 10px 10px 5px 5px #888; -webkit-box-shadow: 10px 10px 5px 5px#888; box-shadow: 10px 10px 5px #888; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#7a7875')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#7a7875'); } Top
/* seperator bar with gradient - blue */ .seperator2 { height: 1.5em; background-image: linear-gradient(left , rgb(54,87,173) 38%, rgb(240,233,223) 51%, rgb(54,88,173) 65%); background-image: -o-linear-gradient(left , rgb(54,87,173) 38%, rgb(240,233,223) 51%, rgb(54,88,173) 65%); background-image: -moz-linear-gradient(left , rgb(54,87,173) 38%, rgb(240,233,223) 51%, rgb(54,88,173) 65%); background-image: -webkit-linear-gradient(left , rgb(54,87,173) 38%, rgb(240,233,223) 51%, rgb(54,88,173) 65%); background-image: -ms-linear-gradient(left , rgb(54,87,173) 38%, rgb(240,233,223) 51%, rgb(54,88,173) 65%); background-image: -webkit-gradient( linear, left top, right top, color-stop(0.38, rgb(54,87,173)), color-stop(0.51, rgb(240,233,223)), color-stop(0.65, rgb(54,88,173)) ); /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3658ad, endColorstr=#3658ad); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3658ad, endColorstr=#3658ad)"; background-color: #3658ad; border-radius: 0px 0px 0px 0px; -moz-box-shadow: inset 0 0 3px 3px #3658ad; -webkit-box-shadow: inset 0 0 3px 3px #3658ad; box-shadow: inset 0 0 3px 3px #3658ad; } Top
/* IE code for gradients */ /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e0c89f, endColorstr=#e0c89f); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e0c89f, endColorstr=#e0c89f)"; background-color: #ede6e0; font-family:"Gabriola"; font-style:italic; font-size: 1.2em; color: #000; padding: 25px 0px 25px 0px; Top
/* screen orientation */ /* Portrait */ @media screen and (orientation:portrait) { position: absolute; top: 2em; right: 2em; width: 30em; padding: 10px 10px 10px 11px; background-image:url(eggs2.jpg); background-repeat:no-repeat; background-position:center center; background-attachment:; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto; border-radius: 20px; color: #fff; text-wrap:unrestricted; } ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- /* Landscape */ @media screen and (orientation:landscape) { position: absolute; top: 2em; right: 2em; width: 30em; padding: 10px 10px 10px 11px; background-image:url(eggs2.jpg); background-repeat:no-repeat; background-position:center center; background-attachment:; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto; border-radius: 20px; color: #fff; text-wrap:normal; } Top
/* linking back to my site */ <a href="https://www.angelfire.com/va/miura/restituo.html" target="_blank"><img src="Ga.png" width="100" style="margin-left:80%;"></a> Top
Rotate an image .rotate{ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .rotate:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); } Top