http://www.deviantart.com/#order=9&q=sun
As you can see, each picture...underneath it...it has a little tiny shadow around the edges.
How can this be done with a variable size image? (css)
Beside the answers above, let me explain how devianart does it ..
they have an image generator, that creates the shadow image at anysize they want ..
You can see the background shadow of an image at http://sh.deviantart.net/shadow/x/113/150/logo3.png
now playing around with the url and altering the 113 and 150 creates new images of arbitrary size which they use ...
You can use box-shadow, but it wouldn't work cross browser: http://www.css3.info/preview/box-shadow/
You can do this by shifting a background image behind the original image. There are quite a few tutorials on the internet:
Tutorial 1
Tutorial 2
Related
I’m new to coding, but I’m learning HTML. I started my website and I’m learning with a course I’m HTML and some css by learning as I go. What I want to do is change my background images to this ex.
(Row 1) IMG1 IMG2 IMG1 IMG2 (etc.) (Row 2)
IMG2 IMG1 IMG2 IMG1 (etc.) I want them to alternate left to right and top to bottom.
I’m not sure how to do this
So far I have this but I want a bit more pattern to it:
http://idk.freetzi.com/idk/idk.html#
I tried to understand your question and there're several ways to alternate images as your request.
Update the background animated GIF from your link. You can achieve this by image editor such as Photoshop. This is easiest way for beginners.
Prepare several separated images (in your case: IMG 1, IMG2 ...etc), build some DIV blocks / flexbox in desired order, so you can set different background images instead of a single one (body background image).
If you want to animate images, do it in the same way as point 2 but use IMG tag instead of background-image, then you can use CSS3 animation to animate them.
There're always alternative ways to achieve the same result, I suggest you to post your code and upload an image of the desired result to make your question easier to understand.
Hope this help.
essentially I am trying to recreate the hover over from this sight when hovering over the squares. http://thehf.org/ can anyone enlighten me on how this is done?
Its done through web-filters, which are applied in your css. there are a variety available, sepia, invert, grayscale to name a few.
here's a full code example with the sepia and invert demonstrated
Im trying to get something like this --> http://jsfiddle.net/NhvAZ/10/ but with image inside circle.
I did exactly the same way like on example above, but it doesn't work with image. Here is my code: http://jsfiddle.net/uyEaq/
Someone could tell me what I'm doing wrong?
Well that was really confusing, but looking at some of the previous iterations of the fiddles you've given I think I know what you want.
You want an ever increasing pie slice of an image to appear, right? Clipping can do that for you. Here's an example using some of your code:
http://jsfiddle.net/QMZg2/
I've been wrecking my brain trying to figure this out. is there any way to set one background image in css for multiple elements? I have a square-ish speech bubble, made with regular css, the triangle made with the border technique, but i want an background image to fill them both so it looks like a cut out all together.
I dont know any other way to design a solid shape using html/css other than squares and rectangles. If i could create a speech bubble as one solid shape, then giving it a bg would be simple lol.
I was wondering about html5's drawing capabilites, but im not sure...
Any ideas?
Edit: No, there's no option to do what you want. But if you wanna do spech bubbles, you can check any of these links:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://konigi.com/tools/css-tooltips-and-speech-bubbles
http://desandro.com/resources/css-speech-bubble-icon/
The reason for asking this question is because I want to be able to draw an arrow between two svg images. I want to use canvas to create the arrows, so firstly I generate the svgs then place a canvas on top of them to be able to draw the arrows.
I've tried using style=... but haven't had any luck as everytime I add the canvas element it just pushes my svg images to another pl
If there's no easy way to do this I'll just create arrows using SVG, I figured it would be more efficient to use canvas if I had to do lots of arrows in a short amount of time.
You need position:absolute on the CSS for the canvas to take it out of the flow, and then you can layer it as you like using z-index.
However, I instead suggest that you can use one or two tiny canvases to create the arrowheads and use toDataURL() on them to create a url you can use for <image> tags in the SVG. This way all your graphics are in SVG but you can use the canvas for complex raster effects if you need to.
have you tried z-index? it's a useful css trick
#svgcontent
{
z-index:1
}
#html5content
{
z-index:3
}
EDIT: accidentally screwed the #s up. 'scuse me.