漸層按鈕產生器

有扁平式按鈕(Flat Design)、漸層陰影按鈕(Gradient)、3D立體按鈕... 

(CSS可樂) CSS Layout很難?用這招30秒就讓你輕鬆生出網頁版面!

easy-to-generate-a-css-page-layout-01

CSS Layout 一直以來就不斷的困擾著視覺設計師以及程式設計師,往往精心切好的一個版,在瀏覽器中竟然是如此的不堪一擊,畫面跑版就跟921災區一樣的恐怖悲慘,「CSS Layout 為什麼這麼麻煩?」的想法也在設計師腦海裡從未消失過,俗話說的好,好的瀏覽器帶你上天堂,IE瀏覽器不好的瀏覽器讓你做不完,CSS layout跟瀏覽器之間的愛恨情仇就是讓你如此的魂牽夢縈,揪竟以後會怎麼發展下去?就跟著Amos繼續看下去吧~

(Will 保哥) 用純 HTML + CSS3 完成「樹狀結構圖」

用純 HTML + CSS3 語法 (沒有任何JS程式碼) 做出「族譜圖」或「樹狀結構圖」,滑鼠移到上層節點還會變更自己與下方階層的樣式,這份 CSS3 的撰寫技巧實在太高竿了。你可修改 HTML 的階層看看,網頁呈現會立即改變。

 

CSS的圓形hover轉場效果

In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

We will omit vendor prefixes in this tutorial. But you’ll of course find them in the files.

So, let’s get started!

circle-hover-effects-with-css-transitions-01

15個用CSS3創造令人驚喜按鈕的方法

CSS3 is the future of html/css. It is a very powerful css framework. Buttons are a very important element of any web design. It enhances the feel and beauty of the design and has an impact on its overall look. Creating buttons using CSS3 requires some experience because to add advanced effects to these buttons is not an easy task. Techniques like border-radius, text-shadow and box-shadow are commonly used for creating CSS3 buttons. In the past designers used photoshop to create their button but nowadays css3 is the solution for any developer but you have some skills to create a nice looking button.

In this post, we present a list of 15 Css3 Tutorials For Creating Amazing Buttons to let you learn some basic techniques of creating css3 buttons.