<!DOCTYPE html> <html> <!-- backgroundimages.html --> <head> <title>CSS3 Multiple Backgrounds Example</title> <style> .border { font-family:'Times New Roman'; font-style :italic; font-size :170%; text-align :center; padding :60px; width :350px; height :500px; background :url('b1.gif') top left no-repeat, url('b2.gif') top right no-repeat, url('b3.gif') bottom left no-repeat, url('b4.gif') bottom right no-repeat, url('ba.gif') top repeat-x, url('bb.gif') left repeat-y, url('bc.gif') right repeat-y, url('bd.gif') bottom repeat-x } </style> </head> <body> <div class='border'> <h1>Employee of the month</h1> <h2>Awarded To:</h2> <h3>__________________</h3> <h2>Date:</h2> <h3>___/___/_____</h3> </div> </body> </html>
<!DOCTYPE html> <html> <!-- borderradius.html --> <head> <title>CSS3 Border Radius Examples</title> <style> .box { margin-bottom:10px; font-family :'Courier New', monospace; font-size :12pt; text-align :center; padding :10px; width :380px; height :75px; border :10px solid #006; } .b1 { -moz-border-radius :40px; -webkit-border-radius:40px; border-radius :40px; } .b2 { -moz-border-radius :40px 40px 20px 20px; -webkit-border-radius:40px 40px 20px 20px; border-radius :40px 40px 20px 20px; } .b3 { -moz-border-radius-topleft :20px; -moz-border-radius-topright :40px; -moz-border-radius-bottomleft :60px; -moz-border-radius-bottomright :80px; -webkit-border-top-left-radius :20px; -webkit-border-top-right-radius :40px; -webkit-border-bottom-left-radius :60px; -webkit-border-bottom-right-radius:80px; border-top-left-radius :20px; border-top-right-radius :40px; border-bottom-left-radius :60px; border-bottom-right-radius :80px; } .b4 { -moz-border-radius-topleft :40px 20px; -moz-border-radius-topright :40px 20px; -moz-border-radius-bottomleft :20px 40px; -moz-border-radius-bottomright :20px 40px; -webkit-border-top-left-radius :40px 20px; -webkit-border-top-right-radius :40px 20px; -webkit-border-bottom-left-radius :20px 40px; -webkit-border-bottom-right-radius:20px 40px; border-top-left-radius :40px 20px; border-top-right-radius :40px 20px; border-bottom-left-radius :20px 40px; border-bottom-right-radius :20px 40px; } </style> </head> <body> <div class='box b1'> border-radius:40px; </div> <div class='box b2'> border-radius:40px 40px 20px 20px; </div> <div class='box b3'> border-top-left-radius :20px;<br> border-top-right-radius :40px;<br> border-bottom-left-radius :60px;<br> border-bottom-right-radius:80px; </div> <div class='box b4'> border-top-left-radius :40px 20px;<br> border-top-right-radius :40px 20px;<br> border-bottom-left-radius :20px 40px;<br> border-bottom-right-radius:20px 40px; </div> </body> </html>
<!DOCTYPE html> <html> <!—- multiplecolumns.html --> <head> <title>Multiple Columns</title> <style> .columns { text-align :justify; font-size :16pt; -moz-column-count :3; -moz-column-gap :1em; -moz-column-rule :1px solid black; -webkit-column-count:3; -webkit-column-gap :1em; -webkit-column-rule :1px solid black; column-count :3; column-gap :1em; column-rule :1px solid black; } </style> </head> <body> <div class='columns'> Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; Our bruised arms hung up for monuments; Our stern alarums changed to merry meetings, Our dreadful marches to delightful measures. Grim-visaged war hath smooth'd his wrinkled front; And now, instead of mounting barded steeds To fright the souls of fearful adversaries, He capers nimbly in a lady's chamber To the lascivious pleasing of a lute. </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Transitioning on hover</title> <style> #square { position :absolute; top :50px; left :50px; width :100px; height :100px; padding :2px; text-align :center; border-width :1px; border-style :solid; background :orange; transition :all .8s ease-in-out; -moz-transition :all .8s ease-in-out; -webkit-transition:all .8s ease-in-out; -o-transition :all .8s ease-in-out; -ms-transition :all .8s ease-in-out; } #square:hover { background :yellow; -moz-transform :rotate(180deg); -webkit-transform :rotate(180deg); -o-transform :rotate(180deg); -ms-transform :rotate(180deg); transform :rotate(180deg); } </style> </head> <body> <div id='square'> Square shape<br> created using<br> a simple div<br> element with<br> a 1px border </div> </body> </html>