Duplicate:
What is the best way to create rounded corners
How to make a cross browser, W3C valid, semantic, non-javascript ROUND corner?
jQuery rounded corners
Do you know a way to make rounded borders to div elements.
I used ruzee but i got problem to use CalenderExtender(asp.net ajax) and GMDatePicker components.
In CSS 3 there will be a standard for that. Today you can do it (only for Mozilla and Webkit based browsers) with:
.roundBorder {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
Otherwise you can use multiple divs with backgound-images, but JQuery will provide a more simple way (that I don't know about :()
The multiple div way could look something like this:
html:
<div class="topLeft">
<div class="topRight">
<div class="bottomLeft">
<div class="bottomRight">
<div class="content">
</div>
</div>
</div>
</div>
</div>
css:
.topLeft {
background-image: url('topLeft.png');
background-position: top left;
background-repeat: no-repeat;
}
.topRight {
background-image: url('topRight.png');
background-position: top right;
background-repeat: no-repeat;
}
.bottomLeft {
background-image: url('bottomLeft.png');
background-position: bottom left;
background-repeat: no-repeat;
}
.bottomRight {
background-image: url('bottomRight.png');
background-position: bottom right;
background-repeat: no-repeat;
}
You could use the CSS3 border-radius property, but this isn't supported in IE yet.
for JQuery, you could use 'Corner'. See here
Related
I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.
I can display square images properly but with vertical and horizontal images I face a problem.
I have to display the image in a circle with the below criteria:
Suppose image size is 500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be 300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS.
If image size is 300x500, then the top and bottom area should be hidden using CSS
What do I have to do to fix this? CSS-only answers are best for me, if possible.
background-size
MDN -
CSS Tricks - Can I Use
As the image sizes are variable, you want to make sure they cover the div as well as being centered within it.
Adding the border-radius: 50%; will give you the circle effect.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url('https://via.placeholder.com/400x200');
}
.two {
background-image: url('https://via.placeholder.com/200x200');
}
.three {
background-image: url('https://via.placeholder.com/200x400');
}
<div class="user one">
</div>
<div class="user two">
</div>
<div class="user three">
</div>
In practice, you wouldn't want to have a class for each image, so you'd specify it with an inline style in the markup:
<div class="user" style="background-image:url('path/to/user/img.png')"></div>
object-fit
MDN - CSS Tricks - Can I Use
A newer alternative is to use the object-fit property on a regular <img> tag. This does not work in IE or older versions of Edge.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://via.placeholder.com/400x200" class="user">
<img src="https://via.placeholder.com/200x200" class="user">
<img src="https://via.placeholder.com/200x400" class="user">
set the image as background, centered.
<div class="image"></div>
css:
.image{
width: 300px;
height: 300px;
border-radius: 50%; /*don't forget prefixes*/
background-image: url("path/to/image");
background-position: center center;
/* as mentioned by Vad: */
background-size: cover;
}
fiddle
If you are using bootstrap you have class img-circle to do this.
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
How do I get an image as banner across the page? Below shown is my code, please suggest me a solution.
.image {
background: url(banner.jpg) center no-repeat;
width:100%;
height: 300px; <-- Image height
}
the best method?
then apply that css to a classed div?
<div class="image" alt="" title="">
</div>
put the image inside
html
<div class="image">
<img src="banner.jpg"/>
</div>
css
.image {
display:block;
position:relative;
overflow:hidden;/*keeps the image in the container*/
height: 300px
}
.image img{position:absolute;bottom:0;width:100%}/*this is aligned to the bottom, may need to be top or center depending on the circumstances*/
made a fiddle: http://jsfiddle.net/filever10/srdcY/
It depends on the situation, there are many ways to approach the same problem. The way you described is correct way of doing it as we insert image in to code.
<img src="image/source/etc/etc/" alt="" title="" />
If you have to use a background image then try using CSS background-size property, like so:
.image {
background-image: url(banner.jpg);
background-position: center center;
background-repeat: none;
background-size: cover; /* or use 'contain' */
width: 100%;
height: 300px;
}
As htmltroll says, there are many ways to approach this.
Fiddle of the issue: http://jsfiddle.net/Vy365/3/
I'm trying to create sections on a page that have a parallax scrolling effect.
The main CSS I'm using to achieve this is background-attachment: fixed for the background image, and position: fixed for the text on top of the image.
I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.
HTML:
<section>
<div id="parallax-1" class="parallax">
<div class="title">
<h1>Fixed Text 1</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
<section>
<div id="parallax-2" class="parallax">
<div class="title">
<h1>Second Fixed Text</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
CSS:
.parallax {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
max-width: 1920px;
height: 200px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
z-index: 1;
}
.parallax .title {
position: fixed;
top: 80px;
}
#parallax-1 {
background-image: url(http://placekitten.com/500/200);
}
#parallax-2 {
background-image: url(http://placekitten.com/500/202);
}
.scrolling-content {
position: relative;
width: 100%;
height: 200px;
background: #ffffff;
z-index: 2;
}
The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the fiddle).
Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?
Think you want to use position:absolute instead of position:fixed on your '.parallax .title' class
Since you are using jQuery anyway, why don't you try a plug in like http://stephband.info/jparallax/ ?
EDIT: For mobile apps, you may want to check out Skrollr. It is pure Javascript, and there are some really good examples in the "In the wild" section.
It can help you from re-inventing the wheel.
Here are two tutorials (both using Skrollr.js) which might help others trying to create a similar parallax scrolling effect.
How to create a parallax scrolling website
Simple parallax scrolling tutorial
full CSS file : http://pastebin.com/9LjYjiUF
.body-content{
background-image: white url("images/content-bg.gif");
background-repeat: repeat-y;
background-position: left bottom;
}
this is the html:
<div class="content-bead bg2 rockwell">
<div class="body-content">
<div class="body-content-sub">
<div id="content-left">
</div>
<div id="content-main">
</div>
</div>
</div>
</div>
== updated css===
background-image: url(images/content-bg.gif);
background-repeat: repeat-y;
background-position: left bottom;
background-color:#FFFFFF;
still nothing
i cant get the background image to come up at all. on
That's because background-image is not a combined property. either pick them apart:
background-image: url('images/content-bg.gif');
background-color: white;
or combine them:
background: white url('images/content-bg.gif') left bottom repeat-y;
give overflow:auto a try on the container with the bg, it might be that floated elements inside need to be cleared. Just experienced this problem with IE7 but worked fine in all other browsers
maybe remove white as it is not part of "background-image"
or change it to "background"
remove white value.
.body-content{
background-image: url("images/content-bg.gif");
background-repeat: repeat-y;
background-position: left bottom;
}
I would like to create from this image a styled DIV box for my website :
How can I do that using CSS and HTML.
I cut the image in three different parts :
However I don't know how to use them with Divs to create my vertically expendable box.
Thanks for your help!
I assume that you want your content to start inside the top one, but expand to the second one as well. If that is the case then you will need some overlap on the background-images.
HTML
<div class="expandable">
<div class="content top">content goes here</div>
<div class="bottom"></div>
</div>
CSS
.expandable{
background:url('middle-image.jpg') 0 0 repeat-x;
}
.top{
background:url('top-image.jpg') 0 0 no-repeat;
height:auto!important;
height:100px;/* whatever the height of the top (big) area is */
min-height:100px; /* whatever the height of the top (big) area is */
}
.bottom{
background:url('bottom-image.jpg') 0 0 no-repeat;
height:10px; /* whatever the height of the bottom image is. */
}
Example at http://www.jsfiddle.net/gaby/s8XZQ/
This could be done with CSS3 features like border-radius,box-shadow and gradient. Here's an example. Should work in Opera, Firefox, Chrome and Safari.
Also, you can do this with :before and :after CSS pseudo-elements, like in other two answers.
Edit: For Internet Explorer all those features are possible with behavior file, like PIE.
Try this:
HTML:
<div class="container">
<div class="top"></div>
<div class="middle">content here content here content here</div>
<div class="bottom"></div>
</div>
CSS:
.container { width: 300px; }
.top { padding-top: 15px; background: url(topimage.png); }
.middle { background: url(middleimage.png); }
.bottom { padding-bottom: 15px; background: url(bottomimage.png); }
Adjust the paddings in the CSS so that they match the height of your topimage and bottomimage, and the container width so that it matches the image's widths.
Use three separate divs, and set the top padding of the middle one to the minus height of the top one. So:
#top-div {
height: 25px;
background-image: url(bg-top.jpg);
}
#middle-div {
background-image: url(bg-middle.jpg);
padding-top: -25px;
}
#bottom-div {
background-image: url(bg-bottom.jpg);
}