tedshd's DevNote

Develop & Design Note by Ted

Your posts match “ css ” tag:

CSS attribute

CSS attribute

顏色與背景

color:
background-color:
background-images:
background-repeat: no-repeat repeat-x repeat-y repeat
background-position: center
background-attachment: fixed scroll;
background: url() left center no-repeat;

文字

text-align: left right center
vertical-align: top bottom text-top text-bottom middle baseline super sub
line-height:
letter-spacing: (字距)
word-spacing: (單字間距)
text-indent: (首行縮排)
font-family:
font-size:
font-weight: 100~900
font-style: italic oblique
text-decoration: underline overline line-through none
text-decoration: blink 文字閃爍(部分瀏覽器有用)
text-decoration: line-through 刪除線
text-decoration: overline 文字頂部加線
text-decoration: underline 文字底部加線
text-decoration: none 沒有改變

區塊

margin:
padding:
border-color: transparent
border-width:
border-style: solid double dotted dashed inset outset groove ridge
width:
height:
vertical-align: middle

編排與顯示

float:left right
clear:left right both
position:relative absolute fixed
top:
left:
right:
bottom:
z-index:
display: block inline-block none inline
visibility: hidden visible
overflow: hidden scroll auto

條列項目

list-style: none disc square

其他

cursor: pointer crosshair wait help text move

虛擬樣式

:link 當文字或圖案是連結時
:hover 當滑鼠指標移到連結文字或圖案
:avctive 當滑鼠按下連結文字或圖案
:visited 當連結已經點過時
:focus focus
:before {
    content: "";
}
:after {
    content: "";
}

CSS Note

Tip about CSS

clearfix

為了清除浮動

.clearfix {
        *zoom: 1;
}
.clearfix:after {
        display: table;
        content: "";
        line-height: 0;
        clear: both;
}

padding-right or bottom & margin-right or bottom

如遇 model box 問題盡可能在右或下做修正(因為 XY 是朝右下發展)
避免用到 top 盡量用 bottom

scroll bar

在 windows 中,scroll bar 的寬是 16px

a & img

在用 a 包覆 img 時會發現一個現象就是就算把 a 用 block 設定寬高設成跟 img 一樣還是會發現滑鼠在要從圖片下面移進圖片會發現進去前會有約 2px 的空白滑鼠就先變成有連結的狀態,經過詢問後發現是因為 img 的關係,img 本身會有一點高度在bottom,所以如果要去掉這高度有一些作法

img {
overflow: hidden;
/* or */
vertical-align: bottom;
/* or */
display: block;
}

iframe border in IE7, IE8

<iframe frameBorder="0"></iframe>

word-break

在頁面上有要塞入一堆字的地方, 最好使用 break-word 以免英文單字在換行時出問題

word-break: break-word;

Refer - 手動調整 Responsive 中日文斷行的實驗

利用編碼呈現單引號等符號

Start Using Quotation Marks the “Correct” Way

CSS 文字垂直置中

CSS 垂直置中解法

retina 裝置

Retina裝置與網頁開發

Texture

Texturize It: How to Create Textured Text Using CSS

視差滾動

Pure CSS Parallax Websites

前端常识:7个你可能不认识的CSS单位

文字過多時省略(ellipsis)

text ellipsis

div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 240px;
}

Tip

上述為必要
element 必須為 block
如用在 span 等行內元素,需用 display: inline-block;
多行會變一行顯示

Effeckt.css - Note

Effeckt.css

demo

上面頁面都是利用 CSS3 的 Animations 與 Transitions 效果做出來的

GitHub

使用該 library 須載入 Modernizr 這個 library
Modernizr 是用來判斷 browser 是否支援 HTML5 or CSS3 所用的 library, 並能把相同功能但在不同 browser 實作的 API 或 CSS3 property 一致化

主要是透過添加 class or data attribute 的方式, Modernizer 就在其中做了整合各 browser 的事情

How does it work

動畫部分是利用 CSS3 的 Animations 與 Transitions
至於事件的觸發是利用 CSS3 Transition Events, 由於各個 browser 實作都不一樣, 所以這裡加載了一個 /js/demo/demo.js 的 js, 但在這 js 有個有趣的地方就是有用 ajax 去載入開發者名單, 所以就另開個 js 來載入

CSS3-event.js

var EffecktDemos = {

  init: function() {

    $(window).load(function() {
      $(".no-transitions").removeClass("no-transitions");
    });

    EffecktDemos.transitionEndEventName = EffecktDemos.transitionEndEventNames[Modernizr.prefixed('transition')];
    EffecktDemos.animationEndEventName = EffecktDemos.animationEndEventNames[Modernizr.prefixed('animation')];

  },

  animationEndEventNames: {
    'WebkitAnimation' : 'webkitAnimationEnd',
    'OAnimation' : 'oAnimationEnd',
    'msAnimation' : 'MSAnimationEnd',
    'animation' : 'animationend'
  },

  transitionEndEventNames: {
    'WebkitTransition' : 'webkitTransitionEnd',
    'OTransition' : 'oTransitionEnd',
    'msTransition' : 'MSTransitionEnd',
    'transition' : 'transitionend'
  }

}

