CSS Blur trouble with IE 11 - workaround? - javascript

I am writing a responsive web page using a blur filter to full screen blur an image. It is a big image and I use it as background. The point is, I use it as background as a CSS background.
E.g. I don't use
<img src etc.
I use the css property background. This gives me the advantage of using background-size for the responsive layouts. E.g. cutting off edges for mobile devices, and automatic shrinking, depending on landscape and portrait too.
This would be a lot of work, to do by hand.
Problem is, sadly, IE. Internet explorer 11 does not offer a way to use css blurring.
EDIT as mentioned in the comments, I could just blur the image myself in photoshop and am done.
The problem is, for lower resolutions I need different blur levels. If the screen size is 600x400 I cannot use the same blur that I was using for 1920x1200. So I have to blur ALL background images I have for ALL resolutions I am using. Then implement a loading Technic to only load the images that are needed. There are many background images. Around 50 total. New ones should be able to be added by the customer as well. I really don't see me making him do this process.
I read about:
StackBlur
But I can't seem to get it working.
What I tried in a codepen so far
HTML
<canvas id="canv" ></canvas>
CSS
canvas {
width: 100px;
height: 100px;
border: 10px #c0272b outset;
box-shadow: 0px 0px 12px 2px #333;
cursor: default !important;
background: url('data:image/jpeg;base64,...') center center no-repeat;
}
JS
stackBlurCanvasRGB( "canv", 0, 0, 100, 100, 5 );
as a reference the codepen i stole the image from

Related

White space when overflow on iOS browser

