♪
by 【CSS】- LSS様が 基本 星峰アレンジ です
いつもありがとうございます
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
♪♪見出し
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ h2
【見出し】の処理してみました
☆ この記事のもくじ ☆
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
オリンピックカラーで吹き出しを作ってみました 16日の記事です
で なんなら おんなじようなCSSを使った
やはりLSS様から
【CSSサンプル】カーソルを載せると動くグラデーションバー - Little Strange Software
のアイデアぶんの
グラデーションカラーバーのコードもご紹介しておきましょう
((#^^#)ー☆
♪
つまりカーソルを乗せると
ジャラジャラと色が流れていく
キラキラと華やかなグラデーションカラーバーです
ワタシのものすごいお気に入り
色の組み合わせによって
ずいぶんキラキラ度が変わる
イメージも変わるので
ぜひぜひ 作ってみたらどうでしょう
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
キラキラの流れていく早さなどは
LSS様のオススメのまま利用しています
詳しい説明もありますので
LSS様のページもぜひ御参照下さい
本質的には
キラキラのグラデーションカラーバー ですが
ワタシ星峰は
いつも見出しh2として利用しています
レスポンシブ対応していないテーマなので
デザインCSSには貼り付けていませんが
だからこそ スマホでも ジャラララ出来ます
ワタシのテーマ【バッチワーク】では
見出しにアタマにボタンがつきますので
こんな感じにボタンごとくるまれます
パソコンでの表示のみですが
2色は あんまりキツイ色だと
床屋さんみたいになっちゃうかも〜
ワタシは こんな組み合わせ
#bcbace と lavender;
ページ毎に HTML編集画面にて
一番上部にCSSを貼り付けて
適宜HTML利用しています
コードはこんなふうに使うと
♪
♪
☆((#^^#)ー☆
<style><!--
.grdbar{
--gc1: #bcbace;--gc2:lavender;
background-image:repeating-linear-gradient(135deg,var(--gc1) 0%,var(--gc1) 3%,var(--gc2) 6%,var(--gc1) 12%);
background-position:3000px 0px;
border-radius:5px;
padding:0px 10px;
transition:3s;
}
.grdbar:hover{background-position:0px 0px;}
--></style>
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
編集見たまま画面での操作なら
♪ 上の ♪ から 下の ♪ までを コピーペーストすると
貼りつけ 移動 しやすいです
あとから ♪を 消しても良いし
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
ちなみに 4月後半からのワタシの記事にあります
グラデーションカラーバー
たくさん使っています
最近の【がっちりマンデー】には金色系
【宝塚】ものはピンク系
【おかえりモネ】には
グラデーションカラーバーは使っていなくて
【カタカタ自己主張する見出し】さんがいます
ほら1番はじめの
第14週のタイトル 教えてくれているでしよう
コレはバッググランドカラー(背景）に
動かないグラデーションカラー
入れてありますこんな感じ
【 border:10px double #a0d8ef;
background: linear-gradient(30deg,yellow, #bbdbf3); 】
またがっちりマンデーのとあるページにだけ
【丸から四角に変形するボックス】と言うの
いわゆる【ハンバーガーリスト】を使いました
どんな感じか見に行ってみて【4月25日】のページです
カテゴリーに【はてなブログ】入っているので
チェックしやすい
デザインCSS使い
ではなくて 書くページに貼り付けるCSSは
簡単で扱いやすいです
色替えするなら
♪ --gc1: #bcbace;
--gc2:lavender; の部分 2か所が 色 です
好きな色 選んでみたら良いかも
ワタシは
普段使いの グリーン系 と【がっちりマンデー】用のゴールド系
そして ラベンダー系、アクア、ピンクと 5色をしっかり作り込みました
本当は 色ごとに
名札【.grdbar】をつくりかえると良いです
オリンピックグラデーションの 【.koeMEMARU】部分も
ずいぶん いろんな名前になっているでしょう・・・
でも 裏ワザ
☆((#^^#)ー☆
<style><!--
.grdbar{
--gc1: #bcbace;--gc2:lavender;
background-image:repeating-linear-gradient(135deg,var(--gc1) 0%,var(--gc1) 3%,var(--gc2) 6%,var(--gc1) 12%);
background-position:3000px 0px;
border-radius:5px;
padding:0px 10px;
transition:3s;
}
.grdbar:hover{background-position:0px 0px;}
#aqua{--gc1: aqua;--gc2:lavender;}
#gold{--gc1: gold;--gc2:#fff462;}
#palegreen{--gc1: palegreen;--gc2:lavender;}
#pink{--gc1: #e8ece9;--gc2:pink;}
--></style>
☆上がCSS処理 ☆ 下がHTML編集部分☆
# をつけて 段取り
こんな感じ #aqua{--gc1: aqua;--gc2:lavender;}
それを HTML編集の中に
id="aqua" を 名札として追加
それで 色分けし放題？？
<p> ♪</p>
<div id="aqua" class="grdbar"><h2>☆aqua☆</h2>
</div>
<p>♪ </p>
<div id="palegreen" class="grdbar"><h2>☆palegreen☆</h2>
</div>
<p>♪</p>
<div id="pink" class="grdbar"><h2>☆pink☆</h2>
</div>
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
コチラの 色の辞典 から
好きな色を 選んで カスタマイズしてみて下さい
明るい色合いでも 派手にするのも よいし
文字を書き込む都合 黒文字が読み取れるような
濃くない色か
もしくは 編集見たまま 画面で
文字色変えると ラクですよ
<span style="color: navy;">もじ</span> 文字 紺色 とか
<span style="color: white;">もじ</span> 文字 白色 とか
今回のは CSS処理 ですが
ブログ入力画面 HTML編集画面だけでも 作れるので
ぜひ 挑戦してみては ？
☆((#^^#)ー☆b ☆((#^^#)ー☆
☆((#^^#)ー☆b ☆((#^^#)ー☆
☆((#^^#)ー☆b ☆((#^^#)ー☆
☆星峰☆ ( atarimaesore )
☆((#^^#)ー☆
あたりまえ？それさぁ。。。 のブログ
読んでいただき ありがとうございました。
☆((#^^#)ー☆この記事のもくじ☆((#^^#)ー☆
☆ 最後までありがとうございます☆((#^^#)ー☆
