[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック
Post on:2018年9月19日
フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。 シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビ […]
スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider
Post on:2018年9月18日
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQ […]
イヌをネコに変形！映画やテレビでよく見かけるモーフィングを作成できるオンラインツール -HyperMorph 3000™
Post on:2018年9月18日
映画やテレビなどでよく見かけるモーフィングを簡単に作成できるオンラインツールを紹介します。 イヌからネコに、のように似たような形状だけでなく、全く異なる形状でもある物体から別の物体に変形させることができ、いろいろ楽しめる […]
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
Post on:2018年9月14日
CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装 […]
[JS]さまざまなデータを最小限の記述でビジュアル化する高性能なJavaScriptライブラリ -Zeu.js
Post on:2018年9月13日
さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。 メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。 Zeu.js -G […]
商用利用無料！書道家「ダ山竹電」先生によるSVGの筆書き素材 -カリ蔵(カリグラ)
Post on:2018年9月13日
筆書きのかっこいい文字を使いたい！ 一回使うだけなのに、毛筆フォントをインストールするのは面倒！ そんな人たちの要望を叶えるべく、書道家「ダ山竹電」先生が立ち上がり、カリグラフィの筆書き素材がローンチしたので、紹介します […]
これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
Post on:2018年9月12日
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単 […]
ちょっと珍しいデザイン素材！インクの質感がリアルに再現されたベクターのパターン素材 -Inky
Post on:2018年9月12日
インクで手描きされた、シームレスのパターン素材を紹介します。パターンには、さまざまなブラシストライプ、ライン、ドット、スポットが揃っており、味のあるインクのテクスチャがそのまま使用できます。 Inky -50 Seaml […]
Photoshop CC 2019の新機能「コンテンツに応じた塗りつぶし」の使い方
Post on:2018年9月11日
「コンテンツに応じる」は、Photoshopの機能の中でもかなりの頻度で利用する人が多いと思います。そんな「コンテンツに応じる」の塗りつぶし機能が大幅に進化し、「コンテンツに応じた塗りつぶし」としてPhotoshopの次 […]
[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に
Post on:2018年9月11日
a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでク […]
sponsors
