forked from fofr/css-experiments
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit e8930d2
Showing
34 changed files
with
2,031 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
/* | ||
CSS3 Accordion Experiment | ||
Date: 25th June 2009 | ||
Author: Paul Hayes | ||
*/ | ||
|
||
.accordion { | ||
background: #eee; | ||
border: 1px solid #999; | ||
padding: 0 1em 24px; | ||
width: 500px; | ||
margin: 2em auto; | ||
} | ||
|
||
.accordion h2 { | ||
margin: 12px 0; | ||
} | ||
|
||
.accordion .section { | ||
border-bottom: 1px solid #ccc; | ||
padding: 0 1em; | ||
background: #fff; | ||
} | ||
|
||
.accordion h3 a { | ||
display: block; | ||
font-weight: normal; | ||
padding: 1em 0; | ||
} | ||
|
||
.accordion h3 a:hover { | ||
text-decoration: none; | ||
} | ||
|
||
.accordion h3 + div { | ||
height: 0; | ||
overflow: hidden; | ||
-webkit-transition: height 0.3s ease-in; | ||
} | ||
|
||
.accordion :target h3 a { | ||
text-decoration: none; | ||
font-weight: bold; | ||
} | ||
|
||
.accordion :target h3 + div { | ||
height: 100px; | ||
} | ||
|
||
.accordion .section.large:target h3 + div { | ||
overflow: auto; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<!-- Article: http://www.paulrhayes.com/2009-06/accordion-using-only-css/ --> | ||
<!-- Demo: http://www.paulrhayes.com/experiments/accordion/index.html --> | ||
<!-- Originally posted: 25th June 2009 --> | ||
<meta charset="UTF-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
<title>Paul Hayes: Experiment: CSS3 Accordion</title> | ||
<meta name="author" content="Paul Hayes" /> | ||
<link rel="stylesheet" href="../experiment-styles.css" /> | ||
|
||
<link rel="stylesheet" href="css/experiment.css" /> | ||
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> | ||
</head> | ||
<body class="experiment"> | ||
<div id="wrapper"> | ||
<p id="learn"> | ||
This is a demo, <a href="http://www.paulrhayes.com/2009-06/accordion-using-only-css/">learn how it works</a>. | ||
</p> | ||
<div id="experiment"> | ||
<div class="accordion"> | ||
<h2>Accordion Demo</h2> | ||
<div id="one" class="section"> | ||
<h3> | ||
<a href="#one">Heading 1</a> | ||
</h3> | ||
<div> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | ||
</div> | ||
</div> | ||
<div id="two" class="section"> | ||
<h3> | ||
<a href="#two">Heading 2</a> | ||
</h3> | ||
<div> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
</div> | ||
</div> | ||
<div id="three" class="section"> | ||
<h3> | ||
<a href="#three">Heading 3</a> | ||
</h3> | ||
<div> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p> | ||
</div> | ||
</div> | ||
<div id="four" class="section large"> | ||
<h3> | ||
<a href="#four">Heading 4</a> | ||
</h3> | ||
<div> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p> | ||
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | ||
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | ||
</div> | ||
</div> | ||
<div id="five" class="section"> | ||
<h3> | ||
<a href="#five">Heading 5</a> | ||
</h3> | ||
<div> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
</div> | ||
</div> | ||
<div id="six" class="section"> | ||
<h3> | ||
<a href="#six">Heading 6</a> | ||
</h3> | ||
<div> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
/* | ||
Clock Experiment | ||
Date: 24th March 2009 | ||
Author: Paul Hayes | ||
*/ | ||
|
||
body.experiment { | ||
background: #fff; | ||
} | ||
|
||
.start { | ||
text-align: center; | ||
font-size: 2em; | ||
font-weight: bold; | ||
margin: 5em; | ||
} | ||
|
||
#clock { | ||
position: relative; | ||
width: 378px; | ||
height: 378px; | ||
background-image: url('../images/clockFace.png'); | ||
left: 50%; | ||
margin: 5em 0 0 -189px; | ||
} | ||
|
||
#clock div { | ||
position: absolute; | ||
} | ||
|
||
|
||
/* The magic */ | ||
#clock img[src*='second'] { | ||
-webkit-transition: -webkit-transform 600000s linear; | ||
} | ||
|
||
#clock:target img[src*='second'] { | ||
-webkit-transform: rotate(3600000deg); | ||
} | ||
|
||
#clock img[src*='minute'] { | ||
-webkit-transition: -webkit-transform 360000s linear; | ||
} | ||
|
||
#clock:target img[src*='minute'] { | ||
-webkit-transform: rotate(36000deg); | ||
} | ||
|
||
#clock img[src*='hour'] { | ||
-webkit-transition: -webkit-transform 216000s linear; | ||
} | ||
|
||
#clock:target img[src*='hour'] { | ||
-webkit-transform: rotate(360deg); | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<!-- Article: http://www.paulrhayes.com/2009-03/an-analogue-clock-using-only-css/ --> | ||
<!-- Demo: http://www.paulrhayes.com/experiments/clock/index.html --> | ||
<!-- Originally posted: 24th March 2009 --> | ||
<meta charset="UTF-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
<title>Paul Hayes: Experiment: CSS3 Analogue Clock</title> | ||
<meta name="author" content="Paul Hayes" /> | ||
<link rel="stylesheet" href="../experiment-styles.css" /> | ||
|
||
<link rel="stylesheet" href="css/experiment.css" /> | ||
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> | ||
</head> | ||
<body class="experiment"> | ||
<div id="wrapper"> | ||
<p id="learn"> | ||
This is a demo, <a href="http://www.paulrhayes.com/2009-03/an-analogue-clock-using-only-css/">learn how it works</a>. | ||
</p> | ||
<div id="experiment"> | ||
<p class="start"><a href="#clock" id="start">Start Clock</a></p> | ||
<div id="clock"> | ||
<div id="hour"><img src="images/hourHand.png" /></div> | ||
<div id="minute"><img src="images/minuteHand.png" /></div> | ||
<div id="second"><img src="images/secondHand.png" /></div> | ||
</div> | ||
</div> | ||
</div> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
<script src="js/experiment.js"></script> </body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
$(function(){ | ||
if(window.location.hash === "#clock") { | ||
startClock(); | ||
$('p.start').remove(); | ||
} else { | ||
$('#start').click(function() { | ||
startClock(); | ||
$('p.start').remove(); | ||
}); | ||
} | ||
|
||
function startClock() { | ||
var angle = 360/60, | ||
date = new Date(), | ||
hour = (function() { | ||
var h = date.getHours(); | ||
if(h > 12) { | ||
h = h - 12; | ||
} | ||
return h | ||
})(), | ||
minute = date.getMinutes(), | ||
second = date.getSeconds(), | ||
hourAngle = (360/12) * hour + (360/(12*60)) * minute; | ||
|
||
$('#minute')[0].style.webkitTransform = 'rotate('+angle * minute+'deg)'; | ||
$('#second')[0].style.webkitTransform = 'rotate('+angle * second+'deg)'; | ||
$('#hour')[0].style.WebkitTransform = 'rotate('+hourAngle+'deg)'; | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
h2 { | ||
margin-top: 0; | ||
} | ||
|
||
#viewport { | ||
-webkit-perspective: 800; | ||
-webkit-perspective-origin: 50% 200px; | ||
-webkit-transform: scale(0.75,0.75); | ||
} | ||
|
||
#cube { | ||
position: relative; | ||
margin: 0 auto; | ||
height: 400px; | ||
width: 400px; | ||
-webkit-transition: -webkit-transform 50ms linear; | ||
-webkit-transform-style: preserve-3d; | ||
-webkit-transform: rotateX(-10deg) rotateY(20deg); | ||
} | ||
|
||
#cube h2 { | ||
color: #fff; | ||
padding-top: 0; | ||
margin-top: 0; | ||
} | ||
|
||
#cube a { | ||
color: #fff; | ||
} | ||
|
||
#cube > div { | ||
position: absolute; | ||
height: 360px; | ||
width: 360px; | ||
padding: 20px; | ||
background-color: rgba(50, 50, 50, 0.85); | ||
font-size: 1em; | ||
line-height: 1em; | ||
color: #fff; | ||
border: 1px solid #555; | ||
-webkit-border-radius: 3px; | ||
} | ||
|
||
#cube > div:first-child { | ||
-webkit-transform: rotateX(90deg) translateZ(200px); | ||
} | ||
|
||
#cube > div:nth-child(2) { | ||
-webkit-transform: translateZ(200px); | ||
} | ||
|
||
#cube > div:nth-child(3) { | ||
-webkit-transform: rotateY(90deg) translateZ(200px); | ||
text-align: center; | ||
} | ||
|
||
#cube > div:nth-child(4) { | ||
-webkit-transform: rotateY(180deg) translateZ(200px); | ||
} | ||
|
||
#cube > div:nth-child(5) { | ||
-webkit-transform: rotateY(-90deg) translateZ(200px); | ||
} | ||
|
||
#cube > div:nth-child(5) p { | ||
text-align: center; | ||
font-size: 2.77em; | ||
margin: 40px; | ||
} | ||
|
||
#cube > div:nth-child(6) { | ||
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px) ; | ||
} | ||
|
||
object { | ||
opacity: 0.5; | ||
} | ||
|
||
object:hover { | ||
opacity: 1; | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.