かつて、鉄道や飛行機の案内板として活躍したパタパタ、あるいはソラリ―こと反転フラップ式案内掲示板をイメージをCSSアニメーションとJSで作ってみた。 なお、私が公開しているお気に入りの場所をマッピングした地図を公開するサービスToboggar でパタパタ型のUIを採用した。 サンプル Toboggar - 名古屋で食べるべきハンバーガー Top 10 ここで使用したソースを簡素化したものが今回の記事である。 完成形 まずは、出来上がりを Codepen で確認。(画面が表示されていないときは、Result をクリック) 左下の Start ボタンを押すとフラップが回る。 また、Slow ボタンでゆっくり回るので、動きをじっくり確認できる。 See the Pen Split-flap display animation by hiroatsu (@scqspcfg-the-solid) o
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
そんな事もあり、4月10日は新しいフォントがいくつか発表された。今年の目玉はなんといっても「和文バリアブルフォント」であろう。 われわれが普段使用するフォントは、同じデザインでも細いもの、太いもの、横が詰まったものなどがそれぞれ個別のフォントとして提供され、1つのファミリーを形成している。 一方バリアブルフォントは、そうした文字の変形を1つのフォントで提供していこうという比較的最近のフォントフォーマットで、米Adobe／米Apple／米Google／米Microsoftが共同開発した。フォントパラメータとして、太さや字幅がバリアブルで変更できるため、従来はファミリーで提供しなければならなかったフォントデータが、1つのフォントで小さく提供できるというメリットがある。 もちろんデザインする側も、細いか太いかの2択ではなく「中間」も選べるし、縦長、横長も選べるので、表現の幅が広がるわけである。た
ニュースティッカーって何？と思うかも知れませんが、新着情報を1件ずつ切り替えて表示する物です。 ちょっと言葉では分かりにくいかも知れませんが、見れば分かると思いますｗ slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
2017年にリリースされて以来、UIデザインをはじめ、ロゴやグラフィックデザインなど幅広い用途向けに設計されたフリーフォント「Inter」が2年振りにバージョンアップされて、最新版「Inter 4」が公開されました。 Inter 4は文字サイズが小さくてもくっきりと美しく、綺麗に表示されるようデザインされているのが大きな特徴で、字形にはコントラストを強調するディテールが備わっています。また、大きいサイズでもその美しいラインと滑らかな曲線、繊細なディテールは優れたリズムを実現します。 「0」と「O」を区別する必要がある場合のスラッシュゼロ、下付き数字の化学式（H2Oなど）、文字幅が揃った数字など、多くのOpenType機能も利用できます。 Inter font family Inter -GitHub Inter 4の特徴 Inter 4のダウンロード Inter 4のウェイトとグリフ In
The Inter typeface family The 21st century standard Download ↓ Inter is a workhorse of a typeface carefully crafted & designed for a wide range of applications, from detailed user interfaces to marketing & signage. The Inter typeface family features over 2000 glyphs covering 147 languages. Weights ranges from a delicate thin 100 all the way up to a heavy 900. Each glyph has three dedicated designs
Cloudflareは、JAMスタックを用いてWebサイトを構築する新サービス「Cloudflare Pages」が正式版として提供開始されたことを発表しました。 JAMスタックによるWebサイトの構築とは JAMスタックとは、JavaScript、API、Markup Language（HTML）を主な構成要素としてWebサイトを構築する手法を指します。 WordPressに代表される多くのCMSでは、ユーザーからのリクエストに反応して動的にHTMLが生成されることで、動的なWebサイトを実現しています。この場合、HTMLの生成に一定の時間がかかるため高速なWebサイトの構築が容易ではないこと、サーバへの負荷によりスケーラブルなWebサイトの構築も容易でないことなどが課題です。 JAMスタックでは、HTMLの生成はWebサイトの生成時に行うことで、基本的には静的なWebサイトと同様の高速
Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more. Prerequisites Jekyll requires the following: Ruby version 2.5.0 or higher RubyGems GCC and Make See Requirements for guides and details. Instructions Install all prerequisites.
CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年
FPSゲーム向けのOBS用デジタル時計のhtmlソースです。 配信画面に現在時刻を表示したいときにおすすめです。 OBSのソース「ブラウザ」から追加するだけで簡単にご利用いただけます。 デザイン：全4種 ファイル形式：html ファイルの設定方法 1. OBSのソースウィンドウにある「＋」からブラウザを選択。 2. 名前をつけて新規作成。 3. プロパティのウィンドウが開いたら「ローカルファイル」にチェックを入れ、「参照」を押す。 4. ダウンロードしたファイルを選択し、開く。 共通アレンジ用CSSコードOBSのプロパティ内にある「カスタムCSS」に以下のコードを記入することで簡単に色を変更できます。 body {color: #カラーコード; /* 文字の色 */} .path01 {fill: #カラーコード; opacity:0.3 /* 背景の色と透明度 */} .path02 {
VTuberや配信者さん向けのOBS用デジタル時計のhtmlソースです。 配信画面に現在時刻を表示したいときにおすすめです。 OBSのソース「ブラウザ」から追加するだけで簡単にご利用できます。 ダウンロードせずに使えるオンライン版はこちら▼ https://stock.mooncape.net/others/268/ アレンジ用CSS掲載記事 https://stock.mooncape.net/others/30/ ファイル形式：html ・個人、法人問わず商用利用可能です。 ・用途に合わせて自由に改変可能です。 ・改変したものの再配布や自作発言はご遠慮ください。 ・クレジット表記、使用報告の義務はありません。 ・ソースの利用によって発生したトラブルについては一切責任を負いかねます。 お問い合わせはBOOTHのメッセージまたはTwitter(@minozki_i)のリプライ、DMよりご連
A jQuery plug-in that adds scrolling vertical tickers to your site Just one line of javascript code is all you need to start a vTicker Items can be paused when the mouse hovers over an item Step backwards and forwards through your ticker items with easy client methods Easy to use: vTicker is easily added to your existing web page by including jQuery, the vTicker plug-in javascript file and then by
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで Software Design plus: 鈴木僚太: Digital Ebook Purchas
Amazon.co.jp: プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで (Software Design plus): 鈴木僚太: 本
