How to ONLY blur color of table in CSS? | Sololearn: Learn to code for FREE!
+ 1

How to ONLY blur color of table in CSS?

I have table with background gray trqnspert 50%. I want to blue ONLY the background. Is it possible and how?

5th Jan 2019, 3:29 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
29 Answers
+ 6
Here is another attempt lol https://code.sololearn.com/WaWoZi8MY17T/?ref=app Best of Luck
5th Jan 2019, 6:57 PM
bobbie
bobbie - avatar
+ 4
Perhaps this may help if you need changes let me know. https://code.sololearn.com/WEOZkz2Capdg/?ref=app
5th Jan 2019, 6:02 PM
bobbie
bobbie - avatar
+ 4
Cлaвeн Ђервида it's not blurring much for me either I'm trying other solutions but not there yet.
5th Jan 2019, 6:17 PM
bobbie
bobbie - avatar
+ 2
Cлaвeн Ђервида probably I just positioned it quickly close to where it would be useful.
5th Jan 2019, 8:02 PM
bobbie
bobbie - avatar
+ 2
Cлaвeн Ђервида Bobbie's demo #2 is close enough for you😉 Particularly she had all vendor prefixes : -webkit-filter: blur(13px); -moz-filter: blur(13px); -o-filter: blur(13px); -ms-filter: blur(13px); filter: blur(13px); to ensure compatibility. You'll need to walk the last mile yourself by fine tuning width and height of .blur after you fix the content of your table. Yes you can 😉 She coded two demo exclusively for your Q&A voluntarily, I think she deserved a big thank you😉
6th Jan 2019, 6:27 AM
Gordon
Gordon - avatar
+ 1
Cutting the picture and showing only a portion https://www.w3schools.com/cssref/pr_pos_clip.asp Let me find a demo for you
5th Jan 2019, 4:50 PM
Gordon
Gordon - avatar
7th Jan 2019, 4:12 PM
ODLNT
ODLNT - avatar
0
It is on my PC. I will soon copy to SL!
5th Jan 2019, 4:03 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
5th Jan 2019, 4:07 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
0
I tried add filter:blur(1px) to table but the table content got blurred instead of the background behind content Best way I can think of is adding opacity of background color https://code.sololearn.com/WXByF6h5DYoD/?ref=app
5th Jan 2019, 4:18 PM
Gordon
Gordon - avatar
0
It blur all background. I think to blur only the part of bg where is table
5th Jan 2019, 4:29 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
0
It blur all background. I think to blur only the part of bg where is table. Something like on Windows 10 effect.
5th Jan 2019, 4:29 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
0
Maybe after the position of table is fixed, then use absolute positioning to place an clipped part of the background beneath the table and then blur that?
5th Jan 2019, 4:36 PM
Gordon
Gordon - avatar
0
Do you think on this? Create another object with same size and position and blur that. (table bg is transparent 100%) ?
5th Jan 2019, 4:41 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
0
Table bg still can have opacity 0.39 The image is clipped. And placed beneath the table. You know clipping?
5th Jan 2019, 4:45 PM
Gordon
Gordon - avatar
0
No enough
5th Jan 2019, 4:46 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
0
Thank You.
5th Jan 2019, 5:00 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
0
https://www.sololearn.com/Discuss/1549296/?ref=app This demo is good for circle clip. You need rectangle clip. clip: rect (top, right, bottom, left) This method is "brutal force", Not flexible, you may need to adjust clip following every change in content. Otherwise make your table very spacy, and no need change table size.
5th Jan 2019, 5:01 PM
Gordon
Gordon - avatar
0
Gordon I don't see differences between outputs
5th Jan 2019, 5:05 PM
Cлaвeн Ђервида
Cлaвeн Ђервида - avatar
0
I am not sure I understand what you mean by "differences between outputs"
5th Jan 2019, 5:06 PM
Gordon
Gordon - avatar