どうも！LSSです！！ 【CSSサンプル】ふりむきカーン【ほぼジョークｗ】 - Little Strange Software でoutlineのオーラが広がって消えていくものを作りましたが、 「text-shadowとanimationを使えば、文字がまとったオーラが動く様子が表現できるのでは？」 と、試してみました^^ text-shadowが霧散するサンプル コード ちょびっとコード解説 text-shadowが霧散するサンプル さぁ、夏のあつさを、ふきとばそう！ コード <style><!-- @keyframes txtshda{ 0%{text-shadow:0px 0px 10px #ff0000;} 70%{text-shadow:0px 0px 10px #ff0000;} 100%{text-shadow:0px 0px 100px #ff0000;} } .txtsh

どうも！LSSです！！ なかなか時間が取れず、進まずにいた 【制作中】もぐらたたき「倍速もぐら と 超速もぐら」 の制作ですが、「もぐらを叩いた時に点数が出てくる」ようにするための「点数表示」をSVGで描いてみました！ レトロゲーム風 実際の表示サイズはこのぐらいかな レトロゲーム風 コード <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 100 100" stroke="black" style="border: 1px solid black; background-color: green;"> <path d="M 26,41 l 0,9 6,0 0,3 -6,0 0,3 9,0 0,-9 -6,0 0,-3 6,0 0,-3 -9,0" stroke="red" stroke-width="0.1

どうも！LSSです！！ なんか最近、ブログ書こうとするとSVGネタばかりになります。 今も、SVGに関連する新たな実験をやって、なんとかうまくいったのでそれを書きかけていましたが、ちょっと後日にまわそう^^; HTML+CSS は、綺麗にレイアウト・装飾されたWebページを構築でき、HTML+JavaScript は、動的なコンテンツ（ブラウザゲームとか）を作る事ができます。 HTML+CSS+JavaScript で綺麗かつ動的なWebページが作れるようになりますが、CSSが苦手とするタイプの描画を埋められるのがSVGで HTML+SVG+JavaScriptでもコンテンツとして良さげなものができそう^^ …でも、絵心は欲しいですｗ ただ、お絵描きって意味では、SVGがなくてもJavaScriptには「canvas」という概念があって、枠内に簡易かつ自由に絵を描ける（感覚的にはSVGに似

どうも！LSSです！！ 今回は、コード生成ツール「text-shadow調整ツール」を公開します！ ブログなどで「影つき文字」を使いたい時にちょっと手間が省けるかも？なツールです。 text-shadow調整ツール 使い方 …という小ネタなんですが text-shadow調整ツール 文字色 文字サイズ 太字 影色 影位置・横 影位置・縦 影ぼかし コード 使い方 「文字色　文字サイズ　太字」で、装飾対象となる文字の設定ができます。 「影色　影位置・横　影位置・縦　影ぼかし」でtext-shadow部分の設定ができます。 お好みの設定ができましたら、「コード」内の文字列をコピペして、文章部分を書き換えてご利用ください^^ …という小ネタなんですが 自分でtext-shadowを使う際には、コード上の数値を調節しては、表示を確認して、また調整…という事をやっていたので、text-shadowを

どうも！LSSです！！ 記事タイトルの通り、 このブログを読者登録してくださっている方が400人になりました！！ 増えるペースはごくごくゆっくり 読者登録していただいた方のブログは、こちらも登録 …というような軽い内容の記事でも 増えるペースはごくごくゆっくり 以前に記事で読者数について触れたのは、 333人の時でした。 これが去年の７月の話なので、いかにゆっくりペースかが分かりますねｗ …実際のところ、今は積極的に増やそうと思ってはいないので（でも増えたら嬉しいｗ）、たまに読者登録していただいた通知を見ると「おおっ^^」ってなります。 読者登録していただいた方のブログは、こちらも登録 させていただいております。今のところは、ですが。 （漏れがあったらすみません^^;） どんな記事を期待されているかは分かりませんが、マイペースにぼちぼち書いてますｗ …というような軽い内容の記事でも ↑これ

16:30～17:2016:30～17:20まるいのをSVG 化する仕組みと挑戦。基調講演株式会社Little Strange SoftwareCEO リトル・須藤　蓮二SVGが単にIllustratorで開けるデータと思っていたのはきっと自分だけではあるまい。CSSの本を読んでいると眠くなってくるのはかつて数学の授業で感じたあの感覚と同じなのではないだろうか。特別講演CSSをゼロから理解する。MARUINOfutureOnline eventCSSとSVGの未来2021.2/1 16:00startMARUINO future Online event運営事務局　問い合わせ　000-0000-0000 須藤 どうも！LSSです！！ 冒頭から「いきなり 何！？」って感じで失礼しました^^; （何人かはこの記事を予測されていた方もおられるかとは思いますが） はい。ネタ記事 兼 SVG模写チャ

どうも！LSSです！！ 先日の記事、 が色々と興味を持っていただけたようで^^ tn198403s.hatenablog.jp カメさん(id:tn198403s)は早々にコードコピペを試していただいた上に、色を変えたり記載順を変えたりして、絵本仕立てにまでなりました！ arsinput.hatenablog.jp アーシさん(id:arshii)はググって他のSVG要素も試みておられます。 先を越された！！ｗｗｗ カメさん、アーシさん、言及ありがとうございます^^ というわけで、LSSも続きをやってみる事にしました！ まず、こないだ作った画像 文字を入れてみました 試しにCSSプロパティを足して… 線を引いてみる ベジェ曲線 三次ベジェ曲線もやってみます 作った波線パスに沿って文字を入れる大技！ あとがき まず、こないだ作った画像 コード <svg xmlns="http://www.w