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>
Related
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>
Given the follow html and css, how to make the nested box like the
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
<div class='parent'></div>
draw them using background:
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background:
/* color position / width height*/
linear-gradient(red 0 0) left 20px top 20px/50px 50px,
linear-gradient(green 0 0) right 30px top 20px/50px 50px,
linear-gradient(blue 0 0) left 40px bottom 40px/50px 50px;
background-repeat:no-repeat;
}
<div class='parent'></div>
You can use the before or after pseudo element in CSS to achieve what you're looking for without altering the HTML at all. Take a look:
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.parent::before {
content: "";
width: 100px;
height: 100px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
<div class='parent'></div>
This is the css
body, html {
height: 100%;
width: 100%;
}
#container {
display: flex;
position: absolute;
flex-flow: column wrap;
justify-content: stretch;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
where #container is a sibling of div.sections, both directly under the body tag.
The problem is #container's height overflows the body by div.sections's height.
I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript,
but I'd really like to see the solution in css.
I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
height: 500px; /* Height Value as you want */
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
So i making shop and i want to styling the image.
Right now i don't see the faces in the div:
I know it's little thing,but i can't make this happen:
Menu-item component:
import React from "react";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size }) => (
<div className={`${size} menu-item`}>
<div
className="img"
style={{
backgroundImage: `url(${imageUrl})`
}}
/>
<div className="content">
<h1 className="title">{title}</h1>
</div>
</div>
);
export default MenuItem;
Menu-item styling:
.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 10px;
border-radius: 10px;
.img {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
right: 0px;
border-radius: 10px;
}
&:hover {
.title {
transition: ease-in 0.6s;
opacity: 1;
cursor: pointer;
}
}
&.small-sneakers {
background-position: center;
}
&.large {
height: 420px;
}
&:first-child {
margin-right: 7.5px;
}
&:last-child {
margin-left: 7.5px;
}
.content {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.title {
font-weight: bold;
margin-bottom: 6px;
font-size: 22px;
color: white;
text-transform: uppercase;
align-items: center;
opacity: 0;
z-index: 3;
position: absolute;
}
}
When i try to do background-position: top -50px center,then the image not responsive :/
Thanks for the help!
When you are using background-position: top -50px center you will break the intention of background-size: cover; because it (cover) will determine whether to "crop" the image horizontally or vertically based on the size of the image, so if the cropping is happening on the sides, 50px of the top of the image will be outside of its container.
You can manipulate the wanted behavour by setting overflow:hidden on the parent, set a negative margin to the top of the child, and setting the height of the child to 100% + [margin-top value] using calc.
example code on code pen here
.menu-item
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 10px;
border-radius: 10px;
overflow: hidden;
}
.img {
margin-top: -50px;
width: 100%;
height: calc(100% + 50px);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-image: url(https://image.cnbcfm.com/api/v1/image/106069136-1565284193572gettyimages-1142580869.jpeg?v=1576531407&w=1400&h=950);
}
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.