スイングドアのテーマではちょっと合わないと思い、これもお蔵入り。(^^;) ・・・が、今日娘と買い物に行ったら、お店のドアが今日の雨風でバタンバタン。 おおお、こちらに出してみるかな・・・と、小樽の運河です。(^^) @keyframes brbr{ 0%{transform:rot…

以前作った使いまわし画像なので、再度こちらで。(^^;) 画像を作るのは大変なので、７月だったかのＣＳＳコードに作った画像ですから覚えておられるかも。(^^;) この表情がジャンプできない感じが出てるかな？ @keyframes rzmsa{ 0%,12.5%,37.5%,50%,62.5%,1…

久し振りに・・・ 今夜のＬＳＳさんのコードでちょっと作りました。 写真にマウスカーソルを載せて見て下さい。 .halfpic{ position:relative; width:280px; height:400px; transform-style: preserve-3d; perspective:500px; } .halfpic div{ position:abso…

LSSさんの 【CSS・backgroundプロパティ】CSSお絵描き超入門！ 超が付いていたのに・・・(^^;) 「日々のこと」に２つ載せましたが、せっかく作ったので未完成ながら残りを２つこちらに載せておくことに。 ＊ linear-gradientで思うように線を引く難しさ＊ ２…

グラデーションを画像に替える方法 LSSさんの光の龍の作品から @keyframes stardragonx{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes stardragony{ 0%{background-position-y:0%;} 100%{background-position-y:100%;} } …

空を飛ぶ紙飛行機、飛んでいく帽子・・・いろいろ考えてみてもなかなか思い浮かばず、練習に「透過波紋」と組み合わせてみました。 @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes d3day{ 0%{background-…

地球の自転はありませんし、地球の周りの月もありませんが（笑）取り合えず今私に出来ることで。地球も太陽も画像は今一つですが。(^^;)火星など増やしても楽しいかもしれませんね。 このコードは他にもいろいろ楽しそうです。 @keyframes d3dax{ 0%{backgro…

LSSさんの流星群のコードは素晴らしくて・・・星を弄ったり、動きを弄ったりしましたが、やはり流星として使うにはLSSさんの元の数字が一番しっくりきました。 背景は普通は後ろ側に付きますが、この場合は透過して上に載せます。 １）大きさを決める この場…

まずは、ただ上に画像を載せただけですが・・・(^^;) とても素敵な流星群のコードです。 @keyframes stardusta{ 0%{background-position:0 0,5000px 0,0 0;} 100%{background-position:0 0,0 0,0 0;} } .stardust{ height:400px; width:300px; background-im…

シンプルな使い方だけですが、ウォーキングの前に「落下アニメーション」のコードをちょっと練習しておきました。 ホッピング・・・昭和です。(^^;) @keyframes rakka{ 0%{top:200px;} 50%,80%{top:100px;} 40%,60%,90%,100%{top:200px;} } .waku{ position:…

ひとつ前の「見出し・覚書」のブログに 「クリスマスツリーもこれでいいかも？って思いました」とコメント頂いたら・・・やりたくなります。 @keyframes twstara{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position:0px 0px,0px 0…

見出し 透過波紋を見出しに使うことを教わり、「article h2」を使うことによって、見出しが簡単になりました。 あちらのブログでは 「日々のこと」のブログでは伸縮する見出しで遊びました。 練習ブログですので、こちらでは「瞬く星座」でも遊んでみました…

やっと 歯が立たなかった応用編でしたが、LSSさんから セレクタの、articleの前のピリオドが不要です。（ピリオドをつけるとクラス名、#をつけるとID名、何もつけないとタグ名の指定となり、この場合は「articleタグ内のh2タグ」を対象とします） のコメント…

朝起きたら ・・・LSSさんのブログに書いたコメントにこんな言葉を返して頂いていました。 これが「タグひとつ、backgroundのみ」にこだわった事によるメリットで、「セレクタを.brwaveからarticle h2 に変更」「適宜!importantをつける」だけで応用できます…

朝起きて、LSSさんの新しいコードを見ると「小ネタ」（小ネタ好きです） 【CSS】透過波紋、中心位置変更【小ネタ】 - Little Strange Software 透過の波の中心位置を変えると言うコードが楽しくて、いろいろ遊んでこの海岸の波を作って下書きに。 朝の家事が…

LSSさんの透過波紋のCSSコードの時に作ってみたのですが、やはり水の方が綺麗だと思い、昨日の作品になりました。 動きを反対にしてみましたが・・・遠ざかるトンネルをイメージしたものの、「いろいろちょっと違うでしょう」は受け付けておりません。(^^;) …

昨夜のLSSさんのCSSコードもしみじみ見入って飽きることのないものでした。 【CSS】水滴落下、からの透過波紋 - Little Strange Software ほぼそのままで、色を変え、サイズを変え、画像を入れる位しか出来ませんが、自分のレベルで練習しました、ちょっと子…

LSSさんの雨降りCSSコード生成ツール、斜めから縦にしたり横にしたり・・・(^^;) @keyframes rainya{ 0%{background-position:0px 0px,25px 25px,35px 10px,0px 0px;} 100%{background-position:-50px 10px,-25px 35px,-15px 20px,0px 0px;} } .rainy{ width…

神戸で土砂降り、最近は土砂降りのレベルが凄過ぎますから怖いです。雨の地方の皆さんも気を付けて下さいね。昨日LSSさんが作られた「雨降りCSSコード育成ツール」コード自体は何も弄らずそのまま使ってみました。（土砂降りは弄らないのが一番綺麗だったの…

こんなに早いと思わず・・・ LSSさんの昨日の雨降りのコードを弄っていたら（三角関数は使ってません！）、夜には「雨降りCSS育成作成ツール」を出して下さいました。 バーをスライドするだけで好きなCSSコードを作ってくれると言う優れものです。こんなに早…

今朝起きて、楽しそうだとテストサイトに有り合わせの写真でちょっと作ってみたつもりが・・・いつものブログにアップしてしまい、慌てて下書きに戻しました。(^^;) お試し中だったので、素材に合う写真が見つかったら再度挑戦することに。きっとどなたかご…

@keyframes twstara{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position:0px 0px,0px 0px,0px 300px;} } .twstar{ height:300px; width:300px; background-image: repeating-linear-gradient(45deg,black 0px 11px,transparent 15…

誕生日の７月４日はアメリカの独立記念日。「７月４日に生まれて」という映画あり、トム・クルーズ主演の戦争や軍隊の物語なので、見ないでいたのですが、見てみようかと思います。アメリカ中がこの日を祝って大騒ぎするこの日が何だか嬉しかったものです。…

一つの記事の中に２つのカードを載せるためには、２枚目のカードのclass名などいろいろと変えないといけません。ちょっとやってみました。これでいいのかな。 大師匠がご覧になったら、笑われるかもしれませんが・・・(^^;) 一枚目 二枚目 コード <style>

めくるカードはめくると文字でしたが、表裏共に画像の場合は・・・ <style>

LSSさんのコードの波紋を自分の画像に載せるには・・・LSSさんのコメントから ・background-colorの指定を削除 ・radial-gradientがカンマ区切りで並んでいるところの最後に「url(画像ファイルURL)」を追加 ・keyframesの0%時・100%時、それぞれの内容の最後…

LSSさんのカードをめくるその２は、画像を入れるためのコードではありませんでしたが、そこに無理やり画像を入れると・・・ ←これは画像です ↑下の余白が他の３つよりやや広くなります。このままでも楽しめますが・・・ちょっと気になります。 LSSさんにお聞…

画像を最初の場面に入れるのは「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」は…

ワクワクするコードを披露して下さるLSSさんへのお礼に作ってみました。 @keyframes bgca{ 0%,20%,100%{background:pink;} 25%,45%{background:lightblue;} 50%,70%{background:lightgreen;} 75%,95%{background:yellow;} } .bgc{ width: 300px; height: 300…

.rpcnc{ height:400px; background: conic-gradient(at 150px 10px,#dde2f7 89.9deg,#f8f8f800 90deg) 25px 0/160px 80px, conic-gradient(at 150px 10px,#dde2f7 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px, conic-gradient(at 150px 10px,#fce1d8 89.…