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;
}
Related
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>
I’m trying to adapt some css code I found, however my table seems ugly (according to me). I'll explain this on a picture.
css:
td, th {
border-left: 1px solid #494437;
border-top: 1px solid #494437;
padding: 10px;
text-align: left;
}
th {
background-color: #b8ae9c;
-webkit-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
td:first-child, th:first-child {
border-left: none;
}
I explained what I want by an image:
EDIT: For example I expect white area on right side, when I add padding-right: 0.2em; into "th". But it doesn't change anything.
Is this what you are expecting?
.table {
border: 1px solid #000;
float: left;
}
.header {
border: 2px solid #ccc;
border-width: 2px 0 0 2px;
background-color: #b8ae9c;
margin: 2px;
float: left;
}
<div class="table">
<div class="header">Header</div>
<div class="header">Header</div>
</div>
JSFiddle
HTML
<div class="Progress">
<div class="Step">
</div>
<div class="Tri-Fwd"></div>
</div>
CSS
.Progress .Step {
float:left;
width:140px;
height:40px;
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
-webkit-border-bottom-left-radius:6px;
}
.Progress .Tri-Fwd {
float:left;
border-top: 20px solid transparent;
border-left: 20px solid;
border-bottom: 20px solid transparent;
-webkit-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
}
Reference Image
The Problem
I'm trying to make a CSS only only step-by-step progress however I am having problems with my inner box shadows.
ADVANCED
*{box-sizing: border-box; padding: 0; margin: 0}
menu{
background: linear-gradient(#fff, #ccc);
margin: 40px auto;
border: 1px solid orange;
border-radius: 4px;
max-width: 480px;
overflow: hidden;
box-shadow: inset 0px 0px 2px #333, 0 0 1px #333;
}
menu li{
position: relative;
list-style: none;
display: inline-block;
padding: 10px 30px 10px 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
background: linear-gradient(#f6e6b4 0%, #ed9017 100%);
}
menu li:before, menu li:after{
content: '';
position: absolute;
}
menu li:before{
top: 5px;
width: 30px;
height: 30px;
transform: rotate(45deg);
right: -13px;
box-shadow: 2px -2px 1px 0px #BABABA;
background: linear-gradient(135deg, #f6e6b4, #ed9017);
}
menu li.active{color: white}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
menu li:not(:nth-child(1)){margin-left: -4px; padding-left: 40px}
<menu>
<li>Stage 1</li>
<li class=active>Stage 2</li>
</menu>
THE BASIC
*{box-sizing: border-box; padding: 0; margin: 0}
menu{
background-color: #ccc;
margin: 40px auto;
border: 2px solid orange;
border-radius: 4px;
max-width: 480px;
overflow: hidden
}
menu li{
position: relative;
list-style: none;
display: inline-block;
padding: 10px 4px 10px 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
box-shadow: -2px 0 0 orange;
background-color: orange
}
menu li:before, menu li:after{
content: '';
position: absolute;
top: -2px;
border-bottom: 22px solid transparent;
border-top: 22px solid transparent
}
menu li:before{
border-left: 20px solid #ccc;
left: 100%;
}
menu li:after{
border-left: 20px solid orange;
left: 98%;
}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
<menu>
<li>Stage 1</li>
<li>Stage 2</li>
</menu>
Any idea why my search box comes out all buggy looking like this:
Instead of like this:
Here is my HTML code:
<form class="searchform">
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="Go" />
</form>
CSS
#header {
background-color: #F1F1F1;
height: 50px;
border-bottom:1px solid #E1E1E1;
margin: 0px auto;
}
#header_content {
width: 980px;
margin: 0px auto;
padding-top: 8px;
}
#header_logo {
padding-right: 20px;
float:left;
}
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform, .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
Full demo at: http://jsfiddle.net/FBVL2/
.searchform is not wide enough.
.searchform {
width: 250px;
}
http://jsfiddle.net/FBVL2/3/
Reason has something to do with CSS box model.
You're setting the container to be the same size as the search field. This means there's no space for anything else. You need to have a the input be box padding + input margin + button margin + button width.
Set the #searchform to 250px wide, and the input to 200px wide.
demo
The search form input takes up the whole box, this came out what I'd call perfect.
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
width: 75%;
}
The problem is just this:
.searchform, .searchfield
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
Just remove .searchform
.searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
For me with this changes is working well.
How to create a border shadow inset as in the above image
jsfiddle
<div id="progress-bar">
<div id="bar"></div>
</div>
#progress-bar {
margin-top: 50px;
margin-bottom: 100px;
}
#bar {
width: 97%;
height: 20px;
background-color: #eeebf1;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
You can use the css box-shadow property : Box Shadow
#bar {
width: 97%;
height: 20px;
background-color: #eeebf1;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: 3px 3px 3px #CCC inset;
-webkit-box-shadow: 3px 3px 3px #CCC inset;
box-shadow: 3px 3px 3px #CCC inset;
}
http://jsfiddle.net/8kbwd/2/
Give this a shot...
.shadow {
-moz-box-shadow-top: inset 0 0 10px #000000;
-webkit-box-shadow-top: inset 0 0 10px #000000;
box-shadow-top: inset 0 0 10px #000000;
}