EffecktDemos.init();

這 library 也是用 jQuery
所以載入順序

  1. jQuery
  2. Modernizer
  3. CSS3-event

list

<ul class="effeckt-list" data-effeckt-type="pop-in">
    <li>list</li>
    <li class="new-item">new list</li>
    <li class="remove-item">remove list</li>
</ul>

<!-- data-effect-type 放入要呈現的動畫效果
     new-item 入場
     remove-item 退場 -->

Place on and embed code from internet

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.

Dropbox

Place on code in dropbox.
Share this code
get share link like

https://www.dropbox.com/s/ie4b129u0thjcyw/logdown_theme.css

and replace www as dl

https://dl.dropbox.com/s/ie4b129u0thjcyw/logdown_theme.css

Refer

瀑布流(Pinterest-style) layout

瀑布流(Pinterest-style) layout

目前看見 3 種作法

  • jquery plug in
  • salvattore.js
  • CSS3 column

jquery plug in

Masonry

一款較多人使用的 jQuery plug in, 可向下相容到 IE8
Masonry

Grid-A-Licious

jQuery plug in, 向下相容到 IE9
Grid-A-Licious

salvattore

利用 data attribute 來達到 CSS3 column 的效果
獨立運作的 js 不必依靠其他的 js library
輕巧快速
向下相容到 IE9
salvattore
不過沒 CSS 所以要加入 CSS 以便讓版面順利出來
已修改的 salvattore
CSS source code(可依需求進行修改)

