あたりまえ?それさあ。。。

☆★☆あたりまえの毎日にテレビからの刺激を ☆楽天市場はながーいつきあい☆★☆

                           

【はてなブログ】グラデーションカラーバーのコードはこんな感じ

 ♪

♪ オリンピック☆金・銀・銅のイメージの吹き出し H2

     by 【CSS】- LSS様が 基本 星峰アレンジ です
    いつもありがとうございます

 

.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ 

♪♪見出し  

 

.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸    h2
【見出し】の処理してみました

 

☆ この記事のもくじ 

 にほんブログ村 テレビブログ テレビ感想へ
にほんブログ村 にほんブログ村 テレビブログ テレビ感想へ

.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸   

 

オリンピックカラーで吹き出しを作ってみました 16日の記事です

 

atarimaesore.hatenadiary.jp

 

 で なんなら おんなじようなCSSを使った 
やはりLSS様から

【CSSサンプル】カーソルを載せると動くグラデーションバー - Little Strange Software

のアイデアぶんの
グラデーションカラーバーのコードもご紹介しておきましょう

f:id:atarimaesore:20210817234426j:plain


 

 ((#^^#)ー☆

  ♪

 ♪ グラデーションバーって

 

つまりカーソルを乗せると

ジャラジャラと色が流れていく

キラキラと華やかなグラデーションカラーバーです

ワタシのものすごいお気に入り

 

 

色の組み合わせによって 

ずいぶんキラキラ度が変わる

イメージも変わるので

ぜひぜひ 作ってみたらどうでしょう

 

.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸

 


キラキラの流れていく早さなどは

LSS様のオススメのまま利用しています

詳しい説明もありますので

LSS様のページもぜひ御参照下さい

little-strange.hatenablog.com

 

little-strange.hatenablog.com

 

本質的には

キラキラのグラデーションカラーバー ですが

ワタシ星峰は

いつも見出しh2として利用しています

 

レスポンシブ対応していないテーマなので

デザインCSSには貼り付けていませんが

だからこそ スマホでも ジャラララ出来ます

 

ワタシのテーマ【バッチワーク】では

 見出しにアタマにボタンがつきますので

こんな感じにボタンごとくるまれます 

  パソコンでの表示のみですが

 

2色は あんまりキツイ色だと

床屋さんみたいになっちゃうかも〜

ワタシは こんな組み合わせ

#bcbace と lavender;

 

ページ毎に HTML編集画面にて

 一番上部にCSSを貼り付けて

適宜HTML利用しています

コードはこんなふうに使うと

 ♪

 ♪ h2がくるまれる感じ

 ♪

  

 ☆((#^^#)ー☆ 

♪ <!--<p>/* グラテーションバー*/</p>--></p>
<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>

☆上がCSS処理 ☆ 下がHTML編集部分☆


<p> ♪</p>
<div class="grdbar"><h2>♪ h2がくるまれる感じ</h2></div>
<p> ♪</p>

  

.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸

編集見たまま画面での操作なら

♪ 上の ♪ から 下の ♪ までを コピーペーストすると

  貼りつけ  移動 しやすいです

  あとから ♪を 消しても良いし

.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸

 

ちなみに 4月後半からのワタシの記事にあります


グラデーションカラーバー
たくさん使っています

最近の【がっちりマンデー】には金色系

【宝塚】ものはピンク系 

徹子の部屋吉行和子さん】はグリーン系です

【おかえりモネ】には

グラデーションカラーバーは使っていなくて

【カタカタ自己主張する見出し】さんがいます

 ほら1番はじめの

第14週のタイトル 教えてくれているでしよう  

コレはバッググランドカラー(背景)に

動かないグラデーションカラー

入れてありますこんな感じ
【 border:10px double #a0d8ef;
background: linear-gradient(30deg,yellow, #bbdbf3); 】

 

またがっちりマンデーのとあるページにだけ

【丸から四角に変形するボックス】と言うの

いわゆる【ハンバーガーリスト】を使いました  

どんな感じか見に行ってみて【4月25日】のページです
 カテゴリーに【はてなブログ】入っているので
  チェックしやすい

 

デザインCSS使い

ではなくて 書くページに貼り付けるCSS

簡単で扱いやすいです

 

 

♪ ☆((#^^#)ー☆  ワタシの基本は ラベンダー色

 

色替えするなら

♪ --gc1: #bcbace;
--gc2:lavender; の部分 2か所が 色 です

 好きな色 選んでみたら良いかも 

 ワタシは

普段使いの グリーン系 と【がっちりマンデー】用のゴールド系

そして ラベンダー系、アクア、ピンクと 5色をしっかり作り込みました

f:id:atarimaesore:20210817234415j:plain


    本当は 色ごとに

名札【.grdbar】をつくりかえると良いです

  オリンピックグラデーションの 【.koeMEMARU】部分も

  ずいぶん いろんな名前になっているでしょう・・・

 でも 裏ワザ 

 ☆((#^^#)ー☆ 

♪ <p><!--/* グラテーションバー*/--></p>
<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>

<p>♪ </p>
<div class="grdbar">
<h2>☆☆はてなブログ 星峰の利用した色は?☆</h2>
</div>

  

.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸

 

 

 コチラの 色の辞典 から

好きな色を 選んで カスタマイズしてみて下さい
明るい色合いでも 派手にするのも よいし

 

文字を書き込む都合 黒文字が読み取れるような

   濃くない色か

もしくは 編集見たまま 画面で 

   文字色変えると ラクですよ

<span style="color: navy;">もじ</span> 文字 紺色 とか

<span style="color: white;">もじ</span> 文字 白色 とか

 

 

 

www.colordic.org

 

 

 

今回のは CSS処理 ですが
ブログ入力画面 HTML編集画面だけでも 作れるので
ぜひ 挑戦してみては ?

 

【スカパー!】加入月は視聴料0円!加入料も不要!  

 

 ☆((#^^#)ー☆b ☆((#^^#)ー☆

【スカパー!】基本プランなら50ch見放題でお得!

☆((#^^#)ー☆b ☆((#^^#)ー☆

☆((#^^#)ー☆b ☆((#^^#)ー☆

 

☆星峰☆ ( atarimaesore ) 

☆((#^^#)ー☆

あたりまえ?それさぁ。。。 のブログ

読んでいただき  ありがとうございました。

 

 

 

☆((#^^#)ー☆この記事のもくじ☆((#^^#)ー☆

 

☆ 最後までありがとうございます☆((#^^#)ー☆ 
 

全国630店舗以上!もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】