クールなグラデーションのカラーコードやCSSコードを確認できるサイトまとめ - NxWorld
近年見かける機会が多くなった、クールなグラデーションカラーを知りたいときに便利なサイトのまとめです。 いずれもあらかじめグラデーションカラーの一覧が用意されているので、それらから選んでカラーコードやCSSで実装するためのコードを確認することができ、さらにサイトによってはそれを自分好みに調整してからコード出力したり、デザインで使える素材でダウンロードできるようにもなっています。 uiGradients ページ左右に配置されている矢印でカラーを切り替えていく他、もっと一覧化された状態で見たい場合は左上にある「Show all gradients」から確認でき、キーカラーを選んでフィルター表示にすることもできます。 カラーコードは画面中央上部に記載、その他のオプションについては画面右上にそれぞれ配置されており、角度変更（クリックの度に角度が変わります）・CSSコードの出力・JPG形式でのダウンロ
高品質で大容量なフリーのアイコンセット 20 - NxWorld
見つけてはメモしていたものがちょうど切りよい数だったので、自分用のまとめ兼ねてシェアします。 いずれも高品質なだけでなく沢山のアイコンが詰まっているもので、中には3000個以上のアイコンがセットになっているのもあります。 また、基本的にフリーで個人・商用問わず利用可能です。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。
デザイン制作時に便利なグラデーション素材 40＋ - NxWorld
これだけで事足りそうと思うぐらいな大容量セット、高級感あるデザインやとにかく目立たせたいという時に使えそうなゴールド・シルバー系セット、空・海・夕日といった自然の中にある美しい配色をモチーフにしたもの、淡いパステルカラーを集めたセットなど、デザイン制作時に使えるグラデーション素材のまとめで全42セットです。 いずれもPhotoshopで使用するgrd形式となっています。 紹介している中には作成されたのがちょっと古いものもあるので、最近よく使われる（見かける）ようなグラデーションとは少し違った感じなのも多いですが、以下にあるように様々なカラーのグラデーションがあるので、普段からグラデーションをよく利用するという人はこういったものを組み合わせてオリジナルのセットを作っておいたり、こういったグラデーション素材があることを頭に入れておくと使いたい時にすぐ利用できますね。 紹介している素材を使用する
CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年気になったハイクオリティなデザインUIキット − 2016 - NxWorld
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld