【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita

2022/07/14 149 users Qiita CSS 方向 みなさん 概要

概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解す... 続きを読む

コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ - PhotoshopVIP

2017/07/14 78 users PhotoshopVIP ナビゲーションメニュー HTML

Googleが2014年に提唱したデザインガイド「 マテリアルデザイン 」。 最近の新しいウェブサイト でも、このマテリアルデザインの考え方や基本原則を取り入れたものが増えています。 今回は、コピー＆ペーストで手軽に マテリアルデザインを再現できるHTML/CSSスニペット をまとめています。 対応しているスニペットは、ナビゲーションメニューやドロップシャドウなど特長的な素材から、ボタンやカード型... 続きを読む

素人っぽいサイトに見えてしまうWEBサイトのロゴ4つの特徴とノンデザイナーでも簡単にできるPhotoshopとGIMPの解決策。

2014/10/15 110 users デザインクオリティ ノンデザイナー GIMP 書体 ロゴ

ウェブサイトやブログなどでデザインクオリティの高いテンプレートを使用しているのにも関わらず、ロゴを自作しているために素人っぽく見えてしまうサイトを良く見かけます。ここではその4つの特徴をまとめてみました。 ① ロゴの背景に写真を挿入している ② ドロップシャドウのかけすぎ（なぜかポップな書体とセットが多い） ③ 背景を透明にすることができず枠が浮いている ④ サイト全体とミスマッチな色とマークを採... 続きを読む

[CSS]ナイスアイデア！二つの繋がる要素を一つのドロップシャドウで処理するテクニック | コリス

2014/03/20 47 users border ナイスアイデア box-shadow Drop

div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shadow for 2 elements preserving the intersection in CSS 凸型の要素はタブや上からコンテンツをひっぱりだす時によく使われ、デモではひ... 続きを読む

【デザイン】安易にドロップシャドウかけるのやめ隊 | 宇都宮ウエブ制作所

2013/10/24 355 users 補色 警鐘 シャドウ ふゥ デフォルト

ふぅ、あとはここにドロップシャドウをONと…。てな感じで安易にドロップシャドウかけてやしませんか？ 使い勝手の良すぎるドロップシャドウに警鐘！シャドウだって色々あるよってことで今回はシャドウアイデア集です。 その1：黒じゃなくって補色をつかう デフォルトで#000000に設定されているドロップシャドウ、この色を変えるだけでもグッと洗練された雰囲気に。 たとえばハイライト部分がピンクならシャドウにブ... 続きを読む

今年注目のフラットデザインを採用している海外の素敵なWebサイト 60 « nanomal

2013/05/13 226 users nanomal ミニマル グラデーション Apple iOS7

AppleもiOS7で採用すると噂され、今年注目されているフラットデザイン。ただ実際にフラットデザインを採用してWebサイトを制作するのは難しかったりしますよね。そんなフラットデザインを採用していて参考になるWebサイトを集めてみました。 紹介しているフラットデザインについて フラットデザインに明確な定義があるわけではないので、ドロップシャドウやグラデーションを極力使わず、ミニマルで色使いが上手い... 続きを読む

IllustratorでCSS3のbox-shadowのようなシャドウを作成する方法

2013/04/03 77 users box-shadow Illustrator シャドウ 移動

Illustratorのアピアランス機能を使うことで、CSS3で作成されたようなボックスシャドウを作成する方法を紹介します。今回はドロップシャドウは使用せず、基本的に塗りを移動・変形させることでシャドウを作成しています。作成後はグラフィックスタイルとして登録することで使い回すことができます。Illustratorのアピアランス機能を使って、CSS3のようなボックスシャドウを作成する方法を紹介します... 続きを読む

IE6～ でもドロップシャドウ、角丸、透過とか書けちゃう『CSS3 PIE』がけっこう素敵でした。 / Maka-Veli .com

2013/02/18 57 users 透過 Maka-Veli .com CSS3 PIE 角丸

