- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4924
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="/index.css">
</head>
<body>
<a href="#foo" id="link">Click Here</a>
</body>
</html>
CSS:
#link {
display : block;
width: 400px;
height: 400px;
background: #BADA55;
border-radius: 200px;
text-align: center;
line-height: 400px;
}
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 5181
This article I was writing with help of this article.
As copy pasted from above mentioned article:
"When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go."
Lets check first example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/index.css"></link>
</head>
<body>
<div id="main">
<div id="relativePos">
<legend>Relative position</legend>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
<div id="absolutePos">
<legend>Absolute position</legend>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
</div>
</div>
</div>
</body>
</html>
CSS:
pre {
background: blue;
width: 500px;
}
#relativePos {
position: relative;
top: 200px;
background: red;
}
#absolutePos {
position: absolute;
top: 0px;
background: green;
}
#anotherPos {
position: relative;
top: 20px;
}
In this CSS notice that relativePos top is 200px, and absolutePos is 0px, try to play a little with relativePos and you will see that also red part is moving togehter with relative.
How it looks like you can see here - here I added one width just to display red and green areas.
As you can see red and green color are overlapped because div with absolute position (red) is inside the div with relative position (green).
Now lets check example where red (absolute div) is outside of green div. CSS will remain the same, HTML now looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/index.css"></link>
</head>
<body>
<div id="main">
<div id="relativePos">
<legend>Relative position</legend>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</div>
<div id="absolutePos">
<legend>Absolute position</legend>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
</div>
</div>
</body>
</html>
Example you can see here.
Notice in HTML code that absolute position (green) in HTML is under relative (red), but if you check how it looks like in web page you will see that green is above red, that is because in css is defined as an absolute position, and it is positioned in exactly where you tell it to go, it is "removed from document"
On the end lets switch red and green div, just to see what will happen.
HTML now looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/index.css"></link>
</head>
<body>
<div id="main">
<div id="absolutePos">
<legend>Absolute position</legend>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
</div>
<div id="relativePos">
<legend>Relative position</legend>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</div>
</div>
</body>
</html>
Example you can see here. As you can see position didn't change, compared with previous example.
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 40319
Examples are copy / pasted from here.
First example with JS.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"/> <script type="text/javascript" src="/jquery-2.1.1.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body> Enter something: <input class="clearable" type="text" name="" value="" placeholder="" /> <body> </html>
CSS:
.clearable{
background: #fff url(icoX.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
JS:
function tog(v){
return v?'addClass':'removeClass';
}
$(document).on('input', '.clearable', function() {
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function(e) {
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function(){
$(this).removeClass('x onX').val('').change();
});
Example you can download from here.
---
Another example, pure CSS, no JS needed.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"></link> </head> <h1> Textbox with a clear button completely in CSS <br> <span class="redfamily">< 0 lines of JavaScript ></span> </h1> <div class="search-wrapper"> <form> <input type="text" name="focus" required class="search-box" placeholder="Enter search term" /> <button class="close-icon" type="reset"></button> </form> </div> </html>
Here notice line:
<button class="close-icon" type="reset"></button>
CSS:
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
background-color: #FA9595;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 12px;
box-shadow: 0 0 2px #E50F0F;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
Example you can download from here.
---
HTML5 approach
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> Normal search: <input type="search"> <p/> Search with mask: <input type="search" isPassword="true"> </body> </html>
CSS:
input[isPassword="true"] {
-webkit-text-security: disc;
}
Notice that input type is "search".
Example you can download from here.
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 7246
...or how to change CSS onClick without javascript. From W3schools:
The :active selector is used to select and style the active link.
The :active selector can be used on all elements, not only links. Here you can read more about CSS's dynamic classes, and here you can see the list of CSS pseudo elements and classes.
HTML:
<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div id="beAgressive"> Yo! I am going to be active test! <div> And I will be under active test! </div> </div> </body> </html>
CSS:
#beAgressive:active {
color: brown;
visibility:hidden;
}
#beAgressive>div:active {
color: red;
visibility:visible;
}
Notice line #beAgressive>div with ">" sign I said that I want to apply CSS to all divs which are under ID "beAgressive".
Here you can see the example. (click on "And I will be under active test!")