hukunekoxのブックマーク - はてなブックマーク

写真を横スクロールで見せる - もうひとつのブログ

写真を横にスクロール一枚目の写真の右側にあと２枚写真が載せてあります。写真の下にスクロールバーが表示されていますので、それを右に動かしてください。（スマホは、最初の一枚をタップするとスクロールバーが表示されます）つぼみから開くまで。^^ ブログに載せる手順使うコード <style> .photo-scroll { overflow-x: scroll; white-space: nowrap; } .photo-scroll img { display: inline-block; height: 300px; margin-right: 20px; } </style> <div class="photo-scroll"> <img src="photo1.jpg" /> <img src="photo2.jpg" /> <img src="photo3.jpg" /> </d

hukunekox 2023/04/14

蕾から、花弁たっぷり〜😄花はいろんな顔を持ってますね〜🌼🌼🌼

リンク

画像の下半分が出現 - もうひとつのブログ

久し振りに・・・今夜のＬＳＳさんのコードでちょっと作りました。写真にマウスカーソルを載せて見て下さい。エノコログサの紅葉も可愛いものです。そしてマクロレンズで見ると面白い表情を見せてくれますね。(^^) 手元にマクロ写真がこれしかないのですが、このままではちょっと面白くない。もっと面白い見せ方もありそうです・・・すぐには思いつきませんが。(^^;)

hukunekox 2022/09/29

別な画像も面白いですね〜😆🌸

リンク

土砂降り - もうひとつのブログ

神戸で土砂降り、最近は土砂降りのレベルが凄過ぎますから怖いです。雨の地方の皆さんも気を付けて下さいね。昨日LSSさんが作られた「雨降りCSSコード育成ツール」コード自体は何も弄らずそのまま使ってみました。（土砂降りは弄らないのが一番綺麗だったのです）作成の流れ）・LSSさんのコードをはてなブログの「HTML編集」に貼り付けます。・上に載せる画像を作ります。画像は280×280pxで、雨が見えるように入れる画像以外の部分は透明にして「PNG」で保存。・HTML編集画面に入れてもいいですが、編集画面でコードの上に普通に入れる方が楽です。動きを変えたものを考えてみたいですが、昨日流れ星を作ったので他になかなか浮かびません。(^^;)

hukunekox 2022/07/12

カエルさんだ！大雨なりましたね☺️

リンク

願いを込めて - もうひとつのブログ

こんなに早いと思わず・・・ LSSさんの昨日の雨降りのコードを弄っていたら（三角関数は使ってません！）、夜には「雨降りCSS育成作成ツール」を出して下さいました。バーをスライドするだけで好きなCSSコードを作ってくれると言う優れものです。こんなに早いなら、待っていれば良かった・・・(^^;) まさかこんなに早く作って下さると思わず自己流で弄った拙い流れ星。(^^;) 楽しいコードを惜しげもなく披露してさるお礼は作品を作ることだけしか出来ないので載せておきます。早すぎて願い事する間がないかな？

hukunekox 2022/07/12

面白いですよね〜😆願い星作れるなんて、高度ですよね〜😆LSS先生はもちろん、nonさん、素晴らしいなり😆🌸美味しいパフェが食べられますように、、←願い事⭐️

リンク

７月４日に生まれて - もうひとつのブログ

誕生日の７月４日はアメリカの独立記念日。「７月４日に生まれて」という映画あり、トム・クルーズ主演の戦争や軍隊の物語なので、見ないでいたのですが、見てみようかと思います。アメリカ中がこの日を祝って大騒ぎするこの日が何だか嬉しかったものです。いい時代でした。 amazonより背景模様育成ツールで作ったものを汚しに使うこのコードも面白い。【CSS】汚しグラデーション【実験】 - Little Strange Software

hukunekox 2022/07/05

見たはずなのに、、、内容忘れてる〜戦争の話しでしたよね😅トムクルーズ素敵

リンク

めくるカードの表裏に画像を入れる - もうひとつのブログ

めくるカードはめくると文字でしたが、表裏共に画像の場合は・・・ <style><!-- .card{ position:relative; perspective:500px; } .fuda{ position:absolute; display:inline-block; transition:2s; backface-visibility:hidden; border-radius:15px; } .csize{ width:200px; height:300px; } #omote{ transf orm:rotateY(180deg); background:white; border:2px solid black; background:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/aoisora3/20220704/

hukunekox 2022/07/04

画像同士も良いですね〜😆⭐️台風きたら、今度は雨に濡れた紫陽花とか見れるかな🎶

リンク

水面の波紋アニメーション - もうひとつのブログ

LSSさんのコードの波紋を自分の画像に載せるには・・・LSSさんのコメントから・background-colorの指定を削除・radial-gradientがカンマ区切りで並んでいるところの最後に「url(画像ファイルURL)」を追加・keyframesの0%時・100%時、それぞれの内容の最後に「,100% 100%」を追加自分の画像に波紋を載せるコード <style> @keyframes suimena{ 0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%,100% 100%;} 100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%,100% 100%;} } .suimen{ height:100px; background-image: radial-gradie

hukunekox 2022/06/25

水面ですね☺️鯉が出てきそうな感じなり😆✨さすが仕事早いですね😲✨

リンク

カードをめくるー画像編 - もうひとつのブログ

LSSさんのカードをめくるその２は、画像を入れるためのコードではありませんでしたが、そこに無理やり画像を入れると・・・ ←これは画像です ↑下の余白が他の３つよりやや広くなります。このままでも楽しめますが・・・ちょっと気になります。 LSSさんにお聞きしたら・・・画像入れるためのコードを教えて下さいました。・・・何もかも凄すぎます、LSSさんは。画像を入れるためのコード <style><!-- .card{ position:relative; perspective:500px; } .fuda{ position:absolute; display:inline-block; transition:2s; backface-visibility:hidden; border-radius:15px; } .csize{ width:150px; height:200px; } #

hukunekox 2022/06/23

めくれた❣️裏側に、nonさんの俳句とか短歌とか詩みたいのあると、とても素敵に使えますね😆✨✨✨

リンク

カードをめくる - もうひとつのブログ

画像を最初の場面に入れるのは「omote」がひっくり返した文章になるので、「ura」に画像のURLを入れます。 <div class="card csize"> <input id="tg01" style="display: none;" type="checkbox" /> <label id="omote" class="fuda csize" for="tg01">めくると出てくる文章</label> <label id="ura" class="fuda csize" for="tg01"></label> </div> ↑　この><の間です。入れた後、「hatena-fotolife」は必ず削除します。（hatena-fotolifeを残してあると、クリックしてもめくれません） --></style> <div class="card csize"> <input id="