I am using CSS3 PIE for make the box shadow property work in IE 8. As you can see in the image, I have 3 boxes with the same style, but only one of them (the first) is rendered as I want.
HTML
<div class="grid_22">
<div class="panel_third">
<!--WHATEVER-->
</div>
<div class="panel_third panel2">
<!--WHATEVER-->
</div>
<div class="panel_third panel3">
<!--WHATEVER-->
</div>
</div>
CSS
.panel_third{
float: left;
height: 317px;
width: 206px;
padding: 30px;
margin-right:31px;
background: #ffffff;
position: relative;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
/**http://css3pie.com**/
behavior: url(../../../../../dashboard/resources/main/js/libs/pie/PIE.htc);
}
.panel2{
background: url(../img/Box-2-BG.png) no-repeat;
}
.panel3{
background: url('../img/Box-3-BG.png') no-repeat;
margin-right: 0;
float: right;
}
http://jsfiddle.net/QV3GF/
give it like this
.grid_22>div
{
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
/**http://css3pie.com**/
behavior: url(../../../../../dashboard/resources/main/js/libs/pie/PIE.htc);
}
it gives the shadow to all direct child div of .grid_22
Related
The matter is the following, I have a selector and I want to show the scrollbar (I am using ng-select). The point is that using Overflow-y: visible or scroll nothing appears, however in Firefox it does!
I already tried adding a specific height, also a max-height and I get no results. Someone who can tell me what I'm doing wrong?
HTML:
<ng-select class="ng-select form-control form-control-solid form-control-lg px-2.5 py-1 text-sm rounded"
[clearable]="false" [searchable]="false" placeholder="Select a Merchant"
(change)="storeSelectedMerchant($event)" [ngModel]="(activeMerchant$ | async)" *ngIf="merchants$ | async">
<ng-option value="all"><b>All Merchants</b></ng-option>
<ng-option *ngFor="let merchant of merchants$ | async" [value]="merchant.guid">
<p>
<strong class="block">{{merchant.dba}}</strong>
<span>MID: {{merchant.mid}}</span>
</p>
</ng-option>
</ng-select>
</div>
CSS:
.ng-dropdown-panel {
background: #eee;
left: 0;
margin-top: 10px;
border-radius: 3px 3px 6px 6px;
overflow: hidden;
-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
.ng-dropdown-panel-items.scroll-host {
overflow-y: visible !important;
&::-webkit-scrollbar {
width: 6px !important;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px white(0, 0, 0, 0);
-moz-box-shadow: inset 0 0 0px white(0, 0, 0, 0);
box-shadow: inset 0 0 0px white(0, 0, 0, 0);
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
}
Chrome:
Firefox:
Please try replacing the overflow-y: visible !important
to overflow-y: scroll !important.
I have to create this modal with same style:
This is what I have right now:
.notification {
position: fixed;
top: 32px;
right: 32px;
width: 460px;
height: 150px;
border-radius: 36px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
background-color: white;
z-index: 999999;
}
.notification > .border {
background-color: #3fb4e4;
margin-left: 20px;
border-radius: 36px;
width: 34px;
height: 150px;
}
<div class="notification"><div class="border"></div>Hello</div>
But I cant find a way to create the blue border on the left.
Use multiple background like below:
.notification {
border-radius: 36px;
padding:50px;
width:100px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
/* Relevant code*/
border:3px solid transparent; /* Control the thickness*/
background:
/* Cover only the padding area*/
linear-gradient(#fff,#fff) padding-box,
/* Cover the border area: adjust the 50px to control the size */
linear-gradient(to right, #3fb4e4 50px,transparent 0) border-box;
}
<div class="notification">Hello</div>
Another syntax where you can control the size outside the gradient:
.notification {
border-radius: 36px;
padding:50px;
width:100px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
/* Relevant code*/
border:3px solid transparent; /* Control the thickness*/
background:
/* Cover only the padding area*/
linear-gradient(#fff,#fff) padding-box,
/* Cover the border area */
linear-gradient(#3fb4e4,#3fb4e4) left border-box no-repeat;
background-size:50px 100%;
transition:0.6s;
}
.notification:hover {
background-size: 100px 100%;
}
<div class="notification">Hello</div>
Why not just add a border on the container itself:
.notification {
position: fixed;
top: 32px;
right: 32px;
width: 460px;
height: 150px;
border-radius: 36px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
background-color: white;
z-index: 999999;
border-left: 3px solid #3fb4e4;
}
I'm creating a custom sider toggle for an ant design project and I'm struggling to preserve three sides (i.e top, right, left) of the box-shadow (i.e. 2px 2px 8px rgba(0, 0, 0, 0.15)) and remove the box-shadow/blur entirely from the left side. My most recent attempt is below. Any thoughts?
JSX:
<span onClick={this.toggleCollapse} className="ant-layout-sider-zero-width-trigger">
{collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
</span>
LESS:
.ant-layout-sider-zero-width-trigger {
background: #fff;
color: #000000a6;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15), inset -2px 0px 0px #fff;
&:hover {
background: #fff;
}
}
btw I've seen similar questions on Stack but none worked for me after much experimentation.
An idea is to use another container and rely on some overflow:
.container {
display:inline-block;
padding:5px 5px 5px 0;
overflow:hidden;
}
.box {
width:200px;
height:50px;
background: #fff;
color: #000000a6;
box-shadow:
2px 2px 8px rgba(0, 0, 0, 0.15),
inset -2px 0px 0px #fff;
}
<div class="container">
<div class="box">
</div>
</div>
You could increase the offset of the shadow and reduce its size:
html {
background: white;
}
body {
padding: 2em;
margin: 2em;
background: yellow;
box-shadow: 4px 4px 8px -4px, inset -2px 0px 0px #fff;
}
How to make such a box-shadow?:
Sides and bottom is same, top is 1px border, without visible shadow.
I do this that:
div {
box-shadow:
inset 0px -10px 4px -10px rgba(0, 0, 0, 0.6),
inset 10px 0px 4px -10px rgba(0, 0, 0, 0.6),
inset -10px 0px 4px -10px rgba(0, 0, 0, 0.6);
background-color: white;
border-top: 1px solid #bebebe;
border-radius: 0 0 6px 6px;
padding: 5px;
width: 130px;
text-align: center;
}
div:hover {
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
}
<div>dddddddddddd <br>dddddddddddd <br>dddddddddddd <br></div>
I have a div with borders with different colors. The design that im working towards blends the point at which these 2 borders join. Can this be done with CSS?
<div class="panel">
dfds
</div>
body {
background: green;
}
.panel {
margin: auto;
width: 300px;
height: 300px;
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
http://codepen.io/anon/pen/XJEWqp
Below you can see the bottom right corner has a sharp diagonal join:
This is the same detail in the design that im creating:
Howsabout this:
body {
background: green;
}
.panel {
margin: auto;
width: 100px;
height: 100px;
background: white;
border-radius: 10px;
padding: 10px;
-webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
-moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
}
<div class="panel">
dfds
</div>
Used red and blue to highlight the overlapping
You can use a border-image for this purpose.
div {
margin: 30px;
width: 50px;
height: 50px;
background: #DDD;
border: 10px solid transparent;
-webkit-border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
-o-border-image: url(http://i.imgur.com/7qsGJvm.png'') 30 30 round;
border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
}
<div></div>