MENU
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
あらゆるモノにHackする、探究者の読み物。
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
  1. ホーム
  2. ワードプレス
  3. CSS
  4. グラデーションのかっこいい背景を簡単に実装するCSS 49連発 – HUE –

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

2019 8/02
CSS
2019-04-22 2019-08-02
かっこいい背景を簡単に実装するCSS 49連発 - HUE -
目次

シックなデザインのグラデーション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

リンク
CSS
CSS 背景
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
人気記事
  • IQテストいくつか受けてみました
    ネット上で信憑性がありそうなIQテスト、5種類まとめて受けた結果…
  • hayate
    メルカリの商品を世界最速で購入するためだけのアラートツール
  • 【Python】BeautifulSoupの使い方・基本メソッド一覧|スクレイピング
  • Pythonファイルのexe化
    【悲報】PyInstallerさん、300MBのexeファイルを吐き出すようになる
  • Amazon Echo アレクサのコマンドまとめ
    AmazonEchoの使い方とできる事、アレクサへの指示コマンド一覧
最近の投稿
  • PyQt5 QListWidget の item削除でtextBoxのフォーカスが奪われる2023-03-05
  • WordPressからのメールが届かない時の調査と解決法2023-02-27
  • 保護中: メルカリアラートツール「疾風」v22022-12-01
  • 保護中: メルカリアラートツール【疾風】カスタマイズオプション一覧2021-03-22
  • 保護中: メルカリアラートツール【疾風】インストール手順2021-03-22
目次
目次