(Muki) SASS的雙連字號選擇器

SASS 的「&」表示重複上一個迴圈的 selector,所以如果寫
.btn {
...
.navbar & {
background: lightsteelblue;
}
}
compile 後會變成
.btn {
...
}
.navbar .btn {
background: lightsteelblue;
}

sass-tip-the-double-ampersand-selector-2 

(Will 保哥) HTML5 的 Web Components

Will 保哥: 

HTML5 的 Web Components 代表一系列 W3C 用來將網頁更加元件化的多份規格,這部 Shadow DOM 則是其中一套規格,用來分離「內容」與「呈現」。以往我們在談區隔「內容」與「呈現」通常會說 HTML 與 CSS 的用途,這並沒錯,只是 Shadow DOM 是針對 HTML 結構再進一步把 DOM 物件透過 JavaScript 封裝起來,更加強調關注點分離。

在新一代網頁開發技術 (HTML 5.1) 裡面,Web Components 將扮演重要角色,讓各種複雜的網頁 UI 元件 (Widgets) 透過 Shadow DOM 進行封裝,讓你的 HTML 內容更加「語意化」,這篇文章完整說明 Shadow DOM 的設計概念與實作入門,只要 Google Chrome 25 版本以上的瀏覽器都可以跑。

(CSS可樂) 用 CSS3 繪製立體感圖示

draw-three-dimensional-icon-by-css3-01

 

自從 CSS3 新增了漸層與陰影屬性之後,網頁設計的彈性就變得更大了,於是使用 CSS3 畫圖的人就變多了,所以Amos也不例外,看到網路上有人用Photoshop畫出好看的icon,那CSS可樂就用 CSS3 來畫吧!

開始使用CSS3的12個超棒功能

If you are like me, when you see an impressive demo of a new CSS3 feature, you can’t wait to start using it in websites. Of course, then you see that it is available in only one or two of the major browsers (and this never includes IE), so ultimately you decide to wait. I have good news for you – with the latest browser releases, there are a few awesome features that are finally supported everywhere, and you can start using them right now!

12-awesome-css-features

CSS處理SVG影像,Retina 又如何?

Hello everybody. I assume that most of you have used or experienced with image sprites. Image sprites help you to minimize the amount of images, and by that making less request to server and make the site load faster.

Until few years, working with PNG image sprite was the best practice. but something like 2-3 years ago came the Retina Screens to mobile phones and tablets nad now even desktop screens!

Retina Screens have 2 resolutions. Let's take for example the Galaxy S4 of Samsung. The first resolution - web resolution or CSS resolution is 360X640. The second resolution - the factory real resolution is 1080X1920. it's mostly for videos and images . * For more about Retina Screens - How to get real Mobile CSS resolutions for Responsive Design.