…たところで、春っぽいCSSネタを考えてみました！ サンプル コード CSSセレクタについて 文字に対する指定 サンプル 桜の花、開く季節に… コード <style>.hnbr{border-radius:10px;padding:10px;border:6px groove #ffcccc;background-image:radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00),repeating-conic-gradient(f…

…！LSSです！！ 【CSS】水滴・改変【小ネタ続編】 の記事に、 あとか(id:c089818) ちょっと訪問できなかった間に、楽しいことができてますねー！色とりどりのコーナーは押すと、それぞれから音が鳴りそうで、試しに音量を上げちゃいました😅 とのコメントをいただきました。 なるほど、子ども向けのおもちゃの楽器にありそうな感じですね^^ そして、WebAudioAPIを使えば、JavaScriptによってWebページ上で音を鳴らす事ができます。 というわけで作ってみちゃいま…

…のを、「HTML5/CSS」 80%「JavaScript」 10%「Androidアプリ開発」 10% としてみたり。 これまでは、はてなブログの「アクセス解析」画面でもブログ村は全く現れなかったのですが、これで少しは顔を出したりするのか？どうなんでしょねｗ かつてブロ友に、にほんブログ村をガチった事で凄いPVを叩きだした方がおられ（ただし、その方のコンテンツ自体に凄い吸引力があったのも作用していると思われます）ましたが、はたして…？ ってなとこで、今回はこのへんで！ 次回…

…！LSSです！！ 【CSS】水滴【小ネタ】 【CSS】水滴・改変【小ネタ続編】 と続けた水滴ネタですが、実は元々作ろうとしていたものの派生でした。 今回、その元々作ろうとしていたものができたのでお披露目します^^ 透過ボタン コード 透過なので… ボタンの動きの是非 何も起こらないボタン 透過ボタン ボタン コード <style>.aquabtn{position:relative;display:inline-block;width:150px;height:60px;}.…

…！LSSです！！ 【CSS】水滴【小ネタ】 - Little Strange Software のコメント欄に様々なアイデアをいただき、ありがとうございます^^ コメント欄で回答させていただいた分もありますが、他にもそれぞれコード修正を行って調整してみたので、記事にしてみました。 以下、コード中でそれぞれクラス名を変えていたり、divタグの中の文言を削ったりしていますが、それ以外の変更点を色付き文字にしています。 画像入り 色とりどり ななほしてんとう 他にもいただいたアイデ…

…SSです！！ 今日はCSS小ネタです。 水滴 コード CSSで水滴を描いてみました 水滴 クリックしてみてね コード <style>.pichon{width:150px;height:100px;background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000);border-radius:50%/70% 70% …

…も！LSSです！！ CSSの3D表現とkeyframesによるアニメーション。組み合わせると色々面白い動きを作る事ができます^^ が、関連するプロパティが多く、またそれぞれを「どうすれば どうなるか」が分かりにくいところもあり、これから学ぼう、あるいは自分で考えた動きをさせてみようとされる方に「高いハードル」となっているのではないでしょうか。 そこで、微力ながら「手軽に設定変更でき、その設定がどう動きに反映されるのかを即時に見られるツール」を作成してみました。 CSS3Dアニ…

…ず上の写真が、磯上通でもほぼ生田川に近い位置（先に桜を撮った場所からずーっと南下したところ）。 次の写真が、そこから北西方向に移動したところ。（上の高架がポートライナーです） 生田川沿いの店舗で食べてきましたが、２店舗めで「丸亀製麺のハシゴしようかな」と思いながら、結局やめときましたｗ …ちょっとJavaScriptとCSSでネタを作ろうとしていましたが、ちょっと時間かかりそうだったので急遽日記ネタです。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 普段、それほど花を愛でる事もないのですが、それでも『桜』は気になります。 最近、有給消化期間が続き、体を動かす事が減ったのでちょこちょこ散歩に出かけたりしていますが、その途中で桜の木がどうなってるか見てきました。 桜 このブログを「桜」で記事検索してみる まぁいくらなんでも 桜 新神戸駅から流れている生田川。 南北に流れるその川沿いは桜の植えられた公園がずーっと続いているのですが、その途中に「橋の手すりにもうくっついちゃってるほどのところに枝がきている…

…す！！ 今回はまた、CSS小ネタです。 ブランコ コード あとがき ブランコ ブランコ ←のように、ゆらゆら揺れます。 文章は普通に書くと、ブランコの右に並ぶ事になります。 これは「float:left;」をブランコに設定しているためで、その記述を削除すると文章はブランコの下に来る事になります。 コード <style>@keyframes swinga{0%{transform:rotateX(60deg);}100%{transform:rotateX(-60deg);}}…

…ってきます。 それをCSSの3D表現でやってみたらどうなるかな？と思い、挑戦してみました！ フラフープ コード 人…？ と、作ってはみたものの… 追記 フラフープ コード <style>@keyframes hula{0%{transform:translateY(30px) rotateX(80deg) rotateZ(0deg);}50%{transform:translateY(30px) rotateX(87deg) rotateZ(360deg);}100%{tra…

…です！！ 今回はまたCSSサンプルです。 animationと3Dを使い、目立たせる効果を作ってみました^^ サンプル コード コード書き換えについて おまけ サンプル 本日のハイライト NEW!! コード <style>@keyframes grgra{0%,30%{transform:rotateX(-5deg) rotateY(360deg);}100%{transform:rotateX(-5deg) rotateY(0deg);}}.grwk0{position:r…

…で、ひなまつりネタのCSSです！ 菱餅の区切り線 コード ひなまつり要素のうちで、CSSネタにしやすいのは… 菱餅の区切り線 コード <style>.hishimochi{height:45px;background-image:conic-gradient(from 120deg at 50% 66%,#ff8888 120deg,#ff888800 120deg),conic-gradient(from 300deg at 50% 29%,#ff8888 120deg,#…

…またしても、区切り線CSSネタです。 鎖の区切り線 コード コードが２種ありますが、 【＋α】区切り線ではなく背景にしてみると…？ 終わりに 鎖の区切り線 コード <style>.chain{height:20px;background:radial-gradient(10px 10px at 50% 0%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px…

どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com で、ページ内の区切りとして使用できるような区切り線をデザインしました。 ↑こういうのですね。 これはジグザグになった３本セットの線が交差しているデザインでしたが、これが波線だったら？というのを今回挑戦してみました^^ 赤と青の波線 コード ４つのradial-gradient 赤と青の波線 コード <style>.wavehr{height:30px;background:rad…

…も！LSSです！！ CSS小ネタとして、区切り線を作ってみました。 赤と青の区切り線 コード 区切り線代わりに使用できますね 赤と青の線ですが、本当は… 赤と青の区切り線 コード <style>.yokosen{height:30px;background:linear-gradient(30deg,#eeaaaa00 38%,#eeaaaaff 42%,#eeaaaa00 46%,#eeaaaaff 50%,#eeaaaa00 54%,#eeaaaaff 58%,#eeaa…

…も！LSSです！！ CSSで色々やってみたい、と思った際に、 HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE) 作者:森 史憲,藤本 壱 技術評論社 Amazon ↑こういう本を眺めています。 基本から教えてくれる入門書、というわけではなく、CSSで使えるプロパティにどういうものがあるか、どのように使うか、がどっさり掲載されている辞書的な本ですね^^ これ面白そう、って思ったら試してみて、使い方や組み合わせを考える感じです。 と…

…さわしそうな…例えばCSSやJavaScriptネタも混在していたりします（自信が無かったんでしょうね）。 さじ(id:conasaji) 「駄文中の駄文」のなかでも究極の駄文とカジュアルな駄文が自分は好みです（笑） 読みふけり始めたのは、さじさんにいただいたコメントからですが…どれが究極でどれがカジュアルなのかは…謎ですｗ いくつか自分で面白かったものを挙げてみようかと思ったら… スパイダーマン、といえば？ - Little Strange Software 論理パズル「正…

…うかとしています。 CSSやJavaScriptに力を入れている感じになっていますが、「カテゴリ」に入れたり入れなかったり。 「カテゴリ」ってアレです。はてなブログの機能で、サイドバー（ＰＣで見た時は画面右、スマホで見た時は記事の下）にある、ブログ記事のジャンルを分けたものですね。 新たに読者になっていただいた方も増えてきたところで、ここらで少し「推しカテゴリ」をご紹介してみます。 学びはじめたい方向け「超入門のさわりだけ」 ブログで使えるコードが欲しい、でも人と同じじゃなん…

…ものなので、aタグをCSS装飾でボタン風に見せかけるほうがスマートですね。（デザインの自由も効く、という利点もあります^^） という事で、今回は「マウスカーソルがボタンに乗った時」「ボタンをクリックした時」に見た目が変化するボタン風のリンクの作り方をご紹介します。 リンクボタン CSS版 コード コード概要 なので、作り方としては リンクボタン CSS版 クリックするのはこちらです！ コード <style>.linkbtn{border:1px solid black;bor…

…たのブログやWebサイトのHTMLに挿入する事で使用できます^^ コード というものを作ってみたのですが バレンタイン記事に使うのに良さそう…なものを、バレンタイン当日に公開するという、完全に時期を逸した感じになってしまいましたｗ と、そもそもCSSで板チョコを作ろうと思ったのが、 non704.hatenablog.com norikoさん(id:non704)の↑の今日の記事を見たからだったりします。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…勝手…にとらわれず、CSSアニメーションの動きを見て楽しむ感じ？ 跳ねる画像 跳ねるボール二次元版 ブロック崩し風（ブロックはないけどｗ） あとがき 跳ねる画像 【CSS】跳ねるボール【多重アニメーションの実験】 から、枠をとっぱらい、ボールの代わりに画像ファイルを跳ねさせるサンプルです。 コード <style>@keyframes boundimga1{0%{width:100px;}100%{width:100%;}}@keyframes boundimga2{0%{ba…

…！LSSです！！ 【CSS】跳ねるボール【多重アニメーションの実験】 - Little Strange Software に、さじさんからいただいたコメント、 さじ(id:conasaji) 円を足しつつ、タイミングずらしたら不思議な何かができそうです。（何かはわからないw）昨日ちょっと知りたいことがありましてCSSとはてなでググったらLSSさんの記事とフジグチさんの記事がヒットしました（笑）本文にリンクのボタンを入れたいんですが、そんな記事ありませんでしたっけ？ CSS装飾…

どうも！LSSです！！ なんとなく「２つのkeyframesアニメーションで、２つめの動きが１つめの動きの状態に影響されて変化するようなもの」を試してみたい と思いたち、作ってみると こういうものができました。 跳ねるボール コード ２つのアニメーション あとがき 跳ねるボール 跳ねるボール コード <style>@keyframes dblanm1{0%{width:135px;}100%{width:100%;}}@keyframes dblanm2{0%{backgro…

…となく雰囲気だけ」のCSSアニメーション案で、雰囲気だけでどんな見た目にするかとか思いつかずにいる案があったりします。 その雰囲気というのも「ウィーン、ガシャン、って感じの」というだけｗ「動」と「静」の組み合わせでメカっぽい動き…ですね。 どんな見た目にするかアイデアが浮かびませんが、なんとなく雰囲気だけ、お伝えしてみようと試みる記事です。 ウィーン、ガシャン。 コード 概要 ウィーン、ガシャン。 なんだかよくわからないものを作ってみました。いやぁ、以前からなんとなく「ウィー…

… bottom;」とCSSを当ててやると… ↑このように、無事画像と枠がピッタリあいます！！ ちなみに「bottom」の部分は「top」でも「middle」でも同様に解決します^^ あとがき いやぁ…まさかの謎仕様に時間を取られてしまいました^^;;;;; 15パズル画像版はとりあえず遊べるところまで出来ていて、この隙間問題に起因するズレも治りましたが、クリア時の演出や＋α要素を足したいので、近日公開って感じです^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願…

どうも！LSSです！！ もう何か月も前の記事ですが、 little-strange.hatenablog.com で頭を悩ませていた問題が解決しました！ 画像の16分割 コード background-positionの%指定の特異性 16分割する意味 画像の16分割 画像を16分割した上で、borderで各枠に盛り上がったような効果を書けています。 これ、16個のdivタグで一つ一つ、16分割した各画像を割り当てています。（画像の縦横サイズを得るために、その下に一枚絵も隠され…

…！LSSです！！ 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン その１ バクダン その２ 雲型の枠 その４ その他の調整について あとがき バクダン その１ バクダン その１ちなみに、このトゲの数は幅・高さに応じて変化します。サイズによっては稀に変なスキマができてしまう事も？？ コード <style><!--.bakudan1{border:30px s…

どうも！LSSです！！ 昨日、少しこぼしましたが、 border-image でやってみたい事があり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^; で、「コードで仮想的に画像を作る」方法としては、インラインSVGを用いる方法があり、 little-strange.hatenablog.com で background-image になら当ててみた事がありました。 それを border-image に応用する…

…log.com で、CSSフィルターのdrop-shadowを使ってみた事がありました。 CSSフィルターは他にも色々あり、それを用いて little-strange.hatenablog.com ↑こんな事も試してみた事がありました。 今回はまたdrop-shadowを使い、他のshadow関連プロパティであるtext-shadowやbox-shadowとはまた違った影効果を試してみます。 影つき吹き出し コード 例えばbox-shadowでやると、こうなります 例えばte…