Thanh Tran trongthanh
🎈
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
| /* | |
| * Demo - CSS Text and Typography | |
| */ | |
| body { | |
| font-family: Helvetica, Arial, Open Sans, sans-serif; | |
| font-size: 16px; | |
| font-weight: normal; | |
| font-style: normal; | |
| } |
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
| /** | |
| * Color inheritance experiment | |
| */ | |
| html { | |
| color: magenta; | |
| font-size: 120%; | |
| } | |
| input, button, p, select { | |
| font-size: inherit; |
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
| /** | |
| * Box Model Demo 1 | |
| */ | |
| /* | |
| What properties will affect a block element's outer size? | |
| */ | |
| .box1 { | |
| float: left; | |
| color: red; |
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
| /** | |
| * Box Model Demo 2 | |
| */ | |
| /* | |
| * { | |
| box-sizing: border-box; | |
| }*/ | |
| /*html, body { | |
| 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
| /** | |
| * Clear Fix Demo | |
| */ | |
| html { | |
| font-family: sans-serif; | |
| font-size: 150%; | |
| } | |
| .container { | |
| background: #aaddaa; |
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
| /** | |
| * Float Demo | |
| */ | |
| html { | |
| font-family: sans-serif; | |
| font-size: 150%; | |
| color: #666; | |
| } | |
| .container { |
trongthanh
/ dabblet.css
Created
June 24, 2014 15:41
Essential CSS Training - Cascading & Specificity
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
| /** | |
| * Essential CSS Training - Cascading & Specificity | |
| */ | |
| html { | |
| font-family: sans-serif; | |
| font-size: 200%; | |
| } | |
| .blue { | |
| color: blue; |
trongthanh
/ dabblet.css
Created
July 27, 2013 04:52
Demo: Fixed Web Font padding issues on Mac/Linux/Android
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
| /* | |
| Demo: Fixed Web Font padding issues on Mac/Linux/Android | |
| Blog post: http://blog.int3ractive.com/2013/07/fixing-web-fonts-padding-issues-on-linux-mac.html | |
| */ | |
| @font-face { | |
| font-family: 'HelveticaLight'; font-weight: normal; font-style: normal; | |
| src: local('☺'), url('https://github.com/trongthanh/trongthanh.github.com/blob/master/css/webfonts-padding-fix/HelveticaNeue-Light.woff?raw=true') format('woff'); | |
| } | |
| @font-face { | |
| font-family: 'HelveticaLightFixed'; font-weight: normal; font-style: normal; |
trongthanh
/ dabblet.css
Created
May 15, 2013 08:13
Animated 3D Stereo Images with CSS3 (Enhanced with Steps)
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
| /** | |
| * Animated 3D Stereo Images with CSS3 (Enhanced with Steps) | |
| * Author: Thanh Tran (int3ractive.com) | |
| * Blog post: http://blog.int3ractive.com/2012/05/cave-3d-stereo-images-2-state-looping.html | |
| * Older solution (without steps() function): http://dabblet.com/gist/2651495 | |
| * Note: prefix-free in use | |
| */ | |
| .image1 { | |
| background: url(http://labs.int3ractive.com/javascript/effects/stereo-images/img/DSC_0192.jpg) no-repeat; |
trongthanh
/ dabblet.css
Created
May 15, 2013 08:11
The first commented line is your dabblet’s title
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
| /** | |
| * The first commented line is your dabblet’s title | |
| */ | |
| .box { | |
| width: 200px; | |
| height: 200px; | |
| background: rgba(255,0,255, 0.2); | |
| } |