【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ

[north_korea]

Appleのサイトは凝りすぎてて慣れてない人がアクセスするとバグったのかと勘違いされるのでやりすぎないようにしよう

[circled]

この手のテクニックを覚えて、色々なWEBデザインが出来るようになっても、最近企業から求められているであろうWEBデザインはこちらです。→ https://how-i-experience-web-today.com/detail.html

[canadie]

縦にスワイプしてるのにアニメが進むだけだったり突然横スクロールし始めるのは明らかにやり過ぎなことに気づいてほしい。これとか「コンテンツにズームするページ遷移エフェクト」

[suekunhello]

そもそもアレが良いって思います？

[ET777]

コリスかとおもったらフォトショップビップ

[spark7]

短い動画の解説が明快だな。ダラダラしないフォーマットが良いのか

[chuff_chuff]

“https://jsfiddle.net/bsc2w8fo/”

[otchy210]

"scroll-snap" は「へぇ〜そんなのが！」で、Apple は「お前はやり過ぎだ」ってなる一方、Airbnb のドロワーは目から鱗。何となく FC 版スターソルジャーの巨大ボスを思い出したよw

[NOTG]

Appleまでいくとひとつの美術作品だと思ってみてるよ。Appleのブランディングページはもはやそういうものという地位を得ている

[ghoul31ghoul]

めも

[yoshi-na]

「あのサイトのアレみたいに」ってリクエストはよくあるから覚えておくと稀に助かる

[hirose504]

いつかやってみたいけど多分やらないやつ

[GiveMeChocolate]

お〜これは参考になる。スクロールしてくっついてズームアウトとかはウザいけれども

[mayumayu_nimolove]

はてなーの理想とするwebデザインって誰か作ってみてもいいのに誰も作らないよね。10年に1ページくらいあるといいけど。

[eartht]

本件と関係ないが、字幕の色でどの単語をしゃべってるのか明快なので、地味に英語の勉強にもなる。

[spongebob310]

つかえる

[kabuquery]

そりゃ一流のデザイナーが

[krdtmhr]

cssデザイン

[parabo]

CSS[webデザイン][web制作][css]

[proto_jp]

“ページをスワイプすると、ぴたりとコンテンツが切り替わるこのエフェクトも、CSSのみで再現されています。ポイントはscroll-snap-typeプロパティ”

[mn_kun]

css職人

[hiroomi]

時間あったらSharePointで出来ないか確認。

[nagabow]

メモ

[Shinji_041]

CSS

[shields-pikes]

やってみたくなる。