Finally. It’s here.
Simple way to style a Google form — and add a custom redirect
Posted 2nd May 2012Comments Off
Immersion Media tells you how. (Lots of web sites teach this concept, in varying ways.) And you can use jquery to perform simple validations.
Jquery slabText
Posted 13th April 2012Comments Off
Check it out here (the download includes everything ready-to-go — css, html, js file).
Google web fonts
Posted 11th April 2012Comments Off
Quarter 3 self-evaluation
Posted 8th April 2012
Describe and evaluate your work and learning this quarter in a Google Docs form.
(Don’t fill it in, though, till we’re done with presentations.)
Chrome 18: you need it
Posted 30th March 2012Comments Off
Full hardware acceleration (even on our MLTI laptops) and a new version of Flash. Go to chrome://gpu/ to see specs specific to your machine (older Macs and PCs don’t have the GPU horsepower to use the accelerator).
How to get it? Chrome > About Google Chrome > Update Now.
Then go to Morphing Cubes to see some sort of astonishing real-time rendering without Flash. Note that the numbers are text, not graphics — you can select them and they enlarge when you goose up the font size. Stripped of the javascript that toggles the shape, this is the whole code, all CSS3:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Morphing Power Cubes
</title>
<style type="text/css" media="screen">
body {
background-color: black;
color: white;
font-family: 'Lucida Grande', Verdana, Arial;
font-size: 12px;
background-image: -webkit-gradient(radial,
50% 500, 1,
50% 500, 400,
from(rgba(255, 255, 255, 0.3)),
to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container {
width: 100%;
height: 700px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
#stage {
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 2s;
-webkit-transform-style: preserve-3d;
}
#shape {
position: relative;
top: 160px;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
}
.plane {
position: absolute;
height: 200px;
width: 200px;
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
font-family: Times, serif;
font-size: 124pt;
color: black;
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
-webkit-backface-visibility: hidden;
}
#shape.backfaces .plane {
-webkit-backface-visibility: visible;
}
#shape {
-webkit-animation: spin 8s infinite linear;
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-360deg); }
}
/* ---------- cube styles ------------- */
.cube > .one {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.cube > .two {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}
.cube > .three {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.cube > .four {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.cube > .five {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.cube > .six {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.cube > .seven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
}
.cube > .eight {
-webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
}
.cube > .nine {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
}
.cube > .ten {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
}
.cube > .eleven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
}
.cube > .twelve {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
}
/* ---------- ring styles ------------- */
.ring > .one {
-webkit-transform: translateZ(380px);
}
.ring > .two {
-webkit-transform: rotateY(30deg) translateZ(380px);
}
.ring > .three {
-webkit-transform: rotateY(60deg) translateZ(380px);
}
.ring > .four {
-webkit-transform: rotateY(90deg) translateZ(380px);
}
.ring > .five {
-webkit-transform: rotateY(120deg) translateZ(380px);
}
.ring > .six {
-webkit-transform: rotateY(150deg) translateZ(380px);
}
.ring > .seven {
-webkit-transform: rotateY(180deg) translateZ(380px);
}
.ring > .eight {
-webkit-transform: rotateY(210deg) translateZ(380px);
}
.ring > .nine {
-webkit-transform: rotateY(-120deg) translateZ(380px);
}
.ring > .ten {
-webkit-transform: rotateY(-90deg) translateZ(380px);
}
.ring > .eleven {
-webkit-transform: rotateY(300deg) translateZ(380px);
}
.ring > .twelve {
-webkit-transform: rotateY(330deg) translateZ(380px);
}
.controls {
width: 80%;
margin: 0 auto;
padding: 5px 20px;
-webkit-border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5);
}
.controls > div {
margin: 10px;
}
</style>
</head>
<body>
<div class="controls">
<h1>
Animations, Transitions and 3D Transforms
</h1>
<div>
<button onclick="toggleShape()">
Toggle Shape
</button>
</div>
<div>
<input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked>
<label for="backfaces">
Backfaces visible</label>
</div>
</div>
<div id="container">
<div id="stage">
<div id="shape" class="cube backfaces">
<div class="plane one">
1
</div>
<div class="plane two">
2
</div>
<div class="plane three">
3
</div>
<div class="plane four">
4
</div>
<div class="plane five">
5
</div>
<div class="plane six">
6
</div>
<div class="plane seven">
7
</div>
<div class="plane eight">
8
</div>
<div class="plane nine">
9
</div>
<div class="plane ten">
10
</div>
<div class="plane eleven">
11
</div>
<div class="plane twelve">
12
</div>
</div>
</div>
</div>
</body>
</html>