どうも！LSSです！！ 以前、CSSとSVGを併用した、 little-strange.hatenablog.com というコード記事をあげていました。 バクダンってアレです。広告の特価品や、漫画でいうと叫んでる吹き出しに使われる、トゲトゲの囲み枠ですね。 SVGを使うと本当に表現の幅がグンと広がる、広がり過ぎて面白くないぐらいですが、CSSだけで近いものは作れないか？ってな事を考えていました。 で、思いついた方法をひとつ試してみたのですが…出来上がりはなんとも言えないものに…

…枠線ですが、こちらはborder-imageを使って描いていました。 border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-style（枠線の種類を点線や二重線にする）」の指定と共存できない、というのが、ちょっと惜しいところです^^; 画像ファイルを用意して表現する事は可能ですが、gradientを使って…となるとあまり自由が利かなかったりもします。 今回は、「なかばインチキ」な方法ではありますが、「虹…

…px solid; border-image: repeating-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px) 5;">虹色の枠線 追加１</div> 虹色の枠線 追加2 虹色の枠線 追加2 コード <div style…

…表現できない枠線を、border-imageを使って作る」事をやってみました。 border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-imageに指定する画像によって「おおむね」近い表現ができる事もあるようです。 特にradial-gradientはborder-radiusの代わりに角丸を表現するのに使えて、中身を工夫するとborder-styleでは表現できなかった事もできちゃった…

