Using CSS3 Transitions to change the color of text links. View a demo here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Hover Fade Text Reflections</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.2/build/cssfonts/fonts-min.css&3.1.2/build/cssreset/reset-min.css" />
<style type="text/css">
/*1B1B26,26394C,28647F,13B3BF,A3FF57,E80C7A*/
html {
background-color: #1B1B26;
}
body {
padding: 20px;
font: bold 20px/1.4em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #28647F;
}
p {
margin-bottom: 1em;
}
a {
color: #13B3BF;
text-decoration: none;
transition: color; /*for the future*/
transition-duration: 4000ms;
-webkit-transition: color; /*http://www.w3.org/TR/css3-transitions/*/
-webkit-transition-duration: 4000ms;
-moz-transition: color; /*https://developer.mozilla.org/en/CSS/-moz-transition*/
-moz-transition-duration: 4000ms;
-o-transition: color; /*http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/*/
-o-transition-duration: 4000ms;
}
a:hover {
color: #A3FF57;
transition: color;
transition-duration: 400ms;
-webkit-transition: color;
-webkit-transition-duration: 400ms;
-moz-transition: color;
-moz-transition-duration: 400ms;
-o-transition: color;
-o-transition-duration: 400ms;
}
a:active {
color: #E80C7A;
}
</style>
</head>
<body>
<p>The free <a href="http://www.androidapps.com/tech/articles/3010-wordpress-upgrades-free-app-for-blogging-on-the-go">WordPress</a> for Android app was upgraded thanks to feedback from faithful users. Updates include fixes to numerous, annoying bugs like unexpected app crashes, log-in issues and more.Most notable in the recent upgrade is a new comment feature, which displays comments in real time as comments arrive in your Droid notification bar.</p>
<p>In the <a href="http://www.androidapps.com/tech/articles/3010-wordpress-upgrades-free-app-for-blogging-on-the-go">mobile society in which we live, it's nice to have productive apps like WordPress to make social networking easy on the go. Use the app to blog while on vacation or update the company blog</a> while on a business trip. Out to lunch and have a crisis that needs to be communicated companywide? Quickly upload a notification blog without heading back to your desk.</p>
<p>This open source app lets users write new posts, edit current content, and even manage blog comments. The comment notifications are great for keeping up with the moderation of your blog letting you respond in <a href="http://www.androidapps.com/tech/articles/3010-wordpress-upgrades-free-app-for-blogging-on-the-go">real time and engage the readers</a> of your blog.</p>
<p><a href="http://www.androidapps.com/tech/articles/3010-wordpress-upgrades-free-app-for-blogging-on-the-go">The app is well-designed with three useful headings at the top</a>: comments, posts and pages. Pick your action, and post away. Users can also save posts for later. I love this feature for when I have a blog idea on the go. Instead of writing it down on a stray receipt, I can log my idea as a draft post for easy access later.</p>
<p>If you already <a href="http://www.androidapps.com/tech/articles/3010-wordpress-upgrades-free-app-for-blogging-on-the-go">use WordPress to power your blog</a>, definitely download this app to your Android phone.</p>
</body>
</html>
Using Google Translate through YQL with cURL and parsing the results with XMLReader. View a demo here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YQL XMLReader Google Translate</title>
</head>
<body>
<?php
$poem = <<<EOT
A Dream Within A Dream by Edgar Allan Poe<br /><br />
Take this kiss upon the brow!<br />
And, in parting from you now,<br />
Thus much let me avow--<br />
You are not wrong, who deem<br />
That my days have been a dream;<br />
Yet if hope has flown away<br />
In a night, or in a day,<br />
In a vision, or in none,<br />
Is it therefore the less gone?<br />
All that we see or seem<br />
Is but a dream within a dream.<br /><br />
I stand amid the roar<br />
Of a surf-tormented shore,<br />
And I hold within my hand<br />
Grains of the golden sand--<br />
How few! yet how they creep<br />
Through my fingers to the deep,<br />
While I weep--while I weep!<br />
O God! can I not grasp<br />
Them with a tighter clasp?<br />
O God! can I not save<br />
One from the pitiless wave?<br />
Is all that we see or seem<br />
But a dream within a dream?
EOT;
echo "<p>$poem</p>\n";
echo "<hr />\n";
$query = 'select * from google.translate where q="'.$poem.'" and target="fr"';
$query = 'http://query.yahooapis.com/v1/public/yql?q='.urlencode($query).'&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
// Make call with cURL
$session = curl_init($query);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
$xml = curl_exec($session);
$reader = new XMLReader();
$reader->xml($xml);
while ($reader->read()) {
if ($reader->name == '#text') {
$text = $reader->value;
echo "<p>$text</p>\n";
}
}
?>
</body>
</html>
<figure></figure>
‘The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.’ – w3.org
<video></video>
‘The video element represents a video or movie.’ – w3.org
<audio></audio>
‘An audio element represents an audio stream.’ – w3.org
<canvas></canvas>
‘The canvas element represents a resolution-dependent bitmap canvas, which can be used for dynamically rendering of images such as game graphics, graphs, or other images.’ – w3.org
Links:
- HTML 5 Tag Reference
- W3C Markup Language Reference
<header></header>
‘The header element represents the header of a section. The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section.’ – w3.org
<nav></nav>
‘The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links.’ – w3.org
<hgroup></hgroup>
‘The hgroup element represents a group of headings. The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.’ – w3.org
<section></section>
‘The section element represents a section of a document, typically with a title or heading.’ – w3.org
<article></article>
‘The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.’ – w3.org
<aside></aside>
‘The aside element represents content that is tangentially related to the content that forms the main textual flow of a document. In printed documents, the type of tangential content that the aside element represents is sometimes formatted as a sidebar or annotation or footnote.’ – w3.org
<footer></footer>
‘The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.’ – w3.org
Links:
- HTML 5 Tag Reference
- W3C Markup Language Reference
Using YUI3, RaphaelJS, SoundManager and Cufon to make a text at the beach effect with sound. View a demo here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beach Effect - Animated Fonts and Paths with Audio</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&3.1.1/build/cssreset/reset-min.css" />
<script type="text/javascript" src="../raphael.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Arial_400-Arial_700.font.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>
<script type="text/javascript" src="soundmanager/script/soundmanager2.js"></script>
<style type="text/css">
.hidden {
opacity:0;
}
</style>
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */
soundManager.url = 'soundmanager/swf/';
soundManager.debugMode = false;
soundManager.onload = function() {
YUI().use('node','anim',function(Y){
var sounds = soundManager.createSound('beach_sounds','brightonbeach.mp3');
sounds.load();
Y.on('domready',function(){
var winHeight = Y.DOM.winHeight();
var winWidth = Y.DOM.winWidth();
Y.one('body').append('<div id="container"><img src="beach_optimized.jpg" id="beach" class="hidden" /></div>');
var container = Y.one('#container');
container.setStyles({
'height':winHeight,
'width':winWidth,
'overflow':'hidden',
'position':'relative'
});
var beach = Y.one('#beach');
beach.setStyles({
'width':(winWidth+300),
'opacity':'0'
});
var showBeach = new Y.Anim({
node: beach,
to: {
opacity:'.4',
width: winWidth
},
duration: 10
});
var paper = Raphael(0, 0, winWidth, winHeight);
var txt = paper.print(winWidth/3.5, winHeight/2.5, "chaosm.net", paper.getFont("Arial"), 100).attr({fill: "#000"});
//c
txt[0].attr({'fill':'#00A0B0'});
//h
txt[1].attr({'fill':'#6A4A3C'});
//a
txt[2].attr({'fill':'#CC333F'});
//o
txt[3].attr({'fill':'#EB6841'});
//s
txt[4].attr({'fill':'#EDC951'});
//m
txt[5].attr({'fill':'#00A0B0'});
//.
txt[6].attr({'fill':'#CC333F'});
//n
txt[7].attr({'fill':'#EDC951'});
//e
txt[8].attr({'fill':'#EB6841'});
//t
txt[9].attr({'fill':'#6A4A3C'});
txt.hide();
//coordinates of the dot
dotX = txt[6].getPointAtLength(0).x;
dotY = txt[6].getPointAtLength(0).y;
//draw lines going to dot
var line1 = paper.path("M 0 0").attr({'stroke':'#CC333F','fill':'#CC333F','stroke-width':'2'});
line1.animate({'path':('M 0 0 L '+dotX+' '+dotY)},1200,function(){
this.animate({'path':('M '+dotX+' '+dotY)},1200);
});
var line2 = paper.path('M '+winWidth+' 0').attr({'stroke':'#CC333F','fill':'#CC333F','stroke-width':'2'});
line2.animate({'path':('M '+winWidth+' 0 L '+dotX+' '+dotY)},1200,function(){
this.animate({'path':('M '+dotX+' '+dotY)},1200);
});
var line3 = paper.path('M 0 '+winHeight).attr({'stroke':'#CC333F','fill':'#CC333F','stroke-width':'2'});
line3.animate({'path':('M 0 '+winHeight+' L '+dotX+' '+txt[6].getPointAtLength(0).y)},1200,function(){
this.animate({'path':('M '+dotX+' '+dotY)},1200);
});
var line4 = paper.path('M '+winWidth+' '+winHeight).attr({'stroke':'#CC333F','fill':'#CC333F','stroke-width':'2'});
line4.animate({'path':('M '+winWidth+' '+winHeight+' L '+dotX+' '+dotY)},1200,function(){
this.animate({'path':('M '+dotX+' '+dotY)},1200, function() {
this.animate({'path':txt[6].attrs.path},600,function(){
animLogo();
sounds.play({volume:75});
});
});
});//end draw lines
//draw the text
function animLogo() {
txt[6].show();
var pA = txt[6].clone();
pA.animate({'path':txt[5].attrs.path,'fill':txt[5].attrs.fill},800, function() {
var pB = pA.clone();
pB.animate({'path':txt[4].attrs.path,'fill':txt[4].attrs.fill},800, function() {
var pC = pB.clone();
pC.animate({'path':txt[3].attrs.path,'fill':txt[3].attrs.fill},800, function() {
var pD = pC.clone();
pD.animate({'path':txt[2].attrs.path,'fill':txt[2].attrs.fill},800, function() {
var pE = pD.clone();
pE.animate({'path':txt[1].attrs.path,'fill':txt[1].attrs.fill},800, function() {
var pF = pE.clone();
pF.animate({'path':txt[0].attrs.path,'fill':txt[0].attrs.fill},800, function() {
//do the .net part
var pG = txt[6].clone();
pG.animate({'path':txt[7].attrs.path,'fill':txt[7].attrs.fill},800, function() {
var pH = pG.clone();
pH.animate({'path':txt[8].attrs.path,'fill':txt[8].attrs.fill},800, function() {
var pI = pH.clone();
pI.animate({'path':txt[9].attrs.path,'fill':txt[9].attrs.fill},800, function() {
//show the beach whne the text is done
showBeach.run();
});
});
});
});
});
});
});
});
});
}//end draw text
});//end dom ready
});
};//end soundManager.onload
/* ]]> */
</script>
</body>
</html>
Using YUI3 to change random boxes random colors. View a demo here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YUI3 Random Colors</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&3.1.1/build/cssreset/reset-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>
<style type="text/css">
html {
background-color: #000;
}
</style>
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */
YUI().use('node','anim',function(Y){
var count = 0;
//add the color boxes to the page
while (count < 16) {
Y.one('body').prepend('<div id="div'+count+'" class="#000000">');
count++;
}
//get the inner height and width of the viewport
var winHeight = Y.DOM.winHeight();
var winWidth = Y.DOM.winWidth();
//add style to the color boxes
Y.all('div').each(function(){
this.setStyles({
'width': winWidth/4,
'height': winHeight/4,
'float': 'left',
'background-color':'#000000'
});
});
//random color function
function randColor() {
var str = 'ABCDEF0123456789';
var color = '#';
var count = 0;
while (count < 6) {
color += str.charAt(Math.round(Math.random()*(str.length-1)));
count++;
}
return color;
};
//function to continuously change random boxes random colors
var init = function() {
var number = Math.round(Math.random()*15);
Y.log('div #'+number);
var node = Y.one('#div'+number);
var oldColor = node.getAttribute('class');
var newColor = randColor();
Y.log('oldColor = '+oldColor);
Y.log('newColor = '+newColor);
node.setAttribute('class',newColor);
var oneAnim = new Y.Anim({
node: node,
from: {
backgroundColor: oldColor
},
to: {
backgroundColor: newColor
},
duration: 1,
easing: Y.Easing.easeIn
});
oneAnim.on('end',init);
oneAnim.run();
};
//when the dom is ready call init
Y.on('domready',init);
});
/* ]]> */
</script>
</body>
</html>
Using jQueryUI Slider plugin to control changing the opacity of a photo. View a demo here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Slider Fade Image</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&3.1.1/build/cssreset/reset-min.css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
body {
margin: 20px;
}
</style>
</head>
<body>
<div id="photo">
<img src="http://farm5.static.flickr.com/4060/4516224096_3d4dbb7ed1_o.jpg" alt="buddy glasses" width="500" height="375" />
</div>
<div id="slider"></div>
<script type="text/javascript">
/* <![CDATA[ */
//create a jquery instance with a callback function to be called when the dom is ready
$(function(){
//set the slider width to that of the photo and some margin
$('#slider').css({
'width': $('#photo>img').width(),
'margin-top': '10px',
}).css;
//create the slider
$('#slider').slider({
value:100,
min:0,
max:100
});
//every time the slider moves change the photo's opacity (in 0 seconds)
$('#slider').bind('slide',function(){
//divide slider's value by 100, because opacity can be 0 to 1
$('#photo>img').fadeTo(0,$(this).slider('value')/100);
});
});
/* ]]> */
</script>
</body>
</html>
Links:
- Google jQuery CDN
Using YUI3 Slider widget to control changing the opacity of a photo. View a demo here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YUI3 Sortable List</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&3.1.1/build/cssreset/reset-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<style type="text/css">
body {
margin: 20px;
}
</style>
</head>
<body>
<div id="photo">
<img src="http://farm5.static.flickr.com/4060/4516224096_3d4dbb7ed1_o.jpg" alt="buddy glasses" width="500" height="375" />
</div>
<div id="slider"></div>
<script type="text/javascript">
/* <![CDATA[ */
//create a YUI instance with the node and slider modules
YUI().use('node','slider',function(Y){
//add the yui3-skin-sam class to body
Y.one('body').addClass('yui3-skin-sam');
var photo = Y.one('#photo img'); //node instance of the photo
//create a new Slider object
var slider = new Y.Slider({
length:500,
value:100,
min:0,
max:100
});
slider.render('#slider');
//every time the slider moves change the photo's opacity
slider.on('thumbMove',function(){
//divide slider's value by 100, because opacity can be 0 to 1
var val = slider.getValue()/100;
photo.setStyle('opacity',val);
});
});
/* ]]> */
</script>
</body>
</html>