150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion. Perfect companion for shadcn/ui.
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported. There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React. Fr
依存性なしで、フレームワークも必要なし。 CSSの特別なテクニックも必要とせず、リアルに使えるCSSレイアウトやUIパターンを集めたサイト CSS Layout が注目を集めています。 フロントエンジニアとして働くひとは、ウェブサイト制作においてどれだけ多くのレイアウトやコンポーネントを扱う必要があるかよく分かるでしょう。 人気のあるレイアウトやUIコンポーネントを提供するCSSフレームワークはたくさんありますが、すべてを自分のプロジェクトに加えたくないときも。 そんな悩みを解決すべく、CSS Layout ではCSSのみで構築できる人気レイアウトやUIコンポーネントを集め、カテゴリ別にまとめています。 FlexboxやCSS Gridといった最新CSS機能によって実現されたレイアウトは、それぞれのニーズに合わせて簡単にカスタマイズでき、スターターキットとしても最適です。 パーツを組み合わ
こんにちはきよまるです@kiyokiyoabc 最近話題のUtility-First。皆さんも一度は耳にしたことがあるはずです。去年CSS設計完全ガイド が発売されたばかり（？）にも関わらず、この本が指南するCSSと人類の格闘の成果を無為にするような思想を持っています。(めっちゃいい本です) Utility-Firstの思想その一 クラス名とそのCSSをあらかじめ用意しておこう 終 制作・著作 ━━━━━ ⓃⒽⓀ まあその一といいましたがUtility-Firstに関しては一つの思想しかないです（多分）。 要するにクラス名を自分で考えてそれにCSSをつけるのではなく、あらかじめ用意されたユーティリティクラス（汎用的で実用的なクラス）を使って装飾しましょうということです。 Utility-Firstの何がいいのか 今まで模範とされてきたCSS設計のコードと、Utility-Firstなコード
Minimal CSS Framework for Semantic HTMLA minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà! 14.8K GitHub Stars 65.8K Monthly Npm Downloads (Last month) 12.6M Monthly JSDelivr Requests (Last month) A Superpowered HTML ResetWith just the right amount of everything, Pico is a great
最後の行だけ右揃え（または左揃えに）して！ なんてときにはCSSのtext-align-lastプロパティがちょっと便利です。知らなかった方はこちらの記事でどうぞ。 ときに、ほとんど気づかれないようなささいな箇所がユーザー・エクスペリエンスを左右するものです。そのささいな箇所には、Webページの見出しに追加されたテキストシャドウや適切な行間も含まれます。 その点、text-align-lastプロパティは役立つものです。段落の最後の行または強制改行の直前の行をどのように配置するかを指定します。段落の最後の行は通常、1行を埋めるための十分なテキスト量は用意されません。だからこそ、text-align-lastプロパティは重要なのです。違いに気づくか気づかないかくらいの違いですが、Webサイトの全体的な見栄えを改善するものなのです。 この記事は、text-align-lastプロパティのすべて
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
It’s simple. Set your image crop dimensions and use this line in your CSS: img { object-fit: cover; }That’s it. No need for unsemantic, wrapping divs or any other nonsense. This technique works great for cropping awkwardly-sized avatar pictures down to squares or circles. Take this wide photo of a bear below for example. Once object-fit: cover is applied to the image and a width and height are set
How to round decimal numbers with custom precision, set decimal places, using ceil and floor functions
The MUI package includes all the necessary code to use MUI components on the web and over email. In addition, we're working on React and WebComponents libraries to give developers more flexibility on the web. mui-0.10.3/ ├── angular │ ├── mui-angular.js │ └── mui-angular.min.js ├── css │ ├── mui.css │ ├── mui.min.css │ ├── mui-rtl.css │ └── mui-rtl.min.css ├── email │ ├── mui-email-i
Include gallery.css & gallery.theme.css <link rel="stylesheet" href="css/gallery.theme.css"> <link rel="stylesheet" href="css/gallery.min.css"> Mark up your gallery <div class="gallery items-3"> <div id="item-1" class="control-operator"></div> <div id="item-2" class="control-operator"></div> <div id="item-3" class="control-operator"></div> <figure class="item"> <h1>1</h1> </figure> <figure class="
A library of Documentation, Elements, Components, Icons, and a Grid for rapid responsive website development.Simple and Stylish Create accessible, semantic, and responsive websites easily with Turret. Turret is a front-end styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites. Responsive Turret has a simple and intuitive grid system and re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
