I want to make a yellow line like in the image using css, but I don't have an idea how to make it, now I can only make line holes, but not vertical straight lines yet.
here is my code example
#holes {
-webkit-mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
background-color: #1D3962;
background-image: radial-gradient(circle at 120px 100%, transparent 0, transparent 65px, yellow 65px, yellow 68px, transparent 68px, transparent 100%);
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
I am writing one code for you that might solve your problem if you like the solution then please give it one like 😀
You can change the value of width to make it thin or thick.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#holes {
-webkit-mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
background-color: #1D3962;
background-image: radial-gradient(circle at 120px 100%, transparent 0, transparent 65px, yellow 65px, yellow 68px, transparent 68px, transparent 100%);
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
#holes::before{
content: "";
display: block;
width: 2px;
height: calc(100vh - 68px);
background-color: yellow;
margin-left: 120px;
}
<div id="holes"></div>
Related
I have a div with a mask applied to it. I noticed that I can't apply a box-shadow on that same div, so I must move the shadow to a "wrapper" div.
The problem is that if the shadow is placed on the shadow div, the mask is not applied to the shadow.
How can I apply a mask to a div and to it's shadow?
.wrapper {
width: 200px;
height: 200px;
box-shadow: 17px 13px 7px 3px rgba(0,0,0,0.75);
}
.b {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
-webkit-mask: radial-gradient(
circle at center top,
transparent 30px,
black 31px
) top / 100% 51%,
radial-gradient(
circle at right bottom,
transparent 30px,
black 31px
) right bottom / 51% 51%,
radial-gradient(
circle at left bottom,
transparent 30px,
black 31px
) left bottom / 51% 51%;
-webkit-mask-repeat: no-repeat;
}
<div class="wrapper">
<div class="b"></div>
</div>
You need a drop-shadow, not a box-shadow:
.wrapper {
width: 200px;
height: 200px;
filter:drop-shadow(17px 13px 7px rgba(0,0,0,0.75));
}
.b {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
-webkit-mask: radial-gradient(
circle at center top,
transparent 30px,
black 31px
) top / 100% 51%,
radial-gradient(
circle at right bottom,
transparent 30px,
black 31px
) right bottom / 51% 51%,
radial-gradient(
circle at left bottom,
transparent 30px,
black 31px
) left bottom / 51% 51%;
-webkit-mask-repeat: no-repeat;
}
<div class="wrapper">
<div class="b"></div>
</div>
I can apply a mask-image at any place on a div I want, but can I apply more than one mask-image on the same div?
Example with a single mask-image:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,
transparent 30px,
black 31px
);
}
<div></div>
What would the code look like if I wanted to have the same mask applied at the top and at the bottom at the same time?
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,
transparent 30px,
black 31px
), radial-gradient(
circle at center bottom,
transparent 30px,
black 31px
);
}
<div></div>
Edit: I'm aware Chrome supports mask-composite, but that works (at the time of writing this) only with Chrome.
You need to play with the size and position. mask work the same way as background-image so simply imagine your self making two images on the same element (one on the top and the other on the bottom)
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask:
radial-gradient( circle at center top, transparent 30px, black 31px) top,
radial-gradient( circle at center bottom, transparent 30px, black 31px) bottom;
-webkit-mask-size:100% 51%; /* each one half the size */
-webkit-mask-repeat:no-repeat; /* don't forget this */
}
<div></div>
Another idea with one mask:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask: radial-gradient(circle, transparent 30px, black 31px) 0 100px; /* 100px is half the height */
}
<div></div>
and with the border:
div {
width: 200px;
height: 200px;
background: radial-gradient(circle, transparent 30px, black 0 33px,green 33px) 0 100px border-box;
border: 2px solid black;
-webkit-mask: radial-gradient(circle, transparent 30px, black 31px) 0 100px; /* 100px is half the height */
}
<div></div>
A solution with mask-composite:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask:
radial-gradient( circle at center top, transparent 30px, black 31px),
radial-gradient( circle at center bottom, transparent 30px, black 31px),
linear-gradient(black,black); /* this layer is mandatory */
-webkit-mask-composite: destination-in;
mask-composite: exclude; /* for non-webkit browser */
}
<div></div>
I have a some code for Responsive html css Curly Braces i trying to place the bottom position but its not working correctly . position top is working perfect. anyone know how to change that position to bottom.
Thanks
That's my code
.brace{
border: 2px solid #CCC;
height: 25px;
position:relative;
border-bottom: 0;
border-radius: 25px 25px 0 0;
margin-top: 25px;
}
.brace.top:after{
content: '';
position:absolute;
left: 50%;
width: 50px;
height: 55px;
margin-top: -27px;
margin-left: -25px;
background-color: #FFF;
background:
linear-gradient(135deg, transparent 10px, #CCC 0) top left,
linear-gradient(225deg, transparent 10px, #CCC 0) top right,
linear-gradient(315deg, transparent 10px, #CCC 0) bottom right,
linear-gradient(45deg, transparent 10px, #CCC 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image:
radial-gradient(circle at 0 0, transparent 25px, #CCC 26px, #FFF 28px ),
radial-gradient(circle at 100% 0, transparent 25px, #CCC 26px, #FFF 28px),none,none;
}
.brace.bottom{
border-top: 0;
border-bottom: 2px solid #CCC;
border-radius: 0 0 25px 25px;
margin-top: 0;
}
.brace.bottom:after{
content: '';
position:absolute;
left: 50%;
width: 50px;
height: 55px;
margin-top: 0px;
margin-left: -25px;
background-color: #FFF;
background:
linear-gradient(135deg, transparent 10px, #25aae1 0) top left,
linear-gradient(225deg, transparent 10px, #25aae1 0) top right,
linear-gradient(315deg, transparent 10px, #25aae1 0) bottom right,
linear-gradient(45deg, transparent 10px, #25aae1 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image:
radial-gradient(circle at 0 0, transparent 25px, #25aae1 26px, #25aae1 28px ),
radial-gradient(circle at 100% 0, transparent 25px, #25aae1 26px, #25aae1 28px),none,none;
}
<div class="wrapper">
<div class="content">
<div class="brace top"></div>
<br>
<div class="brace bottom"></div>
</div>
</div>
Plz follow these steps.. Depends on relative the bottom position will be aligned..
.brace {
position: static;
}
.wrapper {
position: relative;
}
.brace.top::after {
margin-top: 0;
bottom: -28px;
}
.brace.bottom:after {
content: '';
position: absolute;
left: 50%;
width: 50px;
height: 55px;
margin-top: -4px;
margin-left: -25px;
background-color: #FFF;
background: linear-gradient(135deg, transparent 10px, #CCC 0) top left, linear-gradient(225deg, transparent 10px, #CCC 0) top right, linear-gradient(315deg, transparent 10px, #CCC 0) bottom right, linear-gradient(45deg, transparent 10px, #CCC 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at 0 0, transparent 25px, #CCC 26px, #FFF 28px), radial-gradient(circle at 100% 0, transparent 25px, #CCC 26px, #FFF 28px), none, none;
transform: rotate(180deg);
}
<div class="wrapper">
<div class="content">
<div class="brace top"></div>
<br>
<div class="brace bottom"></div>
</div>
</div>
I have a figure with bevel corners, but the background is not rounded:
How to have it rounded?
.test-block {
height: 480px;
padding: 4px;
color: #ffffff;
background-color: transparent;
background-image:
-webkit-linear-gradient(top, #ffdc00, #ffdc00),
-webkit-linear-gradient(225deg, #ffdc00, #ffdc00),
-webkit-linear-gradient(bottom, #ffdc00, #ffdc00),
-webkit-linear-gradient(left, #ffdc00, #ffdc00),
-webkit-linear-gradient(315deg, transparent 9px, #ffdc00 10px, #ffdc00 12px, red 12px);
background-image:
linear-gradient(180deg, #1698d9, #1698d9),
linear-gradient(225deg, #1698d9, #1698d9),
linear-gradient(0deg, #1698d9, #1698d9),
linear-gradient(90deg, #1698d9, #1698d9),
linear-gradient(135deg, transparent 28px, #1698d9 28px, #1698d9 32px, #ffffff 10px);
background-position: top right, top right, bottom left, bottom left, top left;
background-size: -webkit-calc(100% - 15px) 2px, 2px 100%, 100% 2px, 2px -webkit-calc(100% - 15px), 100% 100%;
background-size: calc(100% - 40px) 4px, 4px 100%, 100% 4px, 4px calc(100% - 40px), 100% 100%;
background-repeat: no-repeat;
border-radius: 10px;
width: 320px;
}
.test-block__div {
background-image: url(http://css-snippets.com/blogfile/wp-content/uploads/2011/03/square.jpg);
background-repeat: no-repeat;
background-position: -24px 208px;
height: 100%;
}
<div class="test-block">
<div class="test-block__div"></div>
</div>
Since you are using multiple background you can add more using radial-gradiant to create the corner (I removed the vendor prefixes to simplify the code)
.test-block {
height: 480px;
padding: 4px;
color: #ffffff;
background-color: transparent;
background-image:
radial-gradient(circle at top left, transparent 40%, #1698d9 0%),
radial-gradient(circle at bottom left, transparent 40%, #1698d9 0%),
radial-gradient(circle at top right, transparent 40%, #1698d9 0%),
linear-gradient(180deg, #1698d9, #1698d9),
linear-gradient(225deg, #1698d9, #1698d9),
linear-gradient(0deg, #1698d9, #1698d9),
linear-gradient(90deg, #1698d9, #1698d9),
linear-gradient(135deg, transparent 28px, #1698d9 28px, #1698d9 32px, transparent 10px);
background-position:
bottom right,
top right,
bottom left,
top right,
top right,
bottom left,
bottom left,
top left;
background-size:
10px 10px, 10px 10px, 10px 10px,
calc(100% - 40px) 4px,
4px 100%,
100% 4px,
4px calc(100% - 40px),
100% 100%;
background-repeat: no-repeat;
border-radius: 10px;
width: 320px;
}
body {
background-image:linear-gradient(30deg, pink, yellow);
}
<div class="test-block">
</div>
By the way you can achieve the same layout using pseudo-element and without multiples background. It can be easier to handle:
.test-block {
height: 440px;
padding: 4px;
margin-top: 60px;
color: #ffffff;
border-right: 4px solid #1698d9;
border-left: 4px solid #1698d9;
border-bottom: 4px solid #1698d9;
border-radius: 0 0 10px 10px;
width: 320px;
position: relative;
}
.test-block:before {
content: "";
position: absolute;
left: -4px;
width: 50%;
height: 40px;
top: -44px;
border-left: 4px solid #1698d9;
border-top: 4px solid #1698d9;
transform: skewX(-40deg);
transform-origin: bottom left;
}
.test-block:after {
content: "";
position: absolute;
right: -4px;
height: 40px;
width: 50%;
top: -44px;
border-right: 4px solid #1698d9;
border-top: 4px solid #1698d9;
border-radius: 0 10px 0 0;
}
body {
background-image: linear-gradient(30deg, pink, yellow);
}
<div class="test-block">
</div>
I have problem when I tried to get this type of zigzag I tried a lot but unfortunately it didn't work.
I tried this way of coding
CSS
.zigzag:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
}
.container2:before {
background:
linear-gradient(
45deg, transparent 33.333%,
#E2E2E2 33.333%, #E2E2E2 66.667%,
transparent 66.667%
),
linear-gradient(
-45deg, transparent 33.333%,
#E2E2E2 33.333%, #E2E2E2 66.667%,
transparent 66.667%
);
background-size: 20px 40px;
}
but i get like rectangle zigzag but what i need is like line not rectangle
i want like this
div{
height: 50px;
background:
linear-gradient(135deg, white 35%, transparent 25%) -25px 0,
linear-gradient(225deg, white 35%, transparent 25%) -25px 0,
linear-gradient(315deg, white 35%, transparent 25%),
linear-gradient(45deg, white 35%, transparent 25%);
background-size: 50px 50px;
background-color: black;
}
http://jsfiddle.net/4ay1uduz/
Simply change all 50px to your element's height, and change all 25px to half its height.
Take a look JsFiddle here. Hope this will help you.
HTML:
<div class="container4 zigzag"></div>
CSS:
.zigzag {
position: relative;
width: 100%;
height: 200px;
}
.zigzag:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
}
.container4 {
background: #CCC;
}
.container4:before {
background:
linear-gradient(
45deg, transparent 33.333%,
#CCC 33.333%, #CCC 66.667%,
transparent 66.667%
),
linear-gradient(
-45deg, transparent 33.333%,
#CCC 33.333%, #CCC 66.667%,
transparent 66.667%
);
background-size: 20px 40px;
}
Html:
<div class="container1">
</div>
<div class="container2">
</div>
Css:
.container1 {
background: white;
}
.container1:after {
background: linear-gradient(-45deg, black 16px, transparent 0), linear-gradient(45deg, black 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
}
.container2 {
margin-top: -27px;
}
.container2:after {
background: linear-gradient(-45deg, white 16px, transparent 0), linear-gradient(45deg, white 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
}
Here is a fiddle.