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;
}
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 know it doesn't by default, but I'm trying to force it to.
I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts.
Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.
Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.
TLDR: my anchor flickers when hovered too close to the edge. alternatives?
The code is working, but I'll paste it anyway.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}
<a class="btn" href="#">suscribe</a>
EDIT:
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.
No you can't include a box-shadow in the height/width calculations but you can increase the click / hover area by using a pseudo-element which is sized to include the box-shadow.
From CSS-Tricks
button {
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
padding: 9px 16px;
position: relative;
}
button:hover,
button:focus {
background: #3d57b4;
}
button:hover,
button:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
outline: 1px solid red;
/* for demo */
}
button:hover::after,
button:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
body {
padding: 30px;
}
#message {
padding: 10px 0;
}
<button>A Button</button>
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.
I have a problem with a project, i don't know way, chrome and firefox are not display the same height with my buttons. I'd been looking around and I found that firefox has an issue with buttons, so i add the code below, but still doesn't work. What could it be?
.button-type::-moz-focus-inner { border: 0; padding: 0; margin:0; }
.button-type {
background: #a9a9a9;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2);
font: Arial, Helvetica, sans-serif;
line-height: 1;
padding: 8px 15px;
width: auto;
height: auto;
border: none;
text-align: center;
font-size: 13px;
color: #fff;
cursor: pointer;
display: block;
text-decoration: none;
text-shadow: -1px -1px #333;
}
.button-type.black {
background: #000;
color: #fff;
}
.button-type.gray {
background: #a9a9a9;
}
.button-type.light-gray {
background: #d3d3d3;
color: #222;
}
Solve it the solution (and error) was:
display:block
replace it with:
display:inline
I have the following css:
fieldset ul li input {
width: 96%;
margin: 0;
padding: 6px;
font-size: 13px;
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
-webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}
Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can't see it completely. As you can see is hidden in the half of it:
Either increase the height or the padding.
input {
padding: 10px;
}