CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。 たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例： デモを別ウインドウで表示 デモのソース
宮崎英高が『ELDEN RING SHADOW OF THE ERDTREE』とフロム・ソフトウェアの今後について語るロングインタビュー
『ELDEN RING SHADOW OF THE ERDTREE』について ――まず、「SHADOW OF THE ERDTREE」の舞台やストーリーについて教えてください。 今回のDLCの舞台となるのは、本編に登場しなかった新しい場所です。影の黄金樹がそびえる「影の地」が今回の舞台になります。ワープする形で訪れる、完全に新しい場所です。 設定として、かつては本編の舞台である「狭間の地」の一部だったのですが、なんらかの理由によってそこから物理的に切り離されました。 ストーリーの主軸となるものはふたつあります。まず、ミケラというキーアートにも登場しているキャラクターです。ミケラが「影の地」に向かって、プレイヤーがそれを追っていくというストーリーになっています。もう一方は「影の地」の歴史、女王マリカの過去の物語です。 ――「影の地」はどういったマップになるのでしょうか。本編と同じくオープンワ
Shadow DOMとCSSの現状
2024-02-27 DOMDOMトークス #1
こんにちは、メディア事業でエンジニアをしている木村洋太です。 昨年のGREE Tech Conferenceでは「LIMIA」のフレームワーク移行プロジェクトにおけるコードの自動修正について話させていただきましたが、今回は同時に行ったインフラ移行について紹介いたします。 EC2からFargateへの移行例は多く存在しているとは思いますが、今回の移行では安全な移行のために、shadow-proxy環境での移行前のテストやEC2とFargateの同時稼働によるカナリアリリースなどさまざまな工夫を行いました。これらの中で得られた知見や失敗をまとめられたらと思っています。 インフラ移行の概要 フレームワーク移行プロジェクト フレームワーク移行プロジェクトでは、グリーが運営するメディアの一つである「LIMIA」のフレームワークをFuelPHPからLaravelへ移行することを目的としていました。 移
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.
画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro
イラストを描くときや写真のシャドウではハイライトが非常に重要ですが、CSSのシャドウでこの発想は抜けていました。 テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャドウになる実装テクニックを紹介します。 まずは、デモで実際のシャドウをご覧ください。 上部に2pxのハイライトを設定しています。 See the Pen highlight compliment to a text-shadow effect by coliss (@coliss) on CodePen. シャドウとハイライトのCSSは、下記の通りです。 カラーがoklch()で設定されていますが、hex値でも大丈夫です。ポイントは通常のシャドウと一緒にハイライト用のtext-shadowを上部に設定することです。 .highlighted-text-shadow { :r
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 全体の CSS を取得して Shadow DOM に適用する
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA
EC2からFargateへの移行 ~shadow proxyとカナリアリリース~ | GREE Engineering
Neumorphism/Soft UI CSS shadow generator
CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます