I have a percentage bar and I'm trying to put some text over the front of it.
My example does that, but it centers over the smaller bar, not the full thing.
My Question: How can I get the word "test" centered over the full bar, not just the inner-smaller one.
HTML
<div id="bar1">
<div style="width:55%; text-align:center;">test</div>
</div>
CSS
#bar1 {
background-color: black;
border-radius: 13px; /* (height of inner div) / 2 + padding */
padding: 3px;
}
#bar1 div
{
background-color: green;
height: 20px;
border-radius: 10px;
-webkit-background-size:50px 50px;
background-image:
-webkit-repeating-radial-gradient(center, circle, green, #00BB00 40%, green 80%);
-webkit-animation:upbar 3s linear infinite;
}
#-webkit-keyframes upbar
{
0%{background-position:0 0}
100%{background-position:0px -100px}
}
(apologies for the cheesiness of the bar. I'm trying to find a decent upward animation for it, so any suggestions welcome)
There's probably a better way but this works: http://jsfiddle.net/SFHft/
Use a second div with position:absolute:
<div id="bar1">
<div class="anim" style="width:55%;"></div>
<div class="text">TEST</div>
</div>
#bar1 div.anim
{
background-color: green;
height: 20px;
border-radius: 10px;
-webkit-background-size:50px 50px;
background-image:
-webkit-repeating-radial-gradient(center, circle, green, #00BB00 40%, green 80%);
-webkit-animation:upbar 3s linear infinite;
}
#bar1 div.text
{
text-align:center;
position:absolute;
color:#fff;
top: 3px;
left: 50%;
width: 100px;
margin-left: -50px;
}
You can center horizontally the child div with margin: 0 auto:
Fiddle
MDN about margin
that's because your inner bar has width:55% of the parent div(div.bar1).
either give it a full width, to bring the text to the center, or place your text outside.
you can also play with position:absolute
see this fiddle
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 created a white div and gave it an opacity of 0.4 and then i gave it a black border. however because i made the div transparent, the border was also transparent. How can I make the border non transparent whilst keeping the div transparent?
CSS:
#box{
background-color:white;
opacity:0.4;
width:600px;
height:200px;
border-radius:15px;
border: 5px solid black;
}
You cannot make part of an element one opacity and another part of that same element another opacity.
Here is a silly example: https://jsfiddle.net/sheriffderek/85utzq4p/
Try using rgba() for background color instead - or wrap the element in something.
.box {
background: rgba(255, 0, 0, .5);
}
Add another div that contains the current div. Remove the border property and the width and height properties on the #box and add it the other containing div. Make sure the containing div has a class instead of an id. An example:
.entirebox {
width: 600px;
height: 200px;
border-radius: 15px;
border: 5px solid black;
}
#box {
background-color: white;
opacity: 0.4;
}
<div class="entirebox">
<div id="box">
<p>The stuff that you originally had here</p>
</div>
</div>
Here, I added the containing div and named it entirebox. Notice how the containing div has a class, while the div you started off with still has an id.
Hope this helped.
if you are looking for something that can work with solid color backgrounds and image backgrounds both you can create another parent and set it in this way:
body{
margin: 0px;
}
div.child {
display: block;
position: relative;
width: 200px;
height: 150px;
background: red;
opacity:0.3;
}
div.parent{
display: inline-block;
position:relative;
border: 4px solid black;
top: 0px;
left: 0px;
}
<div class="parent">
<div class="child">
</div>
</div>
I am not that familiar with CSS animations. My client want to achieve the following result when hovering the contact button:
so to be clear:
the square's move from left to right and vice versa
when the square moves, the line underneath it changes color
the top image it the start state, the middle is during the effect (50%) and the bottom image is the end stage.
Is this achievable with only CSS or do I need JS as well?
How would I approach this?
I created a quick and dirty JSFiddle here: https://jsfiddle.net/x0b397pb/
As you can see, it is possible with just CSS. In this example I used pseudo elements (::before and ::after) to create most of the elements.
You mentioned "Im not that familiar with CSS animations". For this I used transitions.
transition: left 1000ms, right 1000ms, box-shadow 1000ms;
Each comma separated element is a value that will transition between 2 points. This transition happens on a change of the div, this can be on a hover, but also when applying another div (Through JS).
To created the effect of the lines gradually shifting in color I used another element that slides on top of the original two lines. The new lines originally have 0 width, but on hover they gain 100% width. With a transition transition: width 1000ms; this happens gradually.
Try not to use my code as your final example, as it is somewhat ugly. But I hope it gets the point across.
Here is a small demonstration of css transition:
Consider this HTML:
<div class="container">
<div class="box"></div>
</div>
With this CSS:
.container {
position: relative;
width: 400px;
height: 400px;
border: solid 1px black;
}
.box {
position: absolute;
width: 40px;
height: 40px;
top: 10px;
left: 10px;
background-color: red;
transition: all 1s;
}
.container:hover {
border-color: blue;
.box {
top: 200px;
left: 200px;
width: 160px;
height: 160px;
background-color: blue;
}
}
Or, check it on JsFiddle: https://jsfiddle.net/ronency/75ozjq3s/
.box {
background: linear-gradient(80deg, #f3efef, #90009f, #01060d);
background-size: 600% 600%;
animation: AnimationName 29s ease infinite;
}
#keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
What i am trying to achieve, is get to divs, next to each other. One would be menu, 150px width, on the left of the screen, and second one, should fill rest of container.
Thats what i came up with:
http://jsfiddle.net/Ln49F/3/
But, the contend div is also "under" menu, and working with text, moving it to right a little is impossible. Is it possible, to make div "content" to be wide for "100% - 150px" somehow, and be placed next to the menu div?
To achieve something like that:
http://jsfiddle.net/Ln49F/4/
Float left, puts the div "next to" menu div, and padding works well, but i dont know how to make it to be wide for the rest of the container div.
Take out the width:100% (just leave it to auto, which is default) and use this:
div.content{
margin-left:150px;
background: green;
}
jsfiddle.
Write like this:
CSS
.wrapper{
overflow:hidden;
padding-bottom:10px;
}
.first{
float:left;
height:200px;
width:150px;
background:red;
}
.second{
overflow:hidden;
height:200px;
background:green;
}
HTML
<div class="wrapper">
<div class="first">first</div>
<div class="second">second</div>
</div>
Check this http://jsfiddle.net/TbRuB/10/
OR
You can also achieve this with display:table property but it's work till IE8 & above.
Check this http://jsfiddle.net/TbRuB/12/
You can view your first fiddle, but updated to work according to your spec, here: http://jsfiddle.net/ramsesoriginal/Ln49F/12/
This works by specifying the right margin on the second div, and simply leaving the width on auto.
the HTMLis unchanged:
<div class="container">
<div class="menu">Menu to the left</div>
<div class="content">Content of site<br>x<br><br><br><br><br></div>
</div>
And the CSS is pretty similar to yours:
div.container{
width: 90%;
height: 150px;
background: red;
}
div.menu{
width: 150px;
height: 100px;
float: left;
background: blue;
}
div.content{
margin-left: 150px;
background: green;
}
I took away the width: 100%; from div.content and replaced it with margin-left: 150px;
As you can see, you nearly had it right!
EDIT: BONUS: (fake) Equal height columns!
I updated the fiddle with some code to create "faux columns" with CSS3, so that it looks as if both divs are expanding down to the bottom of the container. You can see it here: http://jsfiddle.net/ramsesoriginal/Ln49F/13/ I don't know if you actually need it, but it's a common requirement for this kind of scenarios.
I simply placed a gradient background on the container, with a single hard stop in the middle:
background: linear-gradient(left, blue 150px, green 150px);
And then I expanded that with various vendor prefixes:
background: -moz-linear-gradient(left, blue 150px, green 150px); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(150px,blue), color-stop(150px,green)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, blue 150px, green 150px); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, blue 150px, green 150px); /* Opera 11.10+ */
background: -ms-linear-gradient(left, blue 150px, green 150px); /* IE10+ */
background: linear-gradient(left, blue 150px, green 150px); /* W3C */
I don't know if you need it, but sometimes this can be very useful!
Use simple solution
<div class="container">
<div class="menu">Menu to the left</div>
<div class="content">Content of site<br>x<br><br><br><br><br></div>
</div>
div.container{
width: 90%;
height: 150px;
background: red;
}
div.menu{
width: 150px;
height: 100px;
float: left;
background: blue;
}
div.content{
background: green;
margin-left: 150px;
}
http://jsfiddle.net/thirtydot/Ln49F/16/
div.container{
width: 90%;
background: red;
display: inline-block;
}
div.menu{
width: 150px;
float: left;
background: blue;
display: inline;
}
div.content{
display: inline;
float: left;
width: 65%;
background: green;
padding-left: 20px;
}
look at this
i hope this helps
Check this fiddle out. Basically, using box-sizing, some padding and a negative margin, you can line the two elements up to the top of their container. and have the content box stretch the expanse of its parent.
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.