【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つの特徴をまとめてみました。 ① ロゴの背景に写真を挿入している ② ドロップシャドウのかけすぎ（なぜかポップな書体とセットが多い） ③ 背景を透明にすることができず枠が浮いている ④ サイト全体とミスマッチな色とマークを採... 続きを読む

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

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

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

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のドロップシャドウの各種設定の使い方を紹介します。 下記は各ポイントを意訳したものです。 ドロップシャドウとは レイヤースタイルのドロップシャドウ 描画モード 不透明度 角度 距離 スプレッド サイズ 輪郭 ノイズ ノックアウト 設定の保存と初期化 ドロップシャ... 続きを読む

様々に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ダウンロードは最下部にあります。 普通のドロップシャドウ。 普通ですね。ほんと、普通です。 両端めくれ上がってる系。 よく見られますよね。紙なんかの表現の際... 続きを読む

ゴージャスなドロップシャドウをクロスブラウザで実現できる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... 続きを読む

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

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

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

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

５０の様々なデザインのドロップシャドウ効果適用素材Photoshopファイル:phpspot開発日誌

2011/04/08 64 users phpspot開発日誌 デザイン Photoshop ブラ

50 curved drop shadow effects, free PSD ５０の様々なデザインのドロップシャドウ効果適用素材Photoshopファイル。 次のように、色々なドロップシャドウのデザインが収録されたPSDファイルが配布されています。 ちょっと変わったデザインの物も多く収録されているので試してみてもいいかも。 関連エントリこれは覚えておいたほうがいい！というPhotoshopのブラ... 続きを読む

[CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル | コリス

2010/12/28 319 users コリス before チュートリアル CSS 疑似要素

CSS2の疑似要素を使用することで、HTMLを汚さずに、さまざまなデザインのドロップシャドウを簡単に適用することができます。 その美しいドロップシャドウのスタイルを適用するチュートリアルを紹介します。 画像の使用は一切ありません。 デモの対応ブラウザは:before, :after, box-shadowなどを使用しているため、Firefox 3.5+, Chrome 5+, Safari 5+,... 続きを読む

透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net

2010/05/25 421 users 透過PNG net メモ 角丸 IE6

IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 I... 続きを読む

[CSS]CSS3で何ができるの？　という時にみておきたいサイト集 | コリス

2010/02/10 734 users コリス CSS グラデーション 記述 CSS3

角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコ [...] 続きを読む

ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル | コリス

2010/01/08 331 users コリス ウェブデザイン チュートリアル グラデーション 下記

なんとなく目立たせるためにドロップシャドウを適用したり、ちょっとさみしいのでグラデーションを加えたりしていませんか？ Web designer Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。 Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors 下記は、... 続きを読む

Photoshop ドロップシャドウいろいろ - DesignWalker

2008/07/01 521 users Photoshop Reflection チュートリアル

平面的な画像でも、上手に陰をつけることで奥行きが出て、画像を立体的に見せることが出来ますね。 今回は、Photoshopを使ったドロップシャドウのチュートリアルや、お役立ちリンクなどを少しご紹介します。 Photoshop Tutorial: Fancy Text Shadow & Reflection 単純なテキストに、陰と反射を加えると、とっても奥行きのある感じに仕上がりますね。 シェイプを変... 続きを読む

徐々に消える感じの角丸コーナー - sta la sta

2007/01/20 124 users Sta 半径 sta la 有無 web

Web, Blog, Design Free Fading Corner Images | BittBoxブログやWebのデザインでは角丸コーナーの人気が高いですね。こちらのサイトでは、徐々に消える感じの角丸コーナーのイメージファイルとPhotoshop用ファイルを提供してくれてます。それぞれコーナーの半径やドロップシャドウの有無などの違いによって9種類を用意。太っ腹ですね。 早速このブログでも各... 続きを読む