Magic UI50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
自然に見える画像の枠線を求めて - Qiita
この記事の概要 サムネイル画像やユーザーアイコンなど、どんな画像が適用されるか分からない要素ってありますよね。 そんな要素に対して、視認性を確保するためにborderをひいてあるのによく遭遇します。 そのborderが時折ちらついて見えるのが嫌だったので、改善策を考えてみました。 完成物＆通常のborderとの比較 全体像はこちらです。 差がわかりやすそうな部分をクローズアップしました。 左の画像の草、真ん中の画像の右端にあるペンケース（？）、右の画像の机や天井など「borderの方が明るい箇所」が悪目立ちしているというか、ノイズに見えて気になります。 修正版がこちらです。 左の画像の空や右の画像の窓など、白く飛んでいる場所にだけborderが見え、それ以外の箇所は元の画像を活かしています。 CodePenはこちら。 仕組み <div class="adjusted-border"> <!
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA
パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
[CSS] button要素のスタイルシート、最新テクニックを徹底解説
<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザイン アイコン付きのボタン 複数行のボタン アンカーリンクとしてのa要素とbutton要素 アウトラインボタンの
![[CSS] button要素のスタイルシート、最新テクニックを徹底解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9ba8b37585d86205a71d0de6b3c024cd8265254/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202001%2F2020031410.png)
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
MUI: The React component library you always wanted
Ready-to-use foundational React components, free forever.
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
Pure.css
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
Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
Timesheet.jsVisualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customi
角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法
角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック
シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。 Jagged Border HTML まずは、デモのHTMLから。 デモは3つのギザギザがあるので、3つのdivを使用します。 <div class="jagged-wrap-inner"> <div class="offset"></div> <div class="lightgray-bg jagged-border"></div> <div class="white-bg jagged-border"></div> <div class="darkgray-bg jagged-border"></div> </div> ギザギザを一つにした最小限のセットは、こんな感じです。 <div class="jagged-wrap-inner"> <div class="offse
![[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c725ef9aa750bffbd7f88a5e9c7301be6838f4e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082706.png)
超カッコイイ立体的なメニューを実装したデモ:phpspot開発日誌
Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav
Free PixelKit Bootstrap UI Kits - Bootstrapを一変させるフラットUIテーマ
Bootstrapは良いのだけれど、Bootstrapっぽさが如実に感じられるのが嫌だなぁと思っているプログラマーの方は多いはず。そこで使ってみて欲しいのがFree PixelKit Bootstrap UI Kitsです。フラットなUIでがらっと雰囲気を変えてくれること請け合いです！ 見てもらうのが一番だと思うので、まずはデモサイトから。 ということで実際に細かな部品を紹介していきたいと思います。 ベースはBootstrapながら、雰囲気が一変しているのでどこにもらしさを感じさせません。この辺りのカスタマイズ性の高さがBootstrapの良さなのかも知れませんが、全体を統一してデザインするのは相当大変な労力であろうと思われます。なお一部の部品はjQueryやjQueryプラグインを利用しています。 しかしBootstrapで制作しておけば後々流行が変わったとしてもそのテーマを取り入れてサ
Almost Flat UI
Provides extra visual weight and identifies the primary action in a set of buttons
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sagakeen（サガケーン） - 佐賀県
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
Material UI
BESTCSS