At my new website project I have a fullpage background image. Over this, there is a dynamic div. This div shall blur the background image. So that just behind the div, the background image is blurred. I've just found some solutions on the internet with fixed positions and something like that. But that's something I want to avoid, beacause it's a full dynamic and responsive site.
And the backdrop-filter I wan't to avoid aswell, because it is alsmot not supported. But I don't care about the older IE and so on. If it works in modern browsers it's ok.
In short: unfixed/dynamic div shall blur the background image behind it.
I know, that a lot of people asked related questions, but they are all old and so are the answers. I've searched the half internet on this questions, but couldn't find a modern/dynamic answer. I can't believe that there isn't a jquery trick or something like that, that does the job.
I'm realy grateful for every helpful answer!
To make it more clear I added a picture. The DIV in this case is dynamic.
With this great tutorial and some changings in the CSS I did it:
http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
And its all CSS only!
Related
I've been looking for answers, but everything I could find does not seem to fix my problem.
I have a jQuery carousel that lazy-load images on demand (Slick Carousel). My problem is that when you're sliding the images, a thin grey border appears around the img placeholder (most of all on chrome and webkit browsers, but sometimes in firefox with a dotted line). When you click anywhere on the screen, the lines disappear, but if you continue sliding they come around each image.
I've set CSS properties border and outline to 0 and none, I tried to disable the lazy-loading to have a src too, but nothing seemed to make the little border disappear.
Does anyone know how to get rid of it?
I have attached two screenshots, one with the lines and one without them (After clicking in the background, they disappear):
This is the border for the active link element. Quick & dirty solution: Listen for the click event, then focus() on something else.
I got inspiration when writing this, so I checked the issues in the GitHub page of the slider and found this:
https://github.com/kenwheeler/slick/issues/1636
putting outline:none; in the corresponding container fixes it.
Thanks also to Thomas Landauer, haven't I checked the GitHub issues, your answer would have definitely put me in the right direction.
From what I can see the div below sort of eats into the image above as you scroll down creating what I think is a nice visual.
My only problem is I don't know what the terminology is to search for a tutorial on the process itself.
Does anybody know what search term I would use to find a good tutorial? I have literally tried everything I thought it might be called.
Example on a site where it is used: http://www.anakin.co/en
The term is called parallax scrolling.
The following link is a good tutorial, and explains how to achieve this in just CSS.
http://keithclark.co.uk/articles/pure-css-parallax-websites/.
Regarding the cutout effect I believe that is called clip masking.
The main content is on an overlay. If you look at the code though, in the css you'll see the "clip" property. It's since been deprecated, but it's been replaced by "clip-path". Showing parts of an image is called clipping/Masking and I believe you can find what you're looking for here:
https://css-tricks.com/clipping-masking-css/
EDIT: The background image is using parallax, which gives the background image "motion" when you scroll. But the actual effect of having that background show through is the clipping/masking in the article.
It's called Parallax scrolling http://en.wikipedia.org/wiki/Parallax_scrolling
Example here: http://jezebel.com/5896408/racist-hunger-games-fans-dont-care-how-much-money-the-movie-made
Click on the 3x3 Tweets screencap they have up. I love the way the lightbox makes a scrollbar. I viewed the source and inspected the element via Chrome and don't see any script that stands out, so I'm guessing it's probably something custom-made.
If so, does anyone know of similar scripts that look like that lightbox and can have a scrollbar effect like that? It's gorgeous!
Edit: I found the code, and I do not think they use a modified version of lytebox: http://ganja.gawkerassets.com/assets/base.v10/static/base.v10.jqueryplugin.20120424_8.js (ctrl/cmd + f for 'glimage'. They use their own thing. Still, I am having trouble finding the perfect jQuery lightbox with presentable vertical scrolling if the image is larger than the windowWidth.
It seems that they're using a modified version (glytebox) of this script:
http://lytebox.com/
IMHO, their lightbox isn't anything special. The scrollbar is probably something that most lightboxes display when the content is too big to fit on the screen.
There are many of us looking for a Javascript/CSS3 solution that can provide a windows7-like UI within a webpage, without using flash.
We need an Opacity mask, rounded borders, and a Blur...
We've got the Opacity and the rounded borders, now we need to be able to apply some Blur effects to a semi-transparent Div.
I tried the BlurFast effect from the Pixastic Library, but it only blurs the actual image, not the background we are seeing trough the image...
Basically, we want a Div to act as a Blur Mask over other contents...
If someone actually succeeded with this, i'll be glad to know its possible :) Thank you
http://t.co/fFLPKnzC
very good article on blur showing the state of the art
sadly "masking" parts of your page, that blur everything behind, is not that easy.
maybe the suggestions in ths blog help you out, as they are very straight forward and from a totally different direction..
therefor to embedd html within svg and use svg-filters on html elements later on
Thought this could be relevant: Aero
Personally, I think the fact that the author states this to be "In other words, one of the most messy and most ineffecient implementations ever"... AND that he can onlt get the effect to work in a single browser... to be extremely telling.
There is no way to do this efficiently or cross-browser at the moment.
The only way you might be able to do it is by using Pixastic to create the blurred image within Canvas, export as dataURI, then use that image as the background for your div. If the div moves, then the positioning of the background-image should move accordingly.
I was looking at this gallery:
http://www.orangegirlphotographs.com/portfolio.cfm?galleryID=4
And just loved the way it looked, anyone have any idea how to get a similar effect using ideally CSS/JS and if not then using flash? Furthermore it would be excellent if you could move to the next slide by clicking on the image itself.
I'm also wondering how she is able to maintain height of the images when resizing (unless she is doing it manually which I doubt now days).
I normally use Gallery3 for my image uploading, automatic resizing with AnotherSlider to get a sliding effect but I would really appreciate it if you guys could direct me to something like this?
jQuery's probably your best bet here. I've used the Cycle plugin with slideshows before: http://jquery.malsup.com/cycle/
Look at the examples and you'll get an idea of what it can do: http://jquery.malsup.com/cycle/more.html?v2.23
For the height, either all the images have the same height, or simply setting it in html will keep the ratio. It's better to have them all the same height and resize them in something like Photoshop as the results will be smoother