どうも！LSSです！！ 今日は、CSSでアニメーションをやってみます！ 先日、transitionを使ったアニメーションをやりましたが、あの場合は 「なんらかのユーザー操作を受けてスタートする」 事になりますが、今回は何もしなくても最初から勝手に動いているものを作ります。 飛び出し注意！ ゆらゆら ぴょんぴょん 解説 おまけ：汎用性を無視してみる！ 飛び出し注意！ サンプル このお値段、目ン玉飛び出ますよね~ コード <style><!-- @keyframes sc3dk{ from{ transform:scale3d(1,1,1); } to{ transform:scale3d(1.5,1.5,1.5); } } .sc3d{ display:inline-block; animation:sc3dk 0.5s ease 0s infinite alternate; } --></

どうも！LSSです！ …っといきなりの袋文字を使ってみましたｗ 今回は、こういう「袋文字」を実現するコードを作れるツールを作ってみました！ 使い方 色について 注意点 使い方 各項目を設定すると、表示サンプルとコード部分が設定に応じたものに変わります^^ 「コード」の内容をコピーして、はてなブログの「HTML編集」 画面で貼り付けると、その記事内に表示サンプルと同じ袋文字が出現しますよ！ 色について 袋部分の色と、文字の色、の２か所、色を設定する項目があります。 ここに入力する内容は、 red blue yellow などの色名でも、 hsl(0,100%,50%) みたいなHSL形式でも、 #FF0000 みたいなRGB形式でも 、どれでもOKです！ 色コード探しについては、HSL版カラーパレット や、4クリックRGBカラーパレットで見つける事ができます。 注意点 袋の幅、ぼかし、フォン

今週のお題「好きな公園」 どうも！LSSです！！ 今週の はてなブログのお題、「好きな公園」だそうで。 神戸在住のLSSですが、「好きな公園」を挙げると…はるか遠い地「横浜」の「臨港パーク」になります。 臨港パーク 近くにはこんなのも 五星戦隊ダイレンジャー 臨港パーク …といっても、最後に訪れたのもはるか昔の話。 スマホデータを代々引き継いでいるので、割と古い写真も残っていたりしますが、こちら「2013年8月13日」の写真ですｗ 神戸と横浜にはよく似たところがあって…臨港パーク、神戸でいうとメリケンパークでしょうか。 何故か、臨港パークのほうが好きです。 近くにはこんなのも 「ぷかりさん橋」、中身はちょっとお高めのレストランだったような。 www.icyokohama-grand.com そもそもは、これを探しに行ったのがきっかけでした。 五星戦隊ダイレンジャー というのも、スーパー戦隊

今週のお題「試験の思い出」 どうも！LSSです！！ 今回は、はてなブログお題記事です。 「試験の思い出」ですか…。 今年４回目の年男となるLSS。学生時代の試験の思い出を思い出そうにも、遠すぎる過去で、特に記憶に残るようなエピソードもないんですねｗ 高校時代に授業に全くついていけず、物理の小テストで０点を取った事がある、というのが思い出と言えば思い出ｗ って、それは「試験結果の思い出」ですねｗ ここではなんとなく、約２０年前に今の職場に入った時の思い出でも語ってみます。 前職を退職後、とりあえず派遣会社に登録 まず、派遣会社のスキルテストから で、派遣会社の営業さんと会社に向かう ところが… それから２０年 前職を退職後、とりあえず派遣会社に登録 してみました。 前職を退職した際には「このまま、ここに通い続けるぐらいなら野垂れ死んだ方がマシだ！」ぐらいの気持ちで、次の就職先を考えないまま退

コード どうも！LSSです！！ 「ハートマーク背景コード生成ツール」を作ってみました。 使い方 その他のコード利用方法 あと一ケ月ほどでバレンタインデー 使い方 「ランダム設定」ボタン、 表示サンプル、 ハートの色１、ハートの色２、背景の色、ハートサイズ（比率）、繰り返しサイズ、 コード が並んでいます。 「ハートの色１、ハートの色２、背景の色、ハートサイズ（比率）、繰り返しサイズ」を調節する事で、「表示サンプル」が変化し、その状態のものを表示するためのコードが「コード」部分に出力されます。 （「ハートサイズ（比率）」は「繰り返しサイズ」の中でのハートのサイズ比です。） また、一番上の「ランダム設定」ボタンを押すと、「ハートの色１、ハートの色２、背景の色、ハートサイズ（比率）、繰り返しサイズ」がランダムに設定されます。 「ランダム設定」ボタンを何度か押して、好みの状態に近いものが出てきたら

どうも！LSSです！！ 【CSS】preserve-3dを使って直方体を描いてみたら案の定大変だった話 で、とりあえず直方体をCSSで描いてみました。 要領はなんとか分かったものの、サイズ変更時のtranslateZの値の指定が少々面倒です^^; という事で、CSSが分からなくても、3Dの概念が分からなくても、画面上でスライダーをいじるだけで「直方体が描けるコード」を出力するツールをJavaScriptで作ってみました！ 3D直方体コード生成ツール 使い方 貼り付けた後のコードの修正について あとがき 3D直方体コード生成ツール コード 使い方 表示サンプル 直方体の傾きを示す「X:-20deg Y:-20deg Z:0deg」という表示 X軸回転、Y軸回転、Z軸回転に対応した３つのスライダー 直方体のサイズを示す「幅:200px 高さ:100px 厚さ:50px」という表示 幅、高さ、厚

