Is it possible to create a somewhat irregular shaped button.
My button has the following css which makes it a simple rectangle.
.btnclass {
width:100;
height:40;
}
but it want to make look more like this:
______________________
| ___________|
| |___________
|______________________|
Any clever ideas to accomplish this with CSS?
I don't think you can, your better off using an image that's shaped as you want
Not really without a bunch of CSS hackery, your best bet is to use images.
If your attempting to do so for form buttons look at using the following
<input type="image" src="image_path.png" alt="image description" />
Go with an image button. <input type="image" ... /> or <button><img src="" /></button> If not, the suggestions below aren't optimal but that's because an image is probably the most optimal solution.
Setting a background-image with the desired shape. I think this is the most pure solution so go for this.
background-image: url(whole-image.png);
Setting a background color and a small background-image located at the top right corner. The solution is something similar to the "rounded-corner-hack" out there.
background: #<button-color> url(small-image.png) top right no-repeat;
Related
I am building a website and I'd like to add a link to a facebook page.
Designer has sent me a round image to represent the facebook link. Actually, the image is a rectangle, but the painting is round.
What I want is the pointer to change to the "link hand" only when over the round area of the image.
I could partially achieve that with this:
.imgFacebook {
border-radius:50%;
height:50px;
}
However the result I'm getting is: it is working for the image's top-side. In the top side, when I move the mouse outside the round, pointer gets back to an arrow.
The bottom side is still considering the image as a square image and changing the pointer outside the round design to a "hand", representing a link.
I have tried to set the border radius individually for each corner (top-left/right and bottom left/right), with no success.
So, does anyone knows how can I get a round area in my image as a link?
Thanks in advance
After some searches using different keywords, I was able to find a "how to" in this link.
http://jsfiddle.net/6UYTL/2/
I just had to add the image inside the div. As for the image I have used some style to make it display round as well.
<a href="http://www.wherelionsroam.co.uk" target="_blank">
<div id="a">
<asp:Image ID="imgLinkFacebook" runat="server" CssClass="imgFacebook"/>
</div>
</a>
.imgFacebook {
border-radius:50%;
height:50px;
}
Thanks anyway.
I have two images link.
Original image -
Masking image -
Here is the result image.
How can i get the result like this?
I was finding some way using css - clip-path : rect(....) but I can't find
using image mask.
Make sure that the mask is a .png, where the grey part is transparent. Then, use it in the following way:
CSS: img{background-image: url('original_image');}
HTML: <img src="mask.png"/>
See an example here: http://codepen.io/anon/pen/pjOwpe
You might want to use some of the CSS background properties to align the original image in such a way that the correct part of it is shown (see http://www.w3schools.com/cssref/pr_background-position.asp)
How can I make the image inside the button fit better and higher quality?
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" style="height:16px;width:16px;"> </BUTTON>
Im using the image https://www.iconfinder.com/icons/174935/copy_icon .
Here is how it looks like with the code above.
I made a http://jsfiddle.net/e58s7jpy/ but don't show image here.
I wish i could post a image but need 10 reputation ;(.
you need to save the image with btter quality by enhancing the pixels in the path which you refer.
Hope this helps. If happy, vote the answer.
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
you can also slightly enhance by Background modification and padding.
I'm trying to create a simple rollover with an image to show a tip or info box/bubble.
I have a div wrapper holding the image src, and css to style/position the wrapper and child.
I just can't figure out how to make the img src interactive.
Here's the html:
<div class="wrapper">
<img src="images/gallery/wheat3.png" width="250" height="250" data-stellar-ratio="3.5" data-stellar-vertical-offset="200">
</div>
I want to create a rollover with the image "wheat3.png" to show and info box at the side.
Here's the test link as well:
http://hatfielddesign.com/witbier_test/
Thanks.
Viewing the source code of the test link you've shown, seems like they uses Stellar.js to implement this effect. Take a read at the docs, they may help you ;)
In a small website where the pages are only composed by a single image with multiple links using html map, I want to resize the images (smaller images) but it is extremely painful to resize all the images and change all the link coordinates.
<div style="text-align:center; width:586px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201110040649307" src="http://site.com/ui_prototype/login.png" usemap="#Image-Maps_5201110040649307" border="0" width="586" height="1162" alt="" />
<map id="_Image-Maps_5201110040649307" name="Image-Maps_5201110040649307">
<area shape="rect" coords="59,550,297,614" href="http://site.com/ui_prototype/main_menu.html" alt="" title="" />
</map>
</div>
What is the better solution to solve the problem?
Thanks
You may zoom/scale the div,
example(half size):
style="zoom:.5;-o-transform: scale(.5);-moz-transform: scale(.5)"
Here's a little lib that solves this problem.
https://github.com/davidjbradshaw/imagemap-resizer
I think the best solution would be to resize the images and then write a small script that will allow you to select a rectangle (or simply click 4 times on the image), prompt for entering and URL and then spit out the HTML for that rectangle. This way it would be much faster to generate the map.
If you see yourself doing this again in the future, it would be better to build the map with real links positioned with CSS, but with the top & left coordinates specified as percentages relative to the image. This way you should be imune to size changes (but not to changing the image entirely).