Creative Link Effects
用 css 3 寫的連結動畫，可以參考一下原始碼，這些效果都不錯。
2013年10月4日 星期五
2013年8月26日 星期一
2013年7月27日 星期六
15 Free CSS3 Tutorials to Create Amazing Buttons
15 Free CSS3 Tutorials to Create Amazing Buttons
CSS3 Animated Bubble Buttons
This week we are creating a useful set of animated buttons with the power of CSS3?s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name.
How to Build a Better Button in CSS3
Let’s build a better button using CSS3 styles, animations and transformations
Awesome Animated CSS Button Tutorial and Source Code
We create simple 3 in 1 CSS button code using some Advance CSS properties. I will show you here some CSS techniques that you use to easy create Animated CSS Button.
CSS Social Buttons
Basically, it is one master stylesheet that contains various design styles. It allows you to display many different button styles by combining the CSS classes.
UI Design: Glossy Buttons With CSS3 Gradient
In this post, we are going to create the glossy button effect as shown in the above screenshot using CSS3 Gradients and with simple HTML markup.
Create 3D Social Media Buttons with CSS3
Social media buttons are presented today on every website design. They are used to promote your business on social networks and get in return potential customers.
Crafting Minimal Circular 3D Buttons with CSS
These buttons use a good bit of CSS3 and some pseudo elements which are CSS 2.1. Nothing too overly progressive though. Any version in the last few years of Safari, Chrome, Opera, or Firefox will have no trouble.
How to Create Fancy Animated Buttons in CSS3
To give designers more flexibility and interoperability, CSS3 is proposed as the next major revision of CSS. In this tutorial we will be making some cool fancy animated CSS3 buttons.
Creating a 3D Button in CSS3
Today I want to show you how to use some of the awesome new features in CSS3 to create an animated, three-dimensional button.
AWESOME CSS3 & JQUERY SLIDE OUT BUTTON
The button consists of three parts: a container, the little button and the longer button. The two inner parts have absolute positioning. With jQuery, we enlarge the long button and change the colors of the small one.
ANIMATED BUTTONS WITH CSS3
Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
BUTTON SWITCHES WITH CHECKBOXES AND CSS3 FANCINESS
That’s the focus of this tutorial, I’ll show you how to create button switches with CSS only, without a line of JavaScript.
Cross Browser Pure CSS3 Button Demo
I’ve been doing a lot of experimenting recently with CSS3 gradients, box shadows, transitions etc… The result is this set of buttons created entirely from CSS (no images used at all).
Chunky 3D CSS3 Buttons
This is a set of Chunky 3D Pure CSS3 Animated Website Buttons. In the CSS file you will see I’ve already added some nice colors, this way you don’t have to search for the right color for these buttons. This works best in Firefox and Google Chrome.
Build Awesome Practical CSS3 Buttons
What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.
How To Create a Stylish Button Entirely with CSS3
Let’s look at how CSS gradients, shadows, borders and transitions can all be combined to create a stylish button for your website.
CSS 筆記、建議與指導方針總整理
CSS 筆記、建議與指導方針總整理
在參與大規模、歷時漫長且人手眾多的專案時，所有網頁開發人員都能遵守以下原則極為重要：
維持 CSS 樣式的可維護性 (maintainable)
維持撰寫風格清晰明瞭並具可讀性 (readable)
維持 CSS 樣式的延展性 (scalable)
為了達成上述原則，我們必須使用許多方法才能達成這個目標。
本文第一部分將探討語法、格式與 CSS 剖析；第二部分將從方法論 (approach)、思維框架 (mindframe) 與架構 CSS 的見解著手。
在參與大規模、歷時漫長且人手眾多的專案時，所有網頁開發人員都能遵守以下原則極為重要：
維持 CSS 樣式的可維護性 (maintainable)
維持撰寫風格清晰明瞭並具可讀性 (readable)
維持 CSS 樣式的延展性 (scalable)
為了達成上述原則，我們必須使用許多方法才能達成這個目標。
本文第一部分將探討語法、格式與 CSS 剖析；第二部分將從方法論 (approach)、思維框架 (mindframe) 與架構 CSS 的見解著手。
2013年7月16日 星期二
2013年7月3日 星期三
25 CSS3 Transitions and Animations Effects Tutorials
25 CSS3 Transitions and Animations Effects Tutorials
Pseudo-Elements Animation and transitions
It is easy and simple to customize your animations. It is optimized by HTML tools. It comes with CSS3, which generates new designs and sheets for your website. You can utilize its support with direct transformation of animation. Simple Icon Hover Effects
It comes with CSS for animation and transitions for your website. The only thing you are supposed to do is to create a subtle change and leave the rest of the style to the app. Caption Hover Effects
This app comes with a stylish hover, which has effects an on image captions. This caption comes with several transformation effects which simplify your work. It comes with CSS3 for awesome images and it is used to view full pictures. Dynamic Grid with Transitions
2013年5月29日 星期三
40 Bootstrap Tools and Generators for Web Developers
Bootstraptor
For those who would like to have more templates than what’s just being offered with the bootstrap template sets, Bootstraptor brings you so much more to work with.Brag Themes
Advertisement
Bring new life to business and personal websites with themes that maximize the ease and beauty of the Twitter Bootstrap framework through Brag Themes that makes everything different with unique features that’s apart from other bootstrap themes.Bootply
Bootply is a programming playground for programmers and curious fellows alike, who would love to work with bootstrap, CSS, JavaScript, and jQuery while testing different things, such as compatibilities with mobile devices or PCs.Bootstrap CDN
Bootstrap CDN is for programmers who want to have their bootstrap pages and websites to load a lot faster.2013年5月25日 星期六
2013年5月24日 星期五
10 Best CSS Tools to Save Your Time
10 Best CSS Tools to Save Your Time
CSS Menu Maker
This CSS Menu Maker tool provides every freelancer to create custom cross browser compatible CSS menus. You do not need any background of programming because it provides source code for all CSS menus.
CSS Compressor
It is another amazing CSS Tool to compress CSS code and helps for to speed your website loading time. It can save your server bandwidth as well compressed CSS in a good balance.
3D Transforms
Another CSS 3D Transforms online tool provides various level Transforms. This tool is on experimental mode and require specify prefixes in all browsers.2013年5月18日 星期六
10 Excellent CSS Accelerating Development Time
CSS lets you to do various things, but developers miss out on some
features like variable, constants, and general faster syntax? Ordinary
CSS does not have the ability to do all that, so many preprocessors have
been created to let you use variables on CSS files and then parse it to
regular stylesheets.
We have collected 10 Excellent CSS Accelerating Development Time. We have already amazing articles on CSS that might help you as well free online web generators, Free CSS Libraries and Resources and CSS Frameworks.
Compass is an open-source CSS Authoring Framework. Sass is an
extension of CSS3 which adds nested rules, variables, mixins, selector
inheritance, and more. Sass generates well formatted CSS and makes your
stylesheets easier to organize and maintain.
It is an awesome preprocessor that lets developers make plugins. It requires PHP and Apache with mod_deflate and mod_rewrite to work.
CSScaffold is a CSS framework written in PHP. Unlike pure CSS
framework (e.g., Blueprint, etc) that uses the standard abilities of
CSS, it uses PHP to extend CSS. The syntax looks and feels exactly like
CSS, except that you have additional features.
Sass
claims that it has made CSS fun again. This project can do some very
interesting things. Like Less CSS, it also lets you use variables and
have a simplified syntax. It is an amazing tool, but as far as I know it
is only available for Ruby.
Less is one of the most popular CSS preprocessor. It lets you have a simplified syntax and utilizing the variables. It is for the Ruby programming language, but it seems like Aaron Russel built an extension for making cached stylesheets that your PHP projects can utilize.
This one is for all the PHP Lovers out there, as it has been created
for your favorite language. Turbine is really good and it allows a
minimal syntax, automatically gzip multiple css and fix cross-browser
issues etc. A must try if you love PHP.
This one is a full featured, production ready tool that works under
Apache with mod_python, or as an environment-agnostic command line tool.
Another good one.
CSS Preprocessor is written in PHP 5. This tool lets you do many
things and you can also use expressions like margin-left: (200px * 3/2 –
10px); in your stylesheets.
This preprocessor accelerates CSS coding by extending the features to
CSS like nested selectors and color mixing etc. DtCSS reads the CSS
file with particular syntax written for DtCSS, and outputs the standard
CSS. It also boasts clever caching system.
This one is still in alpha status, but the creator says the code will
be launched very soon. One great thing about this projects is that it
will be available in PHP, Python and Ruby. So this will prove to be an
awesome tool for the developpers who work with all of these languages.
We have collected 10 Excellent CSS Accelerating Development Time. We have already amazing articles on CSS that might help you as well free online web generators, Free CSS Libraries and Resources and CSS Frameworks.
Compass
Compass is an open-source CSS Authoring Framework. Sass is an
extension of CSS3 which adds nested rules, variables, mixins, selector
inheritance, and more. Sass generates well formatted CSS and makes your
stylesheets easier to organize and maintain.CSS Cacheer
It is an awesome preprocessor that lets developers make plugins. It requires PHP and Apache with mod_deflate and mod_rewrite to work.
CSScaffold
CSScaffold is a CSS framework written in PHP. Unlike pure CSS
framework (e.g., Blueprint, etc) that uses the standard abilities of
CSS, it uses PHP to extend CSS. The syntax looks and feels exactly like
CSS, except that you have additional features.Sass
Sass
claims that it has made CSS fun again. This project can do some very
interesting things. Like Less CSS, it also lets you use variables and
have a simplified syntax. It is an amazing tool, but as far as I know it
is only available for Ruby.Less CSS
Less is one of the most popular CSS preprocessor. It lets you have a simplified syntax and utilizing the variables. It is for the Ruby programming language, but it seems like Aaron Russel built an extension for making cached stylesheets that your PHP projects can utilize.
Turbine
This one is for all the PHP Lovers out there, as it has been created
for your favorite language. Turbine is really good and it allows a
minimal syntax, automatically gzip multiple css and fix cross-browser
issues etc. A must try if you love PHP.Switch CSS
This one is a full featured, production ready tool that works under
Apache with mod_python, or as an environment-agnostic command line tool.
Another good one.CSS Preprocessor
CSS Preprocessor is written in PHP 5. This tool lets you do many
things and you can also use expressions like margin-left: (200px * 3/2 –
10px); in your stylesheets.DT CSS
This preprocessor accelerates CSS coding by extending the features to
CSS like nested selectors and color mixing etc. DtCSS reads the CSS
file with particular syntax written for DtCSS, and outputs the standard
CSS. It also boasts clever caching system.CSS PP
This one is still in alpha status, but the creator says the code will
be launched very soon. One great thing about this projects is that it
will be available in PHP, Python and Ruby. So this will prove to be an
awesome tool for the developpers who work with all of these languages.
2013年5月15日 星期三
2011年11月24日 星期四
2011年8月15日 星期一
2011年7月14日 星期四
2010年11月13日 星期六
CSS Animation Tutorial
因為apple的大力推行，而有了可以用CSS來做動畫的方法，不過要找一個可以支援WEBKIT的瀏覽器，想當然爾一定是apple家的safari最適合囉。
看看這篇介紹，寫的很詳細。
CSS Animation Tutorial
看看這篇介紹，寫的很詳細。
CSS Animation Tutorial
2010年11月10日 星期三
訂閱：
文章 (Atom)