どうも！LSSです！！ 今までさんざんborder-radiusを使っていましたが、今さらになって新たに見つけた事がありました！！ ほんと今更ｗｗｗ サンプル コード その他サンプル サンプル かなり今更感がありますが、border-radius（角丸）って縦横別々に指定できるんですね！そうすると、こんな変わった形状の枠も作れます^^ コード <p style="background-color: #eedddd; border-radius: 35%/20px; paddi…

…今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 （←こういうものですね） クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。 例えばこんな仕掛けとか。 【CSS】カードをめくる その３ idを使わない版 - Little S…

…爆発」…にかこつけたCSS小ネタです^^ 爆発しますよ コード keyframesアニメーションも慣れてくると はてなブログのお題が… 爆発しますよ 爆発しますよ コード <style>@keyframes bkhta{0%,70%{text-shadow:none;}71%,100%{text-shadow:0px 0px 0px yellow,0px 0px 0px yellow,0px 0px 2px red;}85%{text-shadow:0px 0px 30px …

…！！ 先日の記事、【CSS】回転＋移動＝渦巻き？【実験作】にいただいたコメントを元に、別バージョンを作ってみました。 文中の一部が渦を巻く コード いただいたコメント 文中の一部が渦を巻く こちらは、Little Strange Softwareという名称のブログです。以後、お見知りおきを。 コード <style><!--@keyframes bfrnda1{0%,20%{transform:rotate(0deg) translateX(0px) scale(1);}60%…

…した思いつきで作ったCSSアニメーションです。 渦巻きアニメーション コード コード解説 あとがき 渦巻きアニメーション 文の頭につけたマークが渦を巻いて回転するアニメーション コード <style><!--@keyframes bfrnda{0%,30%{transform:rotate(0deg) translateX(0px);}65%{transform:rotate(900deg) translateX(70px);}100%{transform:rotate(18…

…です！！ 以前に、【CSS】本をめくる、という動作をCSSで表現してみました。というものを作っていました。 そしてその後、【CSS】本をめくる、のページ追加方法についてにて、ページの追加方法について解説しましたが…これが不親切極まりない！^^; コード中、複数個所に追記が必要で、しかもCSSのスタイル指定部分まで手を加えないといけない。 理想としては、CSSの指定部分はそのままで、HTML部分の追記のみで解決したいところです。 その後、色々試行錯誤していましたが、だいぶ楽にペ…

どうも！LSSです！！ ちょっと変な文章アニメーションを作ってみました。 2021/8/29追記Windows＋GoogleChrome環境で動作確認していますが、FireFoxやSafariなどで正常に動作しないようです^^; サンプル コード コード中、最後のpタグ あとがき サンプル あいうえお かきくけこ さしすせそ たちつてと コード <style><!--:root{--txtanm1op1:0;--txtanm1y1:30deg;--txtanm1op2:0;-…

… サンプル コード CSSにはアニメーションの同期をとる指定はないようですが… サンプル だいぶ前の写真を引っ張り出してきました！ｗ コード <style><!--:root{--txtop:0;}@keyframes tbds{0%{top:-20%;left:100%;}30%{top:5%;left:2%;}31%{top:5%;left:8%;}32%{top:5%;left:3%;}33%{top:5%;left:7%;}34%{top:5%;left:4%;}35…

どうも！LSSです！！ 先日、 little-strange.hatenablog.com という記事をあげていましたが、少しそれに手を加えてみました。 サンプル コード やった事と言えば… サンプル コード <style><!--@keyframes tbds{0%{top:-20%;left:100%;}30%{top:5%;left:2%;}31%{top:5%;left:8%;}32%{top:5%;left:3%;}33%{top:5%;left:7%;}34%{t…

…。 補足説明記事→【CSS】本をめくる、のページ追加方法について この「その２」と「本をめくる」には、「id指定を利用しているため、カードを２枚以上おく、ページ数を増やすのにCSS部分をも含めて多数の場所を書き換えないといけない」という共通した問題点があります。 それでもコード利用に挑戦していただいた方がおられ、 whisky-coke.hatenablog.com ではなんと、縦めくりにされた上に、大幅なページ増でカレンダーを作られています！ のんべえ(id:whisky-…

…Sです！！ ちょっとCSSでなにか（ってなに？ｗ）を作るにあたり、試してみたい事があったので試してみました。 縦横比3:4とoverflow:hidden;を試してみました 外側のdivについて 内側のdivについて 知っていたはずなんですがｗ 縦横比3:4とoverflow:hidden;を試してみました 呼ばれて飛び出てじゃじゃじゃじゃーん コード <style><!--@keyframes tbds{0%{top:-20%;left:100%;}30%{top:0%;l…

…LSSです！！ あるCSSの詳細な解説記事を書こうと思い、脳内で構成を考えていたのですが、その説明の過程で「HTMLの親子関係」に触れる必要があるな、と思いました。 親子関係、というのは例えば、 <p> <span>月が</span> <span >綺麗ですね</span></p> というようなHTMLコードがあったとして…<p>から</p>までが、<p>タグの影響範囲、その中に<span>から</span>で書かれた<span>タグの影響範囲が２つある、という状態ですね。 …

…！ 昨日の記事、 【CSS】突然ですがクイズです！ - Little Strange Software ですが、コードの簡略化に成功しました^^ 問題の追加がやりやすく、文字数も少なくできるようになっています。 ついでに、選択肢の後に「説明文」をつける事もできるようになりました。 突然ですが、クイズです！その２ コード クイズ問題の追加の方法について はてなブログ限定の注意点 やっと自分で納得できるコードになりました^^ 突然ですが、クイズです！その２ 問１ 「iPhone」…

…criptを使わず、CSSだけでクイズシステムを作れないか？」と思いついてしまい、作ってみちゃいました^^ 選択肢をクリックすると〇か×がつく、というだけのものですが、とりあえず遊べますｗ 突然ですがクイズです！ コード コードについて説明 余談：問２の問題の内容について 突然ですがクイズです！ 問１ apple、日本語で言うと？ りんご みかん バナナ 問２ 次のうち、王族は誰？ 魔法使いチャッピー 魔法使いサリー 魔女っ子メグちゃん コード <style><!--#q1a…

…、その「本をめくる」CSSですが、もちっと詳しい説明が必要かと思ってまして、今回は「ページの追加方法」について書きます！ ページの追加方法 ３つのidがセットになっている、とお考えください ちょっと注意が必要なところが２か所 ページの追加方法 例えば「６枚目の紙（＝表裏で２ページ分）」を追加する場合、下記コードのうち、オレンジ太字部分を追加する事で実現します。 …ちょっと変更点が多いのが難点ですが^^; また、同じ要領で７枚目、８枚目…と増やしていく事ができます。 コード <…

…小ネタ、なんですが、CSSでちょっと思いついた簡単なネタがあって、やってみたらすんなりいけました^^ 簡単なコードですが、結構綺麗に描けていますね。 GOLDEN BALL ついでにSILVER BALL border-radius:50%;を使って円を描く 改変使用例 余談：ゴールデンボールって何？ GOLDEN BALL コード <p style="width: 130px; height: 130px; border-radius: 50%; background-co…

…！LSSです！！ 【CSS】グラデーション文字をアニメーションしてみました - Little Strange Software 【CSS】グラデーション文字 応用編 - Little Strange Software でサンプルとして使用していた「きんきらきんのきーん」ですが、背景がグレーの枠に入れた状態でお披露目していました。 それには理由があって、「グラデーションに白を使っているため、そのまま白背景の記事に配置するとどうにもしまらない」からでした。 かといって、text-…

…は”1”です。 で、CSSに属性セレクタというものがあり、例えば #rng[value="1"] と指定すると、「idがrngのタグに、valueに"1"が指定されていた場合」に有効になる、というものです。 で、今回の例では、 #rng[value="1"]~#rng1{color:blue;} と指定しているので、 「idがrngのタグに、valueに"1"が指定されていた場合の、兄弟要素でrng1というidを持つものの文字色をblueにする」 という指定になります。 兄弟…

…criptを使わずにCSSで表現してみたんですね。 ぜひ、クリックして遊んでみてください^^ 本をめくるサンプル コード というわけで… 本をめくるサンプル ↓本をクリックするとページをめくる事ができます。 おおきなもも 昔々、あるところにおじいさんとおばあさんが住んでいました。 おじいさんは山へしばかりに、おばあさんは川へ洗濯に行きました。 おばあさんが川で洗濯をしていると、なんと！川上の方からとってもとっても大きな桃が どんぶらこ～どんぶらこ～と、流れてくるではありません…

…！LSSです！！ 【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】 - Little Strange Software のコメント欄にて、 421miyako(id:m421miyako) いいですね。カーソルをあてると、四方八方に星が飛び散るなんていうのはどうでしょう？とんでもないこと言いだしてすみません。 とのコメントをいただきました^^ パッと思いつくのは、before要素やafter要素に★を置いて、その要素だけにtext-shad…

…！LSSです！！ 【CSSサンプル】ふりむきカーン【ほぼジョークｗ】 - Little Strange Software でoutlineのオーラが広がって消えていくものを作りましたが、 「text-shadowとanimationを使えば、文字がまとったオーラが動く様子が表現できるのでは？」 と、試してみました^^ text-shadowが霧散するサンプル コード ちょびっとコード解説 text-shadowが霧散するサンプル さぁ、夏のあつさを、ふきとばそう！ コード <…

…！LSSです！！ 【CSS】カタカタ自己主張する見出し（なのに照れ屋さん） - Little Strange Software の３Dバージョンを作ってみました。 カタカタ自己主張する見出し・３Dバージョン コード カタカタする動きを指定している部分 あとがき カタカタ自己主張する見出し・３Dバージョン こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！ そして、ボックスにマウスカーソルをのせると、一瞬、見出しから黄色のオーラがｗ コード <style…

…このかっこいい演出をCSSに持ち込めないか？」と妙な方向に思考が向かってしまい…作ってみちゃいましたｗ ただ、Web閲覧中に不意に音が鳴るのを自分が良しと思わないため音はでませんが、その代わりにoutlineのアニメーションをつけています。（それカーンか？^^;） ふりむきカーン コード コード解説 振り向きカーンの魅力 ふりむきカーン ふりむきカーン ↑の傾いた四角にマウスカーソルをのせてみてください^^ コード <style><!--@keyframes knanm{0%…

…、とりあえずデザインCSSをちょっと変更しました。 あと、ふと思いついた事を試してみたりも。 デザインCSSに追加したコード 月別アーカイブ埋め込み 注目記事埋め込み モジュール非表示 デザインCSSに追加したコード コード .hatena-module{border:3px inset #dddddd;border-radius:10px;margin:6px 6px 26px 6px;padding:10px;background-image:linear-gradien…

…e Strange Software とりあえず調べてみただけｗ ここから、CSSもしくはJavaScriptで表示切り替え部分を作る事はできそうです^^ 作る際には、「そこを操作すると、表示を切り替えられる」事を誰にでもわかってもらえるようなデザインにしなくちゃですね！ …という事を、今日の conasaji.hatenablog.com さじさん(id:conasaji)の記事を読んで思ったのでしたｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 毎日あっついですね！ ブログの中だけでも、気持ち涼しくなるようなグラデーションを３種、考えてみました^^ 普通に四角が並んでいる感じ 斜めに幾重にも筋が走ってる感じ 放射状に波うってる感じ おまけ：記事限定で背景を変更 普通に四角が並んでいる感じ 普通に四角が並んでいる感じ。 コード <div style="background-image: linear-gradient(135deg,#bbbbff,#eeeeff,#bbbbff); backgr…

どうも！LSSです！！ に続き、 の「戦慄！」もアニメーション化してみました。 サンプル コード あとがき サンプル 戦慄！ コード <style><!--@keyframes snrtanm{0%{background-position:0px 0px;}60%{background-position:120px -270px;}100%{background-position:60px -540px;}}.snrta{font-size: 100px;font-weigh…

…</p> 元ネタ 【CSS】テキスト装飾によく使うプロパティ おさらいとサンプル集 その更に元ネタ（グラデーション文字についての解説つき）は 【CSS】グラデーション文字を作ってみました！ このグラデーション文字、「背景として指定したグラデーションを、文字部分のみに表示させるようにする」というものでした。 そして今回思いついたのは、「その背景として指定したものをキーフレームアニメーションで動かせるのかな？」というものでしたが、すんなり動いてくれましたね^^ ※元の「きんきらき…

どうも！LSSです！！ このブログで、 などの「最初は表示されていないけど、ユーザーアクションによって表示される隠し文字」ネタを、これまでもいくつかご紹介してきました。 今回の記事のものも、その一種と言えそうですが、ちょっと変わり種です^^ ちょっと言いにくい話なんですけど… コード ざっくりコード解説 あとがき ちょっと言いにくい話なんですけど… ちょっと、言いにくい話なんですけど、実は…ただこれだけの小ネタなんですよね。あえてぼかしておきますが、知りたい人はボカシ部分にマ…

…Sです！！ 以前、【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集という、それまでに作成したCSSサンプルのまとめ記事を書いていました。 気づけばそれから１年近く経ち、その間にもちょこちょこ作っていたので、その後に作ったものをまとめてみます！ …と言いつつ、見てみると結構作ってるものがバラバラで^^; 書き出すと「まとまりのないまとめ」になりそうだったので、様々なネタの中から 「アニメーションするボックス（枠）」 のまとめ記事とします^^ マウスカーソルに反応…