CSSは奥が深い!グラデーションとシャドウをこれまでより美しく実装するテクニック

WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。

このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。

CSSでグラデーションとシャドウをこれまでより美しく実装するテクニック

Using easing for more than just CSS transitions
by Kilian Valkhof

続きを読む

2020年、モダンブラウザに適したCSSリセットのまとめ

Web制作でモダンブラウザをターゲットにした場合、CSSにおけるブラウザによる互換性の問題は以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットやすべてをリセットする必要は全くありません。

Windows 7のサポートが終了し、新しいEdgeはchromiumベースになり、また既にIE11のサポートを終了しているサービス(GitHub, Dev.toなど)もでてきました。
現在の制作環境に合わせて制作された新しいCSSリセットの中から特に注目すべき、CSSリセットを紹介します。CSSのテクニックや知見も満載です!

モダンブラウザに適したCSSリセットのまとめ

続きを読む

デザイナーに人気の今時な英語フォント計116,770円分が、97%オフの3,200円で購入できる特大セールが開催

商用でも安心して利用できる、さまざまなデザインのプロジェクトにぴったりなデザインフォント15種類計116,770円分が、97%オフの3,200円で購入できる期間限定の特大セールを紹介します。

セール期間は、1月28日12時までとなっています。

フォントはWebデザイン、アプリ、動画、紙のデザインなどに利用でき、クライアントのプロジェクトでも販売する同人誌に使用してもOK。

周りと差をつけたい人のためのデザインフォント集

周りと差をつけたい人のためのデザインフォント集

続きを読む

HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。
Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。

サイトのキャプチャ

CSS-Only Carousel

続きを読む

JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説

JavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。プロトタイプ継承の仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。

JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説

🎉👨‍👩‍👧‍👧 JavaScript Visualized: Prototypal Inheritance
by Lydia Hallie

続きを読む

2020年、かなりお勧めの配色本!デザイン時に必要となる配色のテクニックもよく分かる -配色デザイン良質見本帳

はっきり言って、「かなりお勧め」です。
配色の本はたくさんありますが、配色の知識と実例を合わせて実践的に学べ、直感的にも理論的にも両方から配色を見つけることができる「配色デザイン良質見本帳」を紹介します。

配色例も豊富ですが、配色を使った実例も非常に豊富で、グラフィックデザイン、Webデザイン、プロダクトデザインなど、さまざまなデザインに活用できます。

本のキャプチャ

続きを読む

通常は有料だけど、今だけ無料!色鉛筆みたいな描き味のPhotoshopのブラシ -Pencil Pack

通常は有料ですが、今週末まで無料でダウンロードできる、色鉛筆みたいな描き味のPhotoshopのブラシを紹介します。

本来は有料なだけあって、高品質なブラシです。
期間中にダウンロードしておけば、いつでも使えて、再ダウンロードも無料です。

ブラシのキャプチャ

Pencil Pack PS Brushes

続きを読む

2020年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ

Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。

Font Awesome アイコンの使い方と便利な機能のまとめ

Font Awesome guide and useful tricks you might not know about.
by Kiss Patrik

続きを読む

top of page

©2020 coliss