I am using -moz-border-top-colors for multiple border.
It works fine for Mozilla ,but
It does not work in other browsers.
however, I used -webkit ,still It did not work in Chrome.
this feature is supported by firefox only ... but you can use multiple shadows as a more cross-browser
solution
.box {
margin-top: 40px;
height: 200px;
width: 200px;
background: #ddd;
border-top: 3px solid blue;
/* custom borders */
box-shadow: 0 -3px 0 0 green,
0 -6px 0 0 black,
0 -9px 0 0 yellow,
0 -12px 0 0 skyblue;
}
check this link for more infos http://jsfiddle.net/8htrkqzb/
According to https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-top-colors this property is only supported in Firefox.
Related
Here is my fiddle : SCROLLBAR
Run the fiddle in both Chrome and Firefox browsers, hit the "Toggle" button to see custom CSS not being applied for scroll bar in Firefox browser.
Is there a way I can display the custom scroll bar in all browsers?
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 100px;
border-radius: 100px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
border-radius: 100px;
background: #c1bdbe;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #555D69;
}
Any help would be much appreciated.
Thank you.
Firefox doesn't support custom scrollbars yet so there's no way to do this in css.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
You have to use JavaScript to have global style on all browsers.
This is the top of the sketch of my website, I've done this in a HTML editor.
The circle we can see in the image is my logo, it's an image with alpha color background.
Shadows, borders, etc are working perfectly even in IE.
Now I'm trying to do something similar with HTML5 and CSS3 but I'm having lots of problems with image shadows and borders.
box-shadow doesn't work because it's a square image (remember it's a image with alpha color background)
The last thing I've found for image shadow is filter: drop-shadow. In theory it should work on all browsers but it's only working with chrome.
On the other hand, i can't get a border like the one on the picture. As you know, my logo is a image with alpha color background and it always makes a square border.
Can anybody give me some help. I would appreciate it. Thanxs
After using the solution Lloan Alas gave me it's working perfectly but not on mobile phone
I use dolphin browser and this is what i get:
This is my code: css:
#logo {
margin-top: -100px;
height: 188px;
width: 300px;
background-image: url("../imagenes/logo.png");
border: 5px solid white;
border-radius: 50% ;
box-shadow: 0 10px 15px #000;
-moz-box-shadow: 0 10px 15px #000;
-webkit-box-shadow: 0 10px 15px #000;
-ms-box-shadow: 0 10px 15px #000;
-o-box-shadow: 0 10px 15px #000;
-khtml-box-shadow: 0 10px 15px #000;
}html:
<div id="logo"></div>
Here is a live demo - Let me know if it helps! LIVE DEMO JSBIN
Compatible with IE 9-10, Firefox, Safari and Opera. (Supposedly)
I don't get very well what are you looking for, but if you want to add a shadow to that ellipse what you need is box-shadow, as you know
The use is:
box-shadow: horizontal-shadow-position v-shadow-pos blur spread color inset;
where you can ommit a property but you cannot change its order.
So for instance your shadow will be something like
box-shadow: 3px 3px 8px 2px #666;
because it's not inset.
In addition, to be able to use it in more browsers, you will need the browser prefix, such as
box-shadow: 3px 3px 8px 2px #666; /*Firefox (and new versions of Opera)*/
-o-box-shadow: 3px 3px 8px 2px #666; /*Opera*/
-ms-box-shadow: 3px 3px 8px 2px #666; /*Internet Explorer*/
-webkit-box-shadow: 3px 3px 8px 2px #666; /*Webkit: Safari, Chrome, Chromium...*/
Also, remember that the alpha-filter you mentioned is just the equivalent to opacity property for Firefox, Chrome, Opera, ...
I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this?
This is what I had but outline does not work with IE:
outline: 2px solid #36F;
border: 2px solid #390;
Thanks.
You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1.
I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning.
.border
{
border:2px solid #36F;
position:relative;
z-index:10
}
.border:before
{
content:"";
display:block;
position:absolute;
z-index:-1;
top:2px;
left:2px;
right:2px;
bottom:2px;
border:2px solid #36F
}
http://jsfiddle.net/fvHJq/1/
Use box shadow fo 2nd border.
div.double-border {
border: 1px solid #fff;
-webkit-box-shadow: 0px 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 0px 1px #000;
box-shadow: 0px 0px 0px 1px #000;
}
In this case box-shadow does not ignore border-radius property like outline does
A very simple solution you could use as a fall-back if nothing else would be to use two divs. Your main div, and then an empty one just wrapping it that you could use to set the second border.
Late to the party for this question, but I feel like I should record this somewhere. You can make a scalable function in something like Less or Stylus which will create any number of borders (Stylus here):
abs(n)
if n < 0
(-1*n)
else
n
horizBorder(n, backgroundColor)
$shadow = 0 0 0 0 transparent
$sign = (n/abs(n))
for $i in ($sign..n)
/* offset-x | offset-y | blur-radius | spread-radius | color */
$shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
return $shadow
Then,
$background: #FFF // my background was white in this case and I wanted alternating black/white borders
.border-bottom
box-shadow: horizBorder(5, $background)
.border-top
box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
box-shadow: horizBorder(5, $background), horizBorder(-5, $background)
With box-shadow you can achieve as many different color borders as you want. E.g:
#mydiv{
height: 60px;
width: 60px;
box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}
<div id="mydiv"> </div>
https://jsfiddle.net/aruanoc/g5e5pzny
A little trick ;)
box-shadow:
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;
.border{
width: 200px;
height: 200px;
background: #f06d06;
position: relative;
border: 5px solid blue;
margin: 20px;
}
.border:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: green;
z-index: -1;
}
<div class="border">
</div>
use the class name for .border given the vales border:2px solid #000 for single border.then you want another border try to .border:after given the values if you got second border check out above the code sample
example
On my new site border-radius doesnt seem to be working.
I can see the border curving, but the background doesn't.
border-radius should work.
following works in IE 9
http://jsfiddle.net/Ec86p/3/
if supporting border-radius in IE7/IE8 is not a requirement then you should not include CSS3PIE as IE9 inclues support of border-radius css property.
edit:
i have updated your fiddle
http://jsfiddle.net/Zr8vE/3/
and changed following:
#main-menu li.first{
border-left:1px solid #feb800;
border-top-left-radius: 5px 5px;
-moz-border-top-left-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-moz-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
padding-left:10px;
}
edit : # 2
as soon as i removed following from ( #main-menu li )
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9900', endColorstr='#ff7c00',GradientType=0 );
it started working. ( I tried it in IE 9, orange background seems to be curving similar to border )
http://jsfiddle.net/Zr8vE/15/
in fact, it is not only the IE9, but also IE9 -.
you can either follow #Bert answer, or you can try CSS3PIE
the usage is just the same, but CSS3PIE provide more CSS3 features for IEs.
i think this is the solution you needed.
in your css apply this to the element that needs the rounded corner
#element{
behavior: url(border-radius.htc);
}
download and search it in google border-radius.htc and save it in your image folder or anywhere you like it is an image with curve and it is use to fix IE problem.
I will post my css for my main menu that works for me with rounded border.
#main-nav {
width: 100%;
background: #ccc;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
Please try this.
here is the link http://jsfiddle.net/vZaJX/
Hope it helped.
Here is now the answer.
try to just edit the spacing of the words.
http://jsfiddle.net/ApYw4/
for IE 9 solution as i have told you
download this border-radius.htc and add to your css like this
#main-menu{
behavior: url(border-radius.htc);
//all css
}
Dont hesitate to correct me if anything wrong.
I need to create shaded divs like those shown in the image below, using only CSS. Any idea about how to create them using less coding?
Thank you!
Here's a method using CSS's box-shadow, which is compatible in Firefox 3.5+, Safari 3+, Chrome, Opera 10.5+ and IE9+.
http://jsbin.com/usabe4
Multiple box-shadows are being used to get closer to the desired effect than a single box-shadow is capable of:
#box1 {
background: yellow;
-moz-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
-webkit-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
}
Did you try using box shadow in css 3:
box-shadow:5px 5px 0 #CCCCCC
For more details check:
http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm
Put two div's on top of each other (use z-index) and move the lower one two pixels down/right.
Is a CSS3 box-shadow close enough?
http://jsfiddle.net/4kS4F/
.box {
width: 120px;
height: 60px;
border: 1px solid #000;
background: yellow;
-webkit-box-shadow: 3px 3px 0px #777;
-moz-box-shadow: 3px 3px 0px #777;
box-shadow: 3px 3px 0px #777;
}
It's supported in many browsers: http://caniuse.com/#search=box-shadow
The notable exceptions are IE 7 and 8. If you need it to work there, you could use CSS3 PIE to provide the box-shadow.
If you need only a white background (or any fixed background color) you can make the box an image with the colored part being transparent and the edges being your background color. Then you set that as the background image, while the background color can control the face color of the box.