ブックマーク / www.nxworld.net (5)

  • 手軽にselect要素の装飾やカスタマイズができるjQueryプラグイン「Select or Die」 - NxWorld

    目新しいプラグインではないのですが、使わせてもらう機会が多いのでご紹介。 「Select or Die」はselect要素にちょっとした機能を付けたり、用意されているスタイルを使うことで手軽に装飾することができるjQueryプラグインです。 ブラウザもIE8から対応しており、jQueryのバージョンも新しいのはもちろん、v1.8でも動作してくれます。 同じようなスクリプトやプラグインは他にもありますが、個人的にselect要素を変更する際にはおすすめのプラグインです。 使用方法 まずは「Select or Die」からプラグインファイルをダウンロードするなどして、jQueryと併せて必要なファイルを読み込みます。(パスなどは自身の環境に合わせて変更してください。) <link rel="stylesheet" href="css/selectordie.css" /> <script sr

    手軽にselect要素の装飾やカスタマイズができるjQueryプラグイン「Select or Die」 - NxWorld
  • CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld

    自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTMLCSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。

    CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
  • WordPress:ログイン画面をオリジナルにカスタマイズする方法 - NxWorld

    WordPressのログイン画面のカスタマイズは過去にもロゴを変更する方法など書いたことがありますが、いろいろ試していたらまた幾つか覚えておきたいことが出てきたりしたので、既出しているものも含めてWordPressのログイン画面をオリジナルにカスタマイズする方法をまとめました。 October 01, 2020 追記 ここで紹介している内容は、WordPress Ver 3.9.0で試したものになります。 内容によっては現バージョンでは非推奨のタグが使用されていたり、フック名が変更されている可能性がありますのでご注意ください。 デフォルトのログイン画面 イメージはWordPressのデフォルトのログイン画面をキャプチャしたもので、これをfunctions.phpを使ってオリジナルのログイン画面にしていきます。 カスタマイズ後のログイン画面 イメージは簡単にですが実際にここでまとめているカス

    WordPress:ログイン画面をオリジナルにカスタマイズする方法 - NxWorld
  • jQuery:チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld

    割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l

    jQuery:チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
  • CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld

    実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ

    CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld
  • 1