diff --git a/docs/css/opacity.md b/docs/css/opacity.md new file mode 100644 index 000000000..5fd6275fd --- /dev/null +++ b/docs/css/opacity.md @@ -0,0 +1,197 @@ +--- +id: opacity +title: "CSS Opacity" +sidebar_label: "Opacity" +sidebar_position: 8 +keywords: + - css opacity + - opacity css + - css transparency + - css alpha + - css rgba +description: Learn how to use CSS opacity to create transparent elements and text on your web page. +tags: + - css + - opacity + - css opacity + - css transparency + - css alpha + - css rgba +--- + +In CSS, the `opacity` property is used to set the transparency of an element. It can take a value from `0.0` (fully transparent) to `1.0` (fully opaque). The `opacity` property affects the entire element, including its text and any child elements. By adjusting the opacity of an element, you can create visually appealing effects such as transparent overlays, faded images, and subtle text highlights. + + + +## Syntax + +The `opacity` property in CSS has the following syntax: + +```css title="index.css" +selector { + opacity: value; +} +``` + +- `selector`: The CSS selector that targets the element you want to apply the opacity to. +- `value`: A number between `0.0` and `1.0` that represents the level of transparency. A value of `0.0` makes the element fully transparent, while a value of `1.0` makes it fully opaque. +- The `opacity` property is inherited by child elements, meaning that any child elements of the transparent element will also have the same level of transparency. +- The `opacity` property can be applied to any HTML element, including text, images, backgrounds, and containers. +- The `opacity` property does not affect the position or layout of the element. It only changes the visual appearance by making the element more or less transparent. + +## Examples + +### 1. Making an Element Transparent + +You can use the `opacity` property to make an element transparent by setting its value to less than `1.0`. In the following example, we make a `div` element 50% transparent: + + + + ```html + + + + + + Transparent Element + + + +
+

This is a transparent element.

+
+ + + ``` + + + + ```css + .transparent-element { + opacity: 0.5; + background-color: lightblue; + padding: 20px; + } + ``` + + + + +Now, you can see the output of the above code in the Browser Window like this: + + +
This is a transparent element.
+ + +:::note Try it yourself + +You can adjust the `opacity` value to make the element more or less transparent. Experiment with different opacity levels to see how it affects the visual appearance of the element. + +::: + + + +### 2. Fading an Image on Hover + +You can create a fading effect on an image by changing its opacity when the user hovers over it. In the following example, we use the `:hover` pseudo-class to fade an image to 50% opacity when the mouse cursor is over it: + + + + ```html + + + + + + Fading Image + + + +
+ Fading Image +
+ + + ``` + + + + ```css + .image-container { + position: relative; + } + + .fading-image { + opacity: 1.0; + transition: opacity 0.5s; + } + + .fading-image:hover { + opacity: 0.5; + } + ``` + + + + +Now, you can see the output of the above code in the Browser Window like this: + + +
+ Fading Image e.target.style.opacity = "0.5"} onMouseOut={(e) => e.target.style.opacity = "1.0"} /> +
+ + +### 3. Highlighting Text with Opacity + +You can use the `opacity` property to highlight text by making it partially transparent. In the following example, we apply a 70% opacity to a paragraph of text to create a subtle highlight effect: + + + + ```html + + + + + + Highlighted Text + + + +

This is highlighted text.

+ + + ``` + + + + ```css + .highlighted-text { + opacity: 0.7; + background-color: yellow; + padding: 10px; + } + ``` + + + + +Now, you can see the output of the above code in the Browser Window like this: + + +

This is highlighted text.

+ + +By using the `opacity` property in CSS, you can create various visual effects on your web page, such as transparent elements, faded images, and highlighted text. Experiment with different opacity values to achieve the desired level of transparency and enhance the visual appeal of your website. + + + +:::note Try it yourself + +Compare this snippet from [CSS Box Model](/docs/category/box-model) to learn how to use the CSS box model to control the layout and spacing of elements on your web page. + +::: + +## Conclusion + +In this guide, you learned how to use the CSS `opacity` property to create transparent elements and text on your web page. By adjusting the opacity of an element, you can control its level of transparency and create visually appealing effects. The `opacity` property is a powerful tool for enhancing the visual design of your website and adding subtle highlights to text and images. \ No newline at end of file diff --git a/src/pages/LiveEditor/BasicEditor.tsx b/src/pages/LiveEditor/BasicEditor.tsx index 1eb165887..119e87c3d 100644 --- a/src/pages/LiveEditor/BasicEditor.tsx +++ b/src/pages/LiveEditor/BasicEditor.tsx @@ -1,8 +1,19 @@ -import React, { useEffect, useState, useRef } from 'react'; -import style from '../../components/BrowserWindow/BrowserWindow.module.css'; +import React, { useEffect, useState, useRef } from "react"; +import style from "../../components/BrowserWindow/BrowserWindow.module.css"; +import clsx from 'clsx'; -const BasicEditor= () => { - const [checker, setChecker] = useState({ html: true, css: false, js: false,settings:false,fontSize:10,fontColor:false,backcolor:false }); +import styles from '@site/src/components/BrowserWindow/BrowserWindow.module.css'; + +const BasicEditor = () => { + const [checker, setChecker] = useState({ + html: true, + css: false, + js: false, + settings: false, + fontSize: 10, + fontColor: false, + backcolor: false, + }); const [html, setHtml] = useState(""); const [css, setCss] = useState(""); const [js, setJs] = useState(""); @@ -13,7 +24,7 @@ const BasicEditor= () => { alert("iframeRef is not available"); return; } - + const iframe = iframeRef.current; const document = iframe.contentDocument; @@ -41,66 +52,168 @@ const BasicEditor= () => { }, [html, css, js]); return ( -
-
-
- - - +
+
+
+ + +
-
-
-
-

Font Size

- -

{checker.fontSize}

- -
-
-

color

- setChecker(pre=>({...pre,fontColor:e.target.value}))} - /> -
-
-

Bakcground color

- setChecker(pre=>({...pre,backcolor:e.target.value}))} - /> -
+
+
+
+

Font Size

+ +

{checker.fontSize}

+ +
+
+

color

+ + setChecker((pre) => ({ ...pre, fontColor: e.target.value })) + } + /> +
+
+

Bakcground color

+ + setChecker((pre) => ({ ...pre, backcolor: e.target.value })) + } + /> +
-
- setChecker(pre => ({...pre, settings: !pre.settings}))} alt='settings'/> +
+ + setChecker((pre) => ({ ...pre, settings: !pre.settings })) + } + alt="settings" + />
-