グリーンバックはもういらない！？Background Mattingでどこでも合成（Windows10、Python 3.6） - Qiita
グリーンバックはもういらない！？Background Mattingでどこでも合成（Windows10、Python 3.6）Python画像処理CUDA機械学習DeepLearning はじめに Zoomでバーチャル背景が流行っていますね。グリーンバックを必要とせずに一枚の背景画像から人物を切り抜き、ピクセルレベルで違和感なく合成できるBackground Mattingをやってみました。CPUでも動くよ。 システム環境 Windows10（RTX2080 Max-Q、i7-8750H、RAM16GB） Anaconda 2020.02 Python 3.6 CUDA 10.0 cuDNN 導入 Background-Mattingからクローンします。 back-matting環境を作ります。
上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィッ
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA
マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。 本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。 「メニュ
CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
Essential Electron : Electronの簡潔・平易な概要 | POSTD
Electronとは？ Electronは JavaScript、HTML、CSS を使ってデスクトップアプリケーションを作ることができる ライブラリ です。作ったアプリケーションはMac、Windows、Linuxで動かせます。 次は： なぜ重要？ 定義： JavaScript、HTML、CSS はWeb用の言語で、Webサイトの基本的な構成要素です。Chromeなどのブラウザは、コードをふだん目にするグラフィックに変えて表示します。 Electronはライブラリです Electronはコードですが、再利用でき、自分で書き起こす必要がありません。ユーザはその上にプロジェクトを構成します。 参考資料 Apps built on Electron Electron API Demos （Electronで何ができるかをみてください） なぜ重要？ 一般に、デスクトップアプリケーションは各オペレ
プログラミングでよく使う英単語のまとめ【随時更新】
プログラミングでよく使う英単語のまとめ【随時更新】 随時追加、整理していきます。 名前をつけるときには、名詞、動詞の違い、複数形、過去形などに注意しましょう。 オブジェクト指向では、クラス名は名詞、メソッドは動詞とします。 使ってはいけない言葉 get / set アクセサ (getter / setter) やプロパティによく使われている。 それ以外に使うと混乱を招くのでよくない。 get は軽量な処理と考えるので、中に重い処理は書いてはいけない。 単純な取得/設定以外で使いたくなったら他の言葉を考える。 load, save, commit, store, enable, disable, fetch, register, configure, add, etc... check 意味が広すぎて何をしているかわからない。 できるだけ別の言葉を使う。 具体的に何をしているかに分解して考え
フロントエンジニアが今話題のFirebaseについて語りたい - Qiita
最初に 最近、Firebaseについての記事をよく見ます。 稚拙ながらもFirebaseについて注目している一人として語りたい。 知識不足(特に後述の歴史の認識)のため、駄文乱文あると思います。ご指摘いただけると幸いです。 React + Redux + Firebaseの実装記事を書きました。 Firebase Databse導入のために考えた4つのポイント。NoSQLと真剣に向き合った時ぶつかったことを書きました。 Firebaseとは mBaas(Mobile Background as a Service)の一つで、Googleの買収で一気に知名度が上がりました。 今までも、十分使えるものでしたが、2016年のGoogle I/Oの発表で統合プラットフォームとしての風格がムンムン漂ってきました。 また、Parse終了の知らせがでるやいなや無料プラン(SPARK)の改変、push n
以前の Google サイトにガジェットやスクリプトなどを追加する - サイト ヘルプ
リンク、スクリプト、ガジェット、アプリのコンテンツなど、さまざまな要素を追加してサイトをカスタマイズできます。 サイトをカスタマイズする サイト内のファイルやさまざまな部分へのリンクを設定すると、閲覧者は簡単に情報を見つけることができます。 サイト内のファイルへのリンクを張る パソコンから、以前の Google サイトでサイトを開きます。 右上のその他の操作アイコン をクリックします。 [サイトを管理] [添付ファイル] の順にクリックします。 ファイルの横にある [表示] または [ダウンロード] を右クリックします。 [ショートカットをコピー] または [リンクのアドレスをコピー] を選択します。 表示: 閲覧者に対して新しいウィンドウでファイルを表示する場合は、この項目を選択します。 ダウンロード: ファイルのコピーが閲覧者のパソコンにダウンロードされるようにする場合は、この項目を選
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress
ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな
Raspberry Pi3で自動ノート取り装置を作った - いきるちから
はじめに 数理情報工学実験第二という演習で、Raspberry Piをつかって何かを作ることになりました。そこでAMATERASUという自動ノート取り装置を作ったので紹介します。 そもそもRaspberry Piって? Raspberry Pi3 Model B ボード＆ケースセット (Element14版, Clear)-Physical Computing Lab 出版社/メーカー: TechShareメディア: エレクトロニクスこの商品を含むブログ (3件) を見る これです。安くて小型で色んなセンサーをつけて遊べるコンピュータです。今回はカメラモジュールを使いました。 自動ノート取り装置とは 自動ノート取りの目標は、講義を撮影した動画*1を処理することで、ノートの代わりとして使える画像を出力することです。具体的には次のgifのような画像を次々出力していくのを目標にしています。黒くな
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
Swift GCD入門 - Qiita
3年ぐらい前の被埃記事なのにだいぶご覧いただいていて…なんかもういたたまれなくなって記法など内容更新しました。ちなみに、何だかんだ普段使うのって DispatchQueue.main.async{ print("サブスレッドでUI処理") } だけだったなあっていう雑感。。(2018.12.25) 知識整理を兼ねてざっとまとめます。Operationとかとの兼ね合いについてはSwift 並列プログラミング基礎で。 1. はじめに GCDとは Grand Central Dispatch（直訳：総合送信？） マルチタスク実行基盤API もともとCベースで使うAPIだったが、今はSwiftライブラリDispatchが整備されている Operationはこれのラッパークラス 用法・効能 用意したディスパッチキューにタスクを放り込んで何やかんや。 スレッド管理しなくても非同期処理を実現できる。 「
CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法 | vdeep
こんにちは、okutani(@okutani_t)です。Twitterでこんな質問を受けたので、取り急ぎ記事にしてみました。 @okutani_t 文字の下に可愛い蛍光マーカー引いた風にするのってどうやるんですか？？ お手すきの際に教えて下さいませ…！ — 一ノ瀬あや(恋愛コラムニスト) (@ichinoseaya) 2016, 2月 21 というわけで、「CSSを使って蛍光ペンっぽく文字にマーカー線を引く方法」を記事にしてみたので、サクッと見ていきましょう！ スポンサーリンク HTML側の準備 HTMLでは次のようにしてあげればOKです。HTMLがよくわからない人は、とりあえず投稿画面に次のように記述すればOKなのね、ぐらいに捉えておいてください。 また、WordPressを使っている人は「テキストモード」にしてから記述しましょうね。 ・文字強調なし <span class="gray-
Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Chromeの拡張機能とは？ Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。 つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。 拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群（Chrome.* API）を利用できるところが拡張の魅力です！ 一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。 拡張機能の種類 拡張機能の種類は大きく分けて3つあります。 Browser actions Page actions Override Pages 1つずつ見ていきましょう。 Browser actions ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
絵やイラストが上手くなるアプリ29！スマホで絵のレベルを引き上げよう【2024年最新版】 | コンテアニメ工房
http://usingcss3.com/awesome-input-focus-effects/