動きのあるボタンが生成できるジェネレーター「Transformicons」 | ライフハッカー・ジャパン
「Transformicons」は動きのあるボタンが生成できるジェネレータです。クリックするとメニューの三本線が×印になったり、ちょっとした細かい動作をもつアイコンが作れます。アイコンはCSS/SassおよびJavaScriptで生成されますよ。 以下に使ってみた様子を載せておきます。まずTransformiconsへアクセスしましょう。トップページに並んでいるアイコンをクリックすると、どんな動きをするか確認できます。 「Builder」から、作りたいアイコンを選択します。 「Build」ボタンを押すと、HTML・CSS・JavaScriptがセットになって作られます。あとはコードをコピペすれば動きのあるアイコンが使えますよ。ぜひ細かい動作にもこだわりたい方は活用してみてください。 Transformicons （カメきち）
[CSS]CSS3グラデーションを使用した美しいツールバーとボタン
Experiments ツールバーもボタンもいくつかのバリエーションがあり、ノーマルタイプ、アイコンタイプ、カラーを変更したものと実用性の高いデモが公開されています。
[CSS]既存のボタンのデザインをセクシーに美しくするスタイルシート -Sexy Buttons | コリス
ブラウザごとに異なる味気ないデザインのボタンをアイコンやグラデーションを使用してセクシーに美しくするCSSのフレームワークを紹介します。
[CSS]CSSアニメーションを使用したポップでキュートなボタン
Radioactive Buttons demo 上記デモはSafariでご覧ください。ボタンのグラデーションがまぶしいくらいにアニメーションします。 Firefoxなどのアニメーションに対応していないブラウザでは下記のように表示されます。 個人的にはデザインはこれで充分のような気もします。 <textarea name="code" class="css" cols="60" rows="5"> @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; } to { background-color:
不特定多数の人が更新する大規模サイトに必要な CSS 設計の思想
今話題（？）の CSS 設計のメモ。 この「ある程度の規模」というのは、肌感覚としてテンプレートの枚数( ≠ Webサイトのページ総数)が 20P〜50P くらいのイメージ。 また、コーディング完了後に自分以外の人間による断続的な更新が入るという前提。 そして一番重要なのは「更新する人のスキルは定義しない。」ということ。つまり HTML の知識が乏しい人が更新する可能性があることを前提とする。 きっと1ヶ月くらいすれば変わると思うけど、自分の思想のログとして残しておく。 今ぼくは以下のことに気をつけながら CSS を書いている。 コードが長くなることを気にしない セレクタが長くなることを気にしない セマンティクスの実現の難しさを理解し、妥協する 再利用性より保守性 拡張しやすい設計 最初から最適化しようとしない ゴールは目先のパフォーマンス向上ではなく誰が触っても問題が起きにくい設計 ひと
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[CSS]シンプルな美しいボタンを簡単に実装するだけのスタイルシートの超軽量ライブラリ -beautons
使い勝手のよいさまざまなスタイルのシンプルなボタンを実装するだけのライブラリというか、スタイル集を紹介します。 スタイルシートは1.4kbで、超軽量！ beautons beautons -GitHub 使い方は非常に簡単で、外部スタイルシートを記述し、各ボタンにclassを加えるだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に記述します。 <head> ... <link rel=stylesheet href=beautons.min.css> </head> Step 2: HTML ボタンで使用する要素に「.btn」を加え、個別のスタイルを適用します。 <!-- ベーシックなボタン --> <a href="#" class="btn">Button</a> <!-- 個別のスタイルを適用したボタン --> <a href="#" class="btn bt
[CSS]実装のアイデアが面白い！枠線から背景をずらして配置するスタイルシート
枠線から背景をずらして、ゆる〜い感じにデザインされたスタイルシートを紹介します。 HTMLはbutton要素一つで実装されており、二つの要素をマイナスマージンで強引に重ねるとかの荒技ではないです。 デモページ 実装は、こんな感じです。 HTML button要素一つで実装します。divなど他の要素に変更してもOKです。 色の違いはclass指定で。 <button class="yellow"> View More </button> <button class="blue"> View More </button> CSS 枠線は通常通りbutton要素にスタイルし、ずらした背景は疑似要素の:afterを使います。 ちょっとだけ傾けるのがポイントです。 body {width:70%;text-align:center;margin:40px auto;} button { positi
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
[CSS]さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル
画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button class="button">Button</button> CSS CSS3を使って、ちょっとリッチにスタイルしてみましょう。 .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow
[JS]ベタ塗りのエレメントやページの背景に、繊細で美しいグラデーションを与えるスクリプト -Add Shine
ベタ塗りのページ全体の背景やボタンなどのエレメントなどの背景に、繊細で美しい輝きをもったグラデショーンを与えるjQueryのプラグインを紹介します。 グラデーションの適用 Add Shineの使い方 Add Shineの使い方は、簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script> <script src="js/addShine.js"></script> Step 2: HTML HTMLはスクリプトを意識することなく、普通に実装します。 <body> <button>ボタン</button> </body> Step 3: CSS ページの背景とボタンは、ベタ塗りにします
Sassy Buttons, Awesome CSS3 Buttons With Compass and Sass - Jared Hardy
Want that fancy CSS3 button look with none of the work? Then Sassy Buttons are for you! Easily create great looking, cross-browser compatible buttons with just a few lines of Sass and you’ll be in button heaven in no time. Getting Started Sassy buttons is a compass extension so, naturally, you must have compass installed to use it. To install compass and the sassy buttons extension, simply open yo
[CSS]アイデアが面白い、ボタンに次々とメッセージを表示するスタイルシート -Story Button
[CSS]アイデアが面白い、ボタンに次々とメッセージを表示するスタイルシート -Story Button Story Button こういうボーナス的なトリックって、面白いですよね。 気がついたビジターだけが楽しめたり、ボタンクリックへの背中を一押しするようなメッセージを入れるのもいいかもしれません。 実装は、簡単です。 HTML a要素で実装したボタンに、メッセージの数分のa要素を量産します。 デモでは、10のメッセージが表示されます。 <div class="button"> <a class="first"> Keep hovering me </a> <a class="slidein"> how are you today? </a> <a class="slidein two"> I'm doing well </a> <a class="slidein three"> tha
[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons
最後はオプションで上から、サイズ変更、inputやbuttonなどのフォーム要素、ラッパー付きのボタン Buttonsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル Buttons.zipをButtons- GitHubからダウンロードし、外部ファイルとして記述します。 <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/button.css"> Step 2: HTML あとは、HTMLにボタンのスタイルを使うだけで実装できます。 デモのHTMLは、こんな感じです。 <a href="#" class="button button-rounded button-flat-primary">press me</a> <a href="#" clas
面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator
ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
めしおのアフィリエイト教材レビューブログ
Buttons Builder
CSS3だけで作るボタンデザインいろいろ
Button Maker