I'm working with the drop-shadow property. It is working fine in browsers except internet explorer. Its important this works in internet explorer 11 for me. What can I do? Thanks in advance.
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
filter: drop-shadow(5px 5px 5px #222);
-webkit-filter: drop-shadow(5px 5px 5px #222);
-ms-filte: drop-shadow(5px 5px 5px #222);
}
<div class="nb-view-project-image"></div>
Try this css:
.nb-view-project-image {
max-width: 315px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4040;
box-shadow: 5px 5px 5px #222;
}
Try using:
-moz-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
Or:
-webkit-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;
You could also try to use the following code:
.nb-view-project-image {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
Related
Hi im trying to style my jquery autocomplete, all is well but when i tried to hover on the items its displaying on a bottom left side of my page, any suggestions to fix this? here is my css code.
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
I'm trying to make a couple of css circles with text inside in one line. When I use circle class to img, circles are inline, but I cannot add any text. When I use circle class to div, I can add text, but they don't display inline, even when I add display:inline to circle class.
CSS
img.galeria{
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 12%;
height: 75.825%;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0,0,0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0,0,0, .8);
margin-right: 2%;
}
HTML for the first option (img)
<img class="galeria" src="../images/backgrounds/light-blue.png"/>
HTML for the second option (div)
<div class="galeria"/>text
What am I doing wrong?
In your style, replace display: inline; with display:inline-block;. It worked for me!
Try this
.galeria {
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 50px;
height: 50px;
text-align:center;
line-height:50px;
background:url('...imgsrc.jpg');
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
You say that you tried display: inline, but it isn't in your code.
If you try it, it works
.galeria{
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 12%;
height: 75.825%;
border-radius: 50%;
box-shadow: 0 0 8px rgba(0,0,0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0,0,0, .8);
margin-right: 2%;
display: inline;
}
demo
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;
}
I am trying to have a image on CSS text button. If I increase font-size to 26 px, image appear properly.I want to keep the font-size at 20px but fit image properly.
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
background: url(../img/gmail2.png) no-repeat;
}
a.button.icon.chat span {
background-position: 0px -48;
}
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 20px;
font-weight: bold;
}
What about setting an specific height for a.button.icon span ?
This page renders great in FF, Chrome, etc.. However in IE 7 and 8, the close "X" which is a background image does not line up. Any ideas? I tried to set the background-position etc..
The code I have:
.startup-container
{
width: 455px;
}
.close-startup-home
{
background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
float: right;
height: 52px;
width: 60px;
}
.menu-outer
{
background: #545454;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
}
.menu-inner
{
background: #3f3f3f;
-moz-box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
-moz-border-radius:5px;
border-radius:5px;
}
.startup-box
{
width:439px;
line-height:20px;
text-align: center;
color:#fff;
padding-top:5px;
padding-bottom:5px;
}
.startup-box-inner
{
width:389px;
height:99px;
padding:20px;
margin-left:5px;
margin-right:5px;
}
<div class="startup-container">
<div class="close-startup-home"></div>
<div class="menu-outer startup-box">
<div class="menu-inner startup-box-inner"></div>
</div>
</div>
Give a position: absolute to your div containing the close button and position it according to that.
.startup-container {
width: 455px;
position: relative
}
.close-startup-home {
background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
float: right;
height: 52px;
width: 60px;
position: absolute;
right: 0;
}