I'm quite new to HTML and CSS. I'm currently developing a web page for mobile. and I'm facing an issue is when I drag on the page that is not scrollable, there is white space coming down from the top, on iOS safari or chrome browser.
I have set my page CSS as follow:
.app-view{
white-space: nowrap;
top: 0px;
overflow-y: hidden!important;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
This white space only appears on iOS but not Android. Does anyone know how?
UPDATE:
I've got the answer, i'm using framework7, and there is another layer hiding underneath, when i change that layer to become position:fixed. The problem would go away
maybe there are some not expected margins or paddings in block that contains your .app-view, its hard to answer without your markup and other css

Html <div> Dynamic sizing, annoying behavior

I am fairly new to web development and I have the following in HTML:
<div id="map" style='width: 97vw; height: 76vh;
max-width:100%;
max-height:100%;
left: 0px;
top: 0px;
border-radius: 6px 6px 6px 6px;'></div>
I was trying to make div section automatically adjust itself as discussed many times before and using vw, vh seemed like the simplest solution here.
However when I stretch the width of the page, I get 'jumps', it don't auto adjust itself continuously.
This is before stretching:
This is just after stretching a little:
I am trying to keep the code clean, therefore it would be best if I can solve this using only html (yet I would still use javascript, css etc. if they provide faster/better solutions).
My goal is to have this map always ending from say 10px before the end of the entire screen, and adjust its size continuously when user stretches the page. What would be the best way to do this?
Note: I am aware similar subjects has been discussed several times before and I went through their content. However I don't think this is a duplicate because I am more concerned with the details such as 'jumps' as described in images, and I want to have a specific ending relative to end of the screen rather than just filling the page or having a ratio of it.

Is there a "good practice" way of detecting Firefox?

If I were to read the title of this question, having never seen it before, my first response would be, "Don't! Use feature detection instead!", which makes perfect sense, however, it is not a feature I am trying to detect, but instead how Firefox renders colors.
For some reason all other browsers I have tested so far render a certain hexadecimal color that appears between images beautifully but it appears lighter in Firefox.
I have read about possible reasons why (i.e. something about color profiles, which I am just now exploring the topic of) and the "about:config" file here:
http://support.mozilla.org/en-US/questions/774152
http://jorgebernal.info/2008/03/08/whats-wrong-with-colors-in-firefox/
http://www.maketecheasier.com/28-coolest-firefox-aboutconfig-tricks/2008/08/21
Knowing why is fine, but there seems to be nothing on the topic of how this should be handled by a web-designer (also, it is possible that I am confusing the issue here, because they seem to be talking a lot about images, and the color rendering I am having trouble with is not an image, but just a simple hexadecimal color code value).
Here are a couple of screenshots showing the difference between the correctly displayed colors (shown first) and how Firefox renders the colors (shown second). Note the colors between each "button" image (which is actually just a 'mousover' drop down box). Also note that the little color that shows between the images are not images themselves, just standard CSS rendered hexadecimal colors:
IE 10:
Firefox 21.0:
I am fine with any solution that could get Firefox to display colors the same way that IE and Chrome do (tested on both 32-bit and 64-bit, and still only Firefox does this [on both]), but I know I'm not going to change the "about:config" file for the whole world, so if I could just reliably detect Firefox, perhaps I could just adjust its colors to a darker shade. Unfortunately, I (probably very wisely) never use browser detection, as I know how unstable and unreliable it is.
Is there a reliable (not to mention, future-proof) way to detect Firefox for a web designer? I simply use JavaScript/jQuery for client side scripting.
--------------------UPDATE---------------------
Okay, here is the CSS that renders the border colors. The red-is buttons have two classes: DDL and visType, while the grey-ish buttons have the DDL and groupType classes.
.DDL.visType
{
background-color: #bb9191;
border-right: 2px inset #ba8c8c;
color: #1a5c17;
}
.DDL.groupType
{
background-color: #e7e7e7;
border-right: 2px inset #989898;
color: #0b3773;
}
So, you can see there is nothing wrong with this CSS as far as FireFox is concerned. In fact when looking at the true color rendered in Firebug's and Chrome's developer tools both say that the actual color rendered is the same for the red-ish buttons' right borders (in rgb it translates to 186, 140, 140).
For this scenario, the problem apparently was how differently Firefox renders the 'inset' border style. Why I had it as inset to begin with is kind of a blur. I was probably testing the various looks on such a thin (2px;) border (differences that are barely, if at all, noticeable given the very narrow width).
Once I had changed this style to solid;, the color differences were much less drastic:
Chrome 27.0.1453.110 m:
Firefox 21.0:
The same CSS code shown above with the new changes (Only changed both occurrences from inset to solid):
.DDL.visType
{
background-color: #bb9191;
border-right: 2px solid #ba8c8c;
color: #1a5c17;
}
.DDL.groupType
{
background-color: #e7e7e7;
border-right: 2px solid #989898;
color: #0b3773;
}
A simple solution for a somewhat obtuse problem that should never have occurred in the first place, I suppose (why use inset for such a thing anyway?), but narrowing it down was quite difficult.

Really cool javascript or CSS feature in website

Does anybody know how the eyeball in this website is designed? Is this javascript (jQuery perhaps), or simply HTML5 and CSS? I just don't really understand how you get a little image in that shape, get it's onhover method, set a new picture, and then make it clickable. Is this a button?
http://animalvfx.com/work/
They use one image as the background (found here: http://animalvfx.com/images/bg-open-close.png).
They are only using CSS, they have a hover state on the class that sets the background position to a negative offset.
Basically the styles are:
.slide-holder .opener {
width: 30px;
height: 38px;
overflow: hidden;
position: absolute;
bottom: -38px;
background: url(../images/bg-open-close.png) no-repeat;
}
.opener:hover {
background-position: 0 -76px;
}
Effectively you are only seeing one part of the background image at a time. Because the image states are similar, it appears to be looking up.
The click event of the eye is using jQuery slidedown
If you want to find out how things work yourself, you can use the developer console in most popular web browsers. Then use the HTML inspector tool to inspect the element you are interested in.
Developers consoles are usually activated by pressing F12. This works in any decent modern web browser (and Firefox with Firebug)
It is a sprite - http://animalvfx.com/images/bg-open-close.png - on hover the background image is shifted from the centered eyeball to the offset one.
.opener:hover {
background-position: 0 -76px;
}
I believe he compressed his javascript so its not legible to the human eye but I believe he uses a combination of jquery/javascript, and css3. The hover where the eye changes its appearance I believe is just some simple javascript to change the image when hovered over. I know for sure a toggle class is being used when you click the eye because you can see the class change on the list in the HTML source (it originally is set to display: none). This definitely seems like the work of slideDown from jQuery. Hope this helps :]

Paint all pixels (excluding transparant) in PNG with Javascript/CSS?

I need to create a silhouette of a PNG with Javascript/CSS. Is this possible?
I tried the following:
Stack the PNG with lowered opacity multiple times with absolute positioning and z-index.
This does not work.
Unfortunately I can't use PHP or something else then Javascript and CSS.
I got some ideas with overlays and such but I can't figure out how to do it. Any tips?
update: This only needs to work in webkit browsers, so you can bring your webkit trickbox! :)
It's not possible in plain HTML/CSS.
It would be possible in embedded SVG using a filter such as feColorMatrix to set all channels to one colour except the opacity.
It would be possible in a <canvas> using a composite operation, such as first drawing the image, then drawing a single colour over the top with source-out mode.
It might be possible in IE using a MaskFilter, using the MaskFilter to generate a masking colour (eg. white) laid over a fixed colour (eg. black). However I think you'll lose any variable-opacity smooth edges.
It's going to be a lot of browser-sniffing and annoyance. I'd try to avoid it.
Considering you've tagged this with webkit, you should have a look at the Surfin' Safari blog post about CSS masks.
E.g. Is this what you want?
<!doctype html>
<style>
div {
width: 215px;
height: 174px;
background: black;
-webkit-mask-image: url("http://webkit.org/images/icon-gold.png");
}
</style>
<div></div>

Categories

Resources