CSS：ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10 - NxWorld自分用に一覧化したものがほしくて作ったのでシェアします。 ボタンのホバーエフェクトとして見かける機会も多くなった、ホバーしたら背景がスライドしたり領域を覆うアニメーションのサンプルです。 アニメーションによってはホバー時の見栄えを維持するのではなく、ホバー時に一時的に見えるようなタイプもあります。 共通のHTML・CSS ここで紹介しているサンプルはいずれも下記のようなシンプルなHTMLをベースに使用しています。
CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5 - NxWorld
特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。 カラーやサイズ指定をはじめ、中には20種類以上のデザインが用意されているものもあります。 そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできます。 Buttons 指定時の共通接頭辞は「button」 カラーは6色、サイズは6サイズ分用意されており、3D・ロングシャドウ・グローといったデザインタイプや角丸指定もできるようになっているボタンライブラリで、通常の見栄えだけでなくホバー時やクリック時の見栄えもカバーされています。 基本的には必要なCSSを読んで、適用したい要素に対して特定のclassを付与するだけですが、ドロップダウン使用時はjQue
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
いざというときに便利そうな、ちょっと変わった珍しいアイコンセット - NxWorld
汎用性が高いUIアイコンなどと比べると使う場面は少ないものの、いざ使いたいときに便利そうなものやあまり見かけないタイプだと個人的に思ったアイコンセットのまとめで、過去に紹介してきたものをひとまとめにしました。 既に公開・配布終了しているものも一部あるのですが、ファイルダウンロード自体はできなくともデザイン的にはそのまま参考になることもあるので、そういったものはキャプチャが小さめではありますがリンク設定のみ解除する形で紹介します。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 リンクが未設定で配布形式も記載されていないものは公開・配布終了しているものです。
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
アイコンフォントについての備忘録 - NxWorld
デザインとの相性や使いたいものが同セットになっているかなど少しでも選択肢は多い方が良いので、ダウンロードできるサイトを見つけてはメモしていたのですが、結構な数になってきたのでそれらの整理も兼ねたアイコンフォントについての備忘録です。 有償だけど高品質で種類も豊富みたいなセットもあったりするんですが、今回は基本的にフリーで使用できるもので、国内外合わせると全部で34サイトまとめています。 また、アイコンフォントの使用方法についても簡単にですが紹介するので、まだ使ったことがないけど実装したいという場合はそちらを参考にしてみてください。 アイコンフォントについて レスポンシブwebデザインが広まったなどをきっかけに、多くのサイトやブログでも取り入れられているのを見かけるようになったアイコンフォント。 実際に使用したことがある人ならわかると思いますが、本当に手軽に実装できて且つメリットもいろいろと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
