CSS3でMacのキーボードっぽく見えるスタイルを設定してみた
白っぽいキーボードの場合。 <span class="keyboard">Sample</span> KEYSample 黒バージョンの場合。 <span class="keyboard-dark">Sample</span> KEYSample 以下を貼り付け。 /* keyboard --------------------------------------------------- */ .keyboard { height: 41px; min-width: 24px; padding: 0 10px; margin: 5px 10px; background: #EFF0F2; border-radius: 4px; border-top: 1px solid #F5F5F5; box-shadow: 0 0 25px #E8E8E8 inset, 0 1px 0 #C3C3C
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーション ホバーすると、上からパタッとなります。 .b04_3d_tick { perspective: 500px; perspective-origin: center top; } .b04_3d_tick div { position: absolute; text-align: center; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; border: #000000 solid 1px; } .b04_
思わず押してみたくなる、いとも簡単なボタンの作り方 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
思わず押してみたくなるボタンってありますよね。細かい部分ですが、こういったボタンのデザインにもこだわっていきたいですね。そんな訳で、フォトショップで非常に簡単に思わず押してみたくなるボタンを作ってみましたので、その方法をメモしておきます。 思わず押してみたくなる、ボタンの作り方 角丸長方形ツールでボタンの大きさ・形を決めます レイヤーにドロップシャドウで効果をつけます まず、基準となる色を決めておきましょう。ここでは、青にしています。次にレイヤー様々な効果をつけていきます。まずはドロップシャドウから… 続いて、光彩（内側）で効果をつけます 続いて、グラデーションオーバーレイで効果をつけます 続いて、境界線で効果をつけます 色はボタンと同じような色にします。最後の仕上げ ポイントは２でしょうか！既に取っている選択範囲に、Altキーを押しながら新たに選択範囲を取ると、その部分の選択範囲が削除さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ボタン作りの手間を削減！CSSボタンデザインジェネレーターまとめ
新着記事
