1) Detecting JS variables in the html by ID.
Example:
Html:
<html>
<body>
<form id="formId" name="testform"></form>
</body>
</html>
JS:
console.log(formId)
Probably, you would expect to see an error about variables. But you would be surprised - the form will be logged into the console.
So you must be careful when giving id’s to your html elements to avoid unexpected errors.
See live example
2) CSS outline does not support border-radius yet. Example:
Html:
<body> <div class="element"></div> </body>
CSS:
.element{
height:100px;
width:100px;
background:red;
position:absolute;
left:50px;
border-radius:20px;
outline:5px solid blue;
border:5px solid grey;
box-shadow: 0 0 0 5px yellow;
}Outline will ignore the border-radius. You can use the box-shadow without spreading for this purpose. It will be exactly the same. But if you want to outline with dotted line and radius you will be unable to do this in all browsers except Mozilla Firefox. There is vendor command:
-moz-outline-radius for this aim. See live example
3) Bind on click animation without any JS. You can use checkbox for this purpose. And its attribute “checked”.
Example :
Html:
<body>
<input type="checkbox"name="test">
</body>
CSS:
input{
position:relative;
background:black;
}
input:after{
position:absolute;
content:"";
height:10px;
width:100px;
background:red;
top:20px;
left:0;
transition:all 1s ease;
}
input:checked:after{
left:150px;
}As you can see, if the checkbox is checked, the red block would be animated to the right and if it is unchecked – then it will be moved to the left. This is a very simple example of using this technique, but nowadays CSS and HTML become more and more powerful tools to create animations or interfaces e.g. See an example of this technique in this simple game
See also: Is Magic_Quotes_Gpc Useful or Not?
