I am trying this using border-radius but it doesn't seems like this image.
If you want to create circle, give same height and width to div and add border-radius property 50%.
.circle{
width:400px;
height:400px;
background:#000;
border-radius:50%;
}
<div class="circle"></div>
If your trying to make the black one a circle then just add the following css code to the class/id of the div. If your trying the whole image then add this css code to that particular id/class.(you can change the height and width if you want.)
#circle{
width:200px;
height:200px;
background:#000;
border-radius:100%;
}
<div id="circle"></div>
set border-radius: 50%;
Below is an example css code for a div
div {
height: 500px;
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: yellow;
width: 400px;
border-radius: 0% 50% 50% 0%;
}
Related
<div style="position:absolute; color:#E0922F; border-style:solid; height:140px; width:360px; "></div>
Please teach me how to make a curve middle of straight like using css
You can try like this
.red-box{
border:3px solid #E0922F;
display:block;
width:360px;
height:140px;
position:relative;
}
div.left {
border: 3px solid #E0922F;
display: inline-block;
position:absolute;
right:-3px;
top:50px;
border-right:3px solid #fff;
background:#fff;
}
.left {
height: 40px;
width: 20px;
}
.left {
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
}
<div class="red-box">
<div class="left"></div>
</div>
Here is another way with only one element and less of code:
.box{
border:3px solid #E0922F;
border-right:none;
background:
linear-gradient(#E0922F,#E0922F) right bottom/3px calc(50% - 24px) no-repeat,
linear-gradient(#E0922F,#E0922F) right top/3px calc(50% - 24px) no-repeat,
radial-gradient(circle at right,transparent 50%,#E0922F 50%,#E0922F calc(50% + 3px), transparent calc(50% + 4px)) right center/40px 55px no-repeat;
width:360px;
height:140px;
}
<div class="box">
</div>
You can use absolutely positioned CSS Pseudo Elements like :after with border-radius and transform to generally create this effect.
For an html element with a class of "container":
.container {
position:relative;
width:360px;
height:140px;
border:solid 4px #E0922F;
background:#fff;
}
.container:after {
content:'';
position:absolute;
top:50%;
right:0;
width:42px;
height:42px;
border:solid 4px;
border-color:transparent transparent #E0922F #E0922F;
border-radius:50%;
background:#fff;
transform:translateX(calc(50% + 4px)) translateY(-50%) rotate(45deg);
}
<div class="container"></div>
Create an :after pseudo element which has a width and height and is absolutely positioned relative to .container.
Give it a border thickness and offset your x value by the same amount with translateX(calc(50% + 4px)). This says, move the element a distance of 50% of its width along the X-axis and add the border thickness to this calculated position.
Move it down to the middle of the container element with top:50% and center it with translateY(-50%).
Give it a border-radius of 50% to curve the corners and set each quadrant's individual colour with border-color:transparent transparent #fc0 #fc0.
Rotate the element by 45 degrees to position the visible border quadrants' corners relative to the right edge of the container element with rotate(45deg).
The main drawback to this approach is the pseudo element has to have a background colour to hide the container below it. This CodePen shows a working example. If you uncomment the body background colour you can see this drawback.
But if you don't try to be too fancy and keep the background colours consistent, this looks to emulate the effect you are looking for.
Note: you can also offset the border thickness by using right:-4px; and translateX(50%) if you don't want to muddy up your transform with calc(). Either approach achieves the same positioning.
I want to create a website layout containing several full width pictures, which are aligned vertically. The pictures shall be seperated by a curved element, which ideally is created with HTML/CSS, as the width could change and the curve shall always fill the 100% width.
I have uploaded a visualization of my problem here:
I have tried some stuff with the border-radius, like this: http://jsfiddle.net/37u4c/34/ but the results are not quite what I want. The height of the element shall remain always 20 px, but with the round border it gets smaller at the edges....
Any tips or ideas are greatly appreciated!
You can achieve this layout using border radius, the point is to make the element with border-radius wider than the viewport :
DEMO
Output :
HTML :
<div>
<img src="http://lorempixel.com/output/people-q-c-640-480-9.jpg" alt="" />
<div class="round">
<img src="http://lorempixel.com/output/people-q-c-640-480-7.jpg" alt="" />
</div>
</div>
CSS :
div{
position:relative;
overflow:hidden;
}
img {
width:100%;
display:block;
margin:0 auto;
}
.round {
position:absolute;
width:200%;
left:-50%; top:50%;
border-top-left-radius:100%;
border-top-right-radius:100%;
border-top:20px solid #fff;
border-right:20px solid #fff;
border-left:20px solid #fff;
}
.round img {
width:60%;
}
The problem with border-radius is that (imho) you can't get custom enough shapes.
A bit of googling got me to this pen.
I guess you could get what you want by creating an svg path element and using it as a separator (lines 36-44 of the html).
PATH REFERENCE
You could achieve this with a border-radius, I've made an example of it for you right here:
http://jsfiddle.net/zvP7s/2/
The CSS looks as following:
.full-width img {
width: 100%;
height: auto;
}
.top-picture {
height: 350px;
overflow: hidden;
}
.bottom-picture {
position: relative;
top: -200px;
overflow: hidden;
border-top: 2px solid white;
-webkit-border-top-left-radius: 50%;
-webkit-border-top-right-radius: 50%;
-moz-border-radius-topleft: 50%;
-moz-border-radius-topright: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
However, it does not look quite as what you want, and that is because I think you should not do this with a border radius. You could create an image of the arc you want and position it between your images.
EDIT
I will post another example of border-radius as there might be another way to do this.
EDIT 2
Nevermind, it looks even worse.
I need to implement a design to my webpage butI am kind of newbie with CSS.
What I am trying is to add a frame above the user picture. For example, for any size of image, I want that a given profile image like:
... I want to add a rectangle with a transparent circle inside like:
... so the final result would be like:
I am currently adding this frame as an image an resizing the user's image but it decreases resolution.
I really need the frame height size to be equal the image height size and put a frame and circle according to the user image.
Any Ideas?
Here try this DEMO. To check transparency, try changing body color.
<div class="outerCont">
<div class="innerCont centerAlign">
<img src="http://i.stack.imgur.com/FjDS6.png"/>
</div>
</div>
.outerCont{
height:300px;
width:300px;
position:relative;
overflow:hidden;
}
.innerCont{
background-color:transparent;
border:150px solid rgb(186, 230, 255);
border-radius:50%;
height:200px;
width:200px;
overflow:hidden;
}
.innerCont img{
position:absolute;
height:80%;
bottom:0;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
.centerAlign{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}
Well, there are 2 ways:
1)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic.jpg" class="profile_pic" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background-color: #d2e8f7; /* light blue */
padding: 5px;
}
.profile_pic {
border-radius: 9999px;
}
or
2)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic_frame.png" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background: #fff url('./img/profile_pic.jpg') no-repeat top left;
}
HERE IS THE JSFIDDLE
.circle {
background-color:#fff;
border-radius: 50%;
width: 250px;
height: 250px;
text-align:center;
background-image:url('http://i.imgur.com/NGz1YlF.png');
background-repeat:no-repeat;
background-size:65%;
background-position:center bottom;
}
You should draw the square, then the circle on top of it and finally put the image, this will produce the result you want.
Check there for how to trace a circle in CSS.
Drawing a vertical line with border-left and border-right seems easy.
But in my case I am having a single div and I need to draw a vertical line at the given pixel
say (240px).
How can I achieve this?
You may use the :after or :before pseudo element for this, and position it absolute at 240px.
Example: http://jsfiddle.net/abhitalks/YMS4F/1/
CSS:
div.split {
position: relative;
height: 20px;
width: 400px;
border: 1px solid black;
}
div.split:after {
content: "";
display: block;
width: 1px;
height: 20px;
border-left: 1px solid gray;
position: absolute;
top: 0px;
left: 240px;
}
Taken, width and height in pixels for demo purpose. Hope you get the idea.
Easiest way is to create another div within the main div and give that border-left/border-right and then you can scale the inner div to what you want and also higher or lower it.
Just edit the code to suit your needs
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
height:300px;
width:300px;
background:silver;
}
.child {
position:relative;
height:200px;
width:1px;
background:red;
top:100px;
}
http://jsfiddle.net/7Qj2d/
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/