【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つのグリッドアイテムが表示されています... 続きを読む

配色の参考！美しいCSSグラデーションカラーを集めたギャラリーサイトuiGradients - Photoshop VIP

2014/09/09 63 users 配色 グラデーションカラー Photoshop Vip 参考

カラーリング、配色の参考にしたい美しいCSSグラデーションカラーをあつめたギャラリーサイトuiGradientsが、個人的にデザイン制作で役に立ったので、備忘録的エントリーとしてご紹介します。 画面いっぱいに表示されるスライダーから、お気に入りのグラデーションカラーを見つけたら、画面左下に表示されている「Get CSS Code」をクリック（Enterキーを叩くキーボード操作も可能）。CSSコード... 続きを読む

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スプライトのコードをインタラクティブに取得できる『Sprite Cow』 | 100SHIKI

2011/06/21 70 users CSSスプライト インタラクティブ Sprite Cow

ちょいとマニアックだが、便利かつ、細かいところが使いやすかったのでご紹介。 Sprite Cowを使えば、いわゆるCSSスプライトのコードを簡単に取得できてしまう。 使い方は簡単で、まずは画像をアップし、どの画像のコードを取得したいかを指定するだけだ。それだけで画面下部にCSSコードが表示される。 なんとも気が利いているのが背景部分を自動的に認識し、クリック一発でアイコンやらを認識してくれる点。 ... 続きを読む

背景に使えるドットパターンをCSSおよび画像で生成してくれるサイト「Patternify」 : ライフハッカー［日本版］

2011/04/28 97 users ドットパターン CSS ドット ライフハッカー 背景

Webツール , デザイン 背景に使えるドットパターンをCSSおよび画像で生成してくれるサイト「Patternify」 2011.04.28 12:00 コメント数：[ 0 ] Check Tweet 「Patternify」は、背景に使えそうなドットパターンを作成できるサービスです。ドットを自分で表現するだけで、画像でダウンロードもできますし、CSSコードも作成してくれます。 以下に使ってみた様... 続きを読む

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... 続きを読む