Is there any way to avoid the default white box that appears on a custom styled webkit scroll bar?
The white box only appears when overflow is going both horizontally and vertically. (Using Google Chrome)
Edit: I have tried setting body background to a different colour - still only seeing a white box.
Screenshot:
CSS:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(0,0,0,0.35);
}
::-webkit-scrollbar-corner {
background: #0c0c0c;
}
This is a little out of date, but in chrome, you can set background colour to rgba(0,0,0,0). Anything with alpha 0 and the box won't show :)!
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
As E.C.Pabon mentioned, you can use the
::-webkit-scrollbar-corner {background-color: red;}
tag, setting the background-color to transparent worked for me.
::-webkit-scrollbar-corner {background-color: transparent;}
if you only need the vertical scrollbar you can use
overflow-y: scroll;
the white is the space between the x-scrollbar and the y-scrollbar
i hope it solve your problem
No, there is no way to avoid the white box.
You can set the background-color of it (as you did making it grayish-white in:
::-webkit-scrollbar-corner {
background: #0c0c0c;
}
We deal here with pseudo elements and the color under the ::-webkit-scrollbar-corner is white. So to get the custom webkit scrollbar blend in with your lay-out, you always have to take care of the corner's color AND keep in mind that transparency is over the white color.
While the answer provided by E.C.Pabon was technically correct, the real error was Chrome 50 on x64 Linux had a bug with GTK integration. As of Chrome 51, the issue has been fixed.
Related
The background-color of my body is #ffffff. And I have a div that I need is colored but it needs to be transparent or see through. Is it possible to do this using CSS3 or do I have to use images to achieve this?
body {
background-color: #ffffff;
}
.box {
background-color: #999999;
background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important;
opacity: 0.7;
}
Update:
If you go here: http://pinesframework.org/pnotify/#demos-simple and look for the demo for Transparent Success you can see how the pop-up looks see through on a white background. I need to do something like that without using an image as they are using one.
It sounds like you want an alpha transparent background color. If that's the case, you can use RGBA colors, rather than a solid hex value and an opacity property. This way, only the background will have transparency, not the content.
In your case it would be:
.box {
background-color: rgba(255,0,0,0.7);
}
You can also specify a fallback color to browsers that don't support RGBA (IE 8 and older), or create a PNG image with the color fill you want. My vote is toward progressive enhancement, and just specify an alternate color for browsers that don't understand RGBA:
.box {
background-color: #ff4c4c;
background-color: rgba(255,0,0,0.7);
}
UPDATED: Per your comment below, this question appears to be a duplicate of CSS - Opaque text on low opacity div?.
You need to change the opacity of the background instead of the element:
.box {
rgba(255,0,0,0.6);
}
Or, since you are using a gradient, I would use this:
Ultimate CSS Gradient Generator
It will allow you to do semi-transparent backgrounds with a gradient.
I have this Jquery slider plugin for Wordpress, and it's just the jquery cycle plugin by Malsup.
Anyway, I added a caption in each slide. I just can't find a color that shows clearly in each slide. So I made a semi-transparent (50% opacity) png in Photoshop, 5px x 5 px. Currently, my CSS looks like this:
.homepage-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 5px;
position: absolute;
text-align: left;
width: 100%;
}
I also tried using an absolute path to the png, but no go. Here's the result:
As you can see, the caption in the bottom is almost impossible to read. It'd be cool if I could find a way to have like ... this semi-transparent, yellow rectangular box and then have the black caption inside that box, so you could read the caption. Any help with this would be truly appreciated!
Mr.Jason
Try this Html and Css,
<body>
<div class="stroke-effect">
This text should have a stroke in some browsers
</div>
</body>
Css
body{
background-color:#000;
}
.stroke-effect{
font-weight:bold;
color: #000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
Check this http://jsfiddle.net/VqDKp/
Good Luck!
I'd recommend not using images. One reason is that png images with transparent backgrounds don't have transparency in some browsers (I know it maybe only older browsers but still).
Another reason. The image wont be positioned 100% of the background in your script.
I personally like using CSS made backgrounds as they pretty much cover all browsers types. Here's my background example for you :)
background:rgba(200,200,200,0.5); //50% silver-ish background.
You could use an opacity. But I wouldn't recommend that as it would effect the content in your p element as well as. I believe using an alpha filter would do the same but it's been a while since I've used them.
Here's a further example for you :)
background:linear-gradient(top, rgba(0,0,0,0) 0%, rgba(70,70,70,0.5) 30%, rgba(200,200,200,0.5) 100%);
//from top to bottom 100% transparent black.
//Very dark grey 50% transparent at 30% from the top of the element.
//Silver-ish 100% at the bottom at 50% transparency.
using the webkit extensions respectively for the above example :)
I hope this helps.
Facing issue while rendering RGBA color for border. RGBA color for border radius working fine but not border color and it is not showing any border color.
Is there any separate "-pie-" tag in CSSPie for use of RGBA in borders?
My Code:
.border{
position:absolute;
right: 250px;
top: 250px;
width: 400px; height:100px;
z-index: 9999;
border: 3px solid rgba(52, 52, 52, 0.3);
border-radius: 10px; -moz-border-radius: 10px;
behavior: url(PIE.htc);
}
Not able to see the border in IE 7 & 8... Can you help?
Thanks in advance!
For Border-radius issue you have to apply the styles position:relative; and z-index:0; for that element. Hope this will work.
Unfortunately this is not (yet) supported in PIE. If/when it does get implemented, it will undoubtedly require a separate -pie-border or -pie-border-color property, because IE's parser will throw away the entire border value if it contains the unrecognized rgba string.
Here is the ticket tracking this feature: https://github.com/lojjic/PIE/issues/55
My educated guess is that IE7 and IE8 only support rgb() and not rgba(), and that would be why the border was not showing.
<style>
* {
background: red;
}
.blackbalk{
background:black;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter:alpha(opacity=85);
-khtml-opacity:.85;
-moz-opacity:.85;
opacity:.85;
width: 985px;
margin: 0 auto;
height:255px;
color: white;
}
</style>
<div class="blackbalk">Text </div>
Now my text gets pink, why?
How can i get it white again?
Greetings
Edit: JS Fiddle to make it clear: http://jsfiddle.net/WFxbH/
You can do it by instead using an rgba background on your element:
Live Demo - this will work "in every browser you care about", and my jsFiddle includes the recommended IE conditional comment to make it also work in that browser.
.blackbalk {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.85);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)";
}
Thew, opacity affects the entire element and its contents, not just the background color. If you just want the background color to be 85% black, you should specifiy it with an RGBA color, like so:
.blackbalk {
background: rgba(0, 0, 0, 0.85);
width: 985px;
margin: 0 auto;
height: 255px;
color: white;
}
EDIT: cant over ride the cascading of opacity. Best alternative in my pinion is to use a single pixel 85% opacity black png as the background image. option 2 would be to make the inner content actually outside of the div then position it over but that's a lot finickier. You can even get the transparent png to work in IE without much trouble.
IGNORE:Not positive, as I can't test it right now but I assume the text is becoming translucent with the opacity change. Perhaps if you put your text inside a span with background-color:none and color:white; it might work it out. May have to set the spans opacity to 100% to override.
I got from web designer layout, which contains (probe):
<div id="subMenuRow">
<div id="subMenuRowHTML">
Link
</div>
</div>
and respectively css for it:
#subMenuRow{
width: 900px;
height: 40px;
background: #000000;
float: left;
clear: both;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Opacity is used to make transparent bar for html menu. The problem is, that every text including links contains transparency as well, which is very unnecessary. How to avoid opacity for subMenuRowHTML?
First you don't need to use -moz-opacity and -khtml-opacity anymore. They are very very old.
There is no solution fully supported today. CSS3 RGBA solves this in modern browsers but if you need to support old browsers you will need to use semi transparent png:
#subMenuRow { background: url(semi-trans.png); }
IE6 will degrade gracefully with this:
* html #subMenuRow { background: url(full-opacity.gif); }
There are also easy options for png transparency on IE6. It's up to you.
If you have many instances of opacity on your code and don't want to mess up your code with * html everywhere you can use conditional comments.
use a semi transparent .png as a background image:
css:
background: transparent url(/url/image.png) top left repeat;
Add:
#subMenuRowHTML {
filter:none;
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}