任意のSVGのstrokeやfillをアニメーションさせるWebアプリ・「SVG Artista」 SVG Artista SVG Artistaは任意のSVGにアニメーションエフェクトを付与するWebアプリです。 SVGのコードを貼るか、読み込ませると、コードを解析してCSSを作成、アニメーションさせてくれる、というもの。 ...2019.08.28 | 9時58分02秒
ユニークなCSSグラデーションをコレクションしている・「Gradient Magic」 Gradient Magic Gradient MagicはユニークなCSSグラデーションをコレクションしているプロジェクトです。 ユニークなmのだけでなく、ベーシックなものから複雑なもの、境界線が暈されてないものやチェ...2019.08.04 | 10時16分19秒
軽量でカスタマイズ性重視の、カスタムプロパティを使ったモダンなCSSフレームワーク・「HiQ」 HiQ HiQは軽量でカスタマイズしやすいCSSフレームワークです。PostCSSで構築されており、カスタムプロパティを導入したモダン設計で管理もしやすい印象です。 カスタムプロパティをふんだんに使っており、直感的な変数...2019.07.09 | 10時32分12秒
コピペで使えてカスタマイズもしやすいCSSアニメーションコードをまとめている・「CSS WAND」 CSS WAND CSS WANDはコピペで使えるように工夫されたCSSアニメーションコードのまとめサイトです。HTMLとCSSをそれぞれコピーして簡単に利用できるようになっています。 まとめと言ってもまだ数は少ないですが、...2019.06.24 | 10時13分13秒
Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」 Flex FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければな...2019.06.20 | 9時55分21秒
Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」 Uix Kit Uix KitはBootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キットです。CSSフレームワークではないとの事。 これ単体でも開発を始められるし、Bootstrap 4を使い慣れ...2019.06.05 | 10時18分22秒
mediumライクなスタイルを提供するCSS・「medium.css」 medium.css medium.cssはmediumライクなスタイルを提供するスタイルシートです。タイポグラフィやレイアウト、各エレメントのスタイルなどをmediumのような見た目に出来る、というもの しっかりRWD対応にな...2019.05.25 | 10時11分58秒
高パフォーマンス且つスケーラブルなWebアプリの為に設計された、!importantを持たず、依存ゼロのCSSツールキット・「Brevis」 Brevis Brevisは高パフォーマンス且つ拡張性の高いWebアプリの為に設計されたCSSツールキットです。セレクタファーストでレスポンシブWebデザイン対応、論理的な命名規則が特徴だそう。各classは1つの仕事だけを行うため、...2019.05.08 | 10時06分29秒
クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」 CSSFX CSSFXはホバーやクリックでアニメーションエフェクトを確認、クリックでコードをコピーできるCSSアニメーションエフェクトのまとめです。エフェクトはマテリアルデザインなどで見かけるエフェクトやローダー、そのほかよく使われて...2019.05.06 | 10時36分16秒
jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」 Editor EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表...2019.04.17 | 10時29分08秒
軽量でレスポンシブ対応の、classを使わないCSSフレームワーク・「Water.css」 Water.css Water.cssは軽量でレスポンシブWebデザイン対応のCSSフレームワークです。classを使っていない為、セマンティックなHTMLのWebサイト制作に向いています。これといった装飾も無く、シンプルで見やすくす...2019.04.08 | 10時15分17秒
NES.cssにインスパイアされたターミナルスタイルのCSSフレームワーク・「UITerminal」 UITerminal UITerminalはNES.cssにインスパイアされた、ターミナルスタイルのCSSフレームワークです。ドットフォントにはNES.cssと同じくPress Start 2Pが用いられています。各ボタンやプログレス...2019.04.02 | 11時53分39秒
よく見かけるCSSアニメーションエフェクトのスニペットコードをコピーできる・「CSSeffectsSnippets」 CSSeffectsSnippets CSSeffectsSnippetsはちょいちょい見かけるホバーエフェクト等を実装できるCSSコードスニペットをクリックだけでコピーできるプロジェクトサイトです。特にそれ以上の機能はなく、単純にス...2019.03.23 | 9時08分15秒
どんなデバイスでも適切なフォントサイズにしてくれるスタイルシート・「RFS」 RFS RFSは様々なモニターサイズのデバイスでも適切なフォントサイズを計算するCSSです。RFSはresponsive font sizesの頭文字を取った略称だそう。Sass、PostCSS、Less、Stylusなどもサポートさ...2019.03.09 | 9時06分37秒
豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキット・「Fire」 Fire Fireは豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキットです。これからも増えるようでさらに期待できそうです。クリーンで見やすく、必要なUIも揃えられており、すべての要素が100%レスポンシブWebデ...2019.02.03 | 10時02分24秒
CSSで作られたポップでカラフルなフォント・「CSSans Pro」 CSSans Pro See the Pen CSSans Pro by kachibito (@kachibito) on CodePen. CSSans ProはCSSのみでポップでカラフルなフォントを作成、表...2019.02.01 | 9時45分16秒
CSSで出来る小技やTips等をまとめた・「.css{tricks}」 .css{tricks} .css{tricks}はCSSで出来るTipsや小技をまとめているプロジェクトサイトです。ローディングやタブ、リセットやテキストの省略などなど、特に一貫性はなく、地味に便利な小技を収集してる印象でした。中国...2019.01.26 | 10時11分08秒
ピュアCSSなマテリアルデザインコンポーネント集・「Matter」 Matter See the Pen Pure CSS Material Components Showcase by Ben Szabo (@finnhvman) on CodePen. MatterはCSSのみで作...2019.01.24 | 10時06分40秒
flexboxベースの軽量なCSSマイクロフレームワーク・「Strawberry」 Strawberry Strawberryはflexboxベースの軽量なCSSフレームワークです。圧縮版で30kbほどのようです。グラフィックに関わるスタイルは無く、各classにはプリフィクスが付いているので既存CSSに組み込んでも...2018.12.28 | 10時10分46秒
ファミコン風のスタイルを提供してくれるCSSフレームワーク・「NES.css」 NES.css NES.cssはファミコン(NES)ライクなスタイルを提供してくれるCSSフレームワークです。ダーシノ(@bc_rikko)さんの作られた国産フレームワークで、あくまでスタイルの提供となっています。僕自身もファミコン年...2018.11.27 | 9時35分28秒
FlexboxベースのモバイルファーストなCSSフレームワーク・「Butter Cake」 Butter Cake Butter CakeはFlexboxベースのモバイルファーストなCSSフレームワークです。モジュール式で必要な機能は自身で追加していくタイプなので軽量に抑えることができます。よく必要とされるUIコンポーネント...2018.11.05 | 8時32分41秒
ユニークな形状も作れるborder-radiusジェネレーター・「FANCY-BORDER-RADIUS」 FANCY-BORDER-RADIUS FANCY-BORDER-RADIUSはユニークな形をインタラクティブに作成できるジェネレーターツールです。ユニークと言ってもSVGのような柔軟な対応はできませんが、コードもシンプルで扱いやすい...2018.10.14 | 10時11分34秒