Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css

文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。

コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。

サイトのキャプチャ

HUE.css
HUE.css -GitHub

HUE.cssを使うと、簡単に美しい背景を作りだすことができます。
Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。

HUEの美しい背景を使ったサンプル

画像: Free Promo Backdrops and Gradients

HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。
元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。

HUE.cssの使い方

使い方は、簡単です。
「hue.css」をダウンロードし、外部ファイルとして記述します。

あとは、背景を適用したい要素にclassを与えるだけです。

HUE.cssの美しい背景

HUE.cssでどんな背景が実装できるか見てみましょう。

.theBridge

.deepFocus

.blueHour

.darkAmber

.prelude

.saltAndPepper

.cashemere

.wolverine

.fullMoon

.flamingo

.earlyMorning

.nearLight

.mirror

.dementor

.underTheEarth

.backToAlaska

.flash

.unicorn

.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

.cosmos

.ice

.comet

sponsors

top of page

©2018 coliss