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/
Related
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
I'm stuck with the menu below. All the website needs to be in HTML.
http://hpics.li/740c57f
WHAT: I want to have an hover image for all the different parts when the mouse go on it. (event/brand/website/print/UI/VIDEO)
PROBLEM: The images are overlapping and the mouseover start when i'm on the transparency of the png.
SOLUTIONS I TRIED: Imagemap to detect the zone and then put javascript code inside the AREA. doesn't work.
Imagemap to detect the zone, put an id in the AREA and use a separated JQUERY with .hover(function(). doesn't work.
Use z-index: impossible because there will be always an image that will hide the one under.
QUESTION: If I can't use ImapeMAP to select my zone and use CSS or JQUERY, how can I do ?
Thank you so much for your help!
Might be too late but the exact case can actually be solved by a class I wrote around 3 months ago. It allows you to check whether you're on a transparent area or not and also check for other elements behind the transparent area, this allows to overlap multiple transparent images and correctly jump from one image to another at the correct point.
http://www.cw-internetdienste.de/pixelselection/
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 have some variables on PHP who gain values from 0 to 100. I want to develop a simple graph system that draw a horizontal rectangle given the number (0, 1 , 50 and soo). Also i want to add some gradient to the background, doing this in php is complicated and i dont want more load in my server, so i know this is possible in css, but im not a css developer. So if any body can help me with this. In this page (http://www.answerbag.com/) you can se how i want the rectangle, in the results of the pool section in the middle of the above page.
that's very simple since you know the width. Since you probably want the full spectrum of the gradient to show, you probably want to resize the gradient image by using a css #score1 { width: 30px } on that <img id="score1" src="blue_gradient.png"> Then later on, you can use one of the many rounder corner methods to add the round corners to it.
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.