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
Subscribe to:
Posts (Atom)