CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
» inputボタン(submit)をCSS又は背景で変える時のコードまとめ。｜今プラスブログ
フォームを作るときに必ず必要になってくるのがsubmitボタン。 最後に送信と確認とかになるあれです、あれ。 何もいじらずのデフォルトがこちら。 しかしこれだと味気ないですよね。そんな時に変える方法としてはCSS使うか、HTMLのタグ自体を変える方法があります。 備忘録としてもinputボタンを変えるときはどんな方法があるかを振り返ってみました。 CSSで変える場合 まずは一番簡単なCSSで変える場合。submitに対してCSSを適用させられればデフォルトボタンが簡単に違うデザインにすることができます。 イメージ例： HTML側 CSS側 .sbt_1{ width:100%; height:40px; background-color:#e83f22; border:none; color:#fff; font-size:13px; font-weight:700; text-align
印刷用CSSを使わずに特定の要素のみを印刷する｜クリエイターブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
こんにちは。 第20回目ウェブラボ技術メモです。 今回は特定の要素のみを印刷するプラグイン「printThis」を紹介したいと思います。 普段なら特定の要素のみを印刷する場合には、その印刷箇所に応じたCSSを作らなければいけません。 しかも、印刷したい箇所が同一ページ内に複数ある場合にはかなり面倒な処理が必要となります。 ですが、このプラグインを使えば、もうそんな必要はありません!！ では早速実装してみましょう。 ボタンを押すとそれに応じた写真を印刷するDEMOを作ってみたいと思います。 ・GitHub https://github.com/jasonday/printThis まずはJquery本体と一緒にprintThis.jsを読み込ませます。 そして以下の様に印刷ボタンと印刷箇所を設定します。 <script src="js/printThis.js"></script> <scr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
