First Draft
First Draft of the Example Files
This commit is contained in:
RobinNixon
+34
@@ -0,0 +1,34 @@
|
||||
<!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>
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
<!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>
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
<!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>
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user