はじめに
最近、React に携わる機会を頂き、CSS の繊細な感じと格闘しています。
先ほど XD を確認してると、上司から「ここは半透明じゃなくて、ブラー (blur) だね」と指摘を頂いたのですが、「ブラーって何ですか？」と聞き返してしまいました。。。
自身の無知が恥ずかしいですが、ここで知識が増えたと前向きに捉えて、"blur" のメモを投稿です。
あと、LT会でも発表するネタとして、"スライドモード"での記載を試してみたいと思います。
blur（ブラー）
blur は要素をぼかすために使用される視覚効果です。
画像やテキストなどの要素がふんわりとしたぼやけた見た目になります。
例えば、背景をぼかして前景の要素を際立たせたり、スタイリッシュなデザインを作り出したりすることができます。
| 元画像 | bler |
|---|---|
 |
 |
半透明との違い
似た感じの（私が勘違いしていた）半透明 (opacity) がありますが、比べると全然違います。
| 元画像 | bler | opacity |
|---|---|---|
 |
 |
 |
モーダルの背景をぼかしたい
今回、ぼやかしたいのは「親画面」→「モーダル」の表示で、モーダル表示時に親画面をぼかしたかったので、モーダルから bler を利用して"ぼかし"をしていたのですが、モーダルの項目しか"ぼかし"がかからない。
親画面自身に bler を指定してあげないとダメみたいです。そのため、親コンポーネントからプロップスを渡す事が必要でした。
サンプルコード
親コンポーネント
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";
const ParentComponent = () => {
const [isStyled, setIsStyled] = useState(false);
const toggleStyle = () => {
setIsStyled((prev) => !prev);
};
return (
<div
style={{
backgroundColor: isStyled ? "lightblue" : "white",
padding: "20px",
border: "1px solid black",
}}
>
親コンポーネントのスタイル
<ChildComponent toggleStyle={toggleStyle} />
</div>
);
};
export default ParentComponent;
子コンポーネント
import React from "react";
import GrandchildComponent from "./GrandchildComponent";
type ChildComponentProps = {
toggleStyle: () => void;
};
const ChildComponent: React.FC<ChildComponentProps> = ({ toggleStyle }) => {
return (
<div>
<GrandchildComponent toggleStyle={toggleStyle} />
</div>
);
};
export default ChildComponent;
孫コンポーネント
import React from "react";
type GrandchildComponentProps = {
toggleStyle: () => void; // 親から渡される関数
};
const GrandchildComponent: React.FC<GrandchildComponentProps> = ({ toggleStyle }) => {
// 既存のhandle関数
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
console.log("ボタンがクリックされました"); // 既存の処理
toggleStyle(); // 親のスタイルを切り替える
};
return (
<div>
<button onClick={handleClick}>親のスタイルを切り替える</button>
</div>
);
};
export default GrandchildComponent;
おわりに
新しい事を試せた良い機会になりまた。
blur に限らず、調べてみるといろいろな事が HTML+CSS+js で、表現できますね。
次は、UI フレームワークやグラフ系も記事にまとめたいなぁと思います。
参考（感謝）