これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
[CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ
デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2
見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ | コリス
h1やh2などの見出し要素をシンプルなHTMLで実装し、美しいスタイルを適用するスタイルシートを紹介します。 Cool headings with pseudo-elements [ad#ad-2] デモ 実装 デモ デモは擬似要素だけでなく、background-clipなどのCSS3を使用しているため、Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+ でご覧ください。 デモページ 実装 HTML HTMLは非常にシンプルで、h1要素にclassを与えるだけです。 <h1 class="headline1">I took lessons</h1> ※デモは4つあり、classを変更するだけです。 CSS: 各デモ共通のベース body要素をメインのラッパーとして使用します。 h1要素にはfont-familyとsizeのみ共通で指定
[CSS]特定のエリアだけをアニメーションで一瞬目立たせるテクニック
編集可能なページなどで変更した箇所を分かりやすくするために、ターゲットされるとそのエリアだけをフェードのアニメーションで一瞬目立たせるスタイルシートのテクニックを紹介します。 Yellow Fade Technique with CSS Animations [ad#ad-2] このテクニックが広まったのは「Basecamp」のイエローフェードが有名で、JavaScriptを使用して特定のエリアをイエローにハイライトして目立たせます。 Basecampの紹介記事： Web Interface Design Tip: The Yellow Fade Technique 同様のテクニックをCSS3で実装する方法を紹介します。 ターゲットされるとそのエリアの背景色が黒から、透明に変更します。 /** * Quick fade on target to attract user attention
[CSS]さりげないアクセントとして面白い、キーフレームを使ったCSS3アニメーション
IE7でのキャプチャ（アニメーションは静止状態で表示） [ad#ad-2] キーフレームを使ったCSS3アニメーションのスタイルシートは、下記のようになります。 CSS 1枚目の葉っぱのスタイルシート。 ※ヘッダの葉っぱは同様に4枚の葉っぱをコントロールします。 .deco { position: absolute; } .leaf-1 { left: 670px; -webkit-animation: leaf1 2s ease infinite alternate 0; top: -32px; } @-webkit-keyframes leaf1 { from { } to { -webkit-transform: rotate(11deg) translateX(-6px); } } ※デモページでは「-moz-」も使用しています。
「少しの手間で大きく変わる、細部にこだわったWebデザイン」をできるだけCSSでやってみた - 今日もスミマセン。
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス を読んで、「CSSだけである程度できそうだな」と思ったのでやってみた。 デモページ とりあえず完成品が見たい方は、ここ まず基本となるHTMLを用意する とりあえず、角丸四角形でボタンらしきものを作る。 <html> <head> <style type="text/css"> .buttonBase { position: relative; width: 300px; background-color: #3699D0; text-align: center; border-radius: 10px; cursor: pointer; } .caption { color: #02659C; font-family: impact; font-size: 40pt; font-weig
[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ
5 Cool CSS Hover Effects You Can Copy and Paste
Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy. 2 Million+ Digital Assets, With Unlimited Downloads Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elem
手軽にデザインを変更できるCSS3ボタンを作る為のフレームワーク・CSS3 Buttonize Framework
軽量なフレームワークだよ！とのことです。デザインもシンプルで個人的に好みでした。何と比べて軽量なのかな？ サンプル適当ですみませんけどサンプルです .button { font: 14px/36px "Droid Sans", sans-serif; height: 36px; border: 2px solid #333; padding: 5px 14px; margin: 0 6px; text-shadow: 1px 1px 1px #FFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 1px 1px 6px rgba(255, 255, 255, 0.3); -webkit-box-shadow: 1px 1px 6px rgba(255, 2
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
CSS3でツールチップの吹き出しを表現する
twitter facebook hatena google pocket ちょっと気が向いたので、CSSでツールチップの吹き出しっぽいあれを表現してみました。 上記のスクリーンショットを見ていただくとわかるかと思いますが、IE8まではいまいちでした。 IE9はどうなんでしょうかね。 参照：Pure css tooltip box with arrow (T,R,B,L) - Some code from cahnory - Forrst sponsors HTML 下記のようなテキストがあるとします。 普通のHTMLです。 <span class="ui-tooltip">tooltip box</span> CSS CSSをがっつり書いていきます。 .ui-tooltip { color:#ffffff; font-size:12px; font-family:arial; paddi
[CSS]正方形・ダイアモンド・台形・三角形・円・ハートなどを作り出すスタイルシートのまとめ
HTML <div id="square"></div> CSS #square { width: 100px; height: 100px; background: blue; } Diamond: ダイアモンド HTML <div id="diamond"></div> CSS #diamond { width: 80px; height: 80px; background: blue; margin: 3px 0 0 30px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin:
[CSS]「:before」「:after」でタブのディテールを強化するスタイルシート
Flared Borders with CSS デモページ ※上：ディテールを強化したタブ、下：旧式のタブ [ad#ad-2] 対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> CSS：タブのベース シンプルな角丸
[CSS]IE6でもそれなりに、CSS3で実装するツールチップのチュートリアル
吹き出し風デザインの実装イメージ .tooltip { position: relative; background: #eaeaea; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none; } .tooltip span { visibility: hidden; position: absolute; bottom: 30px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #ccc; opacity: .9; background-color: #ddd; background-image: -webkit-linear-gr
[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート
あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS：シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0
面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」:phpspot開発日誌
CSSPrefixer 面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」 プロパティごとに -moz とか -webkit を全部設定するのめんどくさい、という場合にサブミットすれば自動で付いた結果が出力されるというシンプルだけど便利なツールです。 サブミットすれば次のように -moz とか -o とか -webkit とか全部付けて出力してくれます。 これはいい。 JavaScript とかで、１個指定しとけばJS読み込むだけで全部自動やってくれる的なライブラリがあったらもっと便利な気がしますね。 jQueryとかで比較的簡単に実現できそう。 関連エントリ 便利なCSS3ツール6つ＋α IEでもCSS3を使うためのツールやリソース集 HTML5/CSS3に関する便利ツールやチーとシート、リソース２５
本の虫: Chromeがいつの間にか縦書きを実装し始めていた
注意：ここに示したCSSは、実用的な目的には、まだ使ってはならない。何故ならば、-webkitベンダープレフィクスを使っているからである。。これは、webkitの実装がまだ完全ではないことを意味する。 Chrome（というよりもwebkit）がいつの間にか、縦書きを実装し始めていた。つまり、CSS3のwriting-modeプロパティのvertical-rlとvertical-lrをサポートしているのである。まだ、ベンダープレフィクスが必要なので、完全な実装ではないのかもしれないが、少なくとも、ある程度は動くようだ。 例えば、以下の様なマークアップが、 <p style=" writing-mode : vertical-rl ; -webkit-writing-mode : vertical-rl ; font-family : '@ＭＳ 明朝' ; font-size : 16pt ;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stroll.js - CSS3 Scroll Effects
面倒なCSS3のベンダープレフィックスを自動で付けてくれる -prefixMyCSS
http://www.css-lecture.com/log/css3/css3-gradient.html