心理セラピストに教わった「心の急所」を減らす技術 ― 心のシャドウとは何か？ : earth in us.

2011/08/23 1575 users 急所 アドバイ ムギ 心理セラピスト 言動

どうして他人の言動に、心はかき乱されるのか？ 「クヨクヨしてないで、頭を切り替えろ」 「個人的に受け止めるな。」 「スルーしろ、何をそんなにムキになっているんだ」 このブログをはじめて数ヶ月たったとき、ネガティブなコメントが増えはじめた。 しばらくは歯をギリギリくいしばって耐えていたが、それも次第にキツくなって、僕の心はボロボロになっていった(^^;) まわりの人に相談しても、冒頭のようなアドバイ... 続きを読む

Windowsが起動したままの状態でハードディスクをまるごとイメージ化できるフリーソフト「Macrium Reflect FREE Edition」 - GIGAZINE

2009/02/05 1375 users windowsXP Vista GIGAZINE ボリューム

WindowsXPとVista（64ビット版含む）で動作し、Windowsが起動したままの状態でディスク全体をイメージ化してバックアップすることができるという非常に優秀なフリーソフト、それが「Macrium Reflect FREE Edition」です。Windowsで利用可能な「ボリューム シャドウ コピー サービス」というのを使うことで、利用中のファイルであってもコピーすることが可能になって... 続きを読む

CSS3を使ってできる画像まわりのエフェクトやスタイリング17 | Webロケッツマガジン

2012/02/24 933 users エフェクト CSS Webロケッツマガジン スタイリング 目次

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 目次 1. シャドウ   2. トイカメラ風トンネル効果   3. カラー調整   4. 回転   5. 角丸   6. 楕円のフレーム   7. 円のフレーム   8. 三角形フレーム   9. 重な... 続きを読む

CSS3の制作をぐっと楽にする厳選20のオンラインツール | コリス

2012/07/10 718 users コリス セレクタ グリッド ボーダー グラデーション

CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利... 続きを読む

2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ | コリス

2013/01/28 640 users コリス ナビゲーシ navigation ウェブデザイン

フラット、サークル、ブラー、ビッグ、ダークなど、2013年のウェブデザインのトレンドを探るかっこいいUIデザインをインスピレーションの宝庫Dribbbleから紹介します。 OLD > New ヘッダデザインの古いタイプはグラデとシャドウ、新しいタイプはフラットとアクティブのハイライト、この流れは確かに感じますね。 Navigation これも最近多く見かけるダークなカラースキームを使ったナビゲーシ... 続きを読む

Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス | コリス

2015/07/01 587 users OGP コリス metaタグ CSS グラデーション

CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオン...記事の続きを読む 続きを読む

[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

2012/07/18 574 users コリス before hover チュートリアル CSS

HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。 擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3で... 続きを読む

商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy

2024/04/25 532 users スモーク 大理石 蜘蛛 水彩 グラデーション

個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとに... 続きを読む

デザインは奥が深い！目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック | コリス

2017/10/19 497 users 長方形 正方形 ボーダー コリス アイコン

文字をぴったり揃えたのにしっくりこない、正方形なのに長方形に見えてしまう、シャドウを与えていないのにぼんやりとシャドウが見える、ボーダーを加えただけなのに塗りも変わったように見える、そんな経験はありませんか？ WebサイトのUI、アイコン、ロゴ、イラストなどでデザインしている時に誰しも経験したことがあると思います。これらの原因は目の錯覚によるもので、その仕組みを理解することで困惑されることなく、効... 続きを読む

ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方 | コリス

2009/04/23 471 users 意訳 コリス ウェブデザイン 質感 ライト

ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。 5 Simple Tricks To Bring Light and Shadow Into Your Designs 以下、その意訳です。 ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。 形や大きさ、質感を伝え、目にする対... 続きを読む

CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方 | コリス

2020/07/27 357 users コリス box-shadow 彩度 CSS 美しいシャドウ

CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。 Saturated...記事の続きを読む 続きを読む

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

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

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

[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス

2011/04/18 346 users コリス box-shadow ウェブデザイン エフェクト 外側

CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることが... 続きを読む

[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック | コリス

2010/08/19 329 users コリス CSS テクニック 角丸 CSS3

まずは、デフォルトのスタイリングです。 * { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; } ここ... 続きを読む

最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？ | コリス

2021/09/22 307 users コリス SVG ホログラム ノイズ グラデーション

CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chi... 続きを読む

光源や１ピクのラインや透過を使ったウェブレイアウトのPhotoshopのチュートリアル集 | コリス

2009/09/16 301 users チュートリアル グラデーション コリス 光源 透過

光源やライトやシャドウ、グラデーション、1pxのライン、透過などを巧みに使用したウェブレイアウトのPhotoshopのチュートリアルを紹介します。 How to Make a Light and Sleek Web L [...] 続きを読む

[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック | コリス

2014/08/27 290 users div コリス CSS HTML デモ

シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。 実際の動作は、下記ページで確認できます。 Jagged Border HTML まずは、デモのHTMLから。 デモは3つのギザギザがあるので、3つのdivを使用します。 [html] [/html] ギザギザを一つにした最小限のセットは、こんな感じです。 [html] [/html] ... 続きを読む

カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo

2022/08/22 285 users 半透明 ダイアログ 背後 背景 便利ツール

同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。 半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。たとえば、シャドウやダイアログの背後の背景など半透明で複数...記事の続きを読む 続きを読む

[CSS]ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス

2013/02/19 213 users コリス Depth fixed 奥行き position

ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 [css] body:befo... 続きを読む

シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール | コリス

2018/08/30 209 users コリス レッド 要素 webデザイン それら

最近のWebデザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウが...記事の続きを読む 続きを読む

面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator | コリス

2013/01/15 206 users コリス ジェネレーター グラデ Button Shadow

ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。 CSS Button Generator 使い方は簡単です。 ボタンのColor, Size, Shadow(text), Shadow(button)のスライダーを変更すると、リアルタイムにボタンにデザインが反映され... 続きを読む

UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

2023/06/13 154 users フォントサイズ マージン コンポーネント パディング 白銀比

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということがで... 続きを読む

2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS

2022/01/17 151 users スタイ メタバース CSS 奥行き 質感

クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイ... 続きを読む

“チベットスナギツネ一重”でも大丈夫！可愛い跳ね上げアイラインの描き方はこれ「目を閉じたときどうなる？」シャドウでも変わるよ

2022/02/12 144 users アイライン 極細 ブラウン pic.twitter.com

キープの冷🍫 @xx0rsxx 跳ねあげアイラインの綺麗な引き方 チベットスナギツネ一重でも大丈夫 一重/奥二重/二重に関わらず使える。特に奥目の人は、普通に跳ねあげると覆いかぶさってる瞼が邪魔して上手くいかないから(私)、その部分も塗るつもりでやると◎！ 使ってるのはCEZANNEの極細、ブラウン pic.twitter.com/s48EI... 続きを読む

Google、Chromeブラウザのロゴを8年ぶりに変更

2022/02/04 134 users Chromeブラウザ ロゴ Google 変更 8年ぶり

GoogleのWebブラウザ「Chrome」のロゴが8年ぶりに変わる。色の境目のシャドウがなくなり、色が明るくなる。公式版はバージョン99から変わる見込み。 米GoogleのWebブラウザ「Chrome」のロゴが8年ぶりに変わる。同社のインタラクションデザイナー、エルヴィン・フー氏が2月4日（現地時間）、ツイートで予告した。開発者向... 続きを読む