How I can take any given webpage and make everything look tinted a certain color. Basically, if you take google and tint it orange, it should look something like this:
The way that I have been trying to accomplish this is by adding a div at the VERY END of a webpage's body tag. Basically, this is what I do:
<head>
stuff that goes in head...
</head>
<body>
all the content of the webpage...
<div style="position:fixed;height:100%;width:100%;
left:0px;top:0px;opacity: 0.5;">
<div style="height:100%;width:100%;position:static;
background-color:orange"></div>
</div>
</body>
Unfortunately, what happens when you do this in Google looks like this:
As you can see, the top bar of Google's webpage is not impacted by the tint in this second picture. This is just one example of my code not working, the chat conversations nor the header bar of facebook gets tinted by my code. I'm sure there are plenty of cases where my code does not completely tint the whole page. I am not sure if adding a div to webpages is the right way or maybe I should just try something with javascript. If it isn't clear, I want to be able to tint the webpage in the browser, NOT by screen capturing it and editing the image in a program as I have done with the first image.
In the end, what I need for my project is to be able to manipulate the visual output of a webpage in many strange ways (stretch the page, dim it, blur it, make it look fisheye, make it shake like the screen is shaking, etc.). Essentially, I want to learn how to have as much control over a webpage as possible. Even if you can't help me achieve this, if you can help me with the current issue of tinting the webpage in any way, I would appreciate it.
You need a few more css styles:
position: fixed; /* keeps the screen covered durning scroll */
z-index: 100000; /* puts it on top of everything */
top: 0;
left: 0;
opacity: .3; /* so we can see through it */
pointer-events: none; /* so we can click through it */
Update
Regarding the last part of your question, you should be applying classes to <body> Then you dont have to insert divs.
For example, here's a way to do the tint by just adding tint class to the <body> tag
.tint:after {
content: '';
position: fixed;
z-index: 100000;
top: 0;
left: 0;
opacity: .3;
pointer-events: none;
background: orange;
width: 100%;
height: 100%;
}
.tint.dim:after {
background: black;
opacity: .6;
}
For animations, check out Animate.css
You need z-index in your case, since some of its elements have their z-index specified.
Mine works great with,
.oranged {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: orange;
opacity: 0.4;
z-index: 1000;
}
<div class="oranged"> </div>
Or on-the-fly..
<div style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: orange;z-index: 1000;opacity: 0.4;"></div>
Related
I'm working on a to-do web app and I'm trying to achieve a visual effect wherein multiple todos appear to "share" a single background. So, imagine that a user adds a few todos. Their backgrounds appear as a part of a single gradient, with colors transitioning from top todo to bottom todo. This pen should hopefully demonstrate what I want to happen (click the first div):
Elements 'sharing' a background
HTML:
<div class="outer">
<div class="inner"></div>
<p>CLICK ME</p>
</div>
CSS:
.outer {
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 200px;
background: white;
overflow: hidden;
clip: rect(auto, auto, auto, auto);
transition: transform 500ms ease-in-out;
font-size: 2rem;
}
.inner {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, red, orange, green, blue);
opacity: 0.5;
}
Now this already kind of works, I guess, but only if I manually animate position of the divs. Is there some way to utilize CSS transforms instead? The big problem there is that as soon as a transform is applied to outer div, the fixed child div stops being fixed, completely destroying the 'same background' illusion. you can see it in this pen:
Illusion fail
I read that it's part of the spec and that's just how it is, but thought maybe you CSS wizards here know other ways to achieve this effect, perhaps even without fixed child divs. Would really appreciate your help.
Here's an example using clip-path, but one issue is that it doesn't clip the same way as clip does, because it only clips the element itself, not child elements under it. Children elements will also get clipped, so they have to be moved to match the new clip position.
https://codepen.io/mix3d/pen/OJPjbGp
So, using html, css, javascript, I am looking for a way to have it so that my page will load with the background image blurred. Then, after the whole page loads, the image slowly goes from being fully blurred to being not blurred at all. Not an instant blur to crisp, but I nice transformation.
Not sure if I would have to have a blurred picture and one thats not and just somehow switch the pictures slowly? Any tips would help.
Blurring sounds like a nice job for Canvas.
Maybe have a look at http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
You can put your canvas page-wide on your screen with something like:
canvas{
position: absolute;
top: 0px;
z-index: 0px;
}
Then draw your background-picture blurry (have a look at the hyperlink) on it, and use setInterval or something like that in order to unblur it gradually.
I managed to be able to blur the background-image using a CSS hack. Usually, I would just set the opacity property of a container, but that would effect everything in the container. What I did instead was use the :before pseudoclass to toggle only the background-image.
#myContainer {
height: 400px;
width: 400px;
position: relative;
overflow: hidden;
}
#myContainer:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCFyJhwDi5ud74pENDaCIuggegz89q6Odhke5IEo7vEKwjewDxsQ);
}
h1 {
color: blue;
}
http://jsfiddle.net/59zutyLd/1/
https://css-tricks.com/snippets/css/transparent-background-images/
To remove the blur, you could use the jQuery animate property for something like this
$("#myContainer:before").animate({opacity: "1.0"}, 2000)
Unfortunately, pseudoclasses are not part of the DOM, so they can't be used in jQuery.
Keep the background_div with position:relative
Create a overlay div inside that and keep it as position:absolute, opacity:0.5, full width, full height.
Apply fadeout effect on overlay div
I hope it will the expected output.
Try the demo here:
[1] https://jsfiddle.net/fnwL8ozg/3/
Correct me if I'm wrong but what you are looking for is "Blur Up" technique described here: https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
TLDR:
You create very small size copy of original picture
You load that first and add Gaussian blur overlay so it doesn't seem bad
On download complete with basic JavaScript you change pic with original
Add transition to blur none and profit
I'd like to create a bit of embeddable code that a user can drop into their website that will load some Javascript. If some conditions are met, I'd like to add a small header to the top of the site, pushing down the rest of the content. Is there a simple way to do this that'll work on most websites?
I understand how to load and execute the JS - I guess I'm just wondering what the HTML/CSS would look like on both my header, and what would need to be altered on the user's site.
Have you considered using a floating header on top of their websites as opposed to shifting their entire website down? I think that'd be significantly easier.
That way you could just smack a div anywhere like so:
<div id="header">Whatever content</div>
<style>
#header {
left: 0px;
top: 0px;
width: 100%;
height: 30px;
background-color: black;
z-index: 1;
overflow:hidden;
min-width:280px;
position: fixed;
}
</style>
Or you could remove the position: fixed if that's too annoying and just make sure your div is on top.
jsFiddle
There is the bootsrap navbar: http://getbootstrap.com/examples/navbar/
Maybe solve your problem.
I have a news tab where whenever an user clicks it, the popup box shows up with the details, however I want the background or the body tag itself to dim so I wrote:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("body").css({"opacity": "0.5"});
});
However the box itself dims either. Is there a way to make the box ignore this command? Or maybe there is another way around?
As body contains the #pbox then the box itself will be subject to the 50% opacity you have applied. A better method would be to overlay a semi opaque div over your entire window, and then position #pbox above it, a little like so:
#overlay {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
display: none;
}
#pbox {
z-index: 1;
}
So here you have the white #overlay div appearing over all your content with 50% opacity. Above it is #pbox with a z-index specified to ensure it appears on top.
The jQuery code would be a little like this:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("#overlay").show().css({"opacity": "0.5"});
});
Unfortunately, there isn't. Since the popup is inside the body tag, it is included in the change in opacity.
The only way to do this would be to make an overlay layer which covers the entire body and is translucent, and then place your popup above that.
I'm developing a chrome extension, without going too much into it I need to inject some code into webpages and put an overlay over the full page. Thus far I have nearly achieved this butI just cannot seem to get the overlay over certain parts of some websites. These include videos from youtube, the searchbar on top of google search results, random parts of kongregate (the stars and monthly comp info).
Below is the css I'm currently using to achieve this, I have played around and looked for solutions at various places but no solutions seems to work.
.cssX9482Overlay
{
position: fixed;
width: 100%;
Height: 100%;
vertical-align: middle;
background: #000000;
opacity: 0.97;
filter: alpha(opacity=97);
text-align: center;
top: 0;
left: 0;
}
The strange css name is just so it doesn't clash with pages formatting. As you probably guessed this is being used to format a div
Remember this is a Chrome extension, therefore HTML5 and CSS3 solutions are valid.
<style type="text/css">
iframe, div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:25px
}
iframe { z-index:1 }
div {
z-index:2;
background:#000;
border:solid 1px red;
color:#fff;
}
</style>
<applet code="myApp.class" width="700" height="700"></applet>
<iframe></iframe>
<div>EXAMPLE TEXT</div>
TAKEN FROM: http://www.bluestudios.co.uk/blog/?p=6
Also you had height capitalized
You might need a z-index in there; on a Google search results page for me, adding a z-index: 999; covers everything except the top navigation (Web, Images, Videos). This is because Google's CSS looks like:
#gbz, #gbg {
...
z-index: 1000;
}
Elements with a larger z-index are placed on top of others. Even while using this property, I've had problems in the placing content on top of Adobe Flash elements and Java applets.