I am trying to make an effect in which the whole page would be dark except for a specific part that'll be transparent. That part would be a circle which would be moving randomly. Now where ever this circle goes on the page, content under the circle would be able to be seen while the whole remaining page would remain dark.
Where I AM?
I have created the script that'll move the circle randomly on the page but i can't get the effect. Don't know what to do.
Please take a look on the following image. It'll give you a better idea of what i am trying to achieve.
Now consider that this transparent circle is moving randomly on the page ( i have already made the script for that).
Kindly take a look on this fiddle. It'll show where i am.
Thank you..
This is simple matter of adding a giant box shadow to the moving div.
No extra elements required.
Unprefixed CSS
box-shadow: 0 0 0 9999px black;
JSfiddle Demo
Try using CSS Masks:
Just draw a circle in photoshop and use CSS techniques to apply the mask on the image.
CSS:
-webkit-mask-image: url('image.png');
More info here:
http://thenittygritty.co/css-masking
and here:
http://www.html5rocks.com/en/tutorials/masking/adobe/
Related
I've been looking for this for some time but I can't find any ways...
My webpage has a square texture as background and this texture is set on repeat to fill the background.
When someone enters my website for the first time, the texture loads like a puzzle, every square one by one.
Is there a way (any way) to delay the webpage from being displayed until the background loads?
The only thing I found so far is related to hiding and unhiding a div with onclick event.
CSS Code for background:
html {
background: url(/background.jpg) center center fixed;
background-repeat: repeat;
position: relative;
}
EDIT: I've added a better solution. It's a lot simpler and more straightforward than my first suggestion.
Solution 2:
You load the background-image in Javascript. Then you set the background-image on the body element (or whatever element you had in mind). Once the image is loaded, you hide a loading (spinner) element that was above the main content.
Here's a JSFiddle of that.
Solution 1 (old and more extensive):
It's a little more creative and extensive, but should get the job done.
Basically, instead of using a CSS background, you use an HTML5 canvas. On that canvas you draw your texture with a for loop. Once everything is drawn, you display your page by hiding the loading element.
I am making a page on my mobile app that can crop images.
What I'd like to do is have a div overlayed on top of my image. This div will have a box within it, and that box should be transparent so that you can see the part of the image you want to keep. Outside the box, I want the image to be shaded.
This image below is an example of what I want to do, except instead of the fancy border I can just have a regular border.
Is this possible with css or javascript?
(Ps I know the below is a software program, but just imagine the picture is html and that's what i'm trying to accomplish)
Your best bet is to prob use 4 divs with an rgba(0,0,0,.5) all around the region
Very interesting question but unfortunately there is no easy way of doing it using HTML/CSS. There are several proposed solutions which you can find with bit of googling like this one Make part of a image transparent but i couldnt really understand that solution.
So how i'd go on about this and probably the simplest solution would be to initially have all the image greyed out (low opacity) then when the user draws the div on top of it by giving x, y, width, height.. then in that div, display the cropped part of that same image with normal opacity using the values of x, y, width and height.. you can get the exact part of the image to be displayed in the div. For this purpose, the following thread will help you:
CSS Display an Image Resized and Cropped
Idk how useful this method will be but that's one way to do it or atleast i'd do it that way.
I would like to know how to be able to "darken" the image of a html page without darkening the area I selected over that same image, just like this example http://odyniec.net/projects/imgareaselect/ . I studied the code but remained the same. Can someone help me? Thank you!
EDIT:
I was able to darken the body but unfortunately, even playing with opacity, the content inside the div referring to the selection remained faded to.
They are achieving this affect using four different div's to do the darkening. One for everything to the top, right, bottom and left. Don't have time to explain further right now, but that is what is happening on the surface level.
First off, just want to thank the author for making this great bit of code available for free, and the community for helping java-illiterate folks such as myself.
Anywho, here is my issue: When I click a thumbnail to enlarge it, it enlarges just fine. However, when it's enlarged, the only way I can shrink it is by placing the cursor on the very thin ~1px border. I do not get the magnifying glass shrink cursor when over the image itself. If you wish to view the problem, the code is live at http://www.coloradocanopyclub.com/photos.html.
*EDIT TO ADD* This issue seems to be affecting the first photo ONLY. (tallison.JPG)
Thanks for any help!
The universal selector at the top of your style.css file causes this problem:
* {margin:0px;padding:0px;top:0px;left: 0}
It’s ok to set margin and padding to 0 for all elements, but the problem starts when you sets top/left position for all relative/absolute positioned elements 0.
You’ve probably noticed the Highslide full-expand button. This button is placed in an overlay on top of the image. Standard position for the full-expand button is bottom right corner: http://screencast.com/t/WPP4iwwCI9dq Your universal selector moves it to upper left corner: http://screencast.com/t/maXl9rzveH When the button is moved like this with CSS, it will result in an overlay that covers the entire image – colored red in this screenshot: http://screencast.com/t/6pdDnxaMRQ - which makes it impossible to close the image.
You need to change your universal selector to this:
* {margin:0px;padding:0px;}
And add top:0px;left:0px; only to the selectors where you need it, which are (as far as I can see) #navlist li a span and #content
How to create such (see image below) effect using pure HTML JS and CSS?
(source: narod.ru)
For a site backgrownd (And I hoe that because of JS CSS and HTML it'll be able to change colors)
Well, this can be done with CSS Gradients.
But, i am not sure if that is supported in all browsers.
For cross-browser support, use this library.
You need a different approach.
Check out this url: http://www.eyecon.ro/colorpicker/.
As you can see when you move slider up and down it changes the background of the picker div.
But if you inspected this DIV with Firebug, you would see it is always using this image: http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png
..because parent div is using the actual colour:
<div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div>
Try to replace this background value in firebug, set it to green for instance - you will see gradient is still there, but this time gradient is green.
And that's our trick. Create semi-transparent PNG image to use as a background, with the pattern you showed above. Put it on top of the solid-colour background, and when you change background colour it will look like you replaced background image.
So in the theoretical code:
body { background:red; margin:0; padding:0; /* make sure overlay can stretch 100% in all directions*/ }
#background-overlay { background:url(path/to/image.png); }
<body>
<div id="background-overlay">
..content goes here
</div>
</body>
The downside of this approach is that IE6 doesn't support transparency for PNG files. You could either use some sort of png transparency fix or ignore this effect completely for IE6 users. (as we don't care about their feelings anyway, right? ;-))
Still in my humble opinion this is the most proper way to achieve the effect you want, knowing you would want to change background colours later.
I think this may require an image (which could be set through CSS to the background of whatever container you wish to put this in), but I don't think you'll be able to do this with pure scripting.
Technically speaking you can change your background-image using CSS. Getting it to tile properly left to right means creating the image at a width which makes the borders between horizontally repeated (background-repeat: repeat-x) images seamless, so that it will look like each diagonal line picks up on the left side where diagonal on the image to the right leaves off.