I am trying add shadow to a div. shadow should be at top and half of its height from top ( to both left and right side), someone please help me.
.test {
width: 200px;
height: 200px;
margin: 10px;
border: solid 1px red;
position: relative;
background-color: white;
}
you can increase offset and reduce size of box shadow and draw 2 of them.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
/* offset-x | offset-y | blur-radius | spread-radius | color */
<spread-radius>
This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
#test {
width: 200px;
height: 200px;
margin: 10px;
border: solid 1px red;
position: relative;
background-color: white;
box-shadow: -50px -50px 5px -50px, 50px -50px 5px -50px
}
<div id="test"></div>
This could be a simple way to do it, quite a few possibilities.
.parent{
width: 200px;
height: 200px;
margin: 10px;
position: relative;
}
.test {
z-index: 2;
width: 100%;
position: relative;
height: 100%;
border: solid 1px red;
background-color: white;
}
.halfshadow{
position: absolute;
width: 100%;
top: 0;
height: 50%;
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="parent">
<div class="test"></div>
<div class="halfshadow"></div>
</div>
Related
Suppose I have an element in display: block with property left-margin: solid 3px black.
How do I make the border three pixels at the top left and one pixel at the bottom left? Here's a diagram of what I mean.
Usingborder-image:
b {
display: block;
width: 200px;
height: 100px;
background: #ccc;
border-left: solid 3px;
border-image: linear-gradient(to bottom right, #000 50%, #fff 63%) 0 0 0 100% / 0 0 0 3px
}
<b></b>
In below case i have used :after to add border effect by adding skew
.parent {
border: 1px solid black;
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
margin: 20px;
}
.parent.left-border {
border: 0;
border-left: 1px solid black;
}
.parent:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
background: black;
-webkit-transform: skewX(-2deg);
transform: skewX(-2deg);
bottom: 0;
transform-origin: top;
}
<div class="parent"></div>
<div class="parent left-border"></div>
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 2 years ago.
I'm trying to create a border on a div with two different color on the top left and the bottom right.
Can't find solution, with images or directly on css.
Please refer the below example.
You can use position set toabsolute for the two red sections and they can be positioned with respect to the div with class box, which has its position set to relative.
.box {
background-color: gray;
height: 400px;
width: 400px;
position: relative;
}
.top-left {
position: absolute;
top: 10px;
left: 10px;
border-left: 10px solid darkblue;
border-top: 10px solid darkblue;
height: 30px;
width: 30px;
}
.bottom-right {
position: absolute;
bottom: 10px;
right: 10px;
border-bottom: 10px solid red;
border-right: 10px solid red;
height: 30px;
width: 30px;
}
<div class="box">
<div class="top-left"></div>
<div class="bottom-right"></div>
</div>
You can follow the example of Naren Murali or you can create pseudo-elements, so you do not need as much HTML.
I created two pseudo-elements :before and :after
:before
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
:after
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background: grey;
}
div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 5px;
left: 5px;
border-top: 5px solid blue;
border-left: 5px solid blue;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
right: 5px;
border-bottom: 5px solid red;
border-right: 5px solid red;
}
<div></div>
No need extra elements or pseudo elements, you can do easily with multiple background:
.box {
height: 200px;
width: 400px;
background:
linear-gradient(red,red) 0 0,
linear-gradient(red,red) 0 0,
linear-gradient(blue,blue) 100% 100%,
linear-gradient(blue,blue) 100% 100%,
#ccc;
padding:5px;
background-size:80px 20px,20px 80px;
background-origin:content-box;
background-repeat:no-repeat;
}
<div class="box">
</div>
I've been trying to make this shape in CSS, but unfortunately could not find a way how to. It's half pipe like shaped:
The pixelated corner should be smooth (it's a zoomed in image).
Anyone knows how to create this? Or can get me on the right tracks?
You will need to use pseudo element :after for the inner block and then apply border-radius for curved corner.
div {
height: 60px;
width: 60px;
border: solid red;
position: relative;
background: red;
border-width: 0 10px 10px 0;
box-sizing: border-box;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-bottom-right-radius: 10px;
background: #fff;
}
<div></div>
simple
.shape {
width: 140px;
height: 200px;
background-color: gray;
}
.shape:after {
content: '';
position: absolute;
width: 100px;
height: 160px;
background-color: #fff;
border-bottom-right-radius: 50px;
}
<div class="shape"></div>
I assume that the problem here is to create the "outer" curve, on the arbitrary background. It's achievable by the trick with clipping the needed part from the thick rounded border of the pseudo-element:
div {
width: 50%;
min-height: 4em;
margin: auto;
border: #888 solid;
border-width: 0 1em 1em 0;
position: relative;
}
div::after {
content: '';
border: #888 solid;
border-width: 0 1em 1em 0;
border-radius: 0 0 100% 0;
position: absolute;
right: -1em;
bottom: -1em;
width: 1em;
height: 1em;
clip: rect(0 1em 1em 0);
}
div:hover::after {
border-color: red; /* highlight the curved part */
}
body {
/* just as a background example */
background: repeating-linear-gradient(-45deg, #ddd, #ddd 1px, transparent 1px, transparent 10px);
min-height: 90vh;
}
<div></div>
You can do this with one element and with transparency like this:
.box {
width:80px;
height:100px;
border-right:20px solid grey;
border-bottom:20px solid grey;
box-sizing:border-box;
background:
radial-gradient(farthest-side at top left,transparent 98%,grey ) bottom right/20px 20px no-repeat;
}
body {
background:pink;
}
<div class="box">
</div>
How can I style a a circle (a div) with two borders responsively so that it reacts to a container's size?
Suppose circles like this for example:
Here is a working CSS for a circle:
div.circle {
width: 90%;
height: 0;
padding-bottom: 90%;
margin: auto;
float: none;
border-radius: 50%;
border: 1px solid green;
background: pink;
}
<div class="circle"></div>
How can I add a border with two colors? I tried outline but it came out as a rectangle. I tried to place another div inside the circle div and use background color but I can't align the inner div vertically.
I'd suggest, with the following HTML:
<div></div>
The CSS:
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red;
}
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red;
}
<div></div>
JS Fiddle demo.
The box-shadow gives the outermost ring of colour, the border gives the white 'inner-border'.
Alternatively, you can use a box-shadow with the inset keyword, and use the box-shadow to generate the 'inner-border' and use the border as the outermost border:
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid red;
box-shadow: inset 0 0 0 5px white;
}
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid red;
box-shadow: inset 0 0 0 5px white;
}
<div></div>
JS Fiddle demo.
Obviously, adjust the dimensions to your own taste and circumstances.
Using the box-shadow to generate the outermost border, however, allows for multiple borders (alternating red and white in the following example):
div {
width: 20em;
height: 20em;
margin: 20px;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}
div {
width: 20em;
height: 20em;
margin: 20px;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}
<div></div>
JS Fiddle demo.
There are already two very good answers on this thread but here are a couple of more approaches to make this thread more complete with all possible approaches. The output produced by these are also responsive.
Using a pseudo-element:
You can use a pseudo-element that is smaller in size than the parent and position it absolutely within the parent. When the background is added to the pseudo-element and a border is added to the parent it looks like there is a gap between the border and the background. If the gap needs to be transparent then we need not add any background on the parent. If the gap needs to be of a solid color (that is, it needs to look like a second border) then a border of that color and required width should be added to the pseudo-element.
While using this approach, the inner area can also have image or a gradient as the fill (background).
.circle {
position: relative;
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
color: white;
border-radius: 50%;
border: 2px solid brown;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: brown;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid white;
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
/* Just for demo */
div {
float: left;
margin-right: 10px;
transition: all 1s;
}
div:hover{
height: 250px;
width: 250px;
}
body {
background: url(http://lorempixel.com/500/500/nature/3);
background-size: cover;
}
<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
<div class='circle image'>Hello!</div>
Using Radial Gradients:
This is also a possible approach but has very low browser support and hence it is not recommended but the idea could be of use elsewhere. Essentially what is done is that a radial-gradient (circular shaped) is added to the element such that it leaves a transparent or a solid colored gap (extra border) between the solid background color and the actual border.
.circle{
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
color: white;
border-radius: 50%;
border: 2px solid brown;
background: radial-gradient(circle at center, brown 66.5%, transparent 68%);
}
.circle.white{
background: radial-gradient(circle at center, brown 66.5%, white 68%);
}
/* Just for demo */
div{
float: left;
margin-right: 10px;
transition: all 1s;
}
div:hover{
height: 250px;
width: 250px;
}
body{
background: url(http://lorempixel.com/500/500/nature/3);
background-size: cover;
}
<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
Another approach would be to use the background-clip property. It wont allow you to choose the color of the innner border but it will show the background in that gap :
div {
width: 150px;
height: 150px;
padding:2px;
border-radius: 50%;
background: #DD4814;
border: 2px solid #DD4814;
background-clip: content-box;
margin:0 auto;
}
/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}
<div></div>
Note that you control the gap size with the padding value.
Here is a fiddle where I draw one circle with a border and box-shadow to create the outer circle effect https://jsfiddle.net/salientknight/k18fmepL/1/
Tested and works in Chrome, Safari and Opera -- Fails in Firefox if text gets too large Good for about 3 characters font size 1em then height and width get out of sync -- will work in FireFox with a fixed size height and width...
<!-- Inside H1 -->
<h1><p class='circleBlue'>10000%</p></h1>
<!-- Regular -->
<p class='circleBlue'>10000%</p>
p.circleBlue{
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #159fda;
border: 5px Solid #fff;
color: #fff;
min-width: 1em;
border-radius: 50%;
vertical-align: middle;
padding:20px;
box-shadow: 0px -0px 0px 3px #159fda;
-webkit-box-shadow: 0px -0px 0px 3px #159fda;
-moz-box-shadow: 0px -0px 0px 3px #159fda;
margin:5px;
}
p.circle:before{
content:'';
float: left;
width: auto;
padding-bottom: 100%;
}
update I could not get this to work with a variety of text sizes and in all browsers so I added some js. I'm pasting it here so their is one complete solution all together. changesSizes is a function that makes sure that height and width always match... first checking which is bigger and then setting the value of both to the larger of the two (yes one of these assignments is redundant but it gives me peace of mind). The final effect is that I can add content of many shapes and sizes. The only real limitation I have found is taste.
changeSizes(".circleBlue");
//changeSizes(".circleGreen");
//changeSizes(".circleOrange");
---------
function changeSizes(cirlceColor){
var circle = $(cirlceColor);
circle.each(function(){
var cw = $(this).width();
var ch = $(this).height();
if(cw>ch){
$(this).width(cw);
$(this).height(cw);
}else{
$(this).width(ch);
$(this).height(ch);
}
});
}
Example:
Here is a fiddle of the problem. http://www.jsfiddle.net/PL6KX/
I do not know where the problem is. Would appreciate help.
Thanks.
I want to center everything proportionally from the edges. Horizontal center.
HTML:
<div id="firstleft-box"></div>
<div id="secondleft-box"></div>
<div id="firstright-box"></div>
<div id="secondright-box"></div>
CSS:
#firstleft-box {
position: absolute;
display:block;
left: 20%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#secondleft-box {
position: absolute;
display:block;
left: 40%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#firstright-box {
position: absolute;
display:block;
left: 60%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#secondright-box {
position: absolute;
display:block;
left: 80%;
border: 2px solid black;
width: 100px;
height: 100px;
}
Use float to get divs next to each other, margin to make space between them and then wrap one div around them and center it with margin: 0px auto; your approach is too complicated
See the following JS Fiddle for a demonstration on why your code is not producing the output you are expecting.
http://jsfiddle.net/PL6KX/2/
Basically, you are aligning the left side of each box at 20, 40, 60, 80 etc. You are assuming that it would align the center of your boxes. What I have done in the above fiddle is to create 5 boxes 20% wide so that the points where they meet and touch each other represent 20%, 40%, 60% and 80%. As you can see your boxes at the top are aligning their left edge to those percentages.
What you need: (third set of boxes in the fiddle)
http://jsfiddle.net/PL6KX/4/
HTML:
<div class="container">
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
</div>
CSS:
.container {
margin: 0 auto;
width: 450px;
border: 1px solid red;
overflow: hidden;
clear: both;
margin-top: 20px;
}
#new-box {
box-sizing: border-box;
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid black;
}