スクリーンショットやライブデモ・動画撮影で大事な情報を隠せる、CSS3を使った動的マスキング - SORACOM公式ブログ
こんにちは、ソラコムのテクノロジー・エバンジェリスト 松下(ニックネーム: Max)です。 エバンジェリストはセミナーや執筆を通じて、IoTの活用方法や最新事例を多くの人に知っていただく役割を担っており、資料作りでスクリーンショットを利用したり、セミナーでライブデモを行うことが多くあります。 ここでは、Webブラウザの「CSS3のフィルタ関数」を利用して、Webページ上の情報を動的に隠す(マスキング)する方法を解説します。IoTやSORACOMの話からは少し外れていますが、私(Max)がエバンジェリストとしての活動の際に得たことを「MaxのTips」として紹介し、皆さんにも役立てていただければと思います。 この方法を使うと、Webページを表示した時点で情報がマスキングされるため、スクリーンショット取得後の編集が不要になるだけでなく、ライブデモや動画撮影も安心して行うことができます。 例えば
Tailwind CSS for Railsを使って、NodeをインストールせずにTailwind CSS 3を導入する
Tailwind CSS for Railsを使って、NodeをインストールせずにTailwind CSS 3を導入する みなさんこんにちは。この記事はRuby on Rails Advent Calendar 2021の20日目の記事です。 20日は誰も埋めていなかったようなので（と言いつつもう日付も変わってしまっているのですが）、Tailwind CSS for Railsというgemについて書きます。 Tailwind CSSとRails Tailwind CSSは最近流行のCSSフレームワークで、Utility-Firstと呼ばれている思想に基づいています。これはある意味、従来のCSS設計のベストプラクティスの真逆を行くようなもので、class="flex items-baseline mt-4 mb-6 pb-6 border-b border-gray-200"みたいなスタイル
CSSで乗算がかけられる!!css3の新プロパティ「mix-blend-mode」でデザインの幅を広げよう!! | 株式会社ウェブ企画パートナーズ
ブラウザ対応状況に伴い、css3の「mix-blend-mode」を使い、テキストや画像にブレンドモードを適用しているサイトを多く見るようになってきました。 今回はその「mix-blend-mode」について使い方や実際の効果などをご紹介します。 ブレンドモードとは？ 普段からPhotoshopなどのグラフィックツールを活用している方にとってはお馴染みのブレンドモードですが、知らない方のためにブレンドモードについて説明します。 ブレンドモードは描画モードとも言い、PhotoshopやIllustratorなどのAdobe系のソフトで、昔からある機能の1つです。 ブレンドモードでは要素と要素を重ねた時の表現を指定することができます。重なる部分のコントラストを強めたり、弱めたり、暗くしたり、明るくしたり色を反転させたりと様々な効果をブレンドできます。 ブレンドモード：「乗算」 例を出してみまし
TIPS & NOTE 要素をふわっと出す、css3アニメーションで簡単エフェクト。 | Little Things
髪を切って、きのこになりました。秋です。 ページを読み込んだときに、コンテンツをふわっふわっと表示させたい。 最近よく見るあれをやってみます。 ふわっという動きはcss3のtransitionで時間を制御。 「effect-fade」と「effect-scroll」、2種類のcssアニメーションを用意してスクロールをトリガーにjsで切り替えます。 html ふわっふわっと表示させたい要素に「effect-fade」というclassを付与します。 ブロックまるごとふわっとさせたい <section class="effect-fade"> <h1>タイトル1</h1> <p>説明文1</p> </section> <section class="effect-fade"> <h1>タイトル2</h1> <p>説明文2</p> </section> <section class="effect
Tailwind CSS 3.0 alpha1〜2の注目の新機能（５選！）をご紹介！ - 虎の穴開発室ブログ
こんにちは、虎の穴ラボ Advent Calendar 2021 - Qiita 3日目の記事です。 2日目は「T.M」さんによる MetaworkでRails開発のデバッグをしてみよう！ でした。 4日目は「Y.S」さんが DenoのFFIでMySQLに接続する の記事を書かれる予定です。 はじめに Tailwind CSS v3.0 の alpha1 が 10/2、alpha2 が 11/8 に公開されました。 今回は、その中からよく使われそうな 注目の新機能を５つ厳選して、ご紹介しようと思います。 最新の Tailwind CSS がどのような機能を実装するか、興味がある方の参考になれば、、、と思います。 Tailwind CSS Ver3.0 は 12/9 (木) にリリースされる予定です。 🤞🥵 pic.twitter.com/f700zq04wh— Adam Wathan
【CSS】３種の背景画像を重ねて個別に動かすアニメーション - Little Strange Software
どうも！LSSです！！ mioさん(id:mio20100501)が、はてなブログの記事背景でダイバーが潜水するアニメーション背景に挑戦されていました。 美麗な画像で、潜水するダイバーの動きにとても迫力があります^^ mio20100501.hatenablog.com そこで、「潜水するダイバーと浮上するダイバーを同時に表示できるか」という話になったので、ちょっと作ってみました。 …ただし、こちらのこの記事ではLSSが適当に描いた画像を使用していますｗ コード 使用画像 表示サイズと移動量の話 余談 コード <style> @keyframes divers{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position:-800px 1600px,0px -800px,0px 0px;}/*ダイバー画
【ツール】CSS3Dアニメーションお試しツール【学習入門用】 - Little Strange Software
どうも！LSSです！！ CSSの3D表現とkeyframesによるアニメーション。 組み合わせると色々面白い動きを作る事ができます^^ が、関連するプロパティが多く、またそれぞれを「どうすれば どうなるか」が分かりにくいところもあり、これから学ぼう、あるいは自分で考えた動きをさせてみようとされる方に「高いハードル」となっているのではないでしょうか。 そこで、微力ながら「手軽に設定変更でき、その設定がどう動きに反映されるのかを即時に見られるツール」を作成してみました。 CSS3Dアニメーションお試しツール 使い方 選択項目について あとがき CSS3Dアニメーションお試しツール 黄色枠内の項目を変更できます。 <style> @keyframes kaitena{ 0%{transform:rotate(0deg);} 100%{transform:rotateX(deg);} } .wak
Tailwind CSS 3.4では、動的ビューポート単位のサポートが追加されたほか、親要素だけでなく子要素に基づいてスタイル設定を可能にする:has()疑似クラスのサポート、親から子のスタイルを設定する*バリアントの追加が行われている。 さらに、幅と高さを同時に設定するユーティリティsize-*、小さなセクションにおいてバランスの取れた見出しを実現するtext-wrap: balance、サブグリッドのサポート、min-width、max-width、min-heightスケールの拡張、不透明度スケールの拡張、grid-rows-*スケールの拡張、強制カラーモードのスタイルを調整するバリアントforced-colors、強制カラーモードのデザインへの影響を制御するユーティリティforced-color-adjust-autoおよびforces-color-adjust-noneが新たに加
WEBサイトがブラウザによって見え方が変わってしまうのを無くすリセットCSS（reset.css）。 リセットCSS（reset.css）と一言で言っても、ブラウザ同士の見え方だけを調整したもの、全てのタグをリセットさせるもの、単位が違うものなどなど、種類が多くあります。 そこで今回は、私の独断と偏見でまとめたおすすめのリセットCSS（reset.css）を紹介します。 destyle.css 個人的に一番よく使うのがこのdestyle.cssというリセットCSS（reset.css）。 このdestyle.cssは、h1タグだろうとpタグだろうと全部共通の大きさに設定されるリセットCSS（reset.css）。 全てが同じ大きさになるので、いちいちスタイリングする手間は増えますが、CSSで各タグの大きさ調整が柔軟に対応できるのでお気に入りのreset.cssです。 各タグの表示を紹介する
【CSS】3D直方体を改変した水槽…の作りかけ【途中経過】 - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com で作った直方体を元に、あれやこれや手を加えて水槽らしきものを作ろうとしてみました（途中） 「水槽」というのは、 noriko(id:non704) 質問へのお返事ありがとうございました。 水族館風・水中花風・・・やってみましたが、今一つ。(^^;) ゆっくり又考えてみます。 いただいたコメントから拝借したアイデアなんですけどねｗ また、今回の記事ネタは、同じくいただいたコメント、 のんべえ(id:whisky-coke) 大きさも色々変えられて良いですね。でも、使いどころが難しいｗ ちなみに作成後にフロントとバックの中間にもう一面追加して入れることは可能でしょうか？ の回答の実践例でもあります。 作成するにあたり、数枚の透過画像を描く必要性が出てきましたが、そこを強引にCSSで描いた「ラフ」みたいな状態です
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
シンプルなものからユニークなものまで様々なCSS製のスピナーやローダーをまとめた・「CSS3 Loader & Spinners」
CSS3 Loader & SpinnersはCSS製のスピナー&ローダー集です。シンプルでベーシックなもの、テキストベース、バータイプ、他にもユニークなものが集められています。 CSS製ゆえにスタイルの管理もしやすく軽量に扱えます。最近ではSVG製が主流になりつつありますが、CSSに慣れている方はCSSで作った方が管理しやすいかもしれませんね。 スピナーとローダーは120種以上用意されており、コードはCodepenやGithubで公開されています。ライセンスはMIT。 CSS3 Loader & Spinners
WebP対応の注意点 WebPを使ううえでの注意点が2つありますので、確認してみましょう！ 対応ブラウザの確認 まずWebPに対応させる場合の注意点として、WebPに対応しているブラウザでは、.webp の画像が吐き出され、対応していないブラウザの場合 .png など一般的な画像が書き出されるようにする必要があります。 ダウンロードしても開けない WebPはダウンロードしても画像として保存されません。 その為、ユーザーにダウンロードさせることを目的とした画像の場合に限っては、WebP以外の形式にしてあげるといいでしょう！ backgroundでWebP使う場合 CSSでは分岐という概念がなく、pictureタグも使用できないため、jsプラグイン「Modernizr」を使用。 インストール方法、CSSの記述方法については以下をご確認ください。 プラグインインストール方法 1.Add your
リッチなUIのWEBサイトを簡単に実装できるCSSライブラリ「Animate.css」の実装手順、実現できるアニメーションの種類、テクニックを整理しました。Pure CSSだけでも充分に動きのあるサイトを作ることができる時代になり、素敵なデザインのサイトやサービスが増えました。 ただし、自分でCSSを書くのは大変。便利なライブラリがあれば使いたいところです。本記事ではCSS3アニメーションのライブラリとしては最も有名だと思われる「Animate.css」について、利用手順・アニメーション種類・実装テクニックを整理しました。 例えば、このような動きを簡単に実現することができます。 ↓ちなみにこのアニメーションが突然動かなくなって困っているケースが多いようです。詳細は後述しますが、もしアニメーションが動かない場合は視差効果の設定を見直してください。 サンプル Animate.cssのダウンロー
![Animate.cssの使い方まとめ。サイトに手軽にアニメーションを実装 [CSS3ライブラリ] | KodoCode](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b63c2892de85f51f65288a3d14d4f6af1abf9e0/height=288;version=1;width=512/https%3A%2F%2Fkodocode.net%2Fwp-content%2Fuploads%2F2019%2F02%2Fdesign_css_lib_animate.jpg)
CSS | 3Dなサイコロの作り方 | 1 NOTES
CSSでtransform-styleのpreserve-3dを使って、3Dなサイコロを作成する方法を紹介しています。 See the Pen CSS | 3D Dice by yochans (@yochans) on CodePen. 主にダイスの目の設定などについて書いています。 角丸にしたり、隙間をあけたりと多少サイコロっぽく（努力は）していますが、サイコロデザインの元としている立方体の作成方法と殆ど同じです。 立方体の作り方は別記事で紹介しています。 3Dサイコロの作り方この記事はCSSの「transform-style」に「preserve-3d」を指定した立体的なサイコロの作成手順となります。 本体（コンテナ）側面×6サイコロの出目本体と側面については省略しますが、CSS | 3Dな立方体の作り方 | ONE NOTESにて書いていますので、宜しければ見てあげて下さい。 HT
え、IEなのに！？IE11でも使えるCSS3プロパティ
実務ではまだまだ対応が必要なIE11。せっかく最新のCSSを覚えたのに、IEでサポートされていないから使えない（泣）なんてことがよくあります。 しかし、IE6時代からコーディングをしているような人にとっては、「え、IEなのに！？」と意外に思うようなCSSがIE11では使えたりします。また、正式にサポートされていなくても、Autoprefixerやポリフィルを利用することで使えるようになるプロパティもあります。 今回はそのようなCSS3のプロパティをいくつかご紹介します。 ※本記事でのIEはバージョン11のみを対象とします。 ※主にIE対応の方法について説明するので、プロパティの説明は割愛します。 display: flex基本IEでも問題ありませんが、 flex-basis が border-box に対応してないなど、一部挙動が他のブラウザと異なる場合があるので注意が必要です。 参考：
What should someone learn about CSS if they last boned up during CSS3? “CSS3” was a massive success for CSS. A whole bunch of stuff dropped essentially at once that was all very terrific to get our hands on in CSS. Gradients, animation/transition, border-radius, box-shadow, transform… woot! And better, the banner name CSS3 (and the spiritual umbrella “HTML5”) took off and the industry was just sat
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
jQuery/CSS3で雲をゆらゆらさせる
はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「background」に割り当てましょう。 css #main-img { width: 800px; margin: 0 auto; background: #9bd6e9 url("bg2.png"); } #main-i
（＊価格は掲載時のものです。購入時にご確認ください。）
「高速レンダリングエンジンIvy、モダンと非モダンのブラウザ用のJSコードを動的に使い分けるDifferential Loadingなど」
Web上で情報を並べて表示する機会はとても多いです。そんな時、常に発生するのが並び替えや絞り込みのニーズです。データを消したり、並び替えて表示したりするのは意外と大変です。 そこで使ってみたいのがFilterizrです。データのソート、フィルタリングに特化したライブラリです。 Filterizrの使い方 利用例です。カテゴリごとにデータが絞り込まれて表示されています。 カテゴリを変更するとデータが変わったり、並び順を変更できます。 ツリーデータにも使えます。 Filterizrはアニメーション部分にCSS3を用いているのでスムーズにアニメーションされます。jQueryとの連携もできるので、手軽に使えそうです。情報の絞り込み表示などで役立つことでしょう。 FilterizrはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 Filterizr | Crea
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
var winHeight; var field = $(".field"); winRsize(); //関数の実行 $(window).resize(function() { winRsize(); //ブラウザのウィンドウサイズが変更されるたびに検知してリサイズ }); function winRsize() { winHeight = $(window).height(); //ウィンドウの高さを取得 field.height(winHeight); //ウィンドウの高さをfieldクラスの高さとする } var items = 100; //100個量産 for (var i=0; i<=items; i++) { var move = Math.ceil( Math.random()*50 ); var pos = Math.ceil( Math.random()*50 );
div { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } 日本語は縦（vertical）の右から左（Right to Left）なのでこのプロパティを用います。 IEは昔から独自仕様で縦書きが可能だったため、プレフィックス付きで変なプロパティがついています。 その他プロパティや対応ブラウザは下記サイトでご確認ください。 writing-mode - CSS | MDN Can I use ブラウザによる違い ブラウザにより挙動が異なるのですが、最大の違いはwriting-mode: vertical-rl;を指定したとき、Chrome、Safariは右詰め、Firefoxは左詰めで表示されてしまうことです。text-alignでの指定では右詰めになりません。t
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Beautiful CSS 3D Transform Perspective Examples in 2024 | Polypane
オープンソースのCSSフレームワーク「Tailwind CSS 3.4」がリリース
【2023年版】おすすめのリセットCSS（reset.css）3選【CDNのコピペあり】
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年5月12日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年2月24日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年8月6日)
【CSS3】BackgroundプロパティでWebPを使う方法
Animate.cssの使い方まとめ。サイトに手軽にアニメーションを実装 [CSS3ライブラリ] | KodoCode
What's New Since CSS3 in 2015? | CSS-Tricks
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年11月15日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年9月19日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年2月21日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年4月7日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年11月26日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年1月20日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年10月6日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年4月14日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年9月27日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年5月29日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年5月10日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年6月30日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年11月10日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年6月4日)
Filterizr - CSS3を使ったデータのフィルタリング、ソートライブラリ MOONGIFT
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年3月24日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年6月12日)
CSS3 – 炭酸飲料のような泡を量産するアニメーション
CSS3で縦書きにする方法と挙動 - Qiita