グラデーションのかっこいい背景を簡単に実装するCSS 49連発 – HUE –



シックなデザインのグラデーションCSS -HUE -

https://github.com/evankarageorgos/hue

CSSのダウンロードはgitから。

HUEの使い方

ダウンロードしたファイルの中身のhue.cssをサーバーにアップロードして<head>内でインクルード。

pathは適宜変更してください。

CSSの適用はカンタンでクラス名を振るのみ。

クラスを振られた要素に対して、背景が適用されます。

以下に紹介するクラス名49種が使えます。

ちなみにこのサイトの背景は" flash "を採用中!

ちょっと補足で情報を入れると、縦方向グラデーションのCSSを、サイト全体の背景などにそのまま設定してしまうと、要素の縦の高さがあまりにも大きすぎるためグラデーションがかなーーーーり間延びします。

そんな時は以下のbackgroundプロパディで調整すると画面のビュー縦幅一杯を使ったグラデーションを維持しつつ背景を固着させる事が可能です。

クラス名はこのサイトの実際に設定しているクラス。background-attachmentプロパティは、一行でパララックス(視差効果)などにも応用できるプロパティで非常に便利です。

HUEのかっこいい背景を一挙紹介

タイトル=クラス名です。

theBridge

deepFocus

blueHour

darkAmber

prelude

saltAndPepper

cashemere

wolverine

fullMoon

flamingo

earlyMorning

nearLight

mirror

dementor

underTheEarth

backToAlaska

flash

tribute

twinPeaks

youngForest

air

tranquility

silverLake

amnesia

silverStone

greyConnection

theCapsule

hiddenGems

nightSmoothie

goldenLeaf

floatingDream

escape

icarus

flashlight

milkyWay

circular

autumn

northKingdom

jupiter

whiteNoise

silverSurfer

blackSands

greyHound

returnToAir

graphite

unicorn

cosmos

ice

comet