Ankit Agrawal anksanu
anksanu
/ index.html
Created
August 14, 2014 06:05
Difference between different css position // source http://jsbin.com/vukab/5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Difference between different css position" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .first,.second{ | |
| width: 100px; | |
| height: 100px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * CSS box-sizing | |
| */ | |
| body { | |
| background : black; | |
| } | |
| #a { | |
| box-sizing : border-box; | |
| width : 100px; | |
| height : 100px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * HTML5 Canvas 2 | |
| */ | |
| canvas { | |
| border: 1px solid #CC0000; | |
| margin-left:50px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * HTML5 Canvas | |
| */ | |
| canvas { | |
| border: 1px solid #CC0000; | |
| margin-left:50px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * css :before and :after psudo element | |
| */ | |
| div { width : 200px; height : 200px; text-align : left; background-color : #ccc; padding-top : 90px;} | |
| div:before { width : 50px; height:20px; background-color: red;content:'Before';display:block;} | |
| div:after { width : 50px; height:20px; background-color: green;content:'After';display:block;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * upgrading the hover popup effect | |
| */ | |
| .button {background-color : #ddd;width : 100px;position : relative;margin-top : 100px; | |
| } | |
| .pop {position : absolute;top : -30px;width : 130px;text-align : center;background-color : green; z-index : 3; | |
| } | |
| .area1{position:absolute;background-color : blue; z-index :2;width : 150px; height : 100px; top : -50px; opacity:0.2; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * JavaScript Closure | |
| */ | |
| background: #f06; | |
| background: linear-gradient(45deg, #f06, yellow); | |
| min-height: 100%; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * JavaScript Variable Scope | |
| */ | |
| background: #f06; | |
| background: linear-gradient(45deg, #f06, yellow); | |
| min-height: 100%; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * JavaScript Prototype Inheritance | |
| */ | |
| background: #f06; | |
| background: linear-gradient(45deg, #f06, yellow); | |
| min-height: 100%; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * JavaScript Prototype Inheritance | |
| */ | |
| background: #f06; | |
| background: linear-gradient(45deg, #f06, yellow); | |
| min-height: 100%; |
NewerOlder