背景画像に変色するグラデーション背景を重ね合わせるサンプル
今回のTipsでは、Webページの背景(background)にアニメーションしながら色が変化していく「グラデーション背景」とフルサイズの「背景画像」を重ね合わせて表示するサンプルを作ってみたいと思います。CSSのみでできて、とってもシンプルです。 まずは完成イメージをご覧ください！ See the Pen Gradient animation background with full size image by digistate (@digistate) on CodePen. CSS3では、1つのbackgroundプロパティのみで、複数の背景要素(画像,カラー)の重ね合わせができるのですが、今回のサンプルではアニメーション(変色)するグラデーション背景と、静止画像の背景を重ね合わせるため、それぞれの背景は異なる要素に指定しています。 具体的には、以下の背景レイヤー構成です。 背景レ
すぐに使えるSCSS入門 | DevelopersIO
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。 Sass/Compass知ってるいるし がっつり使ってるよという方どれぐらいいますか？ 本日のお題目 そんな方にはちょっと物足りないかもしれませんが、 今回は大きく分けてこの5つについて紹介します。 SCSS/Compassを利用するための環境 Sass・SCSS 設定ファイル Compass SCSS/Compassの応用 1，Sass/SCSSって？ 1.1，Sassとは 簡単に言うと、 CSS3になってさらに覚えることの増えた CSSコーディングの手間を省くいてCSSを楽しくするツール。 Sass makes CSS fun again. SassはCSSをもう一度楽しくするCSSにコンパイルするためのメタ言語です。 1.2，SassとSCSSって？ ちなみにSassには2つの構文があり
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
今さら聞けない？！Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ
こんにちは。ウェブサービス本部の hamashun です。 今回は CSS を便利にする Sass （さっす）という技術を、ディレクター向けにご紹介します。 最初に結論：Sassとは？ CSS の、コーディング効率やソースコードの保守性を向上させる技術が、Sass です。 まずは普通のCSSについて Sass のことを知るには、まずは CSS のことを知っておく必要があります。CSSを自分で書ける or 読める人は、この項は飛ばしてしまってかまいません。 p { color: red; } このソースコードは、ごくシンプルな CSS です。このソースコードの各部分を解説すると、次のようになります。 従って、上記のソースコードを日本語にすると、「p要素（pタグ）内の、文字色を、赤にする」となります。 こうして見てみると、CSS の構文は、とてもシンプルであることが分かります。 CSS は、こ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
