CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます

2023/09/11 19 users デモ 上部 発想 実装テクニック テキスト

イラストを描くときや写真のシャドウではハイライトが非常に重要ですが、CSSのシャドウでこの発想は抜けていました。 テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャドウになる実装テクニックを紹介します。 まずは、デモで実際のシャドウをご覧ください。 上部... 続きを読む

CSSでテキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するテクニックのまとめ | コリス

2021/05/24 12 users コリス box-shadow エフェクト CSS ボーダー

テキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するCSSのテクニックを紹介します。 ネオンライトはCSSのtext-shadowやbox-shadowで実装されており、CSSアニメーションやJavaScriptで動きを加えるとさらに面白くなります。 各デモは「Run Pen」をクリックすると、動作します。 まずは、ネオンサイン... 続きを読む

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）

2016/02/13 322 users Edge Firefox Chrome Webフォント 目次

概要 日本語のWebフォントはブラウザーによってはキレイ（滑らか）に見えないこともあります。、滑らかさを出せるCSS設定を紹介します。 目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1... 続きを読む

「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法 | 株式会社LIG

2013/10/28 59 users Photoshop エフェクト 株式会社LIG CSS ヤツ

フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロングシャドウ」ってやつは割りと綺麗だなと個人的に思ってます。作り方はCSSならtext-shadowを利用したジェネレーター、Photoshopならスマートオブジェクトを使ったテンプレートやアクションなどがあります。今回は一味違うやり方で、Photoshopの3D機能を使っての作り方をご紹介... 続きを読む

[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス

2013/08/25 386 users コリス BAS CSS コピペ テキスト

画像は無し、数行のスタイルシートを加えるだけでテキストにさまざまなスタイルを与えるデモを紹介します。 Text Shadow Compilation デモは全部で23種類、かっこいいスタイルをはじめ、使い方が限定されたアレなものまで、さまざまなスタイルがあります。 基本のHTML HTMLの基本はclassを付与したh1要素のみです。 classを変更して、利用してください。 [html] Bas... 続きを読む

[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集 | コリス

2013/03/18 258 users コリス font-family CSS エフェクト レトロ

text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothi... 続きを読む

CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life

2012/12/04 23 users display Box プロパティ エントリー TM Life

久々に CSS3 についてのエントリーです. 以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』 が大変好評だったので, CSS3 関連のエントリーもちょくちょく投稿していこうかなと思います. 今回は, text-shadow についてまとめました. text-shadow はその名の通りテキストに影をつけるプロパティです. しかし, そんな単純なプロ... 続きを読む

css3のtext-shadowによるテキスト装飾のサンプル集 - かちびと.net

2011/07/07 535 users ソフトウェア マーケティング 貴方 テキスト装飾 net

CSS3のtext-shadowを使ったテキスト装飾のサンプル集 css3のtext-shadowによるテキスト装飾のサンプル集です。自分のコピペ用。よく使うのでサンプルとコードを作っておきましたので宜しければご利用下さい。 かちびと.netとは 貴方のネットビジネスを支えたい。かちびと.netはそんな思いを持ったサイトです。Web制作に役立つ素材やソフトウェア、Webサービス、マーケティングに役... 続きを読む

コピペして使える、ユニークなエフェクトを実現するtext-shadowの設定いろいろ | IDEA*IDEA

2011/06/08 103 users IDEA 原文 シャドウ エフェクト CSS

こちらもメモ的にエントリー。text-shadowでここまでできちゃうんですね・・・。CSSの設定自体は原文を参照していただくとして、どういうエフェクトがかけられるのかちらっとご紹介。 全部で12個ありますが、個人的にぐっときたものを。 ↑ ダブルシャドウ。 ↑ 3Dでシャドウ。 ↑ Inset的な。 ↑ 輝け！ いやはや、いい時代になりつつありますね。 » 12 Fun CSS Text Sha... 続きを読む

animate-textshadow.js - Animated CSS text shadows with jQuery · Alex Peattie, a web developer and designer.

2011/06/07 35 users animate-textshadow.js

animate-textshadow.js - Animated CSS text shadows with jQuery animate-textshadow is a simple, lightweight (text-shadow property, using jQuery's regular .animate method. The plugin should work with all... 続きを読む

[JS]text-shadowをアニメーションでコントロールするスクリプト -animate-textshadow.js | コリス

2011/06/06 55 users jQuery コリス シャドウ エフェクト span要素

テキストにシャドウをつけるtext-shadowをアニメーションでコントロールして、さまざま面白いエフェクトを生み出すjQueryのプラグインを紹介します。 デモではさまざまなtext-shadowのアニメーションを楽しめます。 以下、デモを紹介しつつ、その実装方法もご紹介。 デモ：基本 一番シンプルな基本となるデモです。 HTML HTMLはすべてのデモで、テキストをspan要素で実装するだけで... 続きを読む

CSS3のtransitionとtext-shadowで作る様々なリンク装飾｜Webpark

2011/05/24 76 users Ｔｒａｎｓｉｔｉｏｎ hover Webpark CSS3

CSS3のtransitionとtext-shadowでオンマウス時のリンクを楽しく装飾してみます。すべてのリンクに使うとわずらわしいですが、タイトルロゴなんかだとこれくらい凝ってもいいのかなと思います。 transition（時間的変化をつける） hoverなどでスタイルが変化する際、通常はすぐに切り替わりますが、transitionを使うと時間をかけて変化するなど様々な設定をすることが可能にな... 続きを読む

[CSS]テキストに面白いエフェクトを与えたデモと実装の注意点 | コリス

2011/04/26 77 users コリス transparent CSS 実装 デモ

下記は各ポイントを意訳したものです。 テキストにブラー効果を与える方法と注意点 テキストにブラー効果を与えたデモ テキストにブラー効果を与える方法と注意点 テキストにぼんやりとさせるブラー効果を与えるのは、簡単です。テキストのcolorを透明にし、text-shadowを使用します。 .blurry-text { color: transparent; text-shadow: 0 0 5px r... 続きを読む

CSSでポイント時のリンクをピカッと光るように装飾｜Webpark

2011/02/28 26 users Webpark CSS 装飾 タイトル CSS3

お気付きの方もいるかもしれませんが、CSS3のtext-shadowを使ってタイトルのリンクにポイントを合わせると光るようにしました。全てのリンクにするとちょっと煩わしいですがタイトルくらいなら面白いかなと思いやってみました。個人的には結構気に入ってます。【普段はこんな感じ】【ポイントを合わせると光ります】ま、実際試せば分かるわけなんですが、IE（Internet Explorer）はtext-s... 続きを読む

自由自在！CSS3のtext-shadowを使ってをロゴ作ってみる｜Webpark

2011/02/27 90 users Webpark カンマ color 割合 同時

CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。text-shadowの基本的な使い方はこのようになります。カンマで区切ると複数の陰を同時つけることできて、うまく組み合わせると色んなロゴが作れちゃいます。光り輝いているようになっています。複数の影を使っていて、色は同じですが外にいくほどぼかす割合が強まっています。color:#fff;back... 続きを読む

[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法 | コリス

2011/02/02 322 users コリス border-radius box-shadow

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティpadding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要... 続きを読む

超立体的！text-shadowの意外な使い方 | CSS-EBLOG

2011/02/01 52 users CSS-EBLOG textarea コピペ 超立体的 表現

超立体的！text-shadowの意外な使い方カテゴリ：CSS3関連2011年2月 1日 09:32手軽に立体文字を作る今回は、とあるサイトで見かけた面白い表現を紹介したいと思います。 右にある画像が、その表現を拡大したものです。これはテキストに対してtext-shadowを指定しただけです。もちろんテキストなのでコピペもできるし、textareaに指定すれば入力した文字がこのような立体的な文字に... 続きを読む

[CSS]text-shadowでここまでできる、かっこいいエフェクト集 | コリス

2010/11/08 405 users コリス CSS かっこいいエフェクト テキスト スタイルシート

テキストに影をつけるtext-shadowを使用して、かっこいいエフェクトを適用するスタイルシートを紹介します。 Using CSS Text-Shadow to Create Cool Text Effects [...] 続きを読む