i'm creating a new website and im looking to recreate the curved corner of the SAVE 25% banner. http://www.sonycreativesoftware.com/
Does anyone know how i would do this with css or html?
Cheers
Use the image as a background-image, and apply border-radius on the element
div
{
background-image:url('http://placehold.it/350x150');
width:350px;height:150px;
border-radius:5px;
}
http://jsfiddle.net/mdNCm/1/
You can use border-radius.com to generate cross-browser CSS
Yes, by using border-radius.
CSS:
div.rounded{
border-radius: 5px;
border: 1px solid black;
}
HTML:
<div class="rounded">This text is in a rounded border!</div>
This is a css3 feature and not yet fully supported of all browsers. Read further about this tag:
border-radius: 25px;
You can achieve this with
border-radius: 5px;
If you want a cornered border please use this.
Border-radius.com
Which gives you the code.
Note: border-radius don't work with some browsers such as ie
Alternatively you can use some image as background in css.
Related
I am making an html page in which I have put some pictures. Now I want to put some fancy borders around it. How do I do that? My code is:
<img src="award.gif">
When I run it, it comes out perfectly. But I need a border. I use the latest version of Google Chrome. Thanks.
You can use CSS rules to set border around the image, see the below link where you can see different CSS borders and you can generate cross-browser border CSS. I like this tool very much and this tool provides an intuitive preview to see how the border will look like-
http://www.cssmatic.com/border-radius
Like this,
css:
img {
border:1px solid #021a40;
}
The "Double Border":
img {
padding:1px;
border:1px solid #021a40;
}
For multiple images, you can class in each images, and css is here,
Simple Example
Another one Example
And for more about border and border-radius refer this Link
UPDATE:
FIDDLE
You can do this by using a instead because in matters of CSS this can be more versatile.
CSS
myImage {
background:url(path to image file goes here);
border: 1px solid #000000; //black border
//some width and height values
}
HTML
<div class="myImage"></div>
HTML
<div class="divimg">
<img src="award.gif">
</div>
CSS
.divimg {
border: 1px solid red; }
There are many ways of doing that, you can create a div and put the image inside the div and then, with css, create the border.
Another simple way is this:
img {
border-style:solid;
border-width:1px;
border-color:red;
}
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
I have this wireframe http://problemio.com/problemionewest.pdf and you see on the top-right there is a text box that has rounded corners.
Is that done with css only or image and css? I have an image that was provided to me, but would much rather just do it with css. In any case, I don't know how to do it either way lol, so any help would be great!
The current version I have is here: http://www.problemio.com
You could use CSS to do that, but it wouldn't be supported in IE8-. You can use some site like http://borderradius.com to come up with actual CSS you'd use, which would look something like this (again, depending on how many browsers you're trying to support):
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
This can be done with CSS3:
<input type="text" />
input
{
-moz-border-radius: 15px;
border-radius: 15px;
border:solid 1px black;
padding:5px;
}
http://jsfiddle.net/UbSkn/1/
However, an alternative would be to put the input inside a div with a rounded background, and no border on the input
I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.
This is my current HTML for a content box type display:
<div class="grid_12 boxout-shadow-920">
<div class="boxout">
<p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
</div>
</div>
Boxout CSS:
.boxout {
background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE;
-moz-border-radius:4px 4px 4px 4px;
border:1px solid #DDDDDD;
margin-bottom:15px;
padding:5px;
}
boxout-shadow-920 CSS:
.boxout-shadow-920 {
background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}
Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.
So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.
I'm sure there is an easy answer to this - any help is appreciated!
With the new CSS3 specification we got the property box-shadow that is already supported by Mozilla browsers (through -moz-box-shadow) and Webkit browsers (through -webkit-box-shadow). Since 10.5 pre-alpha also Opera supports this property, too.
So as far as you can accept to display no shadow for Internet Explorer you could stick to this property. The idea behind it is much cleaner because there is no layout specific HTML markup needed.
See here for more information on browser compatibility: http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows
For greatest support through most of the browser engines you should use the following three statements:
box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
Same technique as rounded corners.
Check out this website for various CSS3 effects, including box shadow (what you're looking for): http://css3please.com/
I'd use the CSS3 box-shadow property, with that IE blur filter on div as a fallback for legacy browsers.
I have a css class (given below). The border element is working fine in firefox, it creates a 6px white border around the image. But in IE(6) it is not creating any border ie only displays the image. Pls help me out I need to figure it out quickly.
.pimage2 {
background:url(../images/img2.gif) no-repeat;
width: 469px;
height:203px;
border:7px solid #ffffff;
}
Thanks,
Aditya
According to your comment, you're using the CSS on a table cell like this:
<td class="pimage2"></td>
But IE6 won't see this and you won't be able to get the border to show.
To get the border around it, just add a non-breaking space entity in the table cell. Like so:
<td class="pimage2"> </td>
maybe with black color: ?
border:7px solid #000;
To get the border in the latest css version, you have to write border-style first then the rest of the attributes or design of the border is considered.
border:blueviolet;
border-width: 0.5px;
border-style:solid;
Or, the border will not render.