I'm attempting to make a slideshow composed mostly of divs that can be masked by a canvas element (so that it may be in a circle or strange shape, rather than a square. Is this possible? I have seen many examples of masking an image, but not an entire div or collection of divs.
Yes its certainly possible to mask divs. For instance a canvas could mask a div like this:
that's just an image, source here:
http://jsfiddle.net/r58jF/
or white, which it should be noted merely gives the illusion of a circular div and that illusion is highly contingent upon what is in or behind the div
(or something fancier)
You cannot use the rendering of HTML elements as an image source for a canvas, and so you cannot use a canvas to draw the contents of HTML. If you want to make arbitrary portions of a div fully- or partially-transparent, the answer is "No, you cannot do that with a Canvas."
Related
Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.
In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.
I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.
So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.
Any ideas?
Here is how I understand your question:
I have a few image files
I want to display them side by side
I have one div and I do not want to (or can not) change the HTML I have
" Using CSS3, can
I display those images side by side as backgrounds of my div?"
If this is your question, the answer is no, not as of now. Sorry.
According to this standard specification,
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
there is no position value to place background images "after previous" or "floating".
More info on multiple backgrounds and background sizing:
http://www.css3.info/preview/multiple-backgrounds/
https://css-tricks.com/almanac/properties/b/background-size/
You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file.
<div style="position:absolute;">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div>the div to be backgrounded</div>
foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css.
without positioning, you will be limited to adding any "foreground" content to the divs with the background images
based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves
I have a <table> that I would like to overlay a circle on and have everything outside of the circle be blurred. The circle will change position based on a function, so it needs to be dynamic. I know how to do this with an image, but this needs to be a table. I have used the following CSS, but this will only let me blur an entire cell.
-webkit-filter: blur(10px)
The two options I can think of would be to overlay some sort of svg that is made up of a square and a circle and blur the space between in the edges (is this possible?), or to apply some sort of blur gradient to the cells that meet the edges of the circle.
Any ideas would be greatly appreciated.
Here is an example of what i am trying to accomplish. http://i.stack.imgur.com/f5EqT.png
It's possible to do something like this, but it might not be as straightforward as you were hoping.
JSFiddle Example
My technique involves cloning the entire content area, and overlaying it exactly on top of the original, but only revealing a portion of it.
You can clone the area through javascript (jQuery's .clone() works nicely), or you can simply include all the markup again in your HTML, but for a table this large, that's not very efficient.
To reveal only a small circle of it, I placed it all inside of a div element that had overflow: hidden set, so all the overflow gets cut off.
The tricky part comes with keeping that overlaid position right where it needs to be.
In my example, I have the circle move to follow the mouse. By default, both the circle, and the cloned content are absolutely positioned to the top left of the original content, allowing it to line up, but as my circle moves, the content moves with it, since it lives within the circle (setting overflow: hidden causes the circle to act as it would with position: relative, containing absolute positions within).
So, to compensate for this, I always move the cloned content an equal amount in the opposite direction as the circle is moving.
Then it's just a matter of blurring the original content, whilst keeping the cloned content crisp.
I hope that helps!
I started using html5 canvas object on my web site and I want to draw rectangles (or other shapes according to my application) on the canvas. I can write text on the rectangles using the context object.
What I am trying to do is that I want to put a div element in the rectangle. So I can semantically work with my objects on the canvas like put a paragraph and a border inside the rectangle etc., storing some trivial data in the objects. Is that possible?
Nothing goes inside the canvas tag except for elements that would be displayed if the browser doesn't support HTML5 and canvas. If you want to display regular HTML elements in a DIV, you could simply position it absolutely so that it floats above the canvas:
<canvas height="100" width="200" style="position:absolute;left:10;top:10"></canvas>
<div id="yourDiv" style="position:absolute;left:20;top:20">Your content</div>
Hopefully this helps.
Older Browser not supporting canvas should show those divs. As you can easily try out, other browsers will store the div in your dom tree, but not show it. So you should be able to do some dom semantics, but you'll have to paint them on your canvas for browsers supporting it.
If you want to show the divs and paint onto them using canvas, you'll have to use positioning to show them over each other.
I'm working on an HTML+Javascript Page flip effect.
I want this to accomplish this without the HTML5 Canvas element so that I can use this with text/forms etc.
This is what I have hacked together so far(webkit browsers,im using chrome 12):
JSFIDDLE: Page Flip
Preview:
What I want to do is not show the regions of the red rectangle outside of the blue rectangle.
My problem Lies in the MASKING / CLIPPING of the overlapping region (the purple area).
I tried to embed the page (red) div within the mask (blue) div and set overflow : hidden
but the problem was whenever the mask (blue) rotated, the page (red) rotated as well and the calculations were leading nowhere to correct with an offset.
Are there any other ways I can clip this region?
You have to calculate and implement counter rotation for the inner div to offset the rotation of the outer/masking div. Here's an example from our Sencha Animator demos:
I'm sure you've seen Roman Cortes's original CSS pageflip - whose method we copied for the demo who uses a common fixed rotation point for both divs.
If I understand the question properly, you want to have the (blue) div above the (red) div? If that's correct then add a z-index property to both and have the (blue) div z-index higher than that of the (red) div.
Update: It may be worth looking into the CSS clip property because your (red) div is already positioned absolutely. The only problem then would be that your (red) div, I believe, would need to be inside of the (blue) div.
On an HTML page, you can make text flow around images with the CSS property "float". But this will only consider the image's rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.
I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?
I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image's rectangle. You can find the code here:
https://unclassified.software/source/shaped-image-flow
Update 2020/2021:
Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.
Example:
<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
I really doubt you can do that easily without making a big mess, of tags, JavaScript or both. One way i can think is placing image on larger zindex and positioning div or divs behind it, and text would flow around them. It would be easiest to use smaller rectangle that excludes transparent areas. But then why not just crop/clip the image? Or you can try floating line height divs behind it, but I guess that it will get quite ugly pretty fast. Or you could try placing each line of text in span/div and positioning them manually or with js by calculating approximate shapes to those that are in the image. One other idea, of which I'm not sure: it might be possible do this using svg. But quick search does not show much promise ether.
Any way one more thing to consider, when doing something as experimental and complicated as this, in whatever way you do this, it will most likely be huge pain to make it work well across most browsers.
There is a css property that do just what you want
shape-outside include values of shapes you can use.
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/