What approach to use to make an odd shaped menu on a website, like attached? Each piece of the circle should be a separate link. Hovering the mouse should be rather precise, especially near the middle. (The absolute 20px middle could be no link at all, if not posible to be 100% precise)
I've seen irregular menus made using overlapping rectangles, like here: http://www.vanityclaire.com/
Shapes are overlapping, but menu is made from rectangles, a little cheating takes place. However, in my case, the amount of overlapping is too much to use any such technique. Is there any chance to do it in browser/device compatible way, other than just use flash?
Actually, you can do it using CSS3 - see my demo: http://dabblet.com/gist/3116939 //
EDIT: version that also works in IE9 http://dabblet.com/gist/3117278
The idea is to have a div .pie with "slices"
<ul class="pie">
<li class="slice" id="s1">
<a class="slice-contents" href="#slice1"></a>
</li>
<li class="slice" id="s2">
<a class="slice-contents" href="#slice2"></a>
</li>
<!-- and so on -->
</div>
You make the pie to be a disc using border-radius: 50%;
You skew and rotate each slice. You bring back the contents of the slices to a non-skewed rectangular shape (which can also prove useful if you want to have text on the slices) and then you set the background.
SVG can do it. But not available in old browsers.
You can try image maps, or SVG (with a fallback / polyfill).
Related
I don't have much experience in css. But I want to design a diagram in html. I need to design slimmer arrow (link) using css.
I thought of using image but I need arrows in different colors. Is there any possibilities by adding transparent arrow image and adding colour dynamically if yes provide sample code or any other suggestions also welcome. Kindly suggest me.
Try to use Font awsome LINK
HTML:
<i class="fa fa-arrow-right"></i> fa-arrow-right
Yes, there are several ways of doing this.
1. With an image
First of all, in order to do what you've suggested, you can indeed use an image - but instead of coloring the arrow, you would be coloring behind a cut-out of an arrow.
To do this, create the image of your arrow in a file format that supports transparency (PNG would be my recommendation). For example, a white square with the shape of an arrow 'cut out' of it, so that the arrow is entirely transparent (surrounded by white). It could look something like this in Photoshop;
Now, with your transparent PNG, insert the image into your code and surround it with a container - such as a DIV. You can then style the DIV (not the arrow), but the arrow will appear to change color.
Your HTML and CSS might look something like this;
<div style="background-color: red; display: inline-block; font-size: 0;">
<img src="arrow.png";>
</div>
background-color: ---; will determine the color of your arrow (you can also use hex values for better specificity - for example background-color: #CB0022;).
display: inline-block; is one possible way to keep your wrapping DIV under control. Without it, your background color will stretch to the full width of its parent container (possibly the entire page) - breaking the effect you're trying to create. Alternatively, you could also float the DIV, but this will complicate matters if you want the arrow to appear in the middle of text.
font-size: 0; is one possible solution to the common issue of extra space appearing around the image (and again, revealing unwanted background color where it shouldn't be).
The main downsides of using this technique are that manipulating images may be complicated depending on your precise layout/implementation. Also, the above example is suitable only for a page that has a white background. If you have a variety of background colors (or a more detailed/complex background, such as a photograph or pattern), this may be a very difficult solution to work with, because your arrow's 'box' is unlikely to match what's behind it.
2. With Unicode / HTML characters
Rather than using an image, you can use unicode characters to write out arrows as actual text. There are lots of these codes - and an example of them can be found here: HTML Arrow Codes
For example, your code might look like this;
<p style="font-size: 2em;">Why don't you look over there? → →
... or down there? ↙</p>
This would look something like this in a browser;
And then you could further style the arrows with <span> tags in order to change their size or color independently, like this;
<p style="font-size: 1.5em;">Why don't you look over there?
<span style="font-size: 4em; color: blue;">→</span>
<span style="font-size: 2.5em; color: darkgreen;">→</span>
... or down there? <span style="font-weight: bold; color: #CC0000;">↙</span></p>
Which would look something like this;
The main advantages here are that you will have no issues with matching against background color, you can more easily change the appearance of the arrow with code (CSS).
The downside is that using obscure characters and fonts can, in some cases, display inconsistently from device to device for a multitude of reasons I shan't burden you with right now. Suffice it to say, if you prefer this solution, be sure to test your results on as many different machines as you feel is appropriate.
Hope that's of use.
http://dhrumin.com/uploads/index.html
Link above is my page I have been working on. I am using border top bottom as a background image. It looks great on Chrome and FF. But on IE it will just show one solid color background image wont show up.
Can someone help me with what I am missing out?
Thanks!
IE doesn't support the border-image property as you can see here. A workaround would be to create two divs, above and under and give them the desired background-image :
HTML :
<div class="myborder"></div>
<ul id="blockquote">
<li>Completely formulate parallel customer service rather than B2C initiatives.</li>
<li>Compellingly target efficient experiences whereas seamless partnerships.</li>
<li> Seamlessly transition customer directed applications whereas intuitive.</li>
<li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>
CSS :
.myborder {
width: 600px;
height: 13px;
background: url('quote-border.png') repeat-x;
}
Don't accept this has the answer, i just moved content from 'comments'.
border-image is not supported in any version of IE currently - caniuse.com/#search=border-image – Nick
Indeed, you will have to split your html to make a top and a bottom div with background-image – Brewal
#Brewal, those are answers IMHO. – aldux
From my own, i would use :before and :after to create what you want.
You want something better ?
<div class="container with THE-texture and padding">
<div>Your content</div>
</div>
This way, the outter container would act like an image background-border. Here is a working example.
it is to be IDENTICAL in visual result than what you wish. In html, you added 1 extra container. That's a difference.
Oh, let me guess, there are 'simili' borders on the sides ? --> remove side's padding : http://jsfiddle.net/8puJf/1/
I would like to create an indeterminate HTML+CSS progress bar so it looks like the one on Vista:
(source: microsoft.com)
I would like to:
horizontally adjust it to progress bar width (minimum and maximum width may be defined)
don't use Javascript but rather just animated GIF
having only one moving indicator on the whole width
Any suggestions how to do this?
NO, NO, NO! It is possible
Using CSS overflow: hidden and keyframe, it can be possible.
For the keyframe, I used from left:-120px(width of the glowing object) to left:100%
The structure I used:
<div class="loader">
<div class="loader-bg left"></div>
<div class="loader-bg right"></div>
<div class="greenlight"></div>
<div class="gloss"></div>
<div class="glow"></div>
</div>
The updated, compact structure using :before and :after:
<div class="loader7">
<span></span>
<div class="greenlight"></div>
</div>
The gradient, masking, glowing and all the effects cost an expensive structure. If anyone has a better idea, please let me know.
At this date, webkit only solution(the ellipse mask for the glow):
Added SVG mask for Firefox and other browsers that do not support -webkit-mask-image: http://jsfiddle.net/danvim/8M24k/
css - width:100%
no Javascript means you will have to do it with html5 which is a bit trickier. An animated GIF would work only if you decide to make the bar fixed-width (otherwise the gif will be skewed)
to move it: javascript or html5
The easiest way: javascript (like it or not... ;) )
GIF-only solution
Vista's indeterminate progress bar doesn't loop right after it goes off on the right...
So I could create a wide enough GIF image and when progress bar would be narrow it would take longer for it to loop and when it'd be wider it loops again sonner. :)
Time of each repeat is the same in both cases but in narrow bar it takes less to get to the end than on the wider ones.
My web site has code like this:
<ul>
<li><a class='disabled' ><img src='../../Content/Icons/home.png' />Home</a></li>
<li><a href='xx' title='xx'><img src='../../Content/Icons/xx.png' />xx</a></li>
<li><a href='yy' title='yy'><img src='../../Content/Icons/yy.png' />yy</a></li>
</ul>
There are two problems.
1) I'd like to combine my images into one larger image file containing multiple images. I thought about using background BUT my sits on a DIV with a gradient background so I don't think I am not sure if it's possible. Note that my icons have a transparent background.
2) When the page displays there's a delay while the images load. After they have loaded them my DIVs shift slightly in position.
Does anyone have any ideas as to what I could do here. What I do need is for the icon positioning to be correct. Right now it looks like this:
xxxxxxxxxxxxxxxxx
x x
x Icon Home x
x x
xxxxxxxxxxxxxxxxx
Hope someone can help with suggestions/hints.
For the first problem, I'm not sure what you mean by combining them into a file with multiple images. You can combine them into a single image file, or they can be separate images, like they are now. I'm not sure what benefit you seek from having them in a single file. Modern browsers are pretty smart and you won't shave more than a few milliseconds off from doing it this way.
The second issue is the browser incorrectly guessing the images size on the first render. Check out W3C's documentation for the img tag. Say, your image is 25px by 25px. You could do something like:
<img src='../../Content/Icons/xx.png' width="25" height="25" />
That way the browser knows ahead of time what space the image will take once it's available.
I have an href in HTML that I dynamically produce from a server. I have designed a nice rounded corner gif image that I would like to use as the background i.e. put the text (in white) over the gif image and have it still linkable.
The current html looks like:
<h2>
<!--img src="images/greenback.gif"-->
<a id="site-title0" class="titletext" href="#">
Alligator Creek, Bowling Green Bay National Park
</a>
</h2>
<div id="descrip0" class='description'>
20km S of Townsville. $4.85/night. Gates close...
What is the best way to do this with CSS? It seems I could either use relative positioning to move the text over the background image, but in early experiments, this affects the rest of the flow on the page.
Or, maybe using CSS background-image is the best way?
As Daniel says, really:
a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
background: #fff url(path/to/image.gif) top left no-repeat;
text-align: center;
line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */
I'd also -and this may simply be personal habit, affectation and received 'wisdom'- suggest using .png rather than .gif. But, as noted, it's likely a personal and subjective thing.
Answer edited in response to timbo's comment.
Also, and this ain't particularly pretty, there's a code demo here: http://davidrhysthomas.co.uk/so/a-img-bg.html
You have to set the link to display: block
display: block on the a or attach the background image to the h2. Either way, be sure to set a background color on the a or the h2 if you're using white text. If some one has CSS on and images off, they wont see your link. Means you may need to fill in the corners of your rounded corner image to the bg color of the page.