昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 | 福岡 ホームページ制作のブレンドデザイン
2014年03月07日 日々思うこと 昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 Tweet ホームページ制作に関する技術も年々進んでいて、昔は画像を使わないと実現できなかったものも、今は使わずにできるようになったものが色々とあります。CSSという文字や背景の色、レイアウトなどを指示するファイルをホームページ制作に使用しますが、追加機能が加えられたCSS3を使うことで画像の代わりに再現できるようになりました。 画像を使わなくて済むと、画像よりもファイルサイズが小さくて済むので、ホームページの読み込みが速くなったり、編集がしやすくなったり、画像を作る手間が省けたりと利点が色々あります。具体的に何が変わったのかをご紹介しておきます。 1.グラデーション 昔は背景にグラデーションを使いたい、といった時はグラデーションの画像を用意していました。今はCSS3でグラデーション
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
CSS3 で二重丸を作る｜TechRacho by BPS株式会社
仕事で必要になったので作ってみました。実装方法は意外と簡単だったのでまとめてみます。これを作るにあたって下記サイトの記事が参考になったので張らせていただきます。[ CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 今回用いたのは参考にしたサイトで紹介されていた第3 の方法、box-shadow を使用した方法です。参考サイトでは二重ボーダーを作っていますが、要はこれを角丸指定で円にしつつ真ん中のボーダーを背景と同色で作れば実現できるってわけですね。 margin: auto; background-color: #00b1f4; border: solid 6px #fff; width: 70px; height: 70px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
