[CSS]classを加えるだけで素敵なボタンが実装できるスタイルシート -Buttonize
シンプルなボタンをはじめ、カラフルなボタン、アイコンを使ったボタン、背景を使ったボタンなどがclass名を加えるだけで簡単に実装できるスタイルシートを紹介します。 CSS3 Buttonize Framework - Light-Weight, Flexable Instant Button Framework [ad#ad-2] 先日紹介した「CSS3 GitHub Buttons」もシンプルで使い勝手がよさそうでしたが、今回紹介する「Buttonize」もシンプルながらデザインも豊富に揃っています。 参考：シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート Buttonizeの実装 実装は、非常に簡単です。 Step 1 ダウンロードしたスタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css"
Border Image CSS Code Generator - Easy Image Border - Border Image
Create now your custom border image CSS Border image generator allows programmers and developers to draw an image on the borders of an element. It provides room for efficient and perfect design. It is very complex to do it by yourself, you need this generator to assist you and it is a bit frustrating to properly take by hand. Though it is tricky, it allows users to create flexible borders with a s
[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px
[CSS]グラデーションのアニメーションが美しいフォームを実装するスタイルシート
Glowform デモページ [ad#ad-2] CSS3のグラデーションとアニメーションを使用しているため、対応ブラウザはWebkit系（Chrome, Safari）、Firefox4となります。 テキストフィールドにフォーカスすると、グラデーションはアニメーションで美しく変化します。 [ad#ad-2] HTML HTMLは、下記のようになっています。 スタイルシートやスクリプトはサイトの「Download」からダウンロードできるので、そちらでご確認ください。 <div class="rain"> <div class="border start"> <form> <label for="email">Email</label> <input name="email" type="text" placeholder="Email"/> <label for="pass">Passwo
コピペで使えるCSS3ボタン６つのレシピ:phpspot開発日誌
6 Useful CSS Button Recipes You Can Copy & Paste | Design Shack コピペで使えるCSS3ボタン６つのレシピ。 次のようなボタンのCSSとHTMLが掲載されています。 一昔前はオーサリングツール抜きに出来なかったこともCSSで出来るように。CSS4の時代にはどうなっているのだろうと少し楽しみです。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 CSSでクールなボタンを作るまとめ CSSでボタンを綺麗にスタイルするサンプル集
CSSPrefixer
keep your styles clean You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you! See it in action: .my-class, #my-id { border-radius: 1em; transition: all 1s ease; box-shadow: #123456 0 0 10px; } Installation easy_install cssutils (or pip install cssutils if you have pip) Usage: From console cssprefixer my1.css my2.css --minify > result.css From Python import cssprefix
CSS3Generator by @RandyJensen
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
CSS3 関連情報・総まとめ
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～
CSS3 Button Generator – This site was closed.
LR icons https://en.lricons.com/ CSS Button Creator https://cssbuttoncreator.com/ Button Maker https://css-tricks.com/examples/ButtonMaker/ CSS Button Generator for your pleasure http://www.dextronet.com/css-buttons-generator/ 2.5dBUTTON http://noht.co.jp/2_5dbutton CSS3 Typeset Style Generator http://www.sciweavers.org/i2style Button X https://www.bestcssbuttongenerator.com/ CSS button generator
CSS3 Selectors Test, CSS3 .info
After starting the test-suite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests. Because it is technically not possib
kzms2 – html,css,javascript » セレクタについて(2/4)その1 – css3を触ってみて思った4個の利点
css3を触ってみて思った利点の2個目 今回の記事は、前回の記事（レイアウトについて(1/4) – css3を触ってみて思った4個の利点）の続きです。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 というわけでセレクタについてですね。 css2だと、HTML側で細かな指定をしないと、見た目に差をつけにくかったのですが、css3のおかげでHTMLをよりシンプルにして、細かな指定をすることが可能になります。 詳細は続きから。 そもそもセレクタって？ セレクタっていうのは一言で言えば、「cssを効かせたい場所の指定」のことです。 /*hogeというidの部分を*/ #hoge{ /*カラーを赤色にする*/ color:#f00; } /*hogeというidの中にある、classのafe全ての部分を*/ #hoge .afe{ /*カラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ajax Style Loading Animation in CSS3 ( no Images ) | Nikesh Hayaran's Blog
IDEA * IDEA
角丸やシャドウ作るジェネレータ。CSS3 Generator
Web Design & Development
NameBright - Coming Soon
Ultimate CSS Gradient Generator from ColorZilla
Welcome - Csscorners
[CSS]CSS3の新機能を盛り込んだナビゲーション集