Skip to content

Commit a7d2116

Browse files
craiccraic
committed
initial commit
0 parents  commit a7d2116

16 files changed

+805
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
*.bak
2+
*~
3+
.DS_Store
4+

‎animation.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS3 Webkit Demos</title>
5+
<link href="main.css" media="all" rel="stylesheet" type="text/css" />
6+
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
7+
8+
<style type="text/css" media="screen">
9+
10+
</style>
11+
12+
</head>
13+
14+
<body>
15+
<div id='header'>
16+
<a href='index.html' class='banner'>CSS3 Webkit Demos</a> &nbsp; &nbsp;
17+
-webkit-animation
18+
</div>
19+
20+
<div id='main'>
21+
22+
<p>The -webkit-animation properties enable complex animations of elements using transitions between a series of keyframes.</p>
23+
24+
25+
<p style='color: blue'>A panel with simple examples to go here...</p>
26+
27+
28+
<ul>
29+
<li>-webkit-animation
30+
<li>-webkit-animation-delay
31+
<li>-webkit-animation-direction
32+
<li>-webkit-animation-duration
33+
<li>-webkit-animation-fill-mode
34+
<li>-webkit-animation-iteration-count
35+
<li>-webkit-animation-name
36+
<li>-webkit-animation-play-state
37+
<li>-webkit-animation-timing-function
38+
</ul>
39+
40+
41+
</div>
42+
43+
<div id='footer'>
44+
Text and Code is released under the terms of the MIT license
45+
&nbsp; &nbsp;
46+
<a href="contributors.html">Contributors to this site</a>
47+
</div>
48+
</body>
49+
</html>

‎contributors.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS3 Webkit Demos</title>
5+
<link href="main.css" media="all" rel="stylesheet" type="text/css" />
6+
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
7+
</head>
8+
9+
<body>
10+
<div id='header'>
11+
<a href='index.html' class='banner'>CSS3 Webkit Demos</a> &nbsp; &nbsp;
12+
Contributors to this Site
13+
</div>
14+
15+
<div id='main'>
16+
17+
<h2>The following people contributed examples to this site...</h2>
18+
19+
<ul>
20+
<li>Rob Jones - <a href="http://craic.com/">Craic Computing</a> - <a href="https://github.com/craic">(GitHub Page)</a>
21+
</ul>
22+
23+
24+
</div>
25+
26+
<div id='footer'>
27+
Text and Code is released under the terms of the MIT license
28+
&nbsp; &nbsp;
29+
<a href="contributors.html">Contributors to this site</a>
30+
</div>
31+
</body>
32+
</html>

