I am newbie in css world and I am trying to make responsive design like this using bootstrap,css and html5.
but ended up like this.
how to create same curve in div displaying in image 1?
Note : Red color in second image is for better explanation.I have to apply white color anyway
You should use percentage to define the border-radius, in this way the curve will look like the one you want.
border-radius: 100%
http://codepen.io/FezVrasta/pen/XKvkJX?editors=1100
To get curved edges use border-radius, the background can be achieved with linear-gradient
jsfiddle: https://jsfiddle.net/ojhcbepz/
html, body {
height: 100%;
}
div.outer {
width: 600px;
height: 250px;
background: linear-gradient(to bottom,blue 50%,red 0px);
padding: 20px 0;
overflow: hidden;
}
div.inner {
height: 100%;
border-radius: 50%;
background: white;
margin: 0 -50px;
}
<div class="outer">
<div class="inner">
</div>
</div>
well a simple solution maybe... use a small red dot image and repeat it in outer div and inner div has border-radius: 50%
<div style="background-image: red url("http://i.imgur.com/dXis68u.png") repeat;">
<div style="background-color: white; border-radius: 50%; text-align:center;" >
ABCDEFGH
</div>
</div>
(You can add two 's of height as you want to get those top and bottom borders)
Related
I need help understanding clip-path CSS property in order to make my version of a clipped circle below...
More like the design version:
If you can see on the grey background, my circle appears a lot larger and less round when it's clipped.
What can I do to make a more round circle? My ideas were:
Use clip-path as in the snippet below
Use a pseudo :after element or a right border with radius
Cut a circle image from photoshop and use it as a background image.
Preferably, I'd like to avoid using a background image. However, I need to keep responsiveness in mind as the circle cannot change shapes drastically as we resize the window.
Is clip-path the right way to go? Can someone suggest a simpler and elegant solution with another way using CSS?
Thank you in advance, here's a snippet I wrote that illustrates how I clipped the "green/blue" background:
.page-banner {
background: grey;
width: 100%;
height: 300px;
background-position: top;
overflow: hidden;
}
.page-banner-text {
position: absolute;
background: #00525d8a;
padding-left: 100px;
width: 60%;
/* adjustments to snippet */
top: 10px;
left: 10px;
height: 300px;
/* this is the code for circle */
clip-path: circle(560px at left);
padding-right: 250px;
}
<div class="page-banner">
<div class="container">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
Per my comment, instead of using clip path to create your D (which is not supported very well), why not use border radius on your div.
* {
box-sizing: border-box;
}
.page-banner {
position: relative;
background: url(https://www.fillmurray.com/300/900) center center no-repeat;
background-size: cover;
width: 100%;
overflow: hidden; /* hide overflowing bits of circle */
min-height: 300px; /* just give enough height to fit text at smallest screen width size */
}
.circle {
background-color: rgba(50, 108, 116, 0.9); /* use rgba for transparent effect */
color: white;
transform: translate(-50%, -50%); /* move the circle left 50% of it's own width and up 50% of it's own height */
border-radius: 50%;
padding-top: 100%; /* this gives us a responsive square */
position: absolute;
top:50%; /* this vertically centers the circle */
left:0;
width:100%;
min-width:600px; /* this is the miniimum dimensions to allow circle to fill smaller screens */
min-height:600px;
}
.page-banner-text {
position: absolute; /* just positions the text on the right of the cirecle */
left: 50%;
top: 50%;
transform: translateY(-50%);
padding:2em;
width:40%;
}
<div class="page-banner">
<div class="circle">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
The only problem with it being responsive though is that as the screen gets wider, the D gets flatter (as the radius extends), but you can combat this by adding a max width and height to the circle div
To anyone looking to solve this with the clip-path property, you have a bit more control with the ellipse clip path. Using the code provided by the OP, I replaced circle with ellipse, and switched to percentages to allow for a slightly better responsive feel.
clip-path:ellipse(67% 100% at 8% 50%);
The first two numbers represent the height and width of the ellipse. The larger the first number, the wider the visible area is. The larger the second number, the wider the height. We're aiming for a D shape, so by adjusting the first number, we can make the D more or less prominent.
This is where the second two numbers, the positioning, comes into play. at 50% 50% centers it. By adjusting the first number, the X positioning, we can move it over where need fit . After playing around with the numbers, you should be able to get the D exactly how you'd like.
.page-banner {
background: grey;
width: 100%;
height: 300px;
background-position: top;
overflow: hidden;
}
.page-banner-text {
position: absolute;
background: #00525d8a;
padding-left: 100px;
width: 60%;
/* adjustments to snippet */
top: 10px;
left: 10px;
height: 300px;
/* this is the code for circle */
clip-path: ellipse(67% 100% at 8% 50%);
padding-right: 250px;
}
<div class="page-banner">
<div class="container">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
You could simply use
an inner circle element, which you can achieve with a border-radius equal to half the element's height and width
positioned via position: relative with negative top and left values
inside of an outer bounding box, clipped via overflow: hidden
A simple implementation:
#container {
height: 300px;
width: 100%;
background-color: gray;
overflow: hidden;
}
#circle {
height: 600px;
width: 600px;
background-color: rgba(0, 0, 255, 0.5);
position: relative;
top: -150px;
left: -375px;
}
<div id="container">
<div id="circle"></div>
</div>
I am trying to achieve this with css3, I tried using border-radius with percent values and it's not the same always, I always got a rounded corners and the border will start disappearing on the corners too.
I want it to be exactly the same as the example image:
EDIT:
this is my html code :
<div class='container-fluid'>
<section class='section-1'>
<div class='container'>
</div>
</section>
And this is my css:
.section-1 {
background-image: url('../images/bg.png');
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: 50%;
}
If you want, you can accomplish this using only CSS by creating a <div> that would be used only as a mask. You can create the round effect with the border-radius property, but you need to do it bigger than the part that will be visible, then crop the result to show only the curvy part that you want. And you must compensate the imagem position.
Check my example below:
.oval-header {
width: 100%;
height: 150px;
overflow: hidden;
position: relative
}
.oval-header--mask {
width: 200%; /* Mask width 2x the size of the header */
height: 200%; /* Mask height 2x the size of the header */
transform: translate(-25%, -51%); /* This compensates the size of the image and places the curvy part that you want on the certer of the mask, it's a translate that negativates half it's width and half it's height */
border: 6px solid yellow;
border-radius: 0 0 50% 50%;
overflow: hidden;
border-top: 0;
background-image: url('http://www.placecage.com/3000/1500');
background-size: cover
}
<div class="oval-header">
<div class="oval-header--mask">
</div>
</div>
This is my example: https://jsfiddle.net/a1xxj4j7/
HTML:
<div id="container">
<div id="text">
</div>
<div id="float">
asljsfjjddf
fjsfd
fd
jff
</div>
</div>
CSS:
#container{
background: black;
}
#text{
min-height: 300px;
background: #fff;
border: 1px solid black;
}
#float{
background: red;
transform: translatey(-50%);
min-height: 100px;
margin: 0 20%;
}
I want the #float div to stay at the bottom of the container #text with a 50% offset of its height. That works, problem is since the #text div is rendered before translating it leaves its remaining original height at the bottom. I would like the #text bottom to equal the bottom the #container div so that is "pushes" just the space in the offset.
Of course this would perfectly work if I applied a negative margin-top to the #text but the content is dynamic so I can't set a fixed height!
Is there a trick in èure CSS or do I need to go with JS?
Thanks
I have the following DIV structure:
<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>
I want to apply one half opaque background into the parent DIV, and one fully visible background to the child DIVs. However, it seems that the child will take over the parent, so, I have now no idea how to come over with this.
EDIT: Some more clarification.
I have a jQuery draggable "window" made of DIVs. Inside it, I have a progress bar with
relative position like:
position: relative;
left: 16px;
top: 16px;
This way the progress bar will be at 16-16 of the window (not the screen) and the progress bar moves correctly along with the window.
However, the progress bar has texture on the top. Take a look at this example:
<div style="background: url('texture.png'), url('empty.png'); width: 256px;">
<div style="background: url('progress.png'); width: 33%;"></div>
</div>
There's an opaque texture applied to the whole progress bar element, for example, if the percentage of this progress bar is 33%, then it looks like xxx------ where x denotes the flowing green bar and - is empty. The texture must be applied to both x and -, but currently the image of x takes place over the texture.
I can't really use Z-index and/or position absolute to position the child elem on the top, because of the relative positioned approach.
I don't know whether I understoood your question correctly, but aren't you looking for CSS3 RGBA colours?
p { color: rgba(0,0,255,0.5) } /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */
Reference: 4.2.2 RGBA color values
Here is the progress bar code I use:
To change the percentage, just change the cover class' postiion (e.g. left:80%) and of course the text percentage both of which are in the HTML. Also, it uses a semi-transparent png for the bar image, so you can change the bar background color #888888 in this case to match whatever color you desire.
Note: the files are hosted on tinypic and it's been a little slow for me lately, so give it a few extra seconds to see the images.
CSS
.wrapper {
background: transparent url(http://i50.tinypic.com/2a65xtf.png) no-repeat scroll 0pt 0pt;
width: 216px;
height: 25px;
position: relative;
}
.bar {
background: #888888 url(http://i49.tinypic.com/2cdzyj9.png) repeat scroll center center;
overflow: hidden;
position: absolute;
display: block;
width: 200px;
height: 15px;
top: 6px;
left: 8px;
text-indent: -30px;
}
.cover {
background: transparent url(http://i47.tinypic.com/zyfq61.png) repeat-x scroll 0pt 0pt;
position: absolute;
display: block;
width: 200px;
height: 15px;
top: 0px;
}
.bartext {
position: absolute;
display: block;
top: -0.2em;
font-size: 12pt;
font-weight: bold;
color: #ffffff;
}
HTML
<div class="wrapper">
<span class="bar">
<em class="cover" style="left:50%">
<span class="bartext">50%</span>
</em>
</span>
</div>
Since the children are divs, they will fill to the maximum width they can, which so happens to be the width of the parent. As a result, child and child2 will cover all the area the parent fills. To get some of the parent to show around the children, try setting the size of the children to something less than that of the parent, or try adding padding to the parent.
this is the solution for IE, the bold pieces of code are the magic ones:
<style type="text/css">
#parent { background: red; opacity: .5; filter: alpha(opacity=50); width: 100px; height: 100px }
#child1, #child2 { margin: 10px; position: relative }
#child1 { background: blue }
#child2 { background: green }
</style>
<div id="parent">
<div id="child">lorem
<div id="child2">ipsum
</div>
To be cross-browser I would suggest using an alpha PNG in the parent's background, making life much easier.
What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:
<style>
#a {
background-color: black;
float: left;
} #b {
opacity : 0.4;
filter: alpha(opacity=40);
} #div {
position: absolute;
height: 30px;
width: 30px;
top: 90px;
left: 90px;
border: 1px solid #FFF;
background: transparent;
}
</style>
<div id="a">
<div id="b">
<img src="http://clagnut.com/images/ithaka.jpg" />
</div>
</div>
<div id="div"></div>
Any ideas? thx
The maximum opacity of an element is the opacity of its parent element. So if div#b has an opacity of 40%, if his children have 100% opacity in style they will also be 40% absolute opacity.
To accomplish what you're describing (at least what I think you're describing), one way could be to have both the transparent wrapper and the image children of a parent div with relative positioning. You can absolutely position both of the children inside of that wrapper so that the image shows up on top of the transparent box.
Edit: Here is the code for the effect you are describing. My example has a 480 x 320 image, and a 30-pixel border:
<style>
#back {background-image:url(mypicture.jpg);
width:480px;
height:320px;
position:relative;}
#middle {position:absolute;
width:480px;
height:320px;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
top:0;
left:0;}
#front {position:absolute;
width:420px; /* 30px border on left & right */
height:260px; /* 30px border on top & bottom */
background-image:url(mypicture.jpg);
background-position:-30px -30px; /* compensate for the border */
top:30px;
left:30px;}
</style>
<div id="back">
<div id="middle">
</div>
<div id="front">
</div>
</div>
If I understand you correctly, try using just one div (i.e. get rid of the outer one with ID "a") and setting a colored border around it. Or you could get more flexibility by "faking" a border using 4 divs for the left, right, top, and bottom edges and 4 more for the corners.
It's kind of hard to know what you mean without an example page, or screenshots of what you expect and what you're actually getting.
EDIT: I was about to edit in basically the same thing Rex M wrote. Here's another (although idealistically inferior) way to do it:
<style>
#a {
float: left;
position: relative;
}
div.overlay {
opacity: 0.4;
background-color: black;
position: absolute;
}
#t {
left: 0; top: 0; height: 90px; width: 450px;
}
#b {
left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
<div id="t" class="overlay"></div>
<div id="b" class="overlay"></div>
<div id="l" class="overlay"></div>
<div id="r" class="overlay"></div>
<img src="http://clagnut.com/images/ithaka.jpg">
</div>
If you want to be sure that the images have a certain color for a background, you could just as well stick a background to all IMG-elements in your stylesheet:
div#a img { background: #FFF; }
Anyhow, the filter-property in CSS should not be relied upon, as it is not part of the official specifications for CSS 2.1.
I might have misunderstood the question, though. Could you rephrase it or provide pictures of expected results?
To follow on what Rex M said, you'll need to change things so that the non-transparent elements aren't children of the transparent elements.
You can use absolute or relative positioning to line up your "border" with the picture, although this can often have inconsistencies between browsers.
The most painless way off the top of my head is to use javascript to get the top and left pixel locations of the image and set the top/left css properties of the border to match (and set the size of the border to that of the image).
UPDATE:
The asker showed an example of what he is trying to recreate. In the example linked, the shaded areas (the "not selected" area) of the picture is created by 4 divs.
The top and bottom divs are the full width of the image, and are set to have a height that is the difference between the top/bottom of the selection box and the top/bottom of the image respectively.
The side divs have height and width modified so that they fill in the "side areas" of the image.
The sizes are updated via a mousemove event.