タグ CSSコード
人気順 5 users 50 users 100 users 500 users 1000 users【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つのグリッドアイテムが表示されています... 続きを読む
無料でウェブサイトに使える繰り返し背景パターンをカスタマイズしてダウンロードできる「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コード... 続きを読む
IE8・IE9をクラッシュさせるシンプルなCSSコードが見つかる - 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... 続きを読む