どうも！LSSです！！ CSSを知らなくてもなんとなく遊べる（？）、CSSパズル第三問です！ CSSパズル カテゴリーの記事一覧 - Little Strange Software CSSパズル　第三問！ 「現在のコード」について やっている事と言えば… 応用例 CSSパズル　第三問！ ２つの写真があります。 上が「お手本」で、下が「回答」です。 そのさらに下に、赤い枠線で囲んだコードがあり、その中にいくつかの選択肢が入っています。 選択肢を変更すると「回答」の表示がそのコードで生成したものに変化するので、「回答」を「お手本」と同じものになるよう、正しい選択肢を選ぶ、という出題です。 なお、選択肢を変更した際に、さらにその下にある「現在のコード」がその選択肢の場合のコードとなります。（つまり、その時点で表示されている「回答」のコードですね） 全ての選択肢が正しいものになり、「お手本」と「回

どうも！LSSです！！ CSSで表現されるものに「ドッグイヤー」と呼ばれるものがあります。 ちょうど紙の角を少し、45度に折ったような表現で、使われている例もCSSコードもあちこちで見かけます。 今回は「ピシッと折ったドッグイヤーではなく、ふんわりめくれたような表現」をradial-gradientで考えてみました。 ドッグイヤーもどき コード 欠点と対処法 ドッグイヤーもどき ドッグイヤーもどき コード <style> .dogy{ width:280px; height:280px; padding:10px; background-image: conic-gradient(from 180deg,#eeeedd 0deg 270deg,#eeeedd00 271deg), radial-gradient(50% 30%,#eeeedd 99%,#eeeedd00 100%), ra

どうも！LSSです！！ デジタルカメラやスマートフォンが普及した昨今。 フィルムカメラのように「フィルムの無駄」を気にせず、パシャパシャと気軽に撮影が楽しめるようになりましたね^^ それでも時々ふと、あの白いフチのある写真に懐かしさを覚えたりします。 スマホで撮影後に画像加工するのも手ですが、CSSなら画像はそのままでコードに少し手を加える事で、懐かしい白フチ写真を演出できます。 写真っぽい写真 コード 手順 その他の例：楕円 写真っぽい写真 コード はてなブログの「写真を投稿」機能で写真をアップロード・記事に挿入した後に、コードを付け足します。 <p style="border: 1px solid black; padding: 3%; box-shadow: 10px 10px 5px 0px gray;"><img style="display: block;" src="http

どうも！LSSです！！ これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ コード 使い方 色選択ボックスとスライダーのセットが９つ、並んでいます。 ここで指定された色がそのまま、「上から下に向かうlinear-gradient」に設定されたグラデーションが、下の枠に反映されます。 スライダーはそれぞれの位置指定（%）に該当します。 色選択やスライダーをいじると、リアルタイムに枠のグラデーションが変化し、またその状態のlinear-gradientのコードが表示されます。 CSSとしてこの生成されたコードを使用する場合は、 background-image:linear-gradient(なん

どうも！LSSです！！ 今回はCSS小ネタです。 CSSの3D表現を忘れそうになっていたので、個人的なリハビリにｗ ドアの向こうに コード 向こうの風景 ドアの向こうに コード <style> @keyframes brbr{ 0%{transform:rotateY(-95deg);} 100%{transform:rotateY(95deg);} } .waku{ position:relative; width:280px; height:200px; background:linear-gradient(#aaaaee,#eeeeee 80%,#aaeeaa 81%,#88aa88) 0 0/100% 100%; } .waku>div{ position:relative; width:100%; height:100%; transform-style:preserve-3d;

どうも！LSSです！！ little-strange.hatenablog.com ですが、やはり例として分かり辛かったですね^^; 伸び縮みしているのか、単に隠れているのかという辺りが特に。 画像を使ってみるにあたり、 little-strange.hatenablog.com で使った方法をまた用いてみました。 そして、勢いで２パターン作ったので公開します^^ お姫様のお辞儀かと思ったらやっぱりスクワット ノリノリの姫 あとがき お姫様のお辞儀かと思ったらやっぱりスクワット コード <style> @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } @keyframes testb{ 0%{top:0px;} 100%{top:100px;} } .test{ position:relative; width:280px;

どうも！LSSです！！ 画像の下半分がマウスホバーで出現 コード 枠サイズの調整 画像の指定 あとがき 画像の下半分がマウスホバーで出現 写真にマウスカーソルをのせてみてください（スマホの場合はタップ） コード <style> .halfpic{ position:relative; width:280px; height:400px; transform-style: preserve-3d; perspective:500px; } .halfpic div{ position:absolute; left:0; width:100%; height:50%; background-image:url('画像ファイルのURL'); background-size:100% 200%; background-repeat:no-repeat; } .halfpic div:nth-chi

どうも！LSSです！！ CSS小ネタとして、跳ねるボールを作ってみました。 と、ボールが跳ねるようなものはこれまでにも作っていましたが、 「着地して跳ね返る時に横長にひしゃげる」 という細かい芸を入れています。 跳ね続けるボールとfloat:left; コード 色々… 跳ね続けるボールとfloat:left; ボールが跳ね続けます。 そして、float:left;を指定しているため、それ以降の文章がこのように回り込むカタチになります。 float:left;の一行を削除すると、横に文章が並ぶ事がなくなります。 コード <style> @keyframes bnda{ 0%,100%{background-position:0 0;} 50%{background-position:0 100%;} 0%,47%,57%,100%{background-size:30px 30px;} 50

どうも！LSSです！！ 以前に、様々な「ページ（記事）内に文字を隠す」方法を書いていましたが、今回もそんなひとつ。 通常、Webページ内の要素（画像・段落など）はページ記述者が指定したサイズ（指定していなければデフォルトのサイズ）で固定されて表示されますが、CSSには 「ユーザー（読者）が自由にサイズ変更できるようにする」 という指定があります。 今回はそれを利用して「最初は指定したサイズで表示され、ユーザーがサイズ変更で大きくする事で中身が見えるようにする」コードです。 ※追記！スマホだと操作しづらかったり、出来なかったりする場合もあるようです。 試してみた範囲では、「Androidスマホ＋はてなアプリ→右下角を捉えにくいがなんとか」「iPhone＋はてなアプリ or Chrome or Safari→いずれも試みるもできず」 【JavaScript】iPhoneでも要素のリサイズ -

どうも！LSSです！！ 「CSSのkeyframesでリズミカルなアニメーションを作ろう」という試み、なんだかこんなのが出来ました。 謎リズムアニメーション コード なんなんでしょうね？これ 変更例 謎リズムアニメーション コード <style> @keyframes nazorzma{ 0%,87.6%,100%{background-position:0 0;} 12.5%,25%,37.5%{background-position:0 100%;} 37.6%,50%{background-position:100% 100%;} 62.5%,75%,87.5%{background-position:100% 0;} 0%,25%,50%,75%,100%{background-size:50% 50%;} 37.5%,87.5%{background-size:100% 50%;

どうも！LSSです！！ little-strange.hatenablog.com のバリエーション、もうひとつ考えていたものを公開します。 だんだん太くなる線 コード 文字関連の指定 かなり近いものを先にアレンジしていただいてたり^^ だんだん太くなる線 ちょっとアレンジ コード <div style="box-sizing: border-box; height: 200px; background: linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gradient(#ff00

どうも！LSSです！！ 以前に、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 でっかい下向き矢印！ コード コードを見やすく整形するとこんな感じ 画面幅に合わせて伸縮 でっかい下向き矢印！ コード <div style="height: 200px; background:linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gr

Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources.

どうも！LSSです！！ radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。 本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 もこもこの雲 コード <style> .crd{ width:300px; height:200px; padding:40px; background: radial-gradient(farthest-side at 50% 100%,transparent 94%,black 97%,transparent 100%) 30px 0/calc(33.3% - 20px) 30px no-repeat, radial-gradient(farthest-side at 50% 100%,transparent 94%,b

どうも！LSSです！！ ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな？という気がする今日この頃。 …そして、使えるんだかどうなんだか？な謎CSS「アニメーション区切り線」が出来ました^^; アニメーション区切り線 コード コード概要 余談：ニュートンじゃないゆりかご アニメーション区切り線 コード <style> @keyframes hrcrka{ 0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(50% + 20px),calc(50% + 40px);} 24%{background-position-x:0,calc(50% - 20px),50%

どうも！LSSです！！ CSSをいじっているうちに、また謎のアニメーションができました。 光の龍…？ コード 仕組み どうしてこうなった 光の龍…？ コード <style> @keyframes stardragonx{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes stardragony{ 0%{background-position-y:0%;} 100%{background-position-y:100%;} } .stardragon{ position:relative; height:200px; background-color:black; } .stardragon div{ position:absolute; top:0;left:0; width:100%;

どうも！LSSです！！ 先日、【CSS】流星群というCSSアニメーションネタを公開しました。 光の点が斜めに移動する、というものでしたが 残念なこと - 私の好きなバラとシェルティー の影響を受け、「尾を引いて線状になった流れ星」を自分なりに考えてみました^^ また流星群 コード 仕組み あとがき また流星群 コード <style> @keyframes shtstra{ 0%{background-position-y:0,100%;} 50%,100%{background-position-y:0,0%;} } @keyframes shtstrb{ 0%,10%{background-position-x:0px,100%;} 20%,30%{background-position-x:200px,100%;} 40%,50%{background-position-x:100px

どうも！LSSです！！ little-strange.hatenablog.com で、惑星の公転運動っぽい動きを作っていました。 が、あくまでも「疑似」の悲しさ、 little-strange.hatenablog.com と同じで「前後関係が表現できない」事から、例えば中央に太陽、動くのを地球とすると、重なると３Dではない事が露呈してしまうという欠点があります。 CSSには3D表現があるので、そちらを使えば良いのですが（そちらには球や曲面の表示が苦手という弱点もありますが）なんとか「疑似３D」のままで誤魔化せないか？試みてみました。 疑似３D 前後関係 コード HTML部分 外枠のCSS 他、３つのセレクタ keyframes内にz-indexの指定を追加 疑似３D 前後関係 地球（？）が太陽（？）の向こう側を回る時には隠れ、手前側を回る時には太陽を隠しています。 コード <style

どうも！LSSです！！ 【CSS】疑似３D【実験】 - Little Strange Software で、楕円（っぽい）動きで３D（っぽい）ものを表現してみました。 記事中で、「最初だけ発生する遅延を変更するとどうなるか」を書いていましたが、他に「横の動き」と「縦の動き＋サイズ変更」を指定する秒数を変えてみたらどうなるか？を試してみます。 2sと1.8s 2sと1s 2sと3s 2sと6s あとがき 2sと1.8s コード <style> @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes d3day{ 0%{background-position-y:0%;background-size:20px 20px;} 100%{background-pos