HTMLなど
どうも！LSSです！！ 【実験】CSS、backgroundプロパティで迷路を描くテスト（の準備段階） - Little Strange Software 考えてる迷路案「スイッチ迷路」 - Little Strange Software と書いてきた「スイッチ迷路」、とりあえず「おおむねの描画」が出来たのを…
どうも！LSSです！！ CSSのbackgroundプロパティを使って様々な絵を描くのを試みてきましたが、ここで「迷路の描画をbackgroundだけで出来るか？」をやろうと…し始めてみました。 まず格子状に壁を配置 壁を抜く まず格子状に壁を配置 .test{ width:300px;he…
どうも！LSSです！！ かなり前（約２年！？）なんですが、↓こういうCSSネタを書いていました。 little-strange.hatenablog.com CSSを触るようになって、ちょっと慣れてきた頃…でしょうか。「別バージョン」に苦戦している様子が見られますｗ そして最近にな…
どうも！LSSです！！ JavaScriptで、背景に「青い空と白い雲」を乱数を用いて描いてみました。 乱数なので、ページを開くたびに模様が変わります。 コード ついでに、記事部分の背景も透過 乱数なもので… コード article{background:transparent!important;}…
どうも！LSSです！！ ５月５日「こどもの日」でしたね！ もう、その日も終わろうという頃になって、何かそれっぽい事をこなしたくなりましたｗ 気の抜けた「こいのぼり」 .koinobori{ width:300px; height:450px; background: radial-gradient(15px 40px at …
どうも！LSSです！！ 実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。 チョコレートケーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード
どうも！LSSです！！ 朗報、と言うべきかどうなんだか？iOSのブラウザにあった、ある問題が解決していたようです。 ３つのグラデーション コード 以前には iOS15.4で修正されたらしい ３つのグラデーション ↑「赤から黄色」に変化するグラデーションを３つ、…
「どういう理屈であのコードが斜め市松模様になるのか」って話を書きます。 linear-gradient を用いた模様を作る際の%による指定についても書いていますので、gradient系の指定方法を これから覚えたい方にも参考になるかと^^
どうも！LSSです！！ 以前の記事、【CSS】CSSオンリーでレンガ模様・改善版の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。 conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で…
どうも！LSSです！！ あまり出番がないので ご存知ない方もおられるかも知れませんが、このブログにはマスコットキャラクター「まるいの」という謎の生物がいます。 little-strange.hatenablog.com 今回、無駄に労力を使って、CSSのbackgroundプロパティを使…
どうも！LSSです！！ もう２年以上前ですが、 little-strange.hatenablog.com というコード生成ツールを公開していました。 色々調整できて面白いツールではありましたが、「ぼかし」をかけておかないとフォントの尖った部分がそのまま尖った袋になる、とい…
どうも！LSSです！！ 今回は、ふと思いついたCSS小ネタです。 ブログなどの文中でも、さらっと使いやすいんじゃないかな？ サンプル コード CSSの説明 サンプル文に書いたように、上の行と重なりますが サンプル ただし重要適宜、改行を入れるなどしておかな…
どうも！LSSです！！ 【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】では、うっかりbackground-positionの%指定のクセを忘れて難儀してしまいました^^; が、それはそれで面白い動きだったので、その失敗バージョンを元に何か作れない…
どうも！LSSです！！ なんとなくCSSをいじっていると、謎の背景模様？ができました。 謎の背景模様『山』 コード styleオプションに書く場合 あとがき 謎の背景模様『山』 .yama{ background: repeating-conic-gradient(from 45deg,#ffffff 0deg 60deg,#ddff…
どうも！LSSです！！ はてなブログのコメント欄は（全てではないと思いますが）HTMLタグを書く事ができます。 例えば、 <img src="画像ファイルのURL"/> のように書くと画像を挿入できたり。 ところが、ですね。 タグが有効である、という事は逆に言えば「こういうタグを使うんですよ」って…
どうも！LSSです！！ これまで、コード生成ツール カテゴリーなどでよく「スライダー」を使ってきました。 ↑こういうやつ。 で、たびたび思っていたんですが…「縦のスライダーって出来ないのかな」と。 例えば「横位置」「縦位置」をスライダーで調整可能に…
どうも！LSSです！！ 最近、桜のつぼみが開くのを待ちながら撮影散歩していました。 ようやく神戸でもソメイヨシノが開き始めたところで、春っぽいCSSネタを考えてみました！ サンプル コード CSSセレクタについて 文字に対する指定 サンプル .hnbr{ border-…
透明感のある、ぷにぷにしたボタン
どうも！LSSです！！ 【CSS】水滴【小ネタ】 - Little Strange Software のコメント欄に様々なアイデアをいただき、ありがとうございます^^ コメント欄で回答させていただいた分もありますが、他にもそれぞれコード修正を行って調整してみたので、記事にして…
どうも！LSSです！！ 今日はCSS小ネタです。 水滴 コード CSSで水滴を描いてみました 水滴 .pichon{ width:150px; height:100px; background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000); bo…
どうも！LSSです！！ 今回はまた、CSS小ネタです。 ブランコ コード あとがき ブランコ @keyframes swinga{ 0%{transform:rotateX(60deg);} 100%{transform:rotateX(-60deg);} } .swingwaku{ position:relative; float:left; width:100px; height:100px; tra…
どうも！LSSです！！ 昨日の妄想記事、 【お題】わたしのコレクション をテーマにゲームを作ったら？【妄想】 に書いたうち、「7種類」「1/10でレア」「1/100でスーパーレア」という確率だけを実験してみるものを作ってみました。 …つまり、まだゲームでもな…
どうも！LSSです！！ 先日の記事、 little-strange.hatenablog.com を応用して使っていただいた記事の中で、 mio20100501.hatenablog.com コメント欄にて「最初は女の子がフラフープをまわす・・・をやろうと思ったのですが、フラフープが上手くいきませんで…
どうも！LSSです！！ 今回はまたCSSサンプルです。 animationと3Dを使い、目立たせる効果を作ってみました^^ サンプル コード コード書き換えについて おまけ サンプル @keyframes grgra{ 0%,30%{transform:rotateX(-5deg) rotateY(360deg);} 100%{transform…
どうも！LSSです！！ 今日は3/2。明日は ひなまつり ですね^^ それにちなんだ記事を用意されている方もおられるかと思いますが、このギリギリのタイミングで、ひなまつりネタのCSSです！ 菱餅の区切り線 コード ひなまつり要素のうちで、CSSネタにしやすいの…
どうも！LSSです！！ またしても、区切り線CSSネタです。 鎖の区切り線 コード コードが２種ありますが、 【＋α】区切り線ではなく背景にしてみると…？ 終わりに 鎖の区切り線 .chain{ height:20px; background: radial-gradient(10px 10px at 50% 0%,#66666…
どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com で、ページ内の区切りとして使用できるような区切り線をデザインしました。 .yokosen{ height:30px; background: linear-gradient(30deg,#eeaaaa00 38%,#eeaaaaff 42%,#eeaaaa00 46%,#eeaaa…
どうも！LSSです！！ CSS小ネタとして、区切り線を作ってみました。 赤と青の区切り線 コード 区切り線代わりに使用できますね 赤と青の線ですが、本当は… 赤と青の区切り線 .yokosen{ height:30px; background: linear-gradient(30deg,#eeaaaa00 38%,#eeaaa…
どうも！LSSです！！ CSSで色々やってみたい、と思った際に、 HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE) 作者:森 史憲,藤本 壱 技術評論社 Amazon ↑こういう本を眺めています。 基本から教えてくれる入門書、というわけではなく、CSS…
どうも！LSSです！！ 先日、 little-strange.hatenablog.com にて、フォームパーツであるボタンをリンク代わりに使用するサンプルを公開しました。 「ページ移動の処理をJavaScriptで行う」というものでしたが、本来ならページの移動は「aタグによるリンク」…