‎design_ideas.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS3 Webkit Demos</title>
5+
<link href="main.css" media="all" rel="stylesheet" type="text/css" />
6+
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
7+
</head>
8+
9+
<body>
10+
<div id='header'>
11+
<a href='index.html' class='banner'>CSS3 Webkit Demos</a> &nbsp; &nbsp;
12+
Design Ideas for the Hackathon
13+
</div>
14+
15+
<div id='main'>
16+
17+
<h2>Here are some design ideas, opinions and goals for the webkit demos... everything is up for discussion</h2>
18+
19+
<p>&nbsp;</p>
20+
21+
<h2>Motivation: There is a gap in the 'market' for a good CSS3 webkit demo site</h2>
22+
23+
<p>The CSS3 webkit extensions offer some great functionality but existing tutorial/documentation sites don't offer
24+
much help to either newbie programmers or designers.</p>
25+
26+
<p>Sites either list out the sytax in detail or show complex 'showcase' examples. We need a series of simple clean
27+
examples that show each extension in isolation and in simple combinations.</p>
28+
29+
<p>In particular, 3D transformations can be confusing if you've not been exposed to them before.</p>
30+
31+
32+
<h2>Simple Examples are a Good Thing</h2>
33+
34+
<p>Basic demo pages should only use HTML and CSS, avoiding JavaScript as far as possible.</p>
35+
36+
<p>There should be no requirement for a server unless really necessary.</p>
37+
38+
<p>Users should be able to download a demo page, see what is going on and modify it without having to read through extraneous cruft.</p>
39+
40+
41+
42+
<h2>Goal for the Hackathon Timeframe</h2>
43+
44+
<p>Focus on visual effects properties/extensions - but go for it if you want to work on other features.</p>
45+
46+
<p>Get a basic site up, running and <i>deployed</i>... if it's in Google's search index by the end of the hackathon, that's a win</p>
47+
48+
<p>Create working demos for as many webkit extensions/properties as possible with all of them linked back to, at least,
49+
a stub of documentation.</p>
50+
51+
<p>Don't worry about browser compatability for now - other sites cover that - and creating demos is more fun given the
52+
time available.</p>
53+
54+
<p>Build out more substantial demos that combine features if time allows.</p>
55+
56+
<p>Discuss whether this should exist as a standlone site, or whether it could be merged into an existing resource</p>
57+
58+
59+
<h2>Mechanics</h2>
60+
61+
<p>Use <a href="http://pages.github.com/">GitHub Pages</a> to deploy the site ? - easy, immediate</p>
62+
63+
<p>Use template pages for each demo if possible - minimal styling, consistent look</p>
64+
65+
<p>Use syntax highlighting Javascript - e.g. <a href="http://alexgorbatchev.com/SyntaxHighlighter/">Alex Gorbatchev's SyntaxHighlighter</a> ?</p>
66+
67+
<h2>Remember to put your name/link on the Contributors Page !</h2>
68+
69+
</div>
70+
71+
<div id='footer'>
72+
Text and Code is released under the terms of the MIT license
73+
&nbsp; &nbsp;
74+
<a href="contributors.html">Contributors to this site</a>
75+
</div>
76+
</body>
77+
</html>

‎images/circular_mask_100px.png

4.82 KB
Loading

‎images/rainier.png

258 KB
Loading

‎images/woodland.png

291 KB
Loading

‎index.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS3 Webkit Demos</title>
5+
<link href="main.css" media="all" rel="stylesheet" type="text/css" />
6+
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
7+
</head>
8+
9+
<body>
10+
<div id='header'>
11+
<a href='index.html' class='banner'>CSS3 Webkit Demos</a> &nbsp; &nbsp;
12+
</div>
13+
14+
<div id='main'>
15+
<h2>The -webkit- extensions that are available in CSS3 allow you to create dramatic visual effects in web pages.</h2>
16+
17+
<h2>This site aims to provide simple, clean examples of these that you can incorporate into your own pages.</h2>
18+
19+
20+
<h2>Main Webkit Categories</h2>
21+
22+
<ul>
23+
<li><a href="mask.html">-webkit-mask</a>
24+
<p>Modify the visible size and shape of images using masks</p>
25+
<li><a href="transform.html">-webkit-transform</a>
26+
<p>Modify the shape, position and rotation of elements</p>
27+
<li><a href="perspective.html">-webkit-perspective</a>
28+
<p>Modify the user viewpoint of three dimensional scenes</p>
29+
<li><a href="transition.html">-webkit-transition</a>
30+
<p>Animate an object as it changes from one state to another
31+
<li><a href="animation.html">-webkit-animation</a>
32+
<p>Animate objects more fully with keyframes
33+
</ul>
34+
35+
36+
<h2>CSS3 References</h2>
37+
38+
<ul>
39+
<li><a href="http://developer.apple.com/library/safari/navigation/">Apple Safari Documentation</a>
40+
<li><a href="http://www.w3.org/Style/CSS/">W3C CSS Documentation</a>
41+
</ul>
42+
43+
<h2>Other CSS3 webkit examples</h2>
44+
45+
<ul>
46+
<li><a href="http://playground.html5rocks.com/">HTML5Rocks Playground</a>
47+
</ul>
48+
49+
<h2 style='color: red; background: #fec'>Google HTML5 Hackathon </h2>
50+
51+
<ul>
52+
<li><a href="design_ideas.html">Design Ideas</a>
53+
<p>Some initial ideas for this project ...</p>
54+
<li><a href="https://github.com/craic">Craic GitHub page</a>
55+
</ul>
56+
57+
58+
</div>
59+
60+
<div id='footer'>
61+
Text and Code is released under the terms of the MIT license
62+
&nbsp; &nbsp;
63+
<a href="contributors.html">Contributors to this site</a>
64+
</div>
65+
</body>
66+
</html>

