顯示具有 css 標籤的文章。顯示所有文章

$rnd = Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
$rnd_color = "#";
for ($i=0; $i<6; $i++) {
    $rnd_color .= $rnd[rand(0,15)];
}

Reference: Random Hex Color

CSS 用 border 跟 after 做三角形

利用 box model 與 pseudo selector 做 triangle

.selected::after {
content: "";
position: absolute;
border-top: #66CBF9 10px solid;
border-right: transparent 10px solid;
border-bottom: transparent 10px solid;
border-left: transparent 10px solid;
}

Reference: CSS-triangle-after-implementation

:before, :after CSS Selectors Pseudo-elements

.amount::before {content:"$ ";}
.amount::after {content:" 萬元";}

用在將 .amout 前後加入任意 content
Reference: :before, :after 擬元素指標 (CSS Selectors Pseudo-elements)

[CSS] 取消 ul li 的標題項目圓圈底線

ul li { list-style-type: none; }
ul li a { text-decoration: none; }

Reference: Tutorial 4 - getting-rid-of-bullet-points-from-ul, Horizontal lists

CSS 文字間距/間隔

letter-spacing: 5px;
Reference: CSS 語法入門 – 文字大小、間距、行距、背景圖

CSS wrap auto width height

.container { overflow: auto; }
Reference: http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

jQuery + CSS 電視牆

jquery和CSS3实现的超酷类似电视墙的交互式菜单

CSS Sprite img link

Reference: Foreground <img> Sprites

<h2 class="popular"><img src="img-sprite.png" alt="" />Featured</h2>
<h2 class="featured"><img src="img-sprite.png" alt="" />Popular</h2>

h2 {
 overflow: hidden;
 position: relative;
 height: 50px;
 width: 200px;
}
h2 img {
 position: relative;
}
h2.popular img {
 top: -100px;
}
h2.featured img {
 top: -200px;
}