超今さらなヤツらしいですけど、でもこれ、楽チンだなー。 ※2013/2月現在、2.0betaも出ていました。 という事で、このサイトにも一部だけ実装してみました。 微妙に見え方が違う・・・ 使い方 DLした「PIE.htc」というデータをサーバにアップ behavior: url("/PIE.htc"); を、指定したいCSSに記述 ※htcファイルをアップした場所を指定して下さいね div { ... 続きを読む

CSS3で画像にドロップシャドウをつけたいときに便利なジェネレータ「Css3 drop shadow generator」*二十歳街道まっしぐら

2013/01/29 29 users ジェネレータ CSS HTML 二十歳街道まっしぐら 透明度

Css3 drop shadow generator CSS3のドロップシャドウを簡単に作成 Css3 drop shadow generatorはCSS3のドロップシャドウを簡単に作成できるジェネレータです。 画像のサイズ（横幅・縦幅）を指定して、影の種類を選択。 あとは影の大きさや影の透明度を設定すれば完成。 HTMLとCSSのコードをコピペすれば終わりです。 とても簡単にCSS3でドロップシ... 続きを読む

ドロップシャドウのバリエーションを増やしたい人用、ボックスに美しいさまざまなシャドウを適用した画像素材 | コリス

2013/01/10 278 users コリス バリエーション ボックス 画像素材 人用

Archive by month 2013年1月 (8) 2012年12月 (37) 2012年11月 (53) 2012年10月 (60) 2012年9月 (49) 2012年8月 (59) 2012年7月 (65) 2012年6月 (57) 2012年5月 (37) 2012年4月 (40) 2012年3月 (39) 2012年2月 (41) 2012年1月 (32) 2011年12月 (37... 続きを読む

角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！ | OZPAの表4

2012/06/14 607 users OZPA グラデーション アニメーション 角丸 おつぱ

html5-css3-orange-logos / Nelson Felix Giga どうも！おつぱ（ @OZPA ）です！ 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介！ ｳｵｱｱｱｱｱｱｱｱ さて、CSS3対応ブラウザも増え、角丸、ドロップシャ... 続きを読む

Photoshopのドロップシャドウの使い方をマスターするチュートリアル | コリス

2012/05/13 341 users レイヤースタイル コリス ウェブデザイン ノックアウト 角度

ドロップシャドウはウェブデザインで非常に人気のあるエフェクトです。 このドロップシャドウのエフェクトを使いこなすために、Photoshopのドロップシャドウの各種設定の使い方を紹介します。 下記は各ポイントを意訳したものです。 ドロップシャドウとは レイヤースタイルのドロップシャドウ 描画モード 不透明度 角度 距離 スプレッド サイズ 輪郭 ノイズ ノックアウト 設定の保存と初期化 ドロップシャ... 続きを読む

[2111]Illustratorでリンク画像を埋め込まないとドロップシャドウがガタガタになる | DTPサポート情報

2012/05/01 12 users Illustrator Photoshop 概要 ページ

印刷ホーム » DTPサポート情報 » Illustrator » Illustratorでリンク画像を埋め込まないとドロップシャドウがガタガタになる Illustrator Illustratorでリンク画像を埋め込まないとドロップシャドウがガタガタになるTweetみんなのおすすめ： »概要このページではIllustratorで、クリッピングパス（切り抜きパス）を使用しているPhotoshop ... 続きを読む

様々にCSSでデザインされたソーシャルボタンセット:phpspot開発日誌

2012/03/09 53 users CSS phpspot開発日誌 Demo 円形 ボーダー

Demo: CSS Social Buttons 様々にCSSでデザインされたソーシャルボタンセット。 CSSでボタン作ればこんなにも便利だというのが分かるサンプル集になってます。 ボーダーやドロップシャドウ等は自由にデザインできるわけなので本当にちょっとした文字列の変更で多彩なデザインが出来る上に軽くて本当に便利ですね。 １０年前の人が見たら画像にしか見えなかったはずですね。 関連エントリ 円形... 続きを読む

ドロップシャドウって色んな種類あるんで、PSD作ってみました。もちろんフリー・商用可。ダウンロードしてっちゃって下さい。 / Maka-Veli .com

2012/02/20 103 users psd zip 両端 Maka-Veli .com 商用可

色んなサイト見てると、本当色んなドロップシャドウかけてるんで、じゃあどういうのが見てて気持ちいいかなーと思って色々とやってみました。 サンプル作ったは良いけど持っててもアレなんで、PSDをZipで固めて置いておきます。 お好きにどうぞ。※PSDダウンロードは最下部にあります。 普通のドロップシャドウ。 普通ですね。ほんと、普通です。 両端めくれ上がってる系。 よく見られますよね。紙なんかの表現の際... 続きを読む

イラレラボ　illustrator-labo - Tips_クリッピングマスクに効果をつける

2012/02/13 10 users illustrator-labo イラレラボ イラレ 背面

イラレについてのシノゴノクリッピングマスクしたオブジェクトに角丸やドロップシャドウをつける時の解説です。 画像を配置し、クリッピングマスクでトリミングするのは大変よく使う機能です。 マスクするほうを前面に、マスクされるほうを背面に配置して、オブジェクトメニューから ＞ クリッピングマスク ＞ 作成　でマスクを作ります。 これが基本。 ところが角丸の効果をつけたオブジェクトでマスクした場合。 角丸の... 続きを読む

アイコンをフォントで実現すると便利だと分かるサンプル:phpspot開発日誌

2011/11/22 35 users フォント phpspot開発日誌 アイコン サンプル リサイズ

Icon Fonts are Awesome アイコンをフォントで実現すると便利だと分かるサンプル フォントで表現することで色の変更やドロップシャドウやサイズ変更はあとから自由にできますね。 画像編集ツールを使う必要もなく、あとから自由にカスタマイズできるというのはWEBデベロッパにとっては嬉しいです。 ドロップシャドウ。 カラー変更、リサイズも自由。 他にも、CSS3を使った回転やアニメーション... 続きを読む

ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」:phpspot開発日誌

2011/10/26 54 users クロスブラウザ phpspot開発日誌

ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 2011年10月26日- pShadow ? a jQuery extension for gorgeous drop shadows | Matthew Dawkins ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 $(elmeent).pShad... 続きを読む

[JS]使い方はいろいろ、アニメーションで追随するドロップシャドウを生成するスクリプト -OKShadow | コリス

2011/10/19 42 users コリス スクリプト アニメーション 使い方

div要素で配置したボックス HTML jQueryのセレクタで指定できるようにidを付与したdiv要素です。 <div id="example1"></div> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js'><... 続きを読む

[CSS]画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する方法と注意点 | コリス

2011/09/29 351 users コリス border-radius Firef CSS デモ

最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firef... 続きを読む

CSSのテキストシャドウをカンタンにかけられる「Css Text Shadow」 - WEBマーケティング ブログ

2011/06/15 36 users CSS テキストシャドウ かんたん WEBマーケティング

以前にブロック要素にCSSのドロップシャドウを付けるサービスをご紹介しましたが、CSSを使った高度なテクニックをカンタンにおこなえるオンラインサービスが増えていますよね。今回は、テキストにシャドウなどのクールなエフェクトをCSSでかけられるサービスのご紹介です。針のいらないホッチキス コクヨ ハリナックスわたくし愛用中です！ 外出先からiPhoneで会社PCのファイルを送信可能！【SugarSyn... 続きを読む

[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス

2011/06/13 113 users コリス アコーディオン jQuery フェード スクリプト

滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 続きを読む

CSS3で画像のドロップシャドウを簡単に作成できる「CSS3 Drop Shadow Generator」 - WEBマーケティング ブログ

2011/05/30 60 users Photoshop エフェクト CSS WEBマーケティング

画像にドロップシャドウを付けるには、Photoshopなどの画像編集ソフトで画像にエフェクトをかける必要がありますが、そのようなことをしなくても、CSSを使ってドロップシャドウの効果をつけることもできるようになりました。ただ、できるとは言っても０からその効果をつけるのは、なかなか至難の業。そこで今回は、ドロップシャドウを付けるCSSを簡単に生成してくれるサービスをご紹介します。針のいらないホッチキ... 続きを読む

実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins | コリス

2011/05/19 413 users パラグラフ コリス エレメント グリッド フレームワーク

レイアウトのグリッドをはじめ、ナビゲーション、パラグラフ、リスト、フォーム、テーブルなどページでよく使用するエレメント、角丸、グラデーション、ドロップシャドウ、回転のエフェクトなど、ウェブページを構成するさまざまエレメントが用意されたHTML5+CSS3ベースのフレームワークを紹介します。 Perkinsはウェブデザイナー・開発者の大切な時間を節約するために開発されたもので、HTML5+CSS3で... 続きを読む

PhotoshopライクなインターフェースでCSS3コードを生成してくれる『Layer Styles』 | IDEA*IDEA

2011/05/11 69 users IDEA インターフェース Layer Styles ツール

これ、Adobe使いにはいいかも。面倒なCSS3でのドロップシャドウとかそういうのをPhotoshopライクなインターフェースで作ってくれますよ。 ↑ これはわかりやすいｗ。全部ブラウザからいけるのがポイント高いです。 ↑ 左下からコードも取得できます。こちらもわかりやすいですな。 他にも似たようなツールがありますが、これが一番直感的なのではないでしょうかね。おすすめです。 » Layer Sty... 続きを読む