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>
Related
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>
What would be the best approach of creating other colors of link buttons, without copying the entire thing again and again.
I already have a blue button.. now i want to have another orange or green button
.blue-button {
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.blue-button:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.blue-buttonk:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
You can separate the color and background from the button and create another class just for the those properties. i.e. .blue and .red
Then you can move those properties inside those classes applying also the :hover and :active selectors.
In case you want to change color, change the html and change the class blue into red.
HTML
<div class="button blue">Click me</div>
CSS
.button {
display:inline-block;
padding: 10px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.button:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.button:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
border: solid 1px #203E5F;
}
.button.blue{background: #4479BA; color: #FFF;}
.button.blue:hover{ background: #356094; }
.button.blue:active { background: #2E5481; }
.button.red{background: red; color: yellow;}
.button.red:hover{ background: green; }
.button.red:active { background: pink; }
DEMO http://jsfiddle.net/a_incarnati/douv8oby/
I've got a weird situation. I'm using AngularJS to dynamically set the position of a range slider based on the current position in the video. If I style just the thumb (by enabling the bottom two calls below) the thumb moves along the slider in real time as expected. If I style the input[type="range"] as in the first section below, the thumb doesn't move dynamically unless you mouse over it.
I have tried other CSS styles of range inputs that I pulled from various websites, and I experience the same outcome each time. This seems to affect only Chrome. The weirdest thing is that IE works just fine (who would have thought?!) with the styled slider and the thumb moves along nicely.
input[type="range"] //::-moz-range-track //::-ms-track
{
outline:none;
background: rgb(127, 183, 219);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-wekkit-border-radius: 8px;
}
input[type="range"]::-webkit-slider-thumb// ::-moz-range-thumb ::-ms-thumb
{
outline:none;
-webkit-appearance:none !important;
width:20px;
height:20px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border:1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
input[type="range"] ::-webkit-slider-thumb:hover// ::-moz-range-thumb:hover ::-ms-thumb:hover
{
outline:none;
-webkit-appearance:none !important;
width:22px;
height:22px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border: 1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
I am using the same CSS sheet for all the html pages on our website.
This is the CSS container:
#Container {
position: relative;
top: 5px;
width: 1000px;
height: 600px;
margin: 0 auto 0;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
border-color: #CCC;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
}
This is fine on all the pages except one, which needs the height to be 1000px.
How would I make a variation of the code for one page, instead of copying the entire container settings again for the one html page?
On the page in question give the body a class e.g. 'myPage' then add the below to your css
body.mypage #container{
height:1000px;
}
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