# Compass - Use transform in compass 1.0.1 On august 15, 2014 Compass release 1.0.1 Some code in scss change wording. This article provide CSS3 transform wording in scss.
I use this Mixin
@import "compass/css3"; /*simple-transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y, $origin-x, $origin-y)*/ @include simple-transform(1, 45deg, 5px, -15px, 0, 0, 0, 0); /* Advance Usage */ /*@include create-transform($perspective, $scale-x, $scale-y, $scale-z, $rotate-x, $rotate-y, $rotate-z, $rotate3d, $trans-x, $trans-y, $trans-z, $skew-x, $skew-y, $origin-x, $origin-y, $origin-z, $only3d);*/ Refer - Compass Transform | Compass Documentation
...
Category: Css
# Web Develop - Flexible Footer Sometimes we think footer must fixed in website bottom or put it in last of content.
I provide a idea may be a good way. Content less browser view height, footer fixed in bottom. When content too much over browser view height, footer be put last of content.
## Feature flexible only use CSS ## Usage min-height: calc(100% - <footer height>);
#hd { height: 50px; background: #aaa; /*display: none;*/ } #bd { text-align: center; min-height: calc(100% - 50px); /* important */ background: #ccc; } #content { padding-bottom: 60px; } #footer { position: relative; bottom: 50px; text-align: center; height: 50px; background: #999; } 50px is footer height
...
# CSS - SASS handle index Can use var control z-index
$elements: con, slider, masthead; .masthead { /* z-index: 3 */ z-index: index($elements, masthead); } .slider { /* z-index: 2 */ z-index: index($elements, slider); } .con { /* z-index: 1 */ z-index: index($elements, con); } Refer - 使用 sass 有效控管 z-index 圖層順序
...
# CSS - font-family font-family: Microsoft JhengHei, Arial, Tahoma, Geneva, sans-serif; Add use mobile device default font
font-family: Microsoft JhengHei, Heiti, Roboto, Helvetica, Arial, monospace, Tahoma, Geneva, sans-serif !important; CSS font-family 字型 - Wibibi Choosing Fonts for Your Mobile Website Common fonts to all versions of Windows & Mac equivalents CSS Web Safe Font Combinations
...
# CSS - 垂直置中 ## 文字垂直置中 之前 ApplyBOY 在網路上分享了一個 CSS 垂直置中的一個解法 這裡整理出個小小模組出來
假如那一個區域內的東西需做垂直置中, 在該區域的 element 加上 class vertical-centering
.vertical-centering:before { content: ''; display: inline-block; vertical-align: middle ; height: 100%; } 該區域的文字就會垂直置中
Example
See the Pen vertical-centering by Ted (@tedshd) on CodePen.
## 區域垂直置中 如要在一區域內有一小塊區域置中則需把該區域做 vertical-align: middle;
.vertical-centering-area { vertical-align: middle; } .vertical-centering:before { content: ''; display: inline-block; vertical-align: middle ; height: 100%; } Example
See the Pen vertical centering area by Ted (@tedshd) on CodePen.
...
# CSS - 文字圍繞陰影 ## text-shadow 利用 text-shadow 可達到文字陰影的效果, 但如果要讓陰影圍繞著文字就需要一點技巧了
CSS
h1 { text-shadow: #ff0000 1px 2px 3px; /*-- 顏色 x位移 y位移 模糊度 --*/ } 要達到圍繞的效果, 必須有上、下、左、右、左上、左下、右上、右下, 最少 8 個方向的位移
左上 上 右上 左 文字 右 左下 下 右下 h1 { text-shadow: #ff8800 5px 0 1px, #ff8800 -5px 0 1px, #ff8800 0 5px 1px, #ff8800 0 -5px 1px, #ff8800 5px 5px 1px, #ff8800 -5px -5px 1px, #ff8800 5px -5px 1px, #ff8800 -5px 5px 1px; } ### codepen See the Pen text shadow by Ted (@tedshd) on CodePen.
...
# CSS - Opacity effect child element 在利用 opacity 做背景時常遇到個問題就是子元素也被設置 opacity 這時就可以利用 CSS 的 :before 或 :after
<div class="bg-2"> <h2>Title</h2> <p>Content</p> <img src="http://blog.soonr.com/wp-content/uploads/2013/03/Google-Play-Badge.png" alt="google play" /> </div> .bg-2 { position: relative; &:before { content: ""; z-index: -99; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; @include opacity(0.8); } } CodePen
See the Pen qeojf by Ted (@tedshd) on CodePen
...
# Website switch layout 之前看過不少網站有切換 layout 的功能 於是就試著做做看
Demo
主要利用定義在 body 上的 class 去做不同 layout 的切換
Sample code
var node; function node(selector) { return document.querySelector(selector); } // set style var layoutList = 'layoutList', layoutGrid = 'layoutGrid', layoutFull = 'layoutFull', layoutCard = 'layoutCard'; function changeLayout(style) { // maybe make loading? node('body').setAttribute('class', style); } // bind click change style node('#style_1').addEventListener('click', function () { changeLayout(layoutGrid); }); node('#style_2').addEventListener('click', function () { changeLayout(layoutList); }); node('#style_3').
...
# Use CSS3 Animation In Compass Compass default dosen’t have mixin in CSS3 animation We can use this method in scss
/* define */ $animation-support: webkit, moz, o, ms, not khtml; /* use */ .animation { @include experimental('animation-name', move, $animation-support); @include experimental('animation-duration', 5s, $animation-support); @include experimental('animation-iteration-count', 1, $animation-support); } and add keyframes
/* define */ $animation-support: webkit, moz, o, ms, not khtml; @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } /* use */ .
...
# Place on and embed code from internet We can use cdnjs or some library sites embed js or css. But How can we embed our code from internet? I have 2 ways.
## GitHub If you can use GitHub Push your code to GitHub Wtach code on GitHub Find Raw and click it. open code like
https://raw.github.com/tedshd/jQuery_scroll_to_top/master/javascripts/scroll_to_top.js and then delete . after raw like
https://rawgithub.com/tedshd/jQuery_scroll_to_top/master/javascripts/scroll_to_top.js Embed it finally.
...