どうも！LSSです！！ 先日の記事、 を「なるべくコードを増やさずに」多重化してみました。 （コレジャナイ感ありありかもｗ） 花火のアニメーション　その２ コード 前回からの改変点 animationプロパティは複合プロパティです 省略したanimation-delayは別に指定しています 前回 書かなかった、花火風のドットについて おわりに おまけ 花火のアニメーション　その２ . . . . . コード <style><!-- @keyframes hnb{ 0%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted darkyellow;top:200px;left:150px;} 50%{border-radius: 1px; width: 2px; height: 2px; border: 6px dott

どうも！LSSです！！ 以前、【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集という、それまでに作成したCSSサンプルのまとめ記事を書いていました。 気づけばそれから１年近く経ち、その間にもちょこちょこ作っていたので、その後に作ったものをまとめてみます！ …と言いつつ、見てみると結構作ってるものがバラバラで^^; 書き出すと「まとまりのないまとめ」になりそうだったので、様々なネタの中から 「アニメーションするボックス（枠）」 のまとめ記事とします^^ マウスカーソルに反応するタイプ カードをめくる　その２ 光が斜めに横切るバー たたっ斬る！ マウスカーソルで枠線の太さが変わる演出 丸から四角に変形するボックス カーソルを乗せると動くグラデーションバー 勝手に動いてるタイプ カタカタ自己主張する見出し 背景多重アニメーション 鹿威し（ししおどし）のように揺れる見出し ２つの四

どうも！LSSです！！ 先日の記事、 が色々と興味を持っていただけたようで^^ tn198403s.hatenablog.jp カメさん(id:tn198403s)は早々にコードコピペを試していただいた上に、色を変えたり記載順を変えたりして、絵本仕立てにまでなりました！ arsinput.hatenablog.jp アーシさん(id:arshii)はググって他のSVG要素も試みておられます。 先を越された！！ｗｗｗ カメさん、アーシさん、言及ありがとうございます^^ というわけで、LSSも続きをやってみる事にしました！ まず、こないだ作った画像 文字を入れてみました 試しにCSSプロパティを足して… 線を引いてみる ベジェ曲線 三次ベジェ曲線もやってみます 作った波線パスに沿って文字を入れる大技！ あとがき まず、こないだ作った画像 コード <svg xmlns="http://www.w

どうも！LSSです！！ サンプル コード コード解説 アニメーションの内容となる部分 ボックスを装飾している部分 見出し部分 マウスカーソルが乗った時の変化 ボックス内の文章 アレンジしやすいポイントをまとめると サンプル こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！ …が、自己主張しているわりにボックスにマウスカーソルが乗ると、赤面したようにピンク色のマーカーが入りますｗ コード <style><!-- @keyframes katakata{ 0%{transform:rotate(-10deg);} 80%{transform:rotate(-10deg);} 85%{transform:rotate(10deg);} 90%{transform:rotate(-10deg);} 95%{transform:rotate(10deg);} 100%{tr

どうも！LSSです！！ また、なんか謎のCSSサンプルを作ってみました。 カーソルを載せると動くグラデーションバー コード 色変更・移動量変更・変化時間変更について あとがき カーソルを載せると動くグラデーションバー カーソルを載せると動くグラデーションバー ↑にマウスカーソルを載せてみてください。（スマホの方はタップ） コード <style><!-- .grdbar{ --gc1:#aaaaee; --gc2:#bbbbee; background-image:repeating-linear-gradient(135deg,var(--gc1) 0%,var(--gc1) 3%,var(--gc2) 6%,var(--gc1) 12%); background-position:3000px 0px; border-radius:5px; padding:0px 10px; trans

どうも！LSSです！！ 昨日の記事、 に関する、余談なんですが…。 なんとなく…ハンバーガーメニューについて考えているうちに、 【CSS】丸から四角に変形するボックス - Little Strange Software は、「ビッグマックにしようか、てりやきバーガーにしようか」って考えてたわけじゃなくて、あれです。（ちなみにビッグマックが好きですｗ） スマホアプリなんかでたまに見かける、「≡」みたいなのが右上にあって、それをタップするとメニューが出てくる機能ですｗ 余談の余談ですが、≡って「ごうどう」で変換すると出てくるんですね！ 詳しくは、 note.com こんなノートを見つけました^^ あと、ついでにサンプルにちょっと手を加えてみました。 ここに適当に文章を書きます。 brタグによる改行もできます。 この部分の文章は好きに変更できます！ 左に配置するとこうなります borderでちょ

どうも！LSSです！！ 例えばこんなボタンっぽいの 例えば、なんですが、LSSが↑こんなCSSサンプルを作ってみました。 そして、「↓これがコードです」と言って、 コード <div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -1px -1px 0px yellowgreen, 1px 1px 0px greenyellow;">例えばこん