How to give shadow to a border?
css codes:
p{
border-right:2px solid black;
line-height:4em
}
Now is it possible to give shadow to this border?
Depends on what type of shadow do you want to achieve
Dynamically generate the border and add the shadow
p {
line-height:4em;
position: relative;
}
p::after {
content: ' ';
width: 2px;
height: 4em;
background-color: black;
display: block;
position: absolute;
top: 0;
right: 0;
box-shadow: 3px 3px 2px red;
}
<p>Stack Overflow</p>
Simple offset shadow to the right
p {
border-right:2px solid black;
line-height:4em;
box-shadow: 2px 0px red;
}
<p>Stack overflow</p>
You can do this with box-shadow
p {
border-right: 2px solid black;
line-height:4em;
display: inline-block;
-webkit-box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
-moz-box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
}
<p>Lorem ipsum dolor.</p>
Or try :after and linear-gradient
p {
border-right: 2px solid black;
line-height:4em;
display: inline-block;
position: relative;
}
p:before {
position: absolute;
z-index: -1;
top: 10%;
right: -5px;
width: 5px;
height: 100%;
background: linear-gradient(transparent, #aaa, transparent);
content: '';
}
<p>Lorem ipsum dolor.</p>
p{
border-right:2px solid black;
line-height:4em;
box-shadow: 10px 10px 5px #000000;
}
Just add box-shadow property, like below
p{
border-right:2px solid black;
line-height:4em;
-moz-box-shadow: 1px 0 0 red;
-webkit-box-shadow: 1px 0 0 red;
box-shadow: 1px 0 0 red;
width: 200px; /* for demo purpose only*/
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, fugit!</p>
Fiddle : https://jsfiddle.net/nikhilvkd/pnajhz9g/
It is possible with box-shadow.
General Example
p {
border:2px dashed #000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
width:100px;
}
<p>some content</p>
Example for right shadow
p {
border:2px dashed #000;
-webkit-box-shadow: 10px 0 rgba(0,0,0,0.75);
-moz-box-shadow: 10px 0 rgba(0,0,0,0.75);
box-shadow: 10px 0 rgba(0,0,0,0.75);
width:100px;
}
<p>some content</p>
A tool to generate a box-shadow you can find here: http://www.cssmatic.com/box-shadow
From the official specification
The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property accepts either the ‘none’ value, which indicates no shadows, or a comma-separated list of shadows, ordered front to back.
https://drafts.csswg.org/css-backgrounds-3/#box-shadow
use this
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.shadow{
box-shadow: 1px 2px 3px black;
}
</style>
</head>
<body>
<p class="shadow">Shadow for me</p>
</body>
</html>
this will add for the whole width.
Note
for more details, this is the css syntax
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
none :Default value. No shadow is displayed
h-shadow :Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow :Required. The position of the vertical shadow. Negative values are allowed.
blur :Optional. The blur distance.
spread: Optional. The size of shadow. Negative values are allowed.
p {
line-height:4em;
position: relative;
}
p::after {
content: ' ';
width: 2px;
height: 4em;
background-color: black;
display: block;
position: absolute;
top: 0;
right: 0;
box-shadow: 3px 3px 2px red;
}
<p>Stack Overflow</p>
Related
I'm trying correctly shadow the tabs on this site. Not sure If the issue are the values or the html markup.
div.ui-tabs-panel.ui-widget-content.ui-corner-bottom {
background-color: #ffffff;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
div.variableselector_valuesselect_variabletitle_panel {
background-color: #ffffff;
}
a.ui-tabs-anchor {
box-shadow: 1px 4px 2px rgba(0,0,0,0.16), 1px 0px 5px rgba(0,0,0,0.23);
}
here's a screenshot:
I think you are looking for this.
<div class="tabs">
<div class="tab"></div>
<div class="tab"></div>
</div>
<div class="box-container">
</div>
.box-container{
position: absolute;
top:72px;
left:4em;
tansform: translate(0,-50%);
height: 50%;
width:60%;
border: 2px solid #ddd;
z-index:0;
background: #fff;
filter:drop-shadow(2px 2px 5px #555)
}
.tabs{
position: absolute;
display:flex;
left:4em;
top:1.5em;
justify-content: space-between;
z-index:999;
}
.tab{
height:50px;
width:150px;
border:1px solid #ddd;
border-bottom:0;
background-color: #fff;
margin-right: 10px;
box-shadow: 0 -5px 18px -5px #555;
box-shadow: 18px 0 18px -5px #555;
box-shadow: -5px 0 18px -5px #555;
}
i am trying to add shadows at here: http://prntscr.com/eiyg7i
But i cant figure that out.
I've added this code:
.nav-dropdown {
box-shadow: none;
}
but it just make the box shadow to none.
Edit: i have added this code
.nav-dropdown {
-webkit-box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
}
but it still gets wrong http://94.247.169.169/~welloteket/ - it still get shadows here at the top
You can offset the box-shadow in horizontal and vertical direction. Unfortunately doing so will make the shadow appear more prominent on the side you shift it to.
Would this work for you?
http://codepen.io/connexo/pen/gmWjNJ
.bar {
background-color: #f8f8f8;
height: 60px;
}
.dropdown {
height: 200px;
width: 400px;
margin: 0 auto 50px;
box-shadow: 0 10px 10px #666;
/* | | |
x-shift | |
y-shift |
size of shadow
*/
}
/* This uses z-index
.bar2 {
background-color: #f0f0f0;
height: 60px;
z-index: 2;
position: relative;
}
.dropdown2 {
height: 200px;
width: 400px;
margin: 0 auto 50px;
box-shadow: 0 0 10px #666;
}
<div class="bar"></div>
<div class="dropdown"></div>
<div class="bar2"></div>
<div class="dropdown2"></div>
My question is how can I blur only the border of an image?
The image itself should not be blured, just the border.
EDIT: done..thanks!
You can do it by using box-shadow property like below
TIP: you need to match the shadow color to your background or image border for the desired effect.
.image-blurred-edge {
background-image: url('http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg');
width: 200px;
height: 200px;
box-shadow: 0 0 8px 8px #fff inset;
}
<div class="image-blurred-edge"></div>
Using img tag you have to use pseudo element that is :before
.shadow
{
display:inline-block;
position:relative;
width: 150px;
height: 150px;
}
.shadow:before
{
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
-moz-box-shadow:inset 0px 0px 8px 4px #fff;
-webkit-box-shadow:inset 0px 0px 8px 4px #fff;
box-shadow:inset 0px 0px 8px 4px #fff;
}
<div class="shadow">
<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
</div>
Considering your last comment Try this solution.
.shadow img{
border:2px solid #000;
box-shadow:1px 1px 10px 2px;
}
<div class="shadow">
<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
</div>
Looking at your comments on Sagar Kodte's answer, is this what you wanted?
img {
border: 2px solid #000;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.8);
}
<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
I added a border of 2px to the images and a box shadow.
"Out there" idea:
I'll preface this by saying css variables are coming in fast but are not everywhere yet (Just IE lagging behind I think).
That being said I think they are a wonderful idea and will put this answer here just so you know of their existence.
.red {
--border-color: #900;
}
.green {
--border-color: #090;
}
.blue {
--border-color: #009;
}
.clown {
--border-color-top: green;
--border-color-right: yellow;
--border-color-bottom: red;
--border-color-left: blue;
}
img {
border-top: 2px solid var(--border-color-top, var(--border-color, #000));
border-bottom: 2px solid var(--border-color-bottom, var(--border-color, #000));
border-right: 2px solid var(--border-color-right, var(--border-color, #000));
border-left: 2px solid var(--border-color-left, var(--border-color, #000));
box-shadow: 0 -4px 10px -1px var(--border-color-top, var(--border-color, #000)), 4px 0 10px -1px var(--border-color-right, var(--border-color, #000)), 0 4px 10px -1px var(--border-color-bottom, var(--border-color, #000)), -4px 0 10px -1px var(--border-color-left, var(--border-color, #000));
margin: 10px;
}
.img {
border: 2px solid var(--border-color, #000);
box-shadow: 0 0 10px var(--border-color, #000);
margin: 10px;
}
<b>Standard:</b>
<br>
<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
<br>
<b>Single color:</b>
<br>
<img class="red" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
<img class="green" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
<img class="blue" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
<br>
<b>Mulitple colors:</b>
<br>
<img class="clown" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
HTML
<img class="borderBlur" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
CSS
.borderBlur {
border: 2px solid #000;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.8);
}
As long as you wrap the image in a div you can apply a box-shadow to that.
It will appear under the image to start, so you need to apply a lower z-index to the image
body {
text-align: center;
}
.img-wrap {
display: inline-block;
margin: 2em;
box-shadow: inset 0 0px 4px 4px black;
}
img {
display: block;
position: relative;
z-index: -1;
}
<div class="img-wrap">
<img src="http://www.fillmurray.com/284/196" alt="" />
</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 trying to make an inset pill using pure CSS:
Where the two color blocks are clickable separately.
But I can't figure out how to apply the box shadow to the containing element. The closest I got was using an :after element and positioning it over the links; but that covers up the links, making them un-clickable:
(jsFiddle)
<div class="pill">
✚
⦿
</div><!--/.pill-->
.pill {
position: relative;
float: left;
&:after {
content: "";
display: block;
border-radius: 8px;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
display: block;
padding: 4px 6px;
text-decoration: none;
color: #fff;
float: left;
&.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid darken(#3c55b1, 30%);
}
&.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
border-left: 1px solid lighten(#40be84, 15%);
}
}
}
I'm aware of the pointer-events property, but browser support is pretty shabby.
So what do we think? Possible?
You are not using the spread property on the box shadow, so you want to create a border, instead using box shadow add a border to each element.
Remove the:after property and will get the normal behavior
jsFiddle
Make it simple,
draw your box-shadow from a, so it doesn't matter wich size they take.
http://codepen.io/gcyrillus/pen/xwcKg
.pill {
position: relative;
float: left;
background:#eee;
padding:0.5em;
}
a {
display: inline-block;
padding: 4px 6px;
width:1em;
text-align:center;
text-decoration: none;
color: #fff;
font-weight:bold;
box-shadow:inset 1px 2px 0 rgba(0,0,0,.35);
}
.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid #0c2571;
position:relative;
}
.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
box-shadow:
inset 0px 2px 0 rgba(0,0,0,.35),
inset 1px 0 0 #70de94
;
}