linear-gradient

どうも！LSSです！！ 先日、 little-strange.hatenablog.com という実験的な記事を公開していました。 「実験」だったのは、今ひとつネタとして活用する方法でピンとくるアイデアがなかったからなのですが、その状態でも、 non704.hatenablog.com whisky-coke.hatenablog.com norikoさん(id:non704)や、のんべえさん(id:whisky-coke)が使い途を考えて試みてくださっています^^ その、norikoさんの記事のコメントの中で、「カーテンで舞台が開く」という新たなアイデアを出しておられたので、こっちで作ってみ…

どうも！LSSです！！ CSSのbackground-imageにlinear-gradientを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{0%{background-image:linear-gradient(0deg , 色１ , 色２);}100%{background-image:linear-gradient(90deg , 色１ , 色２);} のように指定したとしても、角度が「0degから90degに徐々に変化」…とはなりません。他のgradientもそうですが、 ( ) の内容はkeyframesの「徐々に…

どうも！LSSです！！ 実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。 チョコレートケーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード <div style="box-sizing: content-box; width: 100px; height: 100px; background: conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px, radial-…

どうも！LSSです！！ little-strange.hatenablog.com について、「どういう理屈であのコードが斜め市松模様になるのか」って話を書きます。 linear-gradient を用いた模様を作る際の%による指定についても書いていますので、gradient系の指定方法を これから覚えたい方にも参考になるかと^^ linear-gradientについて グラデーションに位置を指定してみます 対角線を指定する「to top right」の面白いところ 25%と75% 次に、色を「赤→透明→赤」にしてみます そして左右逆向きのlinear-gradientを重ねます ここで、ba…

どうも！LSSです！！ 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software 【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software で円グラフをCSSで表現する事に挑戦しましたが、その際にコメントでいただいた「棒グラフもできますね」をやってみました。（また凡例無しバージョンです^^;） 棒グラフ コード コード解説 棒グラフの棒以外の部分について先に書きます。 ６本の棒グラフについて あとがき 棒グラフ #bargraph{ width:300px; height:300px; background: …

どうも！LSSです！！ もうかなり前の記事になりますが、 little-strange.hatenablog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事がありました。 …実はその後もずっと（何か月も？ｗ）考えていたのですが…ふと閃いた事があり、（強引さはありますが）CSSだけで繰り返しレンガ模様を描く事に成功しました！ CSSでレンガ模様 コード 強引な解決方法 あとがき CSSでレンガ模様 .renga{ padding:0.6em; font:120% bold; co…

どうも！LSSです！！ はい、いきなり背景がアレですが、お使いの端末は正常です（多分）。 10px方眼 コード解説 という冗談のような小ネタでした 10px方眼 article{ background-image: linear-gradient(#ffcccc00 90%,#ffccccff 100%) ,linear-gradient(90deg,#ffcccc00 90%,#ffccccff 100%)!important; background-size:10px 10px!important; } この記事の記事部分の背景に、「10pxの方眼」を描いてみました。 記事のHTML編集画…