これは便利!CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle

CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。

サイトのキャプチャ

CSS Feature Toggle -GitHub

続きを読む

[JS]面白いスクリプトが登場!スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny

スマホの傾きを感知し、それに合わせてグラデーションを光の反射のようにシミュレートさせる軽量スクリプトを紹介します。

スクリプトは単体で動作し、MITライセンスで利用できます。

サイトのキャプチャ

Shiny
Shiny -GitHub

続きを読む

デザイン素材をコリス限定で全員にプレゼント!SVGも完備、カメラや写真をテーマにしたアイコン素材

お馴染みの freepik.com 提供によるデザイン素材をコリス限定で全員にプレゼント!
もちろん個人でも商用でも無料で利用できます。

今回はカメラや写真をテーマにしたアイコン素材です。

素材のキャプチャ

続きを読む

現在の制作環境に合うよう開発された、使い勝手がよさそうな新しいCSSリセット -Destyle.css

使い勝手がよさそうな新しいCSSリセットがリリースされたので、紹介します。

Destyle.cssは現在の制作環境に合うよう開発されたCSSリセットで、Eric MeyerのリセットとNormalize.cssの不満点を解消するようスタイルのリセットと正規化の両方が実現されています。

サイトのキャプチャ

Destyle.css
Destyle.css -GitHub

続きを読む

イラストやデザインの参考資料に!人物・動物・植物・デジタル機器・建物・家具などを図版化 -Dimensions.Guide

人物・動物・植物をはじめ、デジタル機器、建物、家具など、日常で見かける標準的なさまざまなスペースとサイズを図版化したDimensions.Guideを紹介します。

人物だけでも、老若男女の立ち・座り・寝・歩き・運動、そして正面・側面・上面が揃っており、イラストやデザインの参考資料になると思います。

サイトのキャプチャ

Dimensions.Guide

続きを読む

CSSで実装されたローディング・スピナーのアニメーションのまとめ

シンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。
ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという時用にブックマークしておきたいものばかりです。

下記の回転しながら整列するアニメーションもCSSのみで実装されています。

CSSで実装されたローディングアニメーション

Rotating Circle

続きを読む

Vue.jsにも対応の優れ物!高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid

カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。

カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。
動的コンテンツはもちろん、静的コンテンツにも対応しています。

サイトのキャプチャ

Magic Grid
Magic Grid -GitHub

続きを読む

2019年、デザイン書籍のKindle新春セールが開催!デザイン、イラスト、フォント、ロゴの作り方が揃ってます

Amazonで、デザイン書籍のKindle新春セールが開催されています。
Webデザインやグラフィックデザインをはじめ、イラスト関連や同人誌関連の書籍が対象で、50%オフ以上のものも多数あります。

期間は1月17日1時59分まで。
残りわずかですので、お見逃しないように。

Kindle デザイン書籍セール 2019

【50%OFF】Kindle デザイン書籍セール 2019

続きを読む

top of page

©2019 coliss