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

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

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

【CSS】スイングする画像をCSSで作ってみる！【CSSアニメーション】 - m's blog

2020/08/28 26 users CSS CSSアニメーション カスタムパターン 振り子 コピペ

今回はCSSを使って、振り子のようにゆれる画像を作ってみたいと思います！ 最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。 なるべくコピペでも使えるように構成していますので、サンプルを見て気になるものがあれば、ぜひ試してみてください！ 目次 ブログで使用する場合は ... 続きを読む

【CSS】窓のようにひらくテキストをCSSで作ってみる！ - m's blog

2020/08/26 30 users CSS テキスト カスタムパターン s Blog コピペ

今回はCSSを使って、窓のようにひらくテキストを作ってみたいと思います！ 最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。 なるべくコピペでも使えるように構成していますので、サンプルを見て、気になるものがあれば、ぜひ試してみてください！ 目次 ブログで使用する場合... 続きを読む

【CSS】アニメーションで動く見出しをCSSで作ってみる！ - m's blog

2020/08/24 43 users CSS 見出し 目次 アニメーション パターン

今回は、CSSを使って見出しにアニメーションをつけてみたいと思います！ 最初に、ベースとなるCSSコードを紹介した後、アニメーションのパターンをいくつか紹介していきます。 目次 ブログで使用する場合は はてなブログの場合 ベースコード 表示の確認 アニメーションパターン 見出しの背景色を変えてみる！ 見出しを回... 続きを読む

【CSS】付箋風の見出しをCSSで作ってみる！ - m's blog

2020/08/20 31 users CSS 見出し カスタムパターン s Blog 目次

今回は、付箋風の見出しをCSSで作る方法を紹介したいと思います！ 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。 目次 ブログで使用する場合は はてなブログの場合 ベースコード 使い方 カスタムパターン 付箋風見出しの色を変えてみる！ 背景色も調整してみる！ 角... 続きを読む

【CSS】付箋風ボタンをCSSで作ってみる！ - Tech.log

2020/06/22 14 users CSS カスタムパターン 付箋 度合い 目次

今回は、付箋風ボタンをCSSで作る方法を紹介したいと思います！ 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。 目次 目次 ベースコード 使い方 カスタムパターン 付箋の色を変えてみる！ 角丸表示にしてみる！ 影の度合いを調整してみる！ 影薄めバージョン 影マシマ... 続きを読む

CSSベースの攻撃でiOSデバイスをクラッシュさせる恐れ--セキュリティ研究者が発見 - CNET Japan

2018/09/18 11 users iOSデバイス CSSベース レンダリングエンジン iOS

「Safari」が使用するレンダリングエンジン「WebKit」に、「iPhone」および「iPad」に搭載されるOS「iOS」をクラッシュさせて再起動させる脆弱性があることを、あるセキュリティ研究者が発見した。 この脆弱性は、特別に細工されたCSSコードを使用しているHTMLページを読み込むことで悪用できる。使われるCSSコードはそ... 続きを読む

CSSで簡単に導入できるカスタマイズも可能なSVGバックグランドセット「SVG Backgrounds」 | DesignDevelop

2018/02/16 41 users SVG DesignDevelop シームレス フォーマット

近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。 シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。 詳しくは以下 ベーシックな縞模... 続きを読む

知識ゼロの僕でも理解できた！HTML&CSSを習得するための入門書 - ウィリスの宇宙交信記

2017/09/30 10 users ウィリス bookmark スポンサードリンク 宇宙交信記

2017 - 09 - 30 知識ゼロの僕でも理解できた！HTML&CSSを習得するための入門書 すべて 商品レビュー ブログ運営 【スポンサードリンク】 シェアする Bookmark! Facebook Twitter Google+ Pocket どうも！ウィリスです！ 最近、ブログのレイアウトが変わったんですが何人くらい気づいてくれたでしょう？？ 他のブログで紹介されているCSSコードを貼り... 続きを読む

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

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

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

はてなブログ 会話形式の吹き出しCSSコード 簡単カスタマイズ - きゅうりの王様

2017/04/05 7 users キュウリ 王様 カスタマイズ 会話形式 コード

2017 - 04 - 05 はてなブログ 会話形式の吹き出しCSSコード 簡単カスタマイズ カスタマイズ ハウツー ブログカスタマイズ 広告 Tweet はてなブログ 大見出し CSSカスタマイズ スマホにも対応 - きゅうりの王様 はてなブログ コードを使用したスマートフォン表示の不要な項目の削除方法 - きゅうりの王様 はてなブログ スマホページ カテゴリー一覧を自動生成するカスタマイズ -... 続きを読む

無料でウェブサイトに使える繰り返し背景パターンをカスタマイズしてダウンロードできる「Hero Patterns」 - GIGAZINE

2017/01/01 42 users ウェブページ SVG形式 GIGAZINE 組み合わせ コピー

ウェブサイトで使いたくなる色んな柄の繰り返し背景パターンを、色の組み合わせや柄の不透明度を自由にカスタマイズ＆無料でダウンロード可能なのが「 Hero Patterns 」です。SVG形式のファイルをダウンロードできるほか、CSSコードをコピー＆ペーストすることも可能になっています。 Hero Patterns http://www.heropatterns.com/ デフォルト状態のウェブページ... 続きを読む

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

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

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

ブログの記事ごとに背景画像を変更できるJavaScriptサンプルコード - はぴらき合理化幻想

2014/05/29 7 users ぴらき合理化幻想 背景画像 記事ごと jQuery ブログ

2014-05-29 ブログの記事ごとに背景画像を変更できるJavaScriptサンプルコード はてなブログをカスタム web制作 記事ごとに背景画像を変更すればそれぞれの記事に個性が出ておもしろいかも。コピペでサンプルコードを追加し、画像のURLを指定するだけ。 はてなブログでは 次の仕様に対応させる。 CSSコードを記事内に記入してもなぜか反映されない。 jQueryがページ下部で読み込まれる... 続きを読む

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コードも作成してくれます。 以下に使ってみた様... 続きを読む

サイトの背景なんかに使えるドットパターンを作れる『PATTERNIFY』 | IDEA*IDEA

2011/04/08 37 users ドットパターン IDEA PNG プレビュー こいつ

こいつもいつか使いそうなのでメモ的にエントリーしておきます。背景なんかに使えるドットパターンを作れるツールです。↑ ぽちぽちパターンを作っていくだけ。右側にプレビューが出てくるので作りやすいですね。またPNGでダウンロードできる他、base64を使ったCSSコードも吐いてくれるというマニアックな機能もありますよ。ちょっとした背景を作るときに良いですな。覚えておいて損はないかもです。 続きを読む

Mozilla Re-Mix: Firefox 4.0のUI各部を[glass]っぽくできるユーザースタイル「Firefox 4 Windows 7 total remake」

2011/03/20 12 users Mozilla Re-Mix CSS beta UI各部 個別

Firefox 4.0のBetaやRCをWindows 7で使っている方なら、もう少しAero効果のあるUIが欲しいところではないでしょうか。 すでにこのような効果を各部に与えることができるCSSコードなどがあちこちで記事になっていますが、個別のコードをuserChrome.cssに記述したりするのは面倒ですね。 そこで今回は、そんなFirefox 4.0のUI各部に一括でGlass効果を与えるこ... 続きを読む

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