I am trying to make the css curve box with gradient and shadow as well as.
so how i can make with pure css and it should be only in one div not much code.
For reference see the attached image:-
you just make is border-radius as like this
Css
div {
width:200px;
margin:auto;
margin-top:20px;
height:200px;
background:red;
border-radius:25px;
box-shadow: inset 0 0 15px rgba(68,68,68,0.8);;
position:relative;
}
div:beforae {
content:"";
position:absolute;
border-left:15px solid blue;
border-right:15px solid green;
height:200px;
border-radius:15px 0 0 15px;
}
HTML
<div></div>
and now check to live demo http://jsfiddle.net/rohitazad/Vsvg2/74/
Related
I just wanted to ask if there is a certain type of code that may give me double or triple lines in one code or would I have to create a separate code for each line.
This is what I would like to have.
I'm not certain that this is possible with CSS alone, but you could use two or three nested block elements, e.g. <div>s, with a small amount of padding between each. For example:
.multi-border {
border: 1px solid black;
padding: 5px;
}
<div class="multi-border">
<div class="multi-border">
<div class="multi-border">
I am some example text!
</div>
</div>
</div>
Well you can do some styling with borders. Check this out
CSS Border Style
There is a solution on the web for this. It looks like the action is here, but I will link to the source below.
.underline--double {
box-shadow:
inset 0 -0.075em white,
inset 0 -0.1em red,
inset 0 -0.15em white,
inset 0 -0.175em red;
}
Source
You can use before and after for a class. By this you get maximum 3 border for a single class.
<div class="border">
This is the code
</div>
.border {
position:relative;
border:5px solid #000;
height:210px;
width:210px;
background: #f8f8f8;
padding:30px;
border-radius: 9px;
}
.border:before {
content:"";
position: absolute;
top:5px;
bottom:5px;
left:5px;
right:5px;
border:5px solid #999;
border-radius: 8px;
}
.border:after {
content:"";
position: absolute;
top:15px;
bottom:15px;
left:15px;
right:15px;
border:5px solid #666;
border-radius: 8px;
}
I am working on CSS border properties, I have done with border-radius,border,border-width,border-color,border-collapse,border-image,etc. I want my border at the left side of my page as shown in the pic click here for the image to be shown. Can anyone teach me with this. Thank you
You can use pseudo elements to get the border same, you can play with properties to know about how it works.
Below i posted an example
.box {
width:150px;
height:150px;
border-radius:50%;
background:green;
position:relative;
}
.box:before {
content:'';
position:absolute;
top:10%;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
left:14px;
width:0;
height:0;
display:block;
border-top:10px solid green;
border-bottom:10px solid transparent;
border-right:10px solid transparent;
border-left:10px solid transparent;
}
<div class="box"></div>
I am interested in making a website where 2 div elements with different size to drop a shadow, but without being affected by the other's shadow.
I have tried to put the same z-index in both elements, but the last one has priority over the first one and its shadow overlaps it.
So, as the title says, how could it be done?
EDIT: I have read the Two divs with shadows looks like one part. Is it possible in CSS? post, but that do not solve my problem because I can not move the shadow any pixel.
You could just omit the left-side shadow of the green box, or sort of.
.div2 {
background:#B1FA00;
width:200px;
height:50px;
float:left;
box-shadow: 0 0 0 gray,
0 0 0 transparent, 8px 8px 15px gray;
}
Example:
https://jsfiddle.net/b1483vuk/1/
Example with both divs in white:
https://jsfiddle.net/b1483vuk/2/
If you move the box-shadow to a pseudo element for each box, you can position the pseudo element behind both boxes using z-index.
The css would look like:
div {
position: relative;
}
div:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 12px black;
z-index: -1;
}
It may not work in your situation, but the following fiddle demonstrates this:
https://jsfiddle.net/adrianlynch/16r8bp5a/
The comment made by #jcaron solve my problem:
One option would be to use the first option, then add another blue box at the same location as the first one, but without the shadow, and a higher z-index.
Thank you all for your support.
Cover it up with a :before as #0b10011 said:
<style type="text/css">
#two {
position:relative; /* Add relative positioning */
}
/* Add :before element to cover up shadow */
#two:before {
background:white;
display:block;
content:".";
font-size:0;
width:4px; /* Width of Shadow */
height:100px; /* Height of #one */
position:absolute;
left:-4px; /* 0 - Width of Shadow */
top:0;
}
</style>
Try offsetting the shadow so you isolate the left side of the green rectangle at set its z-index to be superior.
Try something like this.
box-shadow: 10px 0px 0px 10px #888888;
Codepen:
http://codepen.io/danielsinger/pen/grvJGw
There is a simple easy solution just using z-index and overlaying a div over another.
you will notice a slight thickening of the shadow around the join between yellow and green, this is from the div shadows overlapping, and as far as I'm aware (which is not very far), this is unavoidable.
.a1 {
z-index:5;
width:50px;
height:100px;
box-shadow: 0 0 5px 3px black;
position:absolute;
top:50px;
left:20px;
background-color:white;
}
.a11 {
z-index:10;
width:50px;
height:100px;
position:absolute;
top:50px;
left:20px;
background-color:yellow;
}
.a2 {
z-index:8;
width:100px;
height:50px;
box-shadow: 0 0 5px 3px black;
position:absolute;
top:100px;
left:70px;
background-color:green;
}
<html>
<body>
<div class=a1></div>
<div class=a11></div>
<div class=a2></div>
</body>
</html>
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 8 years ago.
I'm trying to create a hollow css arrow in front of an image.
I got it… but it feels very dirty. Is there any better way to do this?
Cross browser compatibility (IE8+) would be awesome.
SCSS
.arrowwrap {
width:100%;
padding:0;
position:relative;
overflow:hidden;
margin:-$arrow_height 0 0 0;
&:after {
content:'';
position:absolute;
height:$arrow_height;
width:50%;
margin:-$arrow_height 0 0 -$arrow_width;
left:0;
z-index:99999;
background:$box_color;
}
&:before {
content:'';
position:absolute;
height:$arrow_height;
width:100%;
left:50%;
margin:0 0 0 $arrow_width;
z-index:99999;
background:$box_color;
}
.arrowone {
width: 0;
height: 0;
border-style: solid;
border-width: $arrow_height $arrow_width 0 $arrow_width;
/* border-color: transparent transparent #333 transparent; */
border-color:transparent $box_color $box_color $box_color;
margin:auto;
}
}
http://jsfiddle.net/dhs2eba2/
If you want to minimise and remove all unsemantic markup you can do :
DEMO
This technique relies on pseudo elements and therefore prevents the use of unsemantic markup. Pseudo elements are supported by IE8+ see canIuse. It also needs the box-sizing property to enable responsive width (box-sizing: border-box is also supported by IE8+ see canIuse).
HTML :
<div class="wrap">
<img src="http://placekitten.com/800/350" />
<article>
<h1>Hellow World, meow</h1>
</article>
</div>
CSS :
body {
background:#fad;
padding:0;
margin:0;
}
$arrow_width: 20px;
$arrow_height: 20px;
$box_color: #d3d030;
.wrap {
img {
width:100%;
height:auto;
vertical-align:bottom;
}
article{
padding:20px;
background:$box_color;
color:#fff;
position:relative;
}
}
article:before, article:after{
content:'';
position:absolute;
width:50%;
bottom:100%;
box-sizing:border-box;
}
article:before{
left:0;
border-bottom:20px solid #D3D030;
border-right:20px solid transparent;
}
article:after{
right:0;
border-bottom:20px solid #D3D030;
border-left:20px solid transparent;
}
Not sure about IE8, haven't got a copy on my VM, but you could approach it like this instead of pseudo elements
<div class="arrowborder">
<div class="arrrowwrap arrowwrapleft"></div>
<div class="arrrowwrap arrowwrapright"></div>
</div>
.arrrowwrap {
box-sizing:border-box;
width:50%;
z-index:9999999;
float:left;
}
.arrowwrapleft {
border-right: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
.arrowwrapright {
border-left: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
http://jsfiddle.net/dhs2eba2/8/
How could I wrap a border around another border and have them both use inset drop-shadows (like double matting in a picture frame)?
You can accomplish this using the :before and :after pseudo-elements. See jsFiddle demos at end of answer.
HTML
<div class="frame"><img src="../img/logo.png"></div>
CSS
.frame {
display:inline-block;
position:relative;
margin:20px;
z-index:5;
padding:10px;
background:#376b90;
}
.frame:before {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:0;
top:0;
right:0;
bottom:0;
box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:5px;
top:5px;
right:5px;
bottom:5px;
box-shadow:inset 0 0 3px 2px black;
}
Example Usage
Both shadows outside
One shadow inside, one shadow outside
Both shadows inside
Two inset shadows, one outset shadow, and custom background - Requested by OP
Inset borders - Replicating https://stackoverflow.com/a/10904061/526741
Variable length content
you could nest the divs as shown in - http://jsfiddle.net/nG4Td/2/
<div class="border">
<div class="border2">
<p>hello world</p>
</div>
</div>
css
.border{
border: 5px inset black;
background:#ccc;
width:200px;
height:200px;
padding:20px;
}
.border2{
border: 5px inset black;
background:#eee;
width:150px;
height:150px;
padding:20px;
}`
Here are my fiddle's on the topic
OPTION 1)
You can use Pseudo Classes to accomplish this
Html
<span class="doubleMatt">
<img src="http://lorempixel.com/400/200/" />
</span>
CSS
span,img{padding:0;margin:0;border:0;}
.doubleMatt{
position:relative;
display:inline-block;
font-size:0;
line-height:0;
}
.doubleMatt:after{
position:absolute;
top:1px;
left:1px;
bottom:1px;
right:1px;
border:4px solid rgba(255,255,255,0.5);
outline:1px solid rgba(0,0,0,0.2);
content:" ";
}
OPTION 2)
You can use some basic (one dimensional) goodness
CSS
.basicMatt {
background:#222;
padding:3px;
border:3px solid #666;
}
HTML
<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />
OPTION 3)
you can use an Outline
CSS
.outlinedMatt{
background:#fff;
padding:8px;
border:3px solid #222;
outline:3px solid #666;
margin:3px;
}
HTML
<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />