I'm trying to make an animated border radius via using an SVG with border-image, and round it out with border-radius. I have overflow: hidden; but the border doesn't seem to be affected by this property. I'll give the current code below, and an example of the border styles in a JSFiddle. Any help is appreciated!
margin: 0 auto;
height: 80vh;
font-size: 3vw;
overflow: hidden;
border: 5px solid;
border-image: url(../images/borderAnimation.svg) 5 stretch;
border-radius: 15px;
background-color: rgb(70, 70, 70);
JSFiddle: https://jsfiddle.net/madaley/vfunmsr7/
I know this is kind of cheating, but if you could have nested elements then the parent could have a background and the child could mask of the background with a color:
div.wrapper {
width: 300px;
height: 200px;
border-radius: 10px;
padding: 5px;
background-image: url(https://www.public.asu.edu/~madaley1/images/borderAnimation.svg);
display: flex;
align-items: center;
justify-content: center;
}
div.wrapper>div {
width: 100%;
height: 100%;
border-radius: 5px;
box-sizing: border-box;
background: white;
}
<div class="wrapper">
<div></div>
</div>
Related
I'm trying to add kind of "radial box shadow" to a div.
I use a ::before pseudo-element and Z-index to achieve it.
See a simplified fiddle here.
Problem : while it works fine when the element's position is either relative or absolute, the z-index rule doesn't seem to apply when position is set to fixed.
Any idea how to make this work?
.statusBar {
position: absolute;
/*chnaging this to fixed will break the z-index*/
background: #FCFCFC;
width: 90%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
border: 0.5px solid grey;
}
.statusBar::before {
content: "";
position: absolute;
z-index: -1;
width: 96%;
top: 0;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}
<div class="statusBar">
<span>Some</span>
<span>content</span>
</div>
just wrap your statusBar to a div with the property of position: fixed. And make statusBar as position: relative.
<div class="container">
<div class="statusBar">
<span>Some</span>
<span>content</span>
</div>
</div>
.container{
position: fixed;
width: 100%;
}
.statusBar {
position: relative; /*chnaging this to fix will */
background: #FCFCFC;
width: 90%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
border: 0.5px solid grey;
}
.statusBar::before {
content: "";
position:absolute;
z-index: -1;
width:96%;
top: 0;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
Hope this helps.
I want the color of my box to be very opaque in the middle and then to fade out as it gets closer to the border.
You can use box-shadow for this purpose.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
div {
width: 25vw;
height: 25vw;
background: royalblue;
box-shadow: 0 0 10px navy;
}
<div></div>
Update:
After seeing a picture of what you were looking for, I tried to better match that. Still with box-shadow.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
div {
width: 25vw;
height: 25vw;
background: #999999;
box-shadow: inset 0 0 10vw 2.5vw white;
}
<div></div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I have some divs inside a main div, but I have looked every questions similar to this and I have tried many things but I couldn't center them horizontally. I could only make them on the other side but not the center.
.ground {
width: 390px;
height: 575px;
border: 1px solid white;
}
.line {
padding: 10px
}
.active {
width: 30px;
height: 30px;
opacity: 0.5;
background: gray;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
.nonactive {
width: 30px;
height: 30px;
opacity: 1.0;
background: lime;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
Here is the jsfiddle demo
You can see those 5 circles are the ones I need to center them inside the main div ground.
In your case, the simplest way to do this would be to set the display of the .line element to inline-block so that it has a "shrink-to-fit" width. In doing so, it will have the same width as its children elements. Then add text-align: center to the parent element to center the inline child element:
Updated Example
.ground {
text-align: center;
}
.ground .line {
display: inline-block;
}
See this answer for a few alternatives.
You can make use of flexbox centering. display: flex and justify-content: center on the parent element will center the circles.
JSfiddle Demo
.ground {
width: 390px;
height: 575px;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAxgDGAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD49bqCD1/CgT7RjA4+lEZ4b2A/lTa/Dj86Z//Z);
border: 1px solid white;
display: flex;
justify-content: center;
}
.line {
padding: 10px
}
.active {
width: 30px;
height: 30px;
opacity: 0.5;
background: gray;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
.nonactive {
width: 30px;
height: 30px;
opacity: 1.0;
background: lime;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
<div class="ground">
<div class="line">
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
</div>
</div>
I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on IE 11:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
}
<div id="div">
<button id="button">HELLO</button>
</div>
My goal is that, when I use transform with rotate(90deg) or rotate(270deg), the button will fit into the div:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
The height and width of the div and button are always the same, but are customizable.
As much as possible, I prefer not wrapping elements.
IE11 needs the parent to have flex-direction: column.
This example has your button rotated:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.
I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.
Can you please take a look at this CSS DEMO and let me know how I can center the inner div inside the outter div and also center the text for inner div?
.outer{
width: 100px;
height: 100px;
background: #fc2e5a;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.inner {
width: 80px;
height: 80px;
background: #fff;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
<div class="outer">
<div class="inner">Test</div>
</div>
Without using the table-cell or flex-box or position if you know the exact sizes of your divs then you could do something like this:
.outer{
width: 100px;
height: 100px;
padding: 10px;
border-radius: 50%;
background: #fc2e5a;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.inner {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
text-align: center;
background: #fff;
}
Here is the demo
Notice that I removed the browser specific prefixes for border-radius and also set it to 50% to make it independent from the whole size.
http://jsfiddle.net/2Wkqn/5/
Add the lines
position: relative;
top: 10px;
left: 10px;
to your .inner CSS
Wrap your text "Test" in paragraph tags then add a class ".inner p" to your CSS and enter the lines:
padding-top: 30px;
text-align: center;