[B! ui][div] three_beeのブックマーク

three_bee id:three_bee

uiとdivに関するthree_beeのブックマーク (3)

ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO TECH BLOG
こんにちは。ZOZOTOWN部フロントエンドチームの菊地︵@hiro0218︶です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。背景今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。アプリウェブこのデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点現在、ZOZOTOWNのフロントエンドは、﹁Classic ASP﹂から﹁React﹂へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。ただ、今回のリニューアルではClas
three_bee 2021/08/13
css

設計

div

開発

blog

ui

class

あとで読む

web制作

*css
リンク
Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにアバターにSVGを使用するマージンの代わりにスペーサーdivを使用する CSSフィルターの使用シャドウに画像を使用する CSS変数の多用テキストの省略表示（複数行テキストの切り捨て）ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
three_bee 2020/04/28
css

ui

テクニック

デザイン

div

facebook

ちゃんとしたブクマ

コリス

まとめ

あとで読む
リンク
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量︵1.2KB︶スクリプトを紹介します。モーダルウインドウとサイドバーのデモコマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ﹁タイル状コンテンツ﹂のHTMLは、こんな感じです。 data
three_bee 2015/04/23
div

class

data

Javascript

jquery

アニメーション

web制作

js

ui

モーダル
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx