box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない

2024/08/12 13 users プロパティ フォーカス カスタマイズ 要素 キーボード操作

box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない 2024.08.11 フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモード... 続きを読む

Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3

2023/03/16 195 users ひとまとめ デコード Flexbox CSS diff

HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無... 続きを読む

Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました | コリス

2021/07/15 25 users コリス border-radius clip-path 生成

CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusやclip-pathによるさまざまな形...記事の続きを読む 続きを読む

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

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

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

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

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

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

CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる | コリス

2020/07/03 20 users border コリス CSS メリハリ 内側

画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSS... 続きを読む

box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA

2020/04/06 32 users ウェブページ コーディング CSS 落とし穴 ほか

ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します... 続きを読む

hrの使いやすそうなスタイリングいろいろ | かちびと.net

2019/07/01 39 users ＨＲ relative margin result net

Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css .hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%;... 続きを読む

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

2018/10/28 243 users Sass Minecraft メンテナブル CSS マリオ

CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJa... 続きを読む

[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック | コリス

2018/03/27 64 users コリス 矩形 シャドウ CSS 美しいCSSグラデーション

ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。 2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。 Gradient shadow in pure CSS デモ 実装 デモ まずは、実際の動作から見てましょう。 2色の美しいグラデーションを伴ったシ... 続きを読む

[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート | コリス

2017/10/25 59 users コリス シャドウ CSS スニペット 美しいシャドウ

カードやボタンをはじめ、さまざまな要素をふわりと浮かび上がらせる繊細なシャドウを与えるスタイルシートを紹介します。 box-shadowを重ねがけした複雑なスタイルシートですが、スニペットに登録しておくと簡単に利用できます。 Multiple Shadows 繊細なシャドウを与えるスタイルシート カードにシャドウを与える ボタンにシャドウを与える デモ 繊細なシャドウを与えるスタイルシート シャド... 続きを読む

Chrome/Safariではtrにbox-shadowが効かない #CSS珍百景 - < /gecko >

2014/12/03 19 users Gecko tr要素 Firefox 珍百景 Safari

CSS珍百景 Calendar 2014 3日目の記事です。 日をまたいでしまいましたが、書きます。すいません。 今年の9月ごろにChromeとSafariで発現した珍百景です。 Chrome/Safariにおいて、tr要素に対し、box-shadowプロパティを指定した時、それが適用されないというものです。 ちなみに後述しますがFirefoxではちゃんと適用されます。 ということで再現してみた ... 続きを読む

[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック | コリス

2014/11/26 187 users コリス keyframes div single class

三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要あり... 続きを読む

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

2014/03/20 47 users border ナイスアイデア ドロップシャドウ Drop タブ

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

デザインやCSSやJavaScriptなど、ウェブ制作に役立つ時短ツールが豊富に揃っていて便利！ -Coveloping | コリス

2013/12/11 588 users Facebook コリス ジェネレーター CSS アスペクト比

box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 C... 続きを読む

CSSだけで作るamazon風な縦型メガメニュー｜Webpark

2013/09/02 78 users Webpark border-radius CSS 矢印 若干

先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では... 続きを読む

ズルいデザイン（3）：box-shadowで表現する、「セミフラット」なズルいデザインテクニック (1/2) - ＠IT

2013/08/21 568 users 描画 皮切り 組み合わせ トレンド ズルいデザインテクニック

box-shadowを活用した各種ボックス表現の作り方を紹介。フラットデザインの中でも違和感なく使える「やりすぎていない立体感」とは？ 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、... 続きを読む

ズルいデザイン（3）：box-shadowで表現する、「セミフラット」なズルいデザインテクニック (1/2) - ＠IT

2013/08/21 568 users ズルいデザインテクニック ズルいデザイン

世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したく... 続きを読む

[CSS]box-shadowの面白い使い方！画像にシャドウをこんな感じにつけると立て看板風に見える | コリス

2013/07/30 93 users コリス Bloom div シャドウ CSS

box-shadowはボックスの周りにふわりとしたシャドウをつけることができますが、それを少しアレンジして、立て看板風のシャドウをつけるテクニックをBloomから紹介します。 まずは、通常の周りにふわりとシャドウをつけてみます。 HTML img要素をdivで包みます。 [html] [/html] CSS ボックスの四辺にシャドウを適用します。 [css] .css-box-shadow { w... 続きを読む

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

2013/04/03 77 users ドロップシャドウ Illustrator シャドウ CSS3

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

[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き) - WEBCRE8.jp

2013/02/13 56 users CSS 用途 表現 使用用途 説明

先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るの... 続きを読む

box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ | コリス

2013/02/05 243 users コリス Facebook Pinterest エレメント 実装

CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/... 続きを読む

使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」:phpspot開発日誌

2012/12/20 14 users phpspot開発日誌 CSS3ジェネレーター 実際

使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 2012年12月20日- Useless CSS3 Generator 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 Uselessということで使えない、ということらしいんですが、実際はなかなか使えそうなジェネレーター。 border-radius, box-shadow,... 続きを読む

CSS3のbox-shadowでお絵かきアプリを書いてみたものの… | Mach3.laBlog

2012/10/09 14 users モナリザ Mach3.laBlog デモ 用途 手法

先日、CSS3のbox-shadowで描画されたモナリザが話題となりましたが、 インスパイアされて同じ手法でお絵かきアプリを作ったらどうなるか試してみました。 作ってみたもの まずはデモから。当たり前ですが、box-shadowに対応していないブラウザでは動きません。 DEMO on JS Bin JS Bin 感想 作って動かしてみた率直な感想を申し上げると…そもそもこういう用途を想定していない... 続きを読む

Fireworksの基本技！[ box-shadow ]のあしらい再現方法まとめ | バシャログ。

2012/09/09 46 users Fireworks バシャログ seki ドラゴンズドグマ

先日「ドラゴンズドグマ」というPS3ゲームをやっとクリアし、次は何をやろうかなーと思っていた所で、PS2ソフト「ポンコツ浪漫大活劇バンピートロット」というちょい古ゲームを、またも友達がわざわざ届けにきてくれたので始めてみました。ヒロインの女の子の台詞棒読みっぷりが軽くホラーで衝撃的！ seki です。 さてさて今回はFireworksでの基本技。CSS3以降、この記事のタイトル画像のような、写真な... 続きを読む