├── Pictures
└── 1.JPG
├── Project Files
├── colory.avif
├── style.css
└── index.html
├── README.md
└── LICENSE
/Pictures/1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsadiAhmad/Blur-Effect/HEAD/Pictures/1.JPG
--------------------------------------------------------------------------------
/Project Files/colory.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsadiAhmad/Blur-Effect/HEAD/Project Files/colory.avif
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Blur-Effect
2 | A Simple blur effect project for answering to stackoverflow Question
3 |
4 | stackoverflow Link : https://stackoverflow.com/questions/24152153/applying-blur-to-multiple-elements-under-a-single-div-is-it-possible/78214071#78214071
5 |
6 |
7 |
--------------------------------------------------------------------------------
/Project Files/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | }
6 |
7 | body {
8 | background-image: url(./colory.avif);
9 | background-size: cover;
10 | background-position: center;
11 | height: 100vh;
12 | width: 100vw;
13 | }
14 |
15 | div.text-conteiner {
16 | background-color: gray;
17 | width: 50%;
18 | margin: auto;
19 | }
20 |
21 | p.text {
22 | padding: 50px;
23 | text-align: justify;
24 | }
25 |
26 | div.blur-glass {
27 | height: 300px;
28 | width: 70%;
29 | position: fixed;
30 | top: 100px;
31 | right: 15%;
32 | background-color: rgba(220, 220, 220, 0.3);
33 | backdrop-filter: blur(5px);
34 | z-index: 10;
35 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Ahmad Asadi
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/Project Files/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quod iusto explicabo earum impedit labore facere sunt? Non consectetur exercitationem cumque, eligendi dolores quos id! Eaque iusto beatae quidem! Illum atque officia, sed eos quo aperiam sit deserunt nesciunt adipisci ex laborum voluptatem, officiis doloribus qui optio odit. Illo non facere voluptas quasi debitis numquam cum voluptate commodi iusto nesciunt incidunt ea deserunt alias, cupiditate veritatis voluptatibus dolorum a qui nobis, eligendi molestias excepturi enim aut? Rem enim dolorem quasi sapiente illum illo fugit temporibus suscipit magni! Voluptate est, placeat ullam minus quas aspernatur eius nihil quibusdam temporibus accusantium. Officia atque autem saepe veniam consequatur cum magnam laborum. Eius sequi facilis quas consequatur, dolores maxime, assumenda illo, adipisci aut voluptatum dolorum saepe minus esse hic modi nemo earum corrupti recusandae repellat. Praesentium iure dolorem reiciendis earum deserunt eius tenetur culpa cupiditate officia asperiores suscipit sed quibusdam perspiciatis minima accusantium, nesciunt quaerat
12 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quod iusto explicabo earum impedit labore facere sunt? Non consectetur exercitationem cumque, eligendi dolores quos id! Eaque iusto beatae quidem! Illum atque officia, sed eos quo aperiam sit deserunt nesciunt adipisci ex laborum voluptatem, officiis doloribus qui optio odit. Illo non facere voluptas quasi debitis numquam cum voluptate commodi iusto nesciunt incidunt ea deserunt alias, cupiditate veritatis voluptatibus dolorum a qui nobis, eligendi molestias excepturi enim aut? Rem enim dolorem quasi sapiente illum illo fugit temporibus suscipit magni! Voluptate est, placeat ullam minus quas aspernatur eius nihil quibusdam temporibus accusantium. Officia atque autem saepe veniam consequatur cum magnam laborum. Eius sequi facilis quas consequatur, dolores maxime, assumenda illo, adipisci aut voluptatum dolorum saepe minus esse hic modi nemo earum corrupti recusandae repellat. Praesentium iure dolorem reiciendis earum deserunt eius tenetur culpa cupiditate officia asperiores suscipit sed quibusdam perspiciatis minima accusantium, nesciunt quaerat
13 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quod iusto explicabo earum impedit labore facere sunt? Non consectetur exercitationem cumque, eligendi dolores quos id! Eaque iusto beatae quidem! Illum atque officia, sed eos quo aperiam sit deserunt nesciunt adipisci ex laborum voluptatem, officiis doloribus qui optio odit. Illo non facere voluptas quasi debitis numquam cum voluptate commodi iusto nesciunt incidunt ea deserunt alias, cupiditate veritatis voluptatibus dolorum a qui nobis, eligendi molestias excepturi enim aut? Rem enim dolorem quasi sapiente illum illo fugit temporibus suscipit magni! Voluptate est, placeat ullam minus quas aspernatur eius nihil quibusdam temporibus accusantium. Officia atque autem saepe veniam consequatur cum magnam laborum. Eius sequi facilis quas consequatur, dolores maxime, assumenda illo, adipisci aut voluptatum dolorum saepe minus esse hic modi nemo earum corrupti recusandae repellat. Praesentium iure dolorem reiciendis earum deserunt eius tenetur culpa cupiditate officia asperiores suscipit sed quibusdam perspiciatis minima accusantium, nesciunt quaerat
14 |