知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ
TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard
CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう | 9ineBB
CSSを使えば画像の拡大、縮小はwidth、heightを使って行えますが これだと拡大した時の位置が動いたり、周りの要素に影響を与えたりします そんな時scaleを使えばとても簡単に画像を拡大・縮小する事が出来ます CSSのscaleを使ったデモ 画像の上にマウスポインターを乗せると上では拡大、下では縮小します いつもそのまま中央から拡大・縮小されます、分かりやすいように動作をアニメーションにしています コード HTML <div class="big"> <img src="img.jpg" alt=""> </div> <div class="small"> <img src="img.jpg" alt=""> </div> CSS img { margin-top: 68px; -webkit-transition:all 1s; -moz-transition:all 1s; -
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
WebページをRetina対応させるテクニック～実践編
WebページをRetina対応させるテクニック～実践編：jQuery×HTML5×CSS3を真面目に勉強（5）（1/3 ページ） 前回のWebにおけるピクセルの基本的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。 前回（WebページをRetina対応させるテクニック～基礎知識編）はWebにおけるピクセルの基本的な話をしました。今回はそれを踏まえた上で、Retinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介します。 CSS Spriteで複数の解像度に対応 最も原始的な対応方法です。一般的なPCディスプレイと同じ要領で作成した画像をRetinaディスプレイに使用すると、にじんだように表示されてしまいます。デバイス上では同じサイズでも、使われているピクセル数のタテ・ヨコが2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
