実装がどんどん簡単になっている!スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。

汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。

サイトのキャプチャ

Delighters
Delighters -GitHub

続きを読む

すごくかわいいフォント!アフリカの部族で見かける装飾やパターンにインスパイアされたデザインフォント -Tabu

アフリカの部族で見かける装飾やパターンにインスパイアされた、かわいいフォントを紹介します。通常の文字の他に、下記のような飾り文字やシンボルも含まれており、フォントとしてもモノグラムとしても楽しめます。

フォントのキャプチャ

フォント: Tabu
写真: Villagers in Sierra

続きを読む

10分で分かる!Adobe XDの新機能や実践的な使い方が学べるAdobe公式チュートリアルファイル中級編

Adobe XDは毎月アップデートされ、6/19のアップデートでは待望の固定ヘッダ・フッタ、アートボードのオーバーレイ、数値フィールドの四則計算に対応しました。Webサイトやスホマアプリの制作に役立つ機能ばかりで、作業がどんどん便利になっています。

そんな新機能も含めた使い方が学べる「Adobe XDスターターキット中級編」が公開されました。新機能をはじめ、実践的な使い方まで学べるチュートリアルが収録されています。

サイトのキャプチャ

続きを読む

CSSのスニペットに登録!背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート

スクリーンいっぱいの背景にCSSグラデーションが変化するアニメーションを実装するスタイルシートを紹介します。
HTMLもCSSも非常にシンプルで、簡単に利用できます。

サイトのキャプチャ

Pure CSS3 Gradient Background Animation

続きを読む

Web制作者の腕試し!HTMLやCSSやJavaScriptなどのコードでキーボードのタイピング練習ができる -Type Fu

HTML, CSS, JavaScript, Swiftなどのコードで、キーボードのタイピング練習ができるオンラインツール・アプリを紹介します。

最近では、HTML, CSS, JavaScriptを手打ちで入力する機会はかなり減りましたが、タグやプロパティを入力する指の動きなどけっこう覚えているものですね。

Type Fuのキャプチャ

Type Fu

続きを読む

フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか

フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。

サイトのキャプチャ

Your Brain on Front-End Development

続きを読む

CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。

一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。

下記のデモはJavaScriptは無し、CSSのみで実装されています。

フローティングラベルのデモ

input :not(:placeholder-shown)

続きを読む

配色のセンスがなくても、ベースカラーにぴったりなカラーパレットを1クリックで自動生成する無料ツール -Plax

UIのデザインやデータのビジュアライズに使用するカラーを決めるのに適したオンラインツールを紹介します。ベースカラーを決めるだけで、そのカラーに調和したフルスペクトルのカラーパレットが簡単に作成できます。

例えばグレーはよく使用されるカラーですが、選ぶのが難しいカラーです。ブルーに合ったグレー、グリーンに合ったグレー、さらにその中から可読性が充分な明るいグレーや暗いグレーなども自動的に生成されます。

サイトのキャプチャ

Plax

続きを読む

top of page

©2018 coliss