‎main.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* Main stylesheet for the webkit examples site */
2+
3+
body {
4+
background: #ddd;
5+
padding-left: none;
6+
margin-top: auto;
7+
margin-left: 0px;
8+
margin-right: auto;
9+
font-family: 'Muli', sans-serif;
10+
}
11+
12+
a {
13+
color: #d60;
14+
}
15+
16+
#header {
17+
margin-top: 0px;
18+
background: black;
19+
color: white;
20+
font-size: 18px;
21+
padding-left: 10px;
22+
padding-top: 5px;
23+
padding-bottom: 5px;
24+
}
25+
#main {
26+
margin-top: 10px;
27+
margin-bottom: 10px;
28+
margin-left: 50px;
29+
margin-right: 50px;
30+
background: white;
31+
color: black;
32+
font-size: 14px;
33+
padding-left: 25px;
34+
padding-right: 25px;
35+
padding-top: 5px;
36+
padding-bottom: 5px;
37+
}
38+
39+
#main h2 {
40+
font-weight: normal;
41+
font-size: 16px;
42+
color: darkred;
43+
}
44+
45+
.no-left-pad {
46+
padding-left: 0px;
47+
}
48+
49+
#main p {
50+
padding-left: 25px;
51+
}
52+
53+
54+
#footer {
55+
margin-top: 0px;
56+
background: black;
57+
color: white;
58+
font-size: 12px;
59+
padding-left: 10px;
60+
padding-top: 5px;
61+
padding-bottom: 5px;
62+
text-align: center;
63+
}
64+
65+
.banner {
66+
color: orange;
67+
text-decoration: none;
68+
}

‎mask.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS3 Webkit Demos</title>
5+
<link href="main.css" media="all" rel="stylesheet" type="text/css" />
6+
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
7+
8+
<style type="text/css" media="screen">
9+
10+
</style>
11+
12+
</head>
13+
14+
<body>
15+
<div id='header'>
16+
<a href='index.html' class='banner'>CSS3 Webkit Demos</a> &nbsp; &nbsp;
17+
-webkit-mask
18+
</div>
19+
20+
<div id='main'>
21+
22+
<p>The -webkit-mask series of properties are used to control the visible portion, size and shape of images using mask images.</p>
23+
24+
25+
<p style='color: blue'>A panel with simple examples to go here...</p>
26+
27+
28+
<ul>
29+
<li>-webkit-mask
30+
<li>-webkit-mask-attachment
31+
<li>-webkit-mask-box-image
32+
<p><a href="mask_box_image_demo.html">Demo of masking with a circular mask image</a></p>
33+
<li>-webkit-mask-clip
34+
<li>-webkit-mask-composite
35+
<li>-webkit-mask-image
36+
<li>-webkit-mask-position
37+
<li>-webkit-mask-position-x
38+
<li>-webkit-mask-position-y
39+
<li>-webkit-mask-repeat
40+
<li>-webkit-mask-size
41+
</ul>
42+
43+
44+
</div>
45+
46+
<div id='footer'>
47+
Text and Code is released under the terms of the MIT license
48+
&nbsp; &nbsp;
49+
<a href="contributors.html">Contributors to this site</a>
50+
</div>
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)