I wanted to ask if it's possible to create 'transition' between two images like this:
using css/javascript?
The thing on top is a div with it's content and background image (sand/water) and i have some other div on bottom (also with some content and background-image) that needs to be split using that 'wave' (which is .png file).
Things i tried to do was using 'wave' as a border-image, which obviously didn't work. I found out that i probably have to use tools like http://bennettfeely.com/clippy/ to create some shapes for both top and bottom divs, but it's going to take a lot of time and may not be responsive.
Thanks in advance.
Yes, this is possible. You simply need to use multiple background stacking.
e.g.
background: url('images/wave.png') no-repeat center, url('images/beach.jpg') no-repeat center center/cover;
Where the wave png file must have its semi-transparency so it can show the beach below it.
EDIT: The aim of OP's question is to clip the image so that it can take only the wave's area. That is achievable trough the use of clip-path. More information about this can be found at CSS Tricks.
Related
The background customer gave us has 4:3 aspect ratio and looks horrible when repeated on modern screen. I thought if I can mirror each repeat horizontally it would look nicer. Is this possible with plain CSS?
Not with background images. You can mirror single elements, but not a part of a single element (as a background image is).
I guess the best option would be to save the image including its mirrored version into one graphic file and repeat this one.
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.
Ok so I've done some looking around and couldn't find a good enough answer to this question.
Basically what I'm trying to do is minimize my websites header when a button is clicked.
Heres the CSS: http://emstectest.site44.com/style.css
I've been playing around trying to get this to work but here's the problem, I'm trying to make the background image, which is a dark blue divider colour which seperates the header and body move up when the expand link is clicked (using :target on the #header style).
But I've tried something like:
#header:target { background-position: center -300px; }
but the only thing that actually moves the background image is when I do:
body { background: url (PATH) repeat-x center -300px; }
Any help on this would be greatly appreciated. I'm holding back on using Javascript on this due to my lack of knowledge in the area; that and the fact that I want load times to be the main priority.
Another question as well as this would be: is there also a way to animate this process using -webkit- or would I have to use Javascripting again?
Thanks in advance.
- James
From the w3schools.com
Definition and Usage
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.
The :target selector can be used to style the current active target element.
Look at an example here
Your image has a fixed width of 440px so if you are trying to reduce the height if it you'll need to adjust it's proportions.
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.
I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?
You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve
Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.
If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.
CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.