デモ

ダウンロード

Blueprint

960 Grid System

YAML

YUI 2

Elements

52framework

elastiCSS

Boilerplate

Typogridphy

Emastic

Malo

The Golden Grid

1kb grid

Tripoli

Fluid 960 Grid System

Baseline

Lovely CSS Framework

Easy framework

The Fluid Grid System

xCSS

jQuery Masonry

FEM CSS Framework

Unobtrusive CSS Framework

Less Framework

Sencha Touch 1.0

Jo HTML5 Mobile App Framework

ボタンは以下の10種類です。

ソースコード

Image galleries and sliders

View demo

View demo

View demo

View demo

View demo

View demo

View demo

View Demo

View demo

View demo

CSS3 Animations

50 Amazing CSS3 Image Galleries, Sliders, Animations

Niceformsのデモはこちら

とてもすばらしいデザインのフォームが作れるのですが、送信ボタンの画像がずれてしまうことがあります。

cssを変えたりしていたのですが、うまくいかずに別の方法を試してみることに・・・。
Niceformsの送信ボタンだけ別のcssを適用させる方法です。

適用後はこのようなデザインの送信ボタンになります。

使用するのはこちら。
Make fancy buttons using CSS sliding doors technique

このボタン素材と、cssを使用します。
また、submitをjavascriptに変更します。

使用方法
step1
純正のファイルを一部変更したNiceformsのcss・javascript・画像ファイルのzipをアップロードしてあります。

そのファイルをダウンロードします。
step2
niceforms-default.cssとniceforms.jsを上書きします。

純正のcssと.jsにボタン用のソースを追加したものなので、純正css・.jsに完全上書きしてOKです。

step3

Niceformsのimagesフォルダ内に、button_right.pngとbutton_left.pngを追加します。

step4
送信ボタンsubmitを以下のように変更します。
[sourcecode language=”html”]<a class="button" href="javascript:form.submit()"><span>送信</span></a>[/sourcecode]

これで送信ボタンもそれなりになるはず。

改善した送信ボタン

最近、携帯サイトのリニューアルをする機会がありました。
なるべくページサイズを小さくしたいと思い、トップページをスクロールなしで見れるようにしました。

ところが・・・
ページの右側に1mmほどのすき間（空白）が出てきてしまいます。

CSSで
[sourcecode language=”html”]<style type="text/css">
body {width:100%;}
</style>[/sourcecode]
としても変化なし。

[sourcecode language=”html”]<style type="text/css">
body {width:100%;margin:0px;}
</style>[/sourcecode]
でも変わらず。

もしかしたらと思い、
[sourcecode language=”html”]<style type="text/css">
body {width:100%;margin:0px;overflow:hidden;}
</style>[/sourcecode]
とすると、空白がなくなりました。

つまり、スクロールバーの空白だったようです。
スクロールしなければ見れないページであれば、その空白にスクロールバーが表示されます。

しかし、スクロールしなくても見ることができるページでは、スクロールバーが消えて空白になっていたようです。

これは携帯の機種によって挙動がちがうのでしょうか？？

CSSとJavaScriptで動作を実現しています。

1. Pikachoose　デモページはこちらから

2. Workshop.rs　デモページはこちらから

3. Gadgetinspiration　デモページはこちらから

4. Newmediacampaigns　デモページはこちらから

5. Serie3.info　デモページはこちらから

6. Dev.herr-schuessler.de　デモページはこちらから

7. Smoothgallery.jondesign.net　デモページはこちらから

8. Gayadesign　デモページはこちらから

9. Nivo.dev7studios.com　デモページはこちらから

10. Pirolab.it　デモページはこちらから

11. Project66.net　デモページはこちらから

12. Eyecon.ro　デモページはこちらから

13. Jcoverflip　デモページはこちらから

14. Cssglobe　デモページはこちらから

14 most sexy galleries and slideshows using javascript and CSS

そんなCSS3をオンラインで作ることのできるジェネレータのまとめです。

http://css3generator.com/

http://widgetpad.com/694/

http://gradients.glrzad.com/

http://westciv.com/tools/

http://border-radius.com/