…nd:linear-gradient(#eeeeee 48%,#bbbbbb 52%,#eeeeee 100%);text-decoration:none!important;color:#222222!important;box-shadow:2px 2px 5px #888888;}.linkbtn:hover{background:linear-gradient(#cccccc 48%,#999999 52%,#cccccc 100%);box-shadow:2px 2…

チョコの色：フチ：幅 ：高さ： ↑の「チョコの色」「フチ（３種）」「幅」「高さ」の内容を変更できます。変更するとリアルタイムに↓のサンプルと「コード」の内容が変化します。サンプルを見ながら↑の項目を調節して、その時点での「コード」をコピーして、あなたのブログやWebサイトのHTMLに挿入する事で使用できます^^ コード というものを作ってみたのですが バレンタイン記事に使うのに良さそう…なものを、バレンタイン当日に公開するという、完全に時期を逸した感じになってしまいましたｗ …

…ge:radial-gradient(15px,#aaeeaaff 80%,#aaeeaa00 100%);background-size:30px 30px;background-repeat:no-repeat;}</style><div class="boundball">跳ねるボール</div> width:300px;height:300px; で枠のサイズを指定していますが、ここを書き換えても問題なく跳ね返ります。 1.73sと1sの部分で、横移動にかかる時間、縦…

…ge:radial-gradient(15px,#88cc88ff 80%,#88cc8800 100%);background-size:30px 30px;background-repeat:no-repeat;}</style><div class="dblanm">跳ねるボール</div> ２つのアニメーション まず１つめは、 @keyframes dblanm1{0%{width:135px;}100%{width:100%;}} divタグの枠の「幅（width）…

…age:conic-gradient(#cceecc 90deg,transparent 90deg),conic-gradient(from 180deg,#cceecc 90deg,transparent 90deg);background-size:50px 50px;animation:wga linear 20s infinite;}</style><div class="weengashan">なんだかよくわからないものを作ってみました。<br />いやぁ、以前か…

どうも！LSSです！！ 節分にちなんだパズルゲームを作ってみました。 …これをパズルと言っていいかどうか疑問もありますがｗ 鬼はそと福はうち 突貫で作りましたが 鬼はそと福はうち ↑↓ ↓↑ 「◆」をクリックすると、内側と外側が入れ替わります。 「↑↓」をクリックすると、外側が時計回りに60度回転移動し、「↓↑」をクリックすると、外側が反時計回りに60度回転移動します。 「鬼」を全て外側に、「福」を全て内側に移動させるとクリア！ クリア判定で画面がピンク色になります。 突貫で…

…あり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^; で、「コードで仮想的に画像を作る」方法としては、インラインSVGを用いる方法があり、 little-strange.hatenablog.com で background-image になら当ててみた事がありました。 それを border-image に応用すると、gradientゆえに苦労する部分が緩和されるのでは？と思い、再び挑戦してみました。 雲型の…

…geとradial-gradientの組み合わせについて考えていました） ところで、もう１月が終わろうとしていますね。 犬、逃げる、猿、なんていいますが、１・２・３月は何故か過ぎるのが早く感じます。 という事は、もうすぐ春ですね^^※犬じゃない、去ぬ、でしたｗそして去る、ねｗ ２月のイベントとしては、節分・バレンタインがありますが、はてなの今週のお題にも節分ネタが！ そうだ、２月に入ってすぐの話なので、迫ってきているのに気づかなかったり^^; ってなとこで、今回はこのへんで！…

…出し radial-gradientで描いた影の形に基づいた影がつきます！ コード <style>.fukidashi{width:300px;text-align:center;padding:5%;background:radial-gradient(farthest-side,#ffffff 30%,#aaddaa 99.9%,transparent 100%) 0% 0%/100% 100%,radial-gradient(farthest-side at 0% 0%…

…きで、radial-gradientとconic-gradientを重ねた「楕円形の吹き出し」を作ってみました。 吹き出しについては過去に、 【CSS】吹き出しCSSについて解説してみます！ - Little Strange Software 【CSS】色違い吹き出し - Little Strange Software 【CSS】CSSシェイプ…なんてものが存在するのを初めて知りました - Little Strange Software でも試みていましたが、「楕円形」となる…

…nd:linear-gradient(0deg,#888844 50%,transparent 50%) 20% 0%/8% 90% no-repeat,linear-gradient(0deg,#888844 32%,transparent 32%) 35% 0%/8% 90% no-repeat,linear-gradient(0deg,#884444 72%,transparent 72%) 50% 0%/8% 90% no-repeat,linear-gradient…

…nd:linear-gradient(0deg,#888844 50%,transparent 50%) 20% 0%/8% 90% no-repeat,linear-gradient(0deg,#888844 32%,transparent 32%) 35% 0%/8% 90% no-repeat,linear-gradient(0deg,#884444 72%,transparent 72%) 50% 0%/8% 90% no-repeat,linear-gradient…

…nd: conic-gradient(red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);"><div style="position: absolute; left: 120px; top: 60px; background: #ffffff80;">情熱 43%</div><div style="position: absolute; left: 40px; top: 150px; background: #fff…

…nd: conic-gradient(red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);"> </div> わずかこれだけのコードで、円グラフが作れます^^ コード解説 分かりやすいように改行を入れてみました↓。 <div style="width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red 0% 43%,blue…

…d: radial-gradient(closest-side circle at 65% 35%,#ffffff 30%,#ffffff00 95%) -0.1em -0.1em/1.2em 1.2em repeat-x,radial-gradient(closest-side circle,#ffcc44 94%,transparent 95%) -0.1em -0.1em/1.2em 1.2em repeat-x;">丸に光を入れてもオシャレ？</span>かもですね。…

どうも！LSSです！！ 「日記」カテゴリですが、これは1/16の日曜日の事。購読中のブログのとある記事に触発され、探索の旅路に出たのでした。 hukunekox.hatenadiary.jp ↑全国の都道府県の名勝・名産を はにわのハニーズが紹介するシリーズ、山形編。の最後に登場する「牛肉どまん中」という駅弁に心惹かれ、「全国の駅弁を取り寄せてる店があったはず…もしかしたら見つけられるかも？」という野心にかられた勇者（？）の物語です。 まず向かったのは「駅弁市場」 次に向かっ…

…模様のlinear-gradientを、そして行の高さとなるline-heightプロパティを模様にあわせる、というもので、文章中に高さが変わる要素…例えば文字を一部大きくするとか、画像を入れるとか、見出しをまたぐなどであっさり崩れてしまいます^^; それらの問題をクリアできるわけではないのですが、都度<div class="keisen">中の文章</div>を入れるのも使い勝手が悪いな…と思い、「ブログ１記事全文を罫線表示する」際に扱いやすいコードに書き換えてみました。※…

…nd:linear-gradient(transparent 75%,#444488 75% 80%,transparent 80%) 0px 0px/100% 2.5em;}.keisen *{margin:2.5em 0px!important;}</style><div class="keisen"><p>ここに文章を入れます。改行・改段落も可。</p></div> なので、例えば記事の内容部分の全てを罫線化する事も可能ではありますが、ここでは「keisen」というクラ…

…nd:radial-gradient(closest-corner circle at 90% 10%,#000000 99.9%,transparent 100%) 0px 0px/60px 60px,radial-gradient(closest-corner circle at 10% 10%,#000000 99.9%,transparent 100%) 0px 0px/60px 60px,conic-gradient(from 45deg at 80% 100%,#…

コード どうも！LSSです！！ 「ハートマーク背景コード生成ツール」を作ってみました。 使い方 その他のコード利用方法 あと一ケ月ほどでバレンタインデー 使い方 「ランダム設定」ボタン、 表示サンプル、 ハートの色１、ハートの色２、背景の色、ハートサイズ（比率）、繰り返しサイズ、 コード が並んでいます。 「ハートの色１、ハートの色２、背景の色、ハートサイズ（比率）、繰り返しサイズ」を調節する事で、「表示サンプル」が変化し、その状態のものを表示するためのコードが「コード」部分…

…nd:radial-gradient(20px circle at 50% 150%,#ffffff 0% 12.5%,#0000ff 12.5% 25%,#ffffff 25% 37.5%,#0000ff 37.5% 50%,#ffffff 50% 62.5%,#0000ff 62.5% 75%,#ffffff 75% 87.5%,#0000ff 87.5% 99.9%,transparent 99.9% 100%) 20px 0px/40px 20px,radial-gr…

…und:conic-gradient(transparent 0deg 90deg,#000000 90deg 180deg,transparent 180deg 270deg,#ffffff 270deg 360deg) 0px 0px/40px 40px,linear-gradient(45deg,#ffffff 0% 12.5%,#000000 12.5% 25%,#ffffff 25% 37.5%,#000000 37.5% 62.5%,#ffffff 62.5% 7…

…nd:radial-gradient(farthest-side circle at 100% 100%,transparent 45%,#000000 45% 50%,transparent 50%) 0px 0px/40px 40px,radial-gradient(farthest-side circle at 0% 0%,transparent 45%,#000000 45% 50%,transparent 50%) 0px 0px/40px 40px,radial-…

…版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。 亀の甲羅のような模様 コード 模様の構造について 亀の甲羅のような模様 repeating-conic-gradient を使って、亀の甲羅のような模様を描いてみました。実際のところ、…

… ２つのconic-gradientでレンガ模様を作る仕組み conic-gradient凄い！ あとがき レンガ模様 conic-gradient を使うと、実にスッキリ、かつ強引さもなく、綺麗にレンガ模様が描けてしまいました！ コード <style>.conicrenga{height:150px;font:120% bold;padding:0.6em;background:conic-gradient(at 5% 45%,#ccaaaa 90deg,transpare…

…nd:radial-gradient(farthest-side circle at 100% 74%,#c7593d 24%,#c7593d00 25%) 0px 0px/44px 44px,radial-gradient(closest-side circle at 50% 23%,#c7593d 99%,#c7593d00 100%) 0px 0px/44px 44px,linear-gradient(90deg,#c7593d00 20px,#cccccc 21px …

…強引にlinear-gradientでラインアートしてみた 無駄に長くなったコード 線を半分 間引いてみました あとがき 強引にlinear-gradientでラインアートしてみた やりようもあるとは思いますが…linear-gradientで強引に引いたため、線自体あまり綺麗なものではないものの、なんか「それっぽく」はなりましたね^^ 29本の線を引いていますが、１本あたり３行の指定（background-image、background-size、background-p…

…ge:radial-gradient(circle 80px at 70% 30%,white,#eeeeee);user-select:none;}</style><div id="omikuji">おみくじ</div><script>cnt=0;kuji=["大吉","吉","末吉","凶","大凶"];a=Math.floor(Math.random()*kuji.length);omikuji.addEventListener('click',gamen_w,fals…

…ng-linear-gradient(90deg,#ffffff 0% 12%,#ff0000 12% 24%);}#moji{position:relative;margin:0 auto;padding:2em;-ms-writing-mode: tb-rl;writing-mode:vertical-rl;font-size:180%;font-family: serif;font-weight:bold;color:black;text-shadow:0px 0px …

どうも！LSSです！！ 2021年最後の記事となりました。 昨年末は、 little-strange.hatenablog.com １年を振り返った記事を書いていましたが、今年は…まぁいいかな、とｗ 一応、年に２回特別な記事を投稿するのが正月とクリスマスだったりしますが、そちらは little-strange.hatenablog.com little-strange.hatenablog.com ↑こんな感じでした。 ところで…２，３日前から、妹が姪（１歳４か月）を連れて帰…