WSU Technology Knowledge Base:Test of html5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS Star Wars Crawling Titles</title>
<style> @import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
* { padding: 0; margin: 0; }
body, html { width: 100%; height: 100%; font-family: "Droid Sans", arial, verdana, sans-serif; font-weight: 700; color: #ff6; background-color: #000; overflow: hidden; }
p#start { position: relative; width: 16em; font-size: 200%; font-weight: 400; margin: 20% auto; color: #4ee; opacity: 0; z-index: 1; -webkit-animation: intro 2s ease-out; -moz-animation: intro 2s ease-out; -ms-animation: intro 2s ease-out; -o-animation: intro 2s ease-out; animation: intro 2s ease-out; }
@-webkit-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@-moz-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@-ms-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@-o-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
h1 { position: absolute; width: 2.6em; left: 50%; top: 25%; font-size: 10em; text-align: center; margin-left: -1.3em; line-height: 0.8em; letter-spacing: -0.05em; color: #000; text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6; opacity: 0; z-index: 1; -webkit-animation: logo 5s ease-out 2.5s; -moz-animation: logo 5s ease-out 2.5s; -ms-animation: logo 5s ease-out 2.5s; -o-animation: logo 5s ease-out 2.5s; animation: logo 5s ease-out 2.5s; }
h1 sub { display: block; font-size: 0.3em; letter-spacing: 0; line-height: 0.8em; }
@-webkit-keyframes logo { 0% { -webkit-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -webkit-transform: scale(0.1); opacity: 0; } }
@-moz-keyframes logo { 0% { -moz-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -moz-transform: scale(0.1); opacity: 0; } }
@-ms-keyframes logo { 0% { -ms-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -ms-transform: scale(0.1); opacity: 0; } }
@-o-keyframes logo { 0% { -o-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -o-transform: scale(0.1); opacity: 0; } }
@keyframes logo { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(0.1); opacity: 0; } }
/* the interesting 3D scrolling stuff */ #titles { position: absolute; width: 18em; height: 50em; bottom: 0; left: 50%; margin-left: -9em; font-size: 350%; text-align: justify; overflow: hidden; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(300px) rotateX(25deg); -moz-transform: perspective(300px) rotateX(25deg); -ms-transform: perspective(300px) rotateX(25deg); -o-transform: perspective(300px) rotateX(25deg); transform: perspective(300px) rotateX(25deg); }
#titles:after { position: absolute; content: ' '; left: 0; right: 0; top: 0; bottom: 60%; background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); pointer-events: none; }
#titles p { text-align: justify; margin: 0.8em 0; }
#titles p.center { text-align: center; }
#titles a { color: #ff6; text-decoration: underline; }
#titlecontent { position: absolute; top: 100%; -webkit-animation: scroll 100s linear 4s infinite; -moz-animation: scroll 100s linear 4s infinite; -ms-animation: scroll 100s linear 4s infinite; -o-animation: scroll 100s linear 4s infinite; animation: scroll 100s linear 4s infinite; }
/* animation */ @-webkit-keyframes scroll { 0% { top: 100%; } 100% { top: -170%; } }
@-moz-keyframes scroll { 0% { top: 100%; } 100% { top: -170%; } }
@-ms-keyframes scroll { 0% { top: 100%; } 100% { top: -170%; } }
@-o-keyframes scroll { 0% { top: 100%; } 100% { top: -170%; } }
@keyframes scroll { 0% { top: 100%; } 100% { top: -170%; } } </style>
</head> <body>
A short time ago in at University very, very close…
TLTtitles in CSS3
EPISODE 4U
TABLETS AWAKEN: A NEW DAWN FOR LEARNING AND TEACHING
It is a period of solitude and calm.
This is a shameless attempt to get you to read one of Chad’s emails instead of hitting the delete button and feel like you have beaten back the dark side once again. The force is out of balance and TLT will stop at nothing to help you see why tablets are changing teaching and learning for good.
If you find your tablet confusing, intimidating, or even evil as the dark side, we have a January 7th session (i.e. from 1-3pm) over in Maxwell 130 that you can learn more about these powerful tools.
During this dark time…that is sunlight, not the force, we will be pushing the outer limits of these awesome tools by giving you the opportunity to shed light on many different tools and apps you can choose from as you take your own journey through the galaxy of apps and instructional strategies that incorporate these into your own universe.
We will being our journey together and identify where you are in your apprentice on the road to Tablet Master begins. If you are looking to use this tool on the road or at a conference we will take you to new heights. If you are ready to start recording audio, video, or photos we have the Yoda of multimedia (A.K.A. Adam Zanzig) standing ready to prepare you for your next flipped video.
So you want to improve the way you use the tablet for professional usage…our very own Tablet Master Mary Bownman will show you the different apps you can implement strategies for new level of organization and productivity with two powerful apps called Trellow and OneNote.
Are you looking for active learning strategies in your journey? Chad will show you the mind tricks for keeping students engaged and on their way to enlightenment. This session is all about the many different strategies you can utilize with your tablet and Top Hat to keep focus on critical thinking and actively engaged with your curriculum. Think of it as your own Dagobah journey only without the swam. Formal ware NOT required! Also, check out this great Faculty Exchange interview with our very own James Kirk (yea, I know he is from the other movie, but I am on a roll) on his innovative use of Top Hat.
<pTable 3 student pp Table 6, table 7.
View the source, Luke!
Sorry. Couldn't resist it.
text here:
text
</body> </html>