今日も一緒に♪

タータンチェック柄を使う⁈

2021/10/23
web学習 8
紅葉 写真 YouTube Web学習
CSSでタータンチェック模様まで表示できちゃうの♪凄いよね~❣
タータンチェックで連想するのがベイシティローラーズとチェッカーズかな?
どっちも昭和の時代のヒット曲だけどね~♬

タータンチェックで連想する曲

Saturday Night - Bay City Rollers
ねこイラスト

イラストライン
ジュリアに傷心(ハートブレイク) チェッカーズ 1984
ねこイラスト


今回は見出しとBOX同じのを使ってみたよ♪ 使ってみようかなぁと思う人がいるかな?
コピペで使えるようにコード載せておくね☆

本文編集のほうに、このHTMLをコピペして使ってみて
<h2 class="tartan">ここにタイトルを記入</h2>
<div class="tartan">ここにYouTubeとか写真等のHTML記入</div>

CSSのスクリプトは追記欄にコピペしてね
<script>
var styleElm = document.createElement('style');
styleElm.innerHTML = `.tartan{padding:1.65rem 2rem;background-color:#a02f2b;background-image:repeating-linear-gradient(transparent,transparent 50px,rgba(0,0,0,.4) 50px,rgba(0,0,0,.4) 53px,transparent 53px,transparent 63px,rgba(0,0,0,.4) 63px,rgba(0,0,0,.4) 66px,transparent 66px,transparent 116px,rgba(0,0,0,.5) 116px,rgba(0,0,0,.5) 166px,rgba(255,255,255,.2) 166px,rgba(255,255,255,.2) 169px,rgba(0,0,0,.5) 169px,rgba(0,0,0,.5) 179px,rgba(255,255,255,.2) 179px,rgba(255,255,255,.2) 182px,rgba(0,0,0,.5) 182px,rgba(0,0,0,.5) 232px,transparent 232px),repeating-linear-gradient(270deg,transparent,transparent 50px,rgba(0,0,0,.4) 50px,rgba(0,0,0,.4) 53px,transparent 53px,transparent 63px,rgba(0,0,0,.4) 63px,rgba(0,0,0,.4) 66px,transparent 66px,transparent 116px,rgba(0,0,0,.5) 116px,rgba(0,0,0,.5) 166px,rgba(255,255,255,.2) 166px,rgba(255,255,255,.2) 169px,rgba(0,0,0,.5) 169px,rgba(0,0,0,.5) 179px,rgba(255,255,255,.2) 179px,rgba(255,255,255,.2) 182px,rgba(0,0,0,.5) 182px,rgba(0,0,0,.5) 232px,transparent 232px),repeating-linear-gradient(125deg,transparent,transparent 2px,rgba(0,0,0,.2) 2px,rgba(0,0,0,.2) 3px,transparent 3px,transparent 5px,rgba(0,0,0,.2) 5px);border:5px solid #501816}`;
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

紅葉写真をよつば型に表示

写真をよつば型に表示できて楽しくて、またやってみたよ♪

紅葉①花 ナナカマド紅葉②




いつも見に来てくれてありがとう💕
今日も楽しく過ごしましょうね~☆~~ヾ.◜ᴗ◝.) マタネッ♪



にほんブログ村 写真ブログ デジタル写真へ
人気ブログランキング

FC2ブログランキング

Comments 8

コメント待ってまーす❤^▽^)/

そふぃあ

秋色

よつばさん、こんばんは。
もみじが舞い落ちるのも秋らしいけど、タータンチェックもなんだか秋や冬を連想します。
しかも、この秋色が良いですね。
CSSだけで見出しとBOXがお揃いになって素敵です。

四つ葉模様の写真レイアウトも凄い!
紅葉真っ盛りですね。

2021/10/23 (Sat) 19:55

菜の花

こんばんは

よつばさん、こんばんはです、パソコンが壊れてしまったので、タブレットからです。
報告まででした、チェッカーズ懐かしいですね、若い頃からのファンです。

すみません、今日はこれで失礼します。

もみじのブログパーツ良いですね、欲しくなってしまいました。

2021/10/24 (Sun) 02:17

-

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/10/24 (Sun) 08:00

あとほ

おはようございます^-^
寒くなってくると、タータンチェック柄が似合いますよね♪

2021/10/25 (Mon) 06:31
よつば

よつば

 ❤ そふぃあさんへ

そふぃあさ~ん ヾ(^∇^)おはよー♪

紅葉のブログパーツ、秋らしくて好いよね~紅葉🍁
ねぇ~この色合いのタータンチェックも暖かみがある感じで秋冬にピッタリだよね~♪
ホントCSSで色んな模様まで表示出来ちゃうんだもんね~すごいよね~!

よつば型の写真表示も、HTMLとCSSで出来ちゃうんだもんね~ホント不思議
これもググって見つけたCSSと表示方法を少々変えたHTMLを組み合わせて
自分なりに満足できる表示に出来たものなの、写真の縦横サイズでよつば型の形も変わるけどね

そふぃあさん 嬉しいコメントありがとう💕

2021/10/25 (Mon) 10:16
よつば

よつば

 ❤ 菜の花さんへ

菜の花さ~ん ヾ(^∇^)おはよー♪

あらら!パソコン壊れちゃったの!タブレットも手軽で良いけどやっぱりPC必要だよね
私の場合、マウスを使えるPCからじゃ無いと投稿するのが難しいもの
パソコン早く治るとイイね☆彡

そうだったよね~菜の花さんはフミヤのファンだったよね~♪
私も若い頃のフミヤの可愛い顔、好きだったよ♡

あとで もみじのブログパーツ届けるね☆彡
菜の花さん 嬉しいコメントありがとう💕

2021/10/25 (Mon) 10:23
よつば

よつば

 ❤ ナイショ( ̄ノ∪ ̄)さんへ

ナイショ( ̄ノ∪ ̄)さ~ん ヾ(^∇^)おはよー♪

そうだったんだね~!私もナンデ?と思ってたんだけど、そういうこともあるんだね
全然大丈夫だよ!こちらこそ、今後ともよろしくお願いします❤

2021/10/25 (Mon) 10:29
よつば

よつば

 ❤ あとほさんへ

あとほさ~ん ヾ(^∇^)おはよーございまーす♪

ですよね~この色合いのタータンチェック、暖かそうですよね~♪
昨日今日とこの季節にしては割と気温は高めだけど、朝晩は冷え込んでるし
やっぱり暖かいものが恋しくなる季節ですもんね~🍁

あとほさん 嬉しいコメントありがとうございます💕

2021/10/25 (Mon) 10:32
よつば
Admin: よつば
❤ Welcome to my blog ❤
YouTube自動再生ページもありますので
音量にはご注意くださいm(_ _)m

❤ ❤ ❤

この blog の管理人
チャコと小桃のmama よつば です

愛娘(=^・^=)(=^・^=)と
気楽に過ごす専業主婦です(^∇^)/

❤ ❤ ❤
web学習