コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ
HTMLとCSSを中心にデザインされた、注目を集めたいときにぴったりな最新ボタンエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 CSS3が主要なモダンブラウザに対応したことから、アニメーションを加えたり、スタイリングの幅がグッと広がっています。加速するウェブデザインの進化において、これからますます楽しみな分野で、他と差の出るテクニックと言えるでしょう。 詳細は以下から。 コピペでラクラク、押したくなるボタン用HTMLコードスニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Fancy Button CSSのみでホバーエフェクト用ドロップシャドウとして適用した、今年のデザイントレン
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
VimperatorでEverNoteボタンをステータスバーに移動する方法 - keijirの日記
Firefox4.0になったしいろいろ設定を変更したので久々に書こうかなと。 Vimperatorをつかっていると、ナビゲーションバー（アドレスバーとか検索バー）を表示させたくない。 しかし、そこに配置してあるボタンが使えなくなる↓↓ ってことで、 こんなボタンをステータスバーに移動しちゃいます。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ .vimperatorrcに追記する内容 " move EverNote Button to StatusBar :javascript << EOF (function(){ const icon = "data:image/png;base64," +"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAe0lEQVR42mNgAIL8rWb/ycEMlG
僕が良く使うウェブデザインテクニック的な色々（サンプルPSD有） | バンクーバーのうぇぶ屋
「Photoshopの使い方が分からない！」なんてお話を聞くことがありますが、大半の方は実際にはPhotoshopというツール自体は使うことが出来ていて、分からないと言っているのは表現の仕方だったり、「他のデザイナーのサイトみたいにいい感じにする方法～」、みたいなのを知りたがっている人が多いように感じています。 僕もたまに聞かれることがありますが、デザインするとき意識してることとか、デザインテクニックだとか、そういうのを自分なりに説明したい時って、作り方を一から話すより、やっぱり既に作ってあるPSDのサンプル等を見ながら説明する方が断然早かったりするんですよね（僕が口下手だということもありますが）。サンプルがあって話をするのと、ゼロから作り方をお話するのとでは、教える側の時間も、教わる側の理解力も違ってくるんじゃないかと思うのです。 そこで今回は、僕が良く使うPhotoshopでのデザイン
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう！というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください！ ↑私が10年以上利用している会計ソフト！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