@-webkit-keyframes showsup {
  from { opacity: 0; -webkit-transform: translate(0, -20px); }
  to   { opacity: 1; -webkit-transform: translate(0, 0); }
}
@-moz-keyframes showsup {
  from { opacity: 0; -moz-transform: translate(0, -20px); }
  to   { opacity: 1; -moz-transform: translate(0, 0); }
}
@-o-keyframes showsup {
  from { opacity: 0; -o-transform: translate(0, -20px); }
  to   { opacity: 1; -o-transform: translate(0, 0); }
}
@keyframes showsup {
  from { opacity: 0; transform: translate(0, -20px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

.salvattore-grid-b .item.added {
  -webkit-animation: showsup 0.5s;
  -moz-animation: showsup 0.5s;
  -o-animation: showsup 0.5s;
  animation: showsup 0.5s;
}

.layout-redux {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.column {
  float: left;
  width: 100%;
}

.one-half {
  width: 50%;
}
.one-third {
  width: 33.333%;
}
.one-quarter {
  width: 25%;
}
.hide {
  display: none;
}

@media screen and (max-width: 480px) {
  body {
    padding: 0 20px;
    font-size: 14px;
  }
  .rs-font-alpha, h1 {
    font-size: 36px;
  }

  .rs-font-beta {
    font-size: 24px;
  }

  .rs-font-gamma {
    font-size: 18px;
  }

  .rs-font-delta {
    font-size: 18px;
  }

  .branding {
    font-size: 72px;
  }
  .layout-redux {
    width: inherit;
  }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .rs-font-alpha, h1 {
    font-size: 48px;
  }

  .rs-font-beta {
    font-size: 36px;
  }

  .rs-font-gamma {
    font-size: 24px;
  }

  .rs-font-delta {
    font-size: 24px;
  }

  .branding {
    font-size: 96px;
  }

  .layout-redux {
    width: inherit;
  }
}

/* Grids */
.salvattore-grid,
.salvattore-grid-b {
  margin: 0 -10px;
}

[data-columns]:before {
  display: none;
}

.salvattore-grid[data-columns]:before {
  content: '4 .column.one-third';
}
.salvattore-grid-b[data-columns]:before {
  content: '3 .column.one-half';
}

@media screen and (max-width: 480px){
  .salvattore-grid[data-columns]:before,
  .salvattore-grid-b[data-columns]:before {
    content: '1';
  }
}

@media screen and (min-width: 481px) and (max-width:819px) {
  .salvattore-grid[data-columns]:before {
    content: '2 .column.one-half';
  }
}
@media screen and (min-width: 820px) and (max-width: 1299px) {
  .salvattore-grid[data-columns]:before {
    content: '3 .column.one-third';
  }
}
@media screen and (min-width: 1300px){
  .salvattore-grid[data-columns]:before {
    content: '4 .column.one-quarter';
  }
}

@media screen and (min-width: 481px) and (max-width: 1099px) {
  .salvattore-grid-b[data-columns]:before {
    content: '2 .column.one-half';
  }
}
@media screen and (min-width: 1100px) {
  .salvattore-grid-b[data-columns]:before {
    content: '3 .column.one-third';
  }
}

CSS3 column

依情況需作 responsive web design
不然 layout 在做縮放會跑掉

CSS 必須調整好

/*--指定分欄數量--*/
.col {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
}
/*--指定分欄寬度(預設 auto)--*/
.col {
    column-width: 50px;
    -webkit-column-width: 50px;
    -moz-column-width: 50px;
}

HTML 依照下面的寫法

<ul class="col">
    <li>
        <!-- do something -->
    </li>
    <li>
        <!-- do something -->
    </li>
    <li>
        <!-- do something -->
    </li>
</ul>

Html5(css3)的瀑布流布局的实现

Use CSS3 animation in Compass

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 */
.animation {
    @include experimental('animation-name', move, $animation-support);
    @include experimental('animation-duration', 5s, $animation-support);
    @include experimental('animation-iteration-count', 1, $animation-support);
}

@include keyframes(move) {
    0% {
        top: 780px;
        opacity: 0;
    }
    100% {
        top: 450px;
    }
}

Refer - keyframes-sass-output.css
Refer - Getting Compass to add vendor prefixes to animation selectors

Website switch layout

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').addEventListener('click', function () {
    changeLayout(layoutCard);
});
node('#style_4').addEventListener('click', function () {
    changeLayout(layoutFull);
});

/*
scss example

.layoutList {
    .bd {
        .con {
            color: #ff0000;
        }
    }
}
.layoutGrid {
    .bd {
        .con {
            color: #0088ff;
        }
    }
}
.layoutFull {
    .bd {
        .con {
            color: #ff8800;
        }
    }
}
.layoutCard {
    .bd {
        .con {
            color: #00ff00;
        }
    }
}
 */

CSS - Opacity effect child element

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

CSS - 文字圍繞陰影

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.

此例可看出尚未完美之處(要把位移對得很精確)
text-shadow 為 CSS3 需 IE10 以上才支援
疊太多 shadow 在上面會影響頁面 render
所以此效果儘量少用

text-stroke

CSS3 的 text-stroke 可完美達成, 但目前只支援 Chrome, Sarfari, Opera

h1 {
    color: black;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ff8800;
}
codepen

See the Pen text-stroke by Ted (@tedshd) on CodePen.

Refer - Adding Stroke to Web Text
Refer - Can I use CSS text-stroke?

CSS - 垂直置中

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.

Refer - CSS 垂直置中解法

Web Develop - Flexible Footer

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

<header id="hd">
    <h1>Head</h1>
</header>
<article id="bd">
    <section id="content">
        <button>build content</button>
        <h1>Content</h1>
        <div id="loop"></div>
    </section>
</article>
<footer id="footer">
    <h2>Footer</h2>
</footer>

demo

Refer - siteInspire - Web Design Inspiration

Compass - Use transform in compass 1.0.1

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

JavaScript - detect CSS3 transitionEnd

JavaScript - Detect CSS3 transitionEnd

transitionend

It is a event can fired when CSS3 transition end.

function transitionEnd() {
    var el = document.createElement('div'), //what the hack is bootstrap

        transEndEventNames = {
        WebkitTransition : 'webkitTransitionEnd',
        MozTransition    : 'transitionend',
        OTransition      : 'oTransitionEnd otransitionend',
        transition       : 'transitionend'
    };

    for (var name in transEndEventNames) {
        if (el.style[name] !== undefined) {
            return transEndEventNames[name];
        }
    }

    return false; // explicit for ie8 (  ._.)

}

// Usage

document.querySelector('body').addEventListener(transitionEnd(), function () {
// dosomething

});

Refer - Easy way to detect support for transitionend event without frameworks like jQuery or Modernizr?

CSS - Modify Pseudo Element Content

CSS - Modify Pseudo Element Content

之前遇到個問題就是偽元素的內容(content)到底可不可以修改, 於是就求助於 Google

最後的答案是可以的, 而且還不少方法

Refer - Modify pseudo element styles with JavaScript

看下來就以下的方式個人覺得最好用

#red::before {
    content: attr(data-attr);
    color: red;
}
<p id="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
setTimeout(function (argument) {
    document.querySelector('#red').setAttribute('data-attr', 'green');
}, 3000);

PHP - Auto update static files cache

PHP - Auto update static files cache

We can cache static files(CSS, JavaScript) to client

When Server update static code.

We want to update cache then we can modify file or add query string update version.

We have some choice like modify url ?v=1 to ?v=2

But I want to auto modify version.

This is a way i use

<?php
function autoversion($url) {
    $ver = stat($_SERVER['DOCUMENT_ROOT'] . $url)[mtime];
    return $url . "?v=" . $ver;
}
# example
?>

<link href="<?php echo autoversion('/path/to/theme.css'); ?>" rel="stylesheet">

This way use file last modify time as a version.

First i want to use filemtime but it fail.

So i give up this way.

Update

Before use filemtime(), must use clearstatcache();

And my friend say stat has IO behavior, so this way is not perfect solution.

If service has lot of stat() or mass request, so many IO can influences performance.

Then we can write a script add update version and run it when service deploy.

Refer - Strategies for Cache-Busting CSS

Refer - stat

filemtime