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

2022/07/15 551 users Twitter PhotoshopVIP NIKE テスラ

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサ... 続きを読む

手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」 | Webクリエイターボックス

2017/04/16 112 users グリッドレイアウト CSSグリッドレイアウト タイル状 複数

先日公開した記事「 CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する 」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「 Griddy 」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ Griddy のサイトを開くと4つのグリッドアイテムが表示されています... 続きを読む

IE8・IE9をクラッシュさせるシンプルなCSSコードが見つかる - GIGAZINE

2013/09/12 279 users GIGAZINE

わずか1行でInternet Explorerをクラッシュさせてしまうコードというものもありましたが、今回見つかったコードも、CSSに数行足すだけでInternet Explorer 8と9をクラッシュさせることが可能です。 Benutzer:Schinken/CSS-IE-Crash – Hackerspace Bamberg - Backspace http://www.hackerspace... 続きを読む

Googleの新しいUIで使われているボタンをCSSで実現する方法 | IDEA*IDEA

2011/07/19 113 users IDEA CSS Improve your UI 新しいUI

Google+をはじめ、新しいUIで使われているボタンをCSS（＋画像）で実現する方法ですよ。というか、そのCSSコードをダウンロードできます。 ↑ こういうボタンね。 UIは慣れ親しんだものを使うのも手ですよね。Webサービスなんかを使っている方はいかがでしょ。詳細は以下からどうぞ。 » Google+ Buttons in CSS | Improve your UI | Pixify 続きを読む

CSSでアイコンをデザイン - Weblog - hail2u.net

2011/03/03 770 users グラデーション View Demo 万能 Weblog 背景

ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。View demo: Design icon with CSSul li a ... 続きを読む

CSSで角丸を実現するためのコードをさくっと生成『CSS Boarder Radius』 - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/03/02 339 users 四隅 IDEA CSS 生成 左上

CSSで角丸ってよくやりますよね（IEなんかどうでもいいや！というときｗ）。ただ、左上だけ直角にしたいときだけなどはコードが煩雑になりがちです。 そこで活用したいのがCSS Border Radiusです。四隅の角丸度合いを指定するだけで適切なCSSコードを出力してくれます。 ↑ 説明不要のシンプルさ。 ま、それだけですが、結構便利ですね。覚えておいて損はないかと。 » CSS Border Ra... 続きを読む