I am trying to build a staircase using only divs(boxes) and shadows but the third shadow goes over the anterior box.I need the shadow to remain there so its visible on the left side but the top side should be covered. How can i solve this? Using only css. Here it's my code. Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
margin-top:20px;
margin-left:33px;
width: 200px;
height: 20px;
border:1px solid black;
background: #966F33;
box-shadow: -7px -7px 5px #888888;
transform: skewX(50deg);
}
#div2 {
width: 200px;
height: 50px;
margin-left:45px;
border:1px solid black;
background-color: #966F33;
box-shadow: -22px -10px 5px #888888;
}
#div3 {
margin-left:58px;
width: 200px;
height: 20px;
border:1px solid black;
background: #966F33;
transform: skewX(50deg);
box-shadow: -7px -15px 5px #888888;
}
#div4 {
width: 200px;
height: 50px;
margin-left:71px;
border:1px solid black;
background-color: #966F33;
box-shadow: -23px -17px 5px #888888;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
Have you tried using z-index to set the stack order of your elements? http://www.w3schools.com/cssref/pr_pos_z-index.asp
You have to use z-index.
According to W3school
Note: z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
Jsfiddle
Related
I tried to achieve Shadow effect on the border only like simulated in Adobe XD below
I tested to remove the color of background but it hides the shadow within container
<style>
body {
padding: 30px;
}
.border-shadow {
box-shadow: 1px 1px 5px black;
background-color: transparent;
width: 100px;
padding: 10px;
}
</style>
<div class="border-shadow">
tests
</div>
Is there any css only solution for this? Thank you.
here is an example of achieving your goal!
We use the pseudo-element ::before and blur() effect.
div {
position: relative;
width: 344px;
height: 121px;
border: 2px solid #bed5e6;
border-radius: 2px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 5px;
left: 5px;
border: 5px solid rgba(0,0,0,.07);
border-radius: 2px;
width: 100%;
height: 100%;
filter: blur(4px);
}
<div><h1>Test</h1></div>
You can combine an inset box shadow with a standard one to achieve this look:
#myDiv {
background: transparent;
border: 1px solid skyBlue;
box-shadow: inset 3px 3px 5px rgba(0,0,0,.1), 3px 3px 5px rgba(0,0,0,.1);
height: 100px;
width: 250px;
}
<div id="myDiv">
</div>
Alternatively, you can use the ::after psuedo-element and apply a thicker border and blur as follows:
#mydiv {
background: transparent;
border: 1px solid skyBlue;
height: 100px;
position: relative;
width: 250px;
}
#mydiv::after {
border: 3px solid #ccc;
content: '';
display: block;
filter: blur(2px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="mydiv"></div>
drop-shadow can also do it:
body {
padding: 30px;
}
.border-shadow {
border:1px solid;
filter:drop-shadow(4px 4px 3px red);
background-color: transparent;
width: 100px;
padding: 50px;
}
<div class="border-shadow">
</div>
been working for bout an hour before i posted the question, suprisingly i found the answer just moment after
by using filter css : drop-shadow i can achieve this effect
<style>
body{
padding:30px;
}
.border-shadow{
border:5px solid black;
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
background-color:transparent;
width:100px;
padding:10px;
}
</style>
<div class="border-shadow">
<div class="test-text">
Tests
</div>
</div>
here is the pen
Codepen
I am trying but failing miserably on trying to make a custom css border like this using the border-image shorthand property.Is there a way to do partial borders? Maybe there is a better way to achieve what I am trying to do? I could always just insert this image but it doesn't seem like this would resize well once you do that.
We can also achieve this by directly positioning the content inside the container as below.
Here we have positioned the content using margin, we can also do this by absolutely positioning the content.
.container {
border: 5px solid #000;
border-bottom: 0;
height: 10px;
margin-top: 15px;
}
.content {
background: #fff;
text-align: center;
border-left: 5px solid #000;
border-right: 5px solid #000;
height: 25px;
line-height: 25px;
width: 150px;
margin: -15px auto 0; /* height 25px + 5px border = 30/2 = 15 */
}
<div class="container">
<div class="content">Header</div>
</div>
Here is a responsive solution with less of code and with transparency:
.container {
text-align: center;
overflow: hidden;
border:5px solid;
border-image:linear-gradient(to bottom,transparent 10px,#000 10px,#000 100%) 4;
height:50px;
margin:5px;
}
.top {
display: inline-block;
position: relative;
padding: 0 10px;
}
.top::before,
.top::after {
content: "";
position: absolute;
top: calc(50% - 8px);
width: 100vw;
height: 15px;
padding: 5px 0;
box-sizing: border-box;
background: #000 content-box;
}
.top::before {
right: 100%;
border-right: 5px solid;
}
.top::after {
left: 100%;
border-left: 5px solid;
}
body {
background:pink;
}
<div class="container">
<div class="top">Hello</div>
</div>
<div class="container">
<div class="top">More Hello</div>
</div>
<div class="container">
<div class="top">H</div>
</div>
You can use display:flex to wrap and "play" with border to div inside wrap
.wrap{
display:flex;
width:100%;
}
.wrap div{
width:calc(100vw / 3);
}
.header{
text-align: center;
border-right: 5px solid black;
border-left: 5px solid black;
}
.border{
margin-top: 5px;
height:8px;
border-top: 5px solid black;
}
.b-left{
border-left: 5px solid black;
}
.b-right{
border-right: 5px solid black;
}
<div class="wrap">
<div class="border b-left"></div>
<div class="header">Header</div>
<div class="border b-right"></div>
</div>
Anyway to set css outline only show left and right ? Because I can't use border, I tried but it will make more bad outlook .
.test{
margin:10px;
padding:10px;
width:100px;
height:10px;
outline:10px solid #000;
}
<div class="test"></div>
You could possibly achieve this using two box shadows:
div {
margin: 10px;
padding: 10px;
width: 100px;
height: 10px;
box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;
}
<div></div>
Is it possible to add padding or margin around the scrollbar item or scrollbar-track? I've tried and can only get padding top/bottom. Adding padding to the UL has no effect on scrollbar. Negative margins on scrollbar have no effect. Ideas? JS Fiddle here.
::-webkit-scrollbar {
width: 12px;
margin:10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.
Quoted from how to customise custom scroll?
body {
min-height: 1000px;
font-family: sans-serif;
}
div#container {
height: 200px;
width: 300px;
overflow: scroll;
border-radius: 5px;
margin: 10px;
border: 1px solid #AAAAAA;
}
div#content {
height: 1000px;
outline: none;
padding: 10px;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #AAAAAA;
}
<div id="container">
<div id="content" contenteditable>
Click to type...
</div>
</div>
I created a margin-right effect using border-right on the scrollbar-thumb:
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: red;
border-right: 4px white solid;
background-clip: padding-box;
}
The scrollbar appears to have width 4px and margin-right 4px.
Here's a fiddle as well: https://jsfiddle.net/4kgvL93h/3/
You can add a margin to the scrollbar track;
#someID ::-webkit-scrollbar-track{
border-radius: 15px;
margin: 40px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
This solution make a real space between content and scrollbar (if a scrollable element doesn't have a transparent background). Useful for window scrollbars.
.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
width:16px;
height:16px;
background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
.scroll::-webkit-resizer {background:inherit;
border-right:8px solid rgba(255,255,255,.2); //optional
border-bottom:8px solid rgba(255,255,255,.2); //optional
}
Simply use the margin-block
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 15px;
}
#container{
height:400px;
background-color:white;
overflow-y:scroll;
border-radius:25px;
}
#content{
height:700px;
background-color:yellow;
padding:25px;
}
::-webkit-scrollbar{
width: 5px;
}
/* Track */
::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 25px;
}
/* Handle */
::-webkit-scrollbar-thumb{
background: #8B8B8B;
border-radius: 27px;
border: 4px solid rgba(0, 0, 0, 0);
}
<div id="container">
<div id="content">
<br>
Click to type...
<br>
</div>
</div>
Another important attribute to add vertical or horizontal margin:
::-webkit-scrollbar-track {
margin: 0 30px;
}
With border-radius, neither box-shadow works properly nor does background-clip: padding-box.
I created a parent div on top of the div which needs scrolling. And fixed the height of parent div and put padding right in the child div. That worked well for my case.
<div class="parent h-10 overflow-scroll">
<div class="scroll child pr-2">
<!-- CONTENT -->
</div>
</div>
I'm in a bit of an overflow conundrum right now.
I have a layout that is supposed to have a white container with rounded corners. The footer (which is at the bottom of the container, and inside of it) is a shade of grey. I used 'overflow-x:hidden' to make sure the bottom corners of the footer div were rounded with the container.
The problem is, when I hide the overflow, the css ribbon (that I'm using in the header) folds are hidden.
I'm trying to figure out a way to rearrange the DIVs to achieve a layout that has the rounded corners and the ribbon at the top, but am having trouble.
I am using WordPress along with Bootstrap to code my layout. Here's my code as it stands (without the hidden overflow).
CSS:
.container {
clear: both;
margin: 20px auto;
width: 940px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
/* overflow-x: hidden; */
*zoom: 1;
}
/* Ribbon
-------------------------------------------------*/
.rectangle {
background: #80D4F6;
height: 50px;
width: 970px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
z-index: 100; /* the stack order: foreground */
margin: -30px 0px 0px;
}
.rectangle h2 {
font-size: 40px;
font-family: 'Grand Hotel', cursive, Georgia, helvatica;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
.rectangle h2 a{
color: #FFFFFF;
}
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 35px;
z-index: -1; /* displayed under bubble */
}
.triangle-r {
border-color: transparent transparent transparent #7d90a3;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 940px;
top: 5px;
z-index: -1; /* displayed under bubble */
}
/* Footer
-------------------------------------------------*/
.site-footer{
padding-top: 10px;
background: #f6f6f6;
}
And here is how the HTML is formatted:
<div class="container">
<div class="row">
<div class="span12">
NAV
<div class="rectangle"><h2>SITE TITLE</h2></div>
<div class="triangle-l"></div> <!-- Left triangle -->
<div class="triangle-r"></div> <!-- Right triangle -->
SLIDESHOW
</div>
</div>
<div class="row">
<div class="span8">
CONTENT
</div>
<div class="span4">
SIDEBAR
</div>
</div>
<footer class="site-footer" role="contentinfo">
<div class="row">
FOOTER
</div>
</div>
</div>
The issue can be seen here(the footer's corners aren't rounded because I "unhid" the overflow to allow the ribbon folds to show).
Any help would be greatly appreciated.
add this css in you style.css file
.site-footer {
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
}