Horizontally Centered Menus with no CSS hacks ( float center! )
- non-bgc/bgi on nav, just centering items~
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Rplus
/ jsbin.oyIBUgA.css
Created
March 4, 2014 17:01
This file contains 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
| .gangnam-pic { | |
| width: 110px; | |
| height: 30px; | |
| display: inline-block; | |
| background: #fcc url('http://s.ytimg.com/yts/img/doodles/youtube_yoodle_psy_110x30-vflOeb25k.png') 0px 0px no-repeat; | |
| outline: 1px solid red; | |
| } | |
| .gangnam02.start { | |
| animation: g-anim 26.5s steps(53) infinite normal; |
This file contains 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
| // ---- | |
| // Sass (v3.3.3) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| @import "compass/css3"; | |
| @mixin lazy-font($font-name, $font-path, $fw: normal, $fs: normal) { | |
| @include font-face($font-name, | |
| font-files($font-path + ".ttf", $font-path + ".otf"), |
This file contains 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
| - var ddd = [['x','<','','>','←'],['(','*','+','/',')'],['','6','-','8',''],['5','1','7','3','9'],['0','.','2','=','4']]; | |
| input.calc__result(type='text', placeholder='code: 239') | |
| .calc-wrapper | |
| .calc | |
| each dd in ddd | |
| .calc__row | |
| each d in dd | |
| if d == '' | |
| span.calc__digi.calc__digi--empty |
This file contains 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
| - var menus = [{text: 'menu 1', link: '###'}, {text: 'menu 2', tip: 'menu-tip', submenu: [{text: 'sub-2-1', link: '###', tip: 'menu-tip'}, {text: 'sub-2-2', link: '###', tip: 'menu-tip'}] }, {text: 'menu 3', submenu: [{text: 'sub-3-1', link: '###', tip: 'menu-tip'}, {text: 'sub-3-2', link: '###'}, {text: 'sub-3-3', link: '###'}, {text: 'sub-3-4', link: '###', tip: 'menu-tip'}] }, {text: 'menu 4', link: '###'}]; | |
| .side(data-icon='M') | |
| ul.side-menu | |
| each list in menus | |
| li.side__list | |
| if list.submenu | |
| if list.tip | |
| a.side__item.side__item--sub(data-tip=list.tip, href=list.link)= list.text | |
| else |
Pure CSS loader using shadows and keyframe animation.
Forked from Josh Bader's Pen Pure CSS Loader.
Compass version.
This file contains 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
| // via: | |
| // * https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support | |
| // * https://gist.github.com/jackfuchs/556448 | |
| $.support.cssProperty = function(prop) { | |
| var domPrefixes = ',Webkit,Moz,O,ms,Khtml'.split(','), | |
| domPrefixesLength = domPrefixes.length, | |
| isSupport = false; | |
| for (var i = 0; i < domPrefixesLength; i++) { | |
| // i = 0, standard method, do not trans to uppercase |
SASS guide http://css-tricks.com/sass-style-guide/
介紹單一 SASS 檔的撰寫順序
OlderNewer