TechoYO: Explore Computer Science.: June 2013

Sunday 30 June 2013

Spell Check in HTML

A lot of people are unaware of the spell check option that basic HTML offers. It can be implemented with a very small spellcheck attribute as shown below:

DEMO Download Script

HTML code:

<!DOCTYPE HTML>

	<HTML> <HEAD>
	<TITLE>HTML5 spell check example</TITLE>
	</HEAD>
	<BODY>
	<FORM>
	<TEXTAREA style="width:300px;height:150px;border: 1em solid black" spellcheck="false" contentEditable="true">Spell check off</TEXTAREA><BR />
	<TEXTAREA style="width:300px;height:150px;border: 1em solid black" spellcheck="true" contentEditable="true">Spell check on</TEXTAREA><BR />
	</FORM>
	</BODY>
	</HTML>

Tuesday 25 June 2013

Animation Effect with CSS

This tutorial gives you the implementation of animation effect using CSS3.

The animation of the first image in the demo happens on mouse hover, and the second happens automatically.

Code:

CSS code:

@-webkit-keyframes resize {
0% {
height:220px;
width:220px;
opacity:0.7;
}
50% {
height:240px;
width:240px;
opacity:0.4;
}
}
#heart:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0,0.5,0,0);
}
#heartinf {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0,0.5,0,0);
position: absolute;
left:250px;
top:80px;
width: 200px;
height:200px;
}
img{
height:200px;
width:200px;
opacity:1;
}