…！ 未だ掴みきれないborder-image。 ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。 実験 コード アニメ化できましたね！ 実験 @keyframes testa{ 0%{border-image-slice:49%;} 100%{border-image-slice:35%;} } .test{ height:200px; border:40px solid; border-image-s…

…！！ ちょっとまた、border-imageを試してみました。 border-style:outset;で盛り上がったような枠線になりますが、それよりもborder-colorを四辺別々に設定した方が角が四つとも切れ目が生じてかっこいい！ …のを更に、conic-gradientを用いると四辺の中で更にグラデーション変化を入れる事ができます。 ついでに背景色をアニメーションで変化させて、様々な色に合う事を確認しています。 border-imageとconic-gradient…

…太さも変わります！ border-imageを使用しています 虹色の枠線 .bdimg{ border:50px solid; border-image:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 4…

…ansparent;border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%23ff4444" stroke-width="5" fill="%23ffff44"><path d="M 7 7 L 30 20,45 3,60 20,83 7,70 30,87 45,…

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

…です！！ しばらく、border-imageプロパティと格闘していたら、頭が沸きましたｗ border-image の検索結果 - Little Strange Software …うん、いったん忘れる事にしますｗ（border-imageとradial-gradientの組み合わせについて考えていました） ところで、もう１月が終わろうとしていますね。 犬、逃げる、猿、なんていいますが、１・２・３月は何故か過ぎるのが早く感じます。 という事は、もうすぐ春ですね^^※犬じゃない…

…48deg（度）」という事になります。 まぁ、炎というよりは… アニメにありそうな「熱線攻撃」みたいな形状ですが^^; あと、 border:10px double #00000080; カードの周囲を、double（二本線）のborderで囲むと、その二本線の隙間がbackground-imageの影響を受けていますね。 border-imageの当て損ないみたいな感じですが…これはこれでいいかな、と。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…round-clipだけでこれだけ多重の囲みが作れるのにびっくりしましたｗ（もっと言えばさらに外側の枠となるoutlineや、border-imageを枠線部分に重ねたら…より複雑になりますが、そこまでいくと さすがにやり過ぎかｗｗｗ） とりあえず「実験」として、グラデーションを重ねた様子が美しいかどうかは二の次でしたが、うまくデザインできる人が考えると素晴らしい「重ねグラデーション」になるかもですね^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…px solid; border-image: repeating-linear-gradient('+rg1.value+'deg,'+col1.value+','+col2.value+','+col1.value+' '+rg3.value+'%) '+rg2.value+'; padding: 5px;">こんな感じのシマシマ模様の枠になります。<br/>お気に入りの色・角度を見つけてください^^</div>';gamen.innerHTML=txt;cdtxt.in…

…けます。 あとがき border-imageを利用した囲み枠は以前にも試みて記事にしていましたが、今回は２色縞模様限定でのコード生成ツールに仕立ててみました^^ このborder-image、面白いのですが、角丸やborder-style（点線とか二重線とかのあれ）と併用できないのが惜しいところ^^;（併用しようとすると角丸やborder-styleのほうが無効になります。） 何度か試みてみては諦める、を繰り返していますが、その過程でこんなものが出来たので記事にしてみましたｗ…

…r-color','border-image','border-image-outset','border-image-repeat','border-image-slice','border-image-source','border-image-width','border-left','border-left-color','border-left-style','border-left-width','border-radius','border-right','bo…

クリックで開始します // '+ans.substr(0,csr)+''+ans.substr(csr,1)+''+ans.substr(csr+1)+'';} function rw(){rireki.innerHTML='文字数:'+mjc+'一文字あたりの秒数:'+Math.floor(1000*ttls/mjc)/1000+''+rtxt;} function nextans(){ans=tng[Math.floor(tng.length*Math.random())…

…使用し、ridgeで盛り上がっているようにしたかったのです。 ところが、CSSは「border-image」を使用するとまず角丸の「border-radius」が無効になり、「ridge」も利かなくなる、との事^^; ググってみると、強引に角丸として表示する方法までは出てきましたが、ridge効果はやっぱり乗らないそうで。 それでも、黒に金のフチや金文字はそれなりに映えるかな？と思い、ネタにしてみました。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…le:solid; border-image-slice:7.5% 10% 7.5% 15% fill; padding:10px; } --> テストその１ コード <style><!--.fkds{box-sizing:border-box;border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewbox="0 …

…似た書式を利用する「border-image」や「list-style-image」があります。 そのうち、list-styleについては、 【CSS】箇条書きのドットに色をつける【list-style-image】 【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます 【CSS】ナンバリング箇条書き装飾サンプル集 これらの記事で、gradientを使って色々試みていましたが…「ここにSVGが使えるなら、かなり自由にデザインできるのでは？」と思い、list…

…うプロパティとして border-image（囲み枠に画像を表示）、list-style-image（リストの・の代わりに画像を表示）などがありますが、そちらにもSVGが入れられるかも？ 妄想が広がりますねｗ これまでにborderやlist-styleを装飾しようとした記事はこちら 【CSS】画像を使った枠線（border-imageとborder-image-slice使用） 【CSS】ナンバリング箇条書き装飾サンプル集 ですが、より幅広い表現ができそう！！ 色変更・サイ…

どうも！LSSです！！ 先日の記事、LSSってどんな人？ - Little Strange Softwareに、多数のコメントをいただき、誠にありがとうございます^^ コメント欄・はてなブックマークコメント・Twitterと様々な箇所でいただきましたので、「とりまとめてみると、どんなイメージを持たれているのが多いか？」を可視化すべく、数えてみました！ なお、言うまでもない事ではありますが、コメントひとつひとつがその方の持っておられる「LSSのイメージ」である事は間違いなく、「…

謹賀新年 あけましておめでとうございます^^ どうも！LSSです！！ 本年もよろしくお願いします！ ちょっと遅めの時間（夕方）初詣してきました！ 初詣は一社だけでしたが、 無料のおみくじを用意しました！ ちょっと遅めの時間（夕方）初詣してきました！ 場所は、去年最初に行ったのと同じところですね。 一応 人はいましたがそう多くはなく（一家族かな）、密を気にせずに参拝できました^^ が、 賽銭箱のところに、こんな注意書きが。 なるほど、こういう形での対応があるんですねぇ。 という…

どうも！LSSです！！ ２０２０年もまもなく終わりを迎える今、「振り返り記事」をがっつり書いてみようと思います^^ 2020年1月 2020年2月 2020年3月 2020年4月 2020年5月 2020年6月 2020年7月 2020年8月 2020年9月 2020年10月 2020年11月 2020年12月 皆様、大変お世話になりました。 2020年1月 2020年最初の記事は、初詣の話でした！ 元日から行ってたんですねぇ。 サムネ写真は今見てもインパクトがありますｗ 他…

…px solid; border-image: linear-gradient(150deg, black,brown,yellow,white,yellow,brown,black); border-image-slice: 1;">きんきらきんのきーん♪</div> 参考→【CSS】border（枠線）のグラデーション こんな組み合わせも <div style="margin: 0px auto; padding: 1em; border: 10px ridge hsl(…

…くしてみます なお、border-imageとは組み合わせられないようです 実はこの三角、あちこちのブログで使用されています CSSで吹き出しを表現されているのをよく見かけますが、あのとんがった部分。 この「borderで三角を描く」方法で作られている事が多いです。 こういうやつですね 三角形のコード <div style="width: 0px; height: 0px; border-left: 50px solid transparent; border-right: …

…！！ 前回の記事で、border-imageとborder-image-sliceを使ってグラデ―ションの枠線を描きましたが、border-imageはその他に「画像ファイルを枠線として使う」という事もできます。 できます、というより、多分、おそらく、そっちの方がメインの用途なんじゃないか？という気がします。 今回は、その「画像を使った枠線」を扱うCSSをやってみた話です。 画像を使用したborder-image 使用した画像 サンプル コードと解説 テストその１ width…

…px solid; border-image: linear-gradient(135deg, red,blue); border-image-slice: 1; 作成例 サンプル コード やってみて気づいたんですが border-image-sliceがとても難解でした^^; 成功例 サンプル てすと コード <div style="border: 15px solid; border-image: linear-gradient(135deg, red,blue); bo…

…定でしたが、同類に、border-image:lineargradientというのがあり、border＝枠線にグラデーションをかけられるようなので試みてみました。 失敗例 失敗例のコード 全体を囲む枠線をグラデさせたかったんですが 失敗例 てすと 失敗例のコード <div style="border: 15px solid; border-image: linear-gradient(135deg,red 0%,blue 100%);">てすと</div> 全体を囲む枠線をグ…