I need only horizontal line in a square, I tried in this way but in my case I need only horizontal line on top ,
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
<div></div>
below is my working fiddle
http://jsfiddle.net/uXbn6/4322/
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image:
linear-gradient(to bottom, black, black),
linear-gradient(to right, red, transparent),
linear-gradient(to right, black, black),
linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
Fiddle
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 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>
The code in CodePen here provides bullets, stripes and some squares. I want circles. I found this source but I don't know how to implement it.
Code also here
#import url(https://fonts.googleapis.com/css?family=Oswald);
div {
text-align: center;
font: bold 21px 'Oswald',sans-serif;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
text-transform: uppercase;
}
.dotted {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-radial-gradient(45px 45px, circle cover, rgba(0,0,0,.90), rgba(0,0,0,.90) 2px, transparent 0px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 9px 9px;
-moz-background-size: 9px 9px;
background-size: 9px 9px;
}
You can do this by changing the radius, notice the rgba(0,0,0,0.5) 4px instead of rgba(0,0,0,0.5) 1px on the first line about background-image:.
Code
.dotted {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,0.5) 4px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 10px 10px;
}
I want to customize a slider like this:
So I was wondering if there was an easy CSS way of doing that, which would adapt to the width of the parent element. Or if I need to add circles in my html and set the color given the percentage.
Here are my two problems that I don't know how to do in full CSS:
Make circles repeat in the background
color only circles using some kind of overlay div that would have background: #color
Is any of that possible?
Thanks!
I don't want to use anything with javascript though, my webpages are heavy enough as is :p
You can use a repeated radial gradient to create dots like this:
Create a single circle with a radial gradient:
radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%)
Place the gradient into a background which is repeated on the x-axis with background-repeat: repeat-x
Center the background horizontally with background-position
Control the size of the circles with background-size
Example
body {
margin: 0;
}
div {
background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%);
background-size: 20px 20px;
background-repeat: repeat-x;
background-position: 5px center;
width: 100vw;
height: 50px;
}
<div></div>
Create a custom range slider input
You can use <input type="range"> and customise it. It's a little bit messy to work cross-browser.
Example
body {
margin: 0;
}
input[type=range] {
-webkit-appearance: none;
cursor: pointer;
background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%, transparent 100%) 5px center repeat-x;
background-size: 20px 20px;
width: 100vw;
height: 50px;
outline: 0;
margin: 0;
box-sizing: border-box;
}
/*Chrome*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.5);
transition: box-shadow .3s;
}
input[type=range]:focus::-webkit-slider-thumb {
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.5)
}
/*Firefox*/
input[type=range]::-moz-range-thumb {
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
border: none;
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-moz-range-track {
background: none;
}
/*IE 11 and Edge*/
input[type=range]::-ms-track {
color: transparent;
background: none;
border: none;
}
input[type=range]::-ms-thumb {
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
border: none;
margin-top: 3px;
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-ms-fill-lower {
background: none;
}
input[type=range]::-ms-fill-upper {
background: none;
}
<input type="range">
A useful blog article on cross-browser range input styling can be found over here.
You could fudge it with a full-stop repeated within a CSS content attribute on the :before and :after selectors.
Crude example:
https://jsfiddle.net/xkueyxvb/