目次
シックなデザインのグラデーションCSS -HUE –
https://github.com/evankarageorgos/hue
CSSのダウンロードはgitから。
HUEの使い方
ダウンロードしたファイルの中身のhue.cssをサーバーにアップロードして<head>内でインクルード。
<link rel="stylesheet" href="hue.css">
pathは適宜変更してください。
CSSの適用はカンタンでクラス名を振るのみ。
<div class="theBridge"></div>
クラスを振られた要素に対して、背景が適用されます。
以下に紹介するクラス名49種が使えます。
ちなみにこのサイトの背景は” flash “を採用中！
ちょっと補足で情報を入れると、縦方向グラデーションのCSSを、サイト全体の背景などにそのまま設定してしまうと、要素の縦の高さがあまりにも大きすぎるためグラデーションがかなーーーーり間延びします。
そんな時は以下のbackgroundプロパディで調整すると画面のビュー縦幅一杯を使ったグラデーションを維持しつつ背景を固着させる事が可能です。
.keni-main_wrap {
background-attachment: fixed;
}
クラス名はこのサイトの実際に設定しているクラス。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
リンク
コメント