This tutorial demonstrates how to use the ::selection selector, which allows you to set different font and background color for the marked area. The default is black fonr color and blue background. Now let us show You how to change that.
First we simply call the ::selection selector.
::selection {
// You can add only 2 properties : color, background
}
NOTE:
The ::selection selector is not supported in Internet Explorer 8 and earlier versions.
Firefox support the ::selection selector, but the -moz- vendor prefix is required.( ::-moz-selection )
EXAMPLE:
<html>
<head>
<title>::selection selector</title>
<style>
::selection {
color: #fff;
background: #000;
}
::-moz-selection {
color: #fff;
background: #000;
}
</style>
</head>
<body>
<p>This is a simple example.</p>
<p>Shows you how to use ::selection.</p>
<p>You can change the color.</p>
<p>Also the background.</p>
<p>Enjoy with our Tips & Tricks every day.</p>
</body>
</html>
DEMO cannot be added because it will effect to the other elements of the page.
Wednesday, 29 October 2014
Tuesday, 28 October 2014
Vertical and Horizontal Center Alignment of Element(CSS)
Vertical and Horizontal Center Alignment of Element(CSS)
This is for those who knows CSS.
As you know you can set specific element in the center of it's parent using "margin: auto;".
Using CSS position property.
With this property you can set your element without affecting the others.
Im going to show you how to set the element in the center verticaly and horizontaly. To do that you need to use also the margin: auto; property.
We simply add :
margin: auto;
position: absolute;
margin: auto;
position: absolute;
left: 0;
right: 0;
Now when you resize the page it wil be always at the center.
position: absolute;
top: 0;
bottom: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
Now no matter what you resize, the heigth or the width of the page the element will be always at the center of the page.
EXAMPLE:
<html>
<head>
<title></title>
<style>
.myDiv {
width: 300px;
height: 230px;
background: red;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>
#easilylearnhtml
This is for those who knows CSS.
As you know you can set specific element in the center of it's parent using "margin: auto;".
Using CSS position property.
With this property you can set your element without affecting the others.
Im going to show you how to set the element in the center verticaly and horizontaly. To do that you need to use also the margin: auto; property.
We simply add :
margin: auto;
position: absolute;
- if we want to set it centered horizontaly we do that:
margin: auto;
position: absolute;
left: 0;
right: 0;
Now when you resize the page it wil be always at the center.
- You can also set vertical center alignment by doing this :
position: absolute;
top: 0;
bottom: 0;
- Or set centered alignment for horizonal and vertical :
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
Now no matter what you resize, the heigth or the width of the page the element will be always at the center of the page.
EXAMPLE:
<html>
<head>
<title></title>
<style>
.myDiv {
width: 300px;
height: 230px;
background: red;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>
#easilylearnhtml
Monday, 27 October 2014
Change the cursor image of the mouse
Change the cursor of the mouse
This tutorial demonstrates how we can change the cursor image for our elements with just one line of code.
The syntax is very easy:
cursor: url(URL to image);
but if you want it to work fine, in addition you have to add auto after this :
cursor: url(URL to image), auto;
Example:
<html>
<head>
<title>I am changing my cursor image</title>
<style>
#block {
width: 400px;
height: 240px;
background: #333;
cursor: url(Cursor-icon.png), auto;
}
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>
LIVE DEMO:
We are accepting question here and in our facebook page.
This tutorial demonstrates how we can change the cursor image for our elements with just one line of code.
The syntax is very easy:
cursor: url(URL to image);
but if you want it to work fine, in addition you have to add auto after this :
cursor: url(URL to image), auto;
Example:
<html>
<head>
<title>I am changing my cursor image</title>
<style>
#block {
width: 400px;
height: 240px;
background: #333;
cursor: url(Cursor-icon.png), auto;
}
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>
LIVE DEMO:
We are accepting question here and in our facebook page.
Sunday, 26 October 2014
Pure JavaScript Live Form Validation(Non styled)
This is a perfect example for cool and responsive popup Sign Up/In form.
All you need to do is to add the HTML, CSS and Javascript to your page and add some styles.
You should pass the code here :
EXAMPLE:
<html>
<head>
<title>Form Validation</title>
<style>
// Here paste the CSS CODE
</style>
</head>
<body>
// Here paste the HTML CODE
<script>
// Here paste the JAVASCRIPT CODE
</script>
</body>
</html>
****HTML CODE****
<div class="form">
<form action="http://www.easilylearnhtml.blogspot.com" method="get" class="form">
Username: <input type="text" class="user" />
<br />
Password: <input type="password" class="pass" />
<br />
Email: <input type="text" class="email" />
<br />
<input type="submit" class="submit" />
</form>
</div>
****CSS CODE****
body {
margin: 0;
padding: 0;
}
.user, .pass, .email {
border: 1px solid #BFBFBF;
}
****JAVASCRIPT CODE****
function addEventHandler(evtTarget, evt, fnction, bubl) {
if (addEventListener) {
evtTarget.addEventListener(evt, fnction, bubl);
} else if (attachEvent) {
evtTarget.attachEvent("on" + evt, fnction);
}
} // cross-browser event handler
// Real time for validation
function autoFormValidation(form, patt) {
addEventHandler(form, "input", function(e) {
var pattern = patt;
var target = e.target.value;
var check = pattern.test(target);
if (!check) {
e.target.style.border = "3px solid red";
} else {
e.target.style.border = "3px solid green";
}
}, false);
addEventHandler(form, "input", function(e) {
if (e.target.value == 0) {
e.target.style.border = "1px solid #BFBFBF";
}
}, false);
}
// checks if the fields are filled correct
addEventHandler(document.querySelector(".form"), "submit", function(e) {
if (document.querySelector(".user").value == 0 || document.querySelector(".pass").value == 0 ||
document.querySelector(".email").value == 0) {
e.preventDefault();
alert("Some of the forms arent filled");
}
if (document.querySelector(".user").style.border == "3px solid red" ||
document.querySelector(".pass").style.border == "3px solid red" ||
document.querySelector(".email").style.border == "3px solid red" ) {
e.preventDefault();
alert("Edit the red fields...");
}
}, false);
autoFormValidation(document.querySelector(".user"), /^\w{4,}$/); // username input
autoFormValidation(document.querySelector(".pass"), /^\w{6,}$/); // password input
autoFormValidation(document.querySelector(".email"), /^[a-zA-z0-9_]{4,}[@]{1}[a-z]{2,}\.{1}[a-z]{2,}$/); //email input
LIVE DEMO:
All you need to do is to add the HTML, CSS and Javascript to your page and add some styles.
You should pass the code here :
EXAMPLE:
<html>
<head>
<title>Form Validation</title>
<style>
// Here paste the CSS CODE
</style>
</head>
<body>
// Here paste the HTML CODE
<script>
// Here paste the JAVASCRIPT CODE
</script>
</body>
</html>
****HTML CODE****
<div class="form">
<form action="http://www.easilylearnhtml.blogspot.com" method="get" class="form">
Username: <input type="text" class="user" />
<br />
Password: <input type="password" class="pass" />
<br />
Email: <input type="text" class="email" />
<br />
<input type="submit" class="submit" />
</form>
</div>
****CSS CODE****
body {
margin: 0;
padding: 0;
}
.user, .pass, .email {
border: 1px solid #BFBFBF;
}
****JAVASCRIPT CODE****
function addEventHandler(evtTarget, evt, fnction, bubl) {
if (addEventListener) {
evtTarget.addEventListener(evt, fnction, bubl);
} else if (attachEvent) {
evtTarget.attachEvent("on" + evt, fnction);
}
} // cross-browser event handler
// Real time for validation
function autoFormValidation(form, patt) {
addEventHandler(form, "input", function(e) {
var pattern = patt;
var target = e.target.value;
var check = pattern.test(target);
if (!check) {
e.target.style.border = "3px solid red";
} else {
e.target.style.border = "3px solid green";
}
}, false);
addEventHandler(form, "input", function(e) {
if (e.target.value == 0) {
e.target.style.border = "1px solid #BFBFBF";
}
}, false);
}
// checks if the fields are filled correct
addEventHandler(document.querySelector(".form"), "submit", function(e) {
if (document.querySelector(".user").value == 0 || document.querySelector(".pass").value == 0 ||
document.querySelector(".email").value == 0) {
e.preventDefault();
alert("Some of the forms arent filled");
}
if (document.querySelector(".user").style.border == "3px solid red" ||
document.querySelector(".pass").style.border == "3px solid red" ||
document.querySelector(".email").style.border == "3px solid red" ) {
e.preventDefault();
alert("Edit the red fields...");
}
}, false);
autoFormValidation(document.querySelector(".user"), /^\w{4,}$/); // username input
autoFormValidation(document.querySelector(".pass"), /^\w{6,}$/); // password input
autoFormValidation(document.querySelector(".email"), /^[a-zA-z0-9_]{4,}[@]{1}[a-z]{2,}\.{1}[a-z]{2,}$/); //email input
LIVE DEMO:
Saturday, 25 October 2014
CSS3 Keyframes Slideshow
CSS3 Keyframes Slideshow
This is just example on what you can do with keyframes, its not tutorial, if You are not familiar with keyframes animation, CSS as language or HTML, click here : CSS3 Keyframes Full Tutorial || CSS Full Tutorial || HTML Full TutorialThe below keyframe code is only for Chrome and Safari but you can add support for mozilla, opera and IE by copying the code and adding the -moz-, -ms- and -o- vendor prefixes.
Note:
All those strange letters are just links. Dont thing about them.
Example:
<html>
<head>
<title>CSS3 @keyframes slideshow</title>
<style>
.slideShow {
width: 400px;
height: 200px;
border: 1px solid #000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg);
background-repeat: no-repeat;
-webkit-animation: slideShow 15s 1s infinite alternate;
-moz-animation: slideShow 15s 1s infinite alternate;
-ms-animation: slideShow 15s 1s infinite alternate;
animation: slideShow 15s 1s infinite alternate;
}
// Chrome and Safari
@-webkit-keyframes slideShow {
0% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg) ;
}
25% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH8yZaTmlCOwYv19X21lRL0z_03dOfIolPWw_kgms1Z5xmAjgMOXGjvOMLSALRYnxDz9SRT21_rLWirX3wlcxmY1E5Fqz9wuUs3KlTvm66FK-7gzPGEtu1ilkbHHm3Ewmut_o1ythYxMEr/w400-h200-p/elder.jpg) ;
}
50% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzLcaBwL47BE3Lf8Iqw4_ff8ST5Vr36ctxuJDwupbEQTdsRCXxvJZpW520-PT8aGgjlSdogF1o2JXvVMWhoWeJ1EPXNMiD9wBR8CJGNj9UOobo46pne2iCZFXp2nbUGGvlE6M9ULjVsFj/w400-h200-p/nfs.jpg) ;
}
75% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0EEEBImHDmjlnKZMApo9BtVVrsF14WYJA0w3ewBATEAToeuapGkV_BB9D4aDSmhFYZyIqaaCxzEynxDWpaUuMGV9mQSoCbYtnyj73B5Gb-UJhf8fvAxiKp7w5VdCvXRv5XcvV-FcMN9O/w400-h200-p/poseidon.jpg) ;
}
100% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHUnTqNYWUeFmpkg1UsuNamJLtLUkCYA74O5-Qj3r8k7wBvGU7wyHQBS2i87t4lWnF_zCDMgr_5AJzpOsN313-iGGAnUf5FHmHuX5AHaJKpatBn9hVESgBgyiaMWsvb97D8qBfNiUJsiw/w400-h200-p/tanks.jpg);
}
}
</style>
</head>
<body>
<div class="slideShow"></div>
</body>
</html>
LIVE DEMO
Friday, 24 October 2014
CSS3 @keyframe Animations
CSS3 Animation/Keyframes
@keyframes allow us to make amazing animations without using Flash, javascript or animated images.
There's few important steps:
1. Choose the element you want to animate and give it class or id.
Example:
<div class="anime"></div>
2. Make sure that your element appear in the page by adding some styles.
Example:
.anime {
width: 300px;
height: 200px;
background-color: #ff0033;
}
3. There's few properties that you can use.
animation-name
You always have to add this property if you want to make animation. This is the name of your animation. It can be everything.
Possible values :
animation-delay
Pass only 1 value, for example if it's 3s(seconds), the animation will start after 3 sec when page loads.
Possible values :
animation-direction
Specifies whether or not the animation should play in reverse on alternate cycles.
Possible values :
normal | Default value.
reverse | The animation should play in reverse direction
alternate | The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)
alternate-reverse | The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)
animation-duration
Defines how many seconds it will take the animation to complete one cycle.
Possible values :
animation-iteration-count
Defines the number of times an animation should be played
Possible values :
animation-play-state
Specifies whether the animation is running or paused.
Possible values :
animation-timing-function
The animation-timing-function specifies the speed curve of the animation.
Possible values :
animation
This is shorthand property for setting all animation properties in one,
except the animation-play-state and the animation-fill-mode property.
Syntax :
animation: name duration timing-function delay iteration-count direction play-state;
Example:
-webkit-animation: spinner 5s ease 0s infinite alternate running;
Example of all properties:
.anime {
-webkit-animation-name: spinner;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Note:
Always use them with vendor prefixes:
4. Next step is the real animation. Now you will going to use @keyframes. Always use vendor prefixes.
Syntax:
@-prefix-keyframes animationName {
}
Example:
@-webkit-keyframes spinner {
}
5. We can control the animation all the time. To do that you need to use percents.
Here's what will going to happen:
at 10% of the animation the background will change, at 30% the width, at 60 the height and at 100% it will spin the element 360deg.
SYNTAX:
@-webkit-keyframes spinner {
10% {
background-color: #fff;
}
30% {
width: 400px;
}
60% {
height: 300px;
}
100% {
-webkit-transform: rotate(360deg);
}
}
Full example:
<html>
<head>
<title>My first Animation</title>
<style>
.anime {
width: 300px;
height: 200px;
background-color: #ff0033;
-webkit-animation-name: spinner;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
@-webkit-keyframes spinner {
10% {
background-color: #fff;
}
30% {
width: 400px;
}
60% {
height: 300px;
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="anime"></div>
</body
</html>
Note:
Experiment with the code all the time for better and amazing results. Learn with #EASILYLEARNHTML Team all the time.
CLICK FOR LIVE DEMO
@keyframes allow us to make amazing animations without using Flash, javascript or animated images.
There's few important steps:
1. Choose the element you want to animate and give it class or id.
Example:
<div class="anime"></div>
2. Make sure that your element appear in the page by adding some styles.
Example:
.anime {
width: 300px;
height: 200px;
background-color: #ff0033;
}
3. There's few properties that you can use.
animation-name
You always have to add this property if you want to make animation. This is the name of your animation. It can be everything.
Possible values :
- Animation name
Pass only 1 value, for example if it's 3s(seconds), the animation will start after 3 sec when page loads.
Possible values :
- Seconds // animation-delay: 2s;
animation-direction
Specifies whether or not the animation should play in reverse on alternate cycles.
Possible values :
normal | Default value.
reverse | The animation should play in reverse direction
alternate | The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)
alternate-reverse | The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)
animation-duration
Defines how many seconds it will take the animation to complete one cycle.
Possible values :
- Seconds
animation-iteration-count
Defines the number of times an animation should be played
Possible values :
- Number(1,2,3,4 etc.)
- Infinite
animation-play-state
Specifies whether the animation is running or paused.
Possible values :
- paused
- running
animation-timing-function
The animation-timing-function specifies the speed curve of the animation.
Possible values :
- linear
- ease
- ease-in
- ease-out
- ease-in-out
animation
This is shorthand property for setting all animation properties in one,
except the animation-play-state and the animation-fill-mode property.
Syntax :
animation: name duration timing-function delay iteration-count direction play-state;
Example:
-webkit-animation: spinner 5s ease 0s infinite alternate running;
Example of all properties:
.anime {
-webkit-animation-name: spinner;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Note:
Always use them with vendor prefixes:
- -webkit- | for google chrome and safari
- -moz- | for mozilla
- -ms- | for Internet Explorer
- -o- | for Opera
4. Next step is the real animation. Now you will going to use @keyframes. Always use vendor prefixes.
Syntax:
@-prefix-keyframes animationName {
}
Example:
@-webkit-keyframes spinner {
}
5. We can control the animation all the time. To do that you need to use percents.
Here's what will going to happen:
at 10% of the animation the background will change, at 30% the width, at 60 the height and at 100% it will spin the element 360deg.
SYNTAX:
@-webkit-keyframes spinner {
10% {
background-color: #fff;
}
30% {
width: 400px;
}
60% {
height: 300px;
}
100% {
-webkit-transform: rotate(360deg);
}
}
Full example:
<html>
<head>
<title>My first Animation</title>
<style>
.anime {
width: 300px;
height: 200px;
background-color: #ff0033;
-webkit-animation-name: spinner;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
@-webkit-keyframes spinner {
10% {
background-color: #fff;
}
30% {
width: 400px;
}
60% {
height: 300px;
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="anime"></div>
</body
</html>
Note:
Experiment with the code all the time for better and amazing results. Learn with #EASILYLEARNHTML Team all the time.
CLICK FOR LIVE DEMO
Thursday, 3 July 2014
Chapter 12: JavaScript Functions
Functions
As we start to add more code
we want to make sure that it doesn’t get messy and hard to read. So as it all
languages we’ll going to break apart large element in JavaScript into smaller
reusable modular pieces. All we doing is taking several statements, wrapping
them up and giving them a name, and that means we are creating functions. To
make one we take the code that we want to enclose, no matter the size of the
script. We surround with a curly braces to create a code block to say where
this function starts and ends. We use the word function, we also give it a
name. You decide what to be the name, but you have to remember but you can’t
start the name of your function with number
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
function anyFunction() {
console.log("This is
function example.");
}
</script>
</body>
</html>
After the function is
declared, we can call it.
We can use the name of the
function with the opening and closing parentheses ( always use open and closing parentheses when you declare function ),
semi-colon because it is a full statement. And all the code inside the function
will be executed. Now note that as soon as you put your code in a function it
won’t execute, it won’t run unless you explicitly call it.
Its good practice to define
your functions before you calls them.
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
function anyFunction() {
console.log("This is
function example.");
}
anyFunction();
</script>
</body>
</html>
Functions with parameters
When you call a function you can pass values to it
named arguments or parameters.
We can create 2 types of arguments – single and
multiple which is separated with comas.
function myFunction(parameterX, parameterY, parameterZ)
{
// code to be executed
}
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
function anyFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
}
anyFunction(20, 10, 5);
anyFunction(40, 27, 4);
</script>
</body>
</html>
When the function is called it receives values called
arguments.
The parameters and the
arguments must be in the same order:
var a = myFunction(x, y,
z);
You can use the arguments as local variable when they
are placed inside the function.
Often the arguments
are used to compute a return value.
JavaScript return
We can optionally return values. Not only can a
function accept information, but we can also send some back. If you want to
return information all you need to do is to use the word return, and then pass
back a variable, string, number, it’s up to you.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
function myFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
// we can return values
return calc;
}
myFunction(20, 10, 5);
myFunction(40, 27, 2);
</script>
</body>
</html>
Parameter Mismatch
One of the usual issues with the functions to take
parameters is what happens if you get something wrong with them. For example if
you pass the wrong amount of information in them.
In the below example we add an extra information, and
when the code is executed the value 200 would be ignored by JavaScript.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
function myFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
}
myFunction(20, 10, 5, 333);
</script>
</body>
</html>
But what happened if I pass in only 2 values and we
have 3 parameters?
And what will happen is that the missing one will be
passes as undefined. The variable z will be the undefined one.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
function myFunction( x, y, z) {
console.log( x + y + z);
}
myFunction("Hello ","World ");
</script>
</body>
</html>
variable scope/ Local variable
Variable
scope means where this variable is visible, what part of your code can see it,
and what part can use it.
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
function
myFunction() {
var
x = 500;
console.log(x);
}
myFunction();
console.log(x);
</script>
</body>
</html>
In
the above example in function myFunction() we create a variable named x and we
call it, and then it will input 500. But if we try to use this variable outside
of the function the result will be undefined, x doesn’t exist outside the
function. In this case the variable x is called Local variable, because we use
the word var inside the function.
But
if we want to create a variable that is visible for the entire file of code
what you have to do is to define the variable x outside any function. And then
the variable becomes a Global Variable.
Subscribe to:
Posts (Atom)