kjtecのブックマーク - はてなブックマーク

【書籍紹介+α】プログレッシブウェブアプリ PWA開発入門 | バシャログ。
こんにちは。sagaraです。 Web屋さんだけどネイティブアプリも作ってみたい（できれば今ある知識を流用したい…）！という願いは、React NativeやElectronなどを利用することで、比較的叶いやすくなっていますね。ネイティブアプリとWebアプリの境界線がだんだん薄まってきているようです。最近ではiOSがPWA(Progressive Web Apps)に対応することで賑わっているので、私はJapan Android Group（日本 Androidの会）様が開催している勉強会「Web Working Group 「PWAに備える3か月」」第1回・第2回に参加しました。第3回（おそらく最終回）が今月末にあるので、そちらも参加予定です。そもそもPWAって Progressive Web App（進歩的なWebアプリ）の略です。通常のWebサイトを少し拡張してやること
kjtec 2021/03/24
リンク
cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。
こんにちは。koyaです。今回はcssプロパティbackdrop-filterでエフェクトを追加する方法について紹介します。実装早速ですが実際のコードがこちらになります。 See the Pen bg-filter by bashalog (@bashalog) on CodePen. 画像はフリー写真素材ぱくたそさんの物を使用させていただきました。解説 backdrop-filterにはオプションが10種類あり、ブラー、セピア、グレースケールなどのよく使うエフェクトもあります。
kjtec 2020/04/13
リンク
スマートフォンサイトのサムネイル付メニューのつくりかた。 | バシャログ。
先日、大涌谷（別名：地獄谷）行き、極寒と硫黄の中、渾身の力で手に入れた黒たまごを食べて寿命を７年延ばしてきました。こんにちは、mackyです。おかげさまで、なんだか妙にハイテンションな日々が続いています。さて、そんな今日は、ブログ記事などにもよく使われているサムネイル付きメニューを、前回ご紹介した、スマホサイトの矢印付きメニューをCSSのみで実装する。と合わせて使うパターンでご紹介しようと思います。アイコン付メニューをつくってみよう。まずはHTMLを用意します。 HTML <ul> <li><a href="#"><img src="images/thumbs.png"><strong>【JavaScript】minami</strong>JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました
kjtec 2016/11/11
スマホ用メニュー作成のサンプル

*CSS

*JavaScript
リンク
1