I'm trying to get a feature on my page similar to https://www.youtube.com/
Specifically, the tab on the left that includes your playlists, subscriptions, and more.
I'm trying to attempt that but without the collapse feature.
Can anyone help me out? Thanks
YouTube uses a webkit scrollbar for that section.
Here it is with the same color schemes. Do note that webkit properties are not globally supported.
.container {
max-height: 200px;
width: 50%;
overflow: auto;
}
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-track {
background: transparent;
}
.container::-webkit-scrollbar-thumb {
background: transparent;
}
.content {
height: 800px;
}
.container-dark {
background: #212121;
}
.container-dark:hover::-webkit-scrollbar-thumb {
background: #4A4A4A;
}
.container-light {
background: #fff;
}
.container-light:hover::-webkit-scrollbar-thumb {
background: #cfcfcf;
}
<div class="container container-dark">
<div class="content">some content in dark mode</div>
</div>
<div class="container container-light">
<div class="content">some content in light mode</div>
</div>
YouTube only shows the scrollbar thumb when the container is being hovered, when it isn't being hovered, the scrollbar is transparent.
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
height: 56px;
border-radius: 8px;
border: 4px solid transparent;
background-clip: content-box;
background-color: #888;
}
*::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
Related
I have a custom scrollbar style for Chrome on a div. When both scrollbars show, a white square appears on the right lower corner.
<div class="scrollbox" id='a'>
</div>
body {
background: black;
}
div {
height: 100px;
width: 200px;
margin: 0 auto;
overflow: auto;
background: black;
color: white;
}
.scrollbox:hover::-webkit-scrollbar-thumb:hover {
background-color: #888;
}
.scrollbox:hover::-webkit-scrollbar-thumb {
visibility : visible;
background-color: #666;
border-radius: 4px;
}
.scrollbox:hover::-webkit-scrollbar {
background-color: #222;
border-radius: 4px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
var a=document.getElementById('a');
for(var i=0; i<10; i++) {
a.innerHTML+='<br>'+i + ' aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
}
Here is the repro code:
https://codepen.io/nosachamos/pen/xxLOryr
Looks like this:
How can I make this black so that it won't appear?
Give this a try:
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
Anything with an alpha of 0 should be invisible, but you can set it to black or a different colour if you please. Tested on Chrome on your Codepen and is working great!
Here is the link to the website in question: http://shortpoet.github.io
It is being built for a class. I have tried asking the TAs and Professor for help and no one seems to be able to explain the unexpected behavior. I have searched for possible answers including:
setting min/max height for containing divs
using img-thumbnail class
changing the col size and grid structure
changing the border size (only eliminating the border works but that defeats
the purpose of the feature I am trying to build
changing the padding
maybe even other things I am not thinking of right now, I have tried everything I can think of and Google
I am trying to surround the active link/image of one out or four plots in a square grid with a border. I also have a border that surrounds the :hover element. There are five pages in which I use the cluster of images as links. The grid is broken in all except 'humidity' in slightly different ways. In all cases the fourth image 'wind speed' is shifted to another row. In all cases hovering over the 'humidity' image resets the grid to its proper place, or when there is a permanent border on that image because it is currently active.
I will include a small snippet of code for the specific area. As the link is included above, it should be feasible to test the behavior.
<div class="col-sm-12 col-md-4">
<div class="row">
<div class="col-sm-12">
<section id="visualizations">
<h3 class="text-center">Visualizations</h3>
<hr>
<div class="row">
<div class="col-xs-6">
<a class="active" href="temperature.html">
<img class="img-responsive active" src="assets/images/Fig1.png" alt="Scatter plot of City Latitude vs Temperature in degrees Fahrenheit">
<span class="sr-only">(current)</span>
</a>
</div>
<div class="col-xs-6">
<a href="humidity.html">
<img class="img-responsive" src="assets/images/Fig2.png" alt="Scatter plot of City Latitude vs Humidity">
</a>
</div>
<div class="col-xs-6">
<a href="cloudiness.html">
<img class="img-responsive" src="assets/images/Fig3.png" alt="Scatter plot of City Latitude vs Cloudiness">
</a>
</div>
<div class="col-xs-6">
<a href="windSpeed.html">
<img class="img-responsive" src="assets/images/Fig4.png" alt="Scatter plot of City Latitude vs Wind Speed">
</a>
</div>
</div>
</section>
</div>
</div>
</div>
I am including most of the CSS for good measure...
/* Large desktops and laptops */
#media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
#media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
#media (max-width: 767px) {
}
/* Portrait phones and smaller */
#media (max-width: 480px) {
/*body {
background-color: silver;
}*/
}
body {
background-color: silver;
padding: 1% 0% 13% 0%;
}
.navcolor {
background-color: #6EB25A;
color: #5A5AB2 !important;
}
.navborder {
border: #ffab80 1px solid;
}
.all {
color: #6EB25A;
background-color: #5A5AB2;
border: #ffab80 solid 1px;
padding: 3%;
}
#title {
position: relative;
right: 17%;
}
#comparison #title {
position: inherit;
}
#comparison, hr {
width: 100%;
}
h1 {
color: #6EB25A;
text-align: center;
width: auto;
vertical-align: middle;
}
hr {
border-color: #ffab80
}
hr.specialtest {
margin: 0 0px 0 37px;
width: 90%;
}
hr.special {
margin: 20px 0px 0px 37px;
width: 90%;
}
.box {
color: #6EB25A;
background-color: #5A5AB2;
/*border: 3px #FFAB80 solid;
border-radius: 35%;*/
vertical-align: middle;
/*width: 500px;*/
height: auto;
padding: 0% 0%;
}
#image, h4 {
background-color: white;
padding: 2% 0% 0% 0%;
}
#image {
border-top: #ffab80 solid 2px;
border-left: #ffab80 solid 2px;
border-right: #ffab80 solid 2px;
}
#index #image {
float: left;
height: 200px;
width: 300px;
border: 0;
padding: 30px 5px 5px 5px;
}
#index h4 {
text-align: right;
padding-right: 13.5%;
}
#index #analysis hr {
width: 300px;
}
#index #analysis {
padding: 2% 5%;
}
#index p {
padding: 0 !important;
line-height: 200%;
}
#mainbox {
padding: 1% 5%;
}
#visualizations img:hover {
border: #ffab80 2px solid;
}
nav a:hover {
border: #ffab80 2px solid;
}
#analysis {
background-color: white;
border-bottom: #ffab80 solid 2px;
border-left: #ffab80 solid 2px;
border-right: #ffab80 solid 2px;
}
#temperature #analysis {
background-color: white;
border-left: #ffab80 solid 2px;
border-right: #ffab80 solid 2px;
border-bottom: 0 !important;
}
#testrow {
max-height: 317px;
}
#analysis, h4 {
padding: .5% 0% 0% 0%;
}
#analysis p {
padding: 2% 13% 5% 13%;
}
#map {
background-color: white;
border-bottom: #ffab80 solid 2px;
border-left: #ffab80 solid 2px;
border-right: #ffab80 solid 2px;
}
#map, h4 {
padding: .5% 0% 0% 0%;
}
#map p {
padding: 2% 13% 5% 13%;
}
#map img {
padding: 2%;
}
#visualizations {
background-color: white;
padding: 2% 1% 5% 1%;
}
#visualizations hr {
width: 90%;
}
#image hr {
width: 90%;
}
img {
max-width: 90%;
max-height: 90% !important;
}
img.active {
border: #5A5AB2 2px solid;
}
.line {
display: inline-block;
}
.center {
align-content: center;
justify-content: center;
}
table, th, td {
border: 1px solid black;
border-spacing: 5px; /* why won't this apply ? */
}
tr:nth-child(even) {
background-color: #f2f2f2
}
.bulletproof {
list-style-type: none;
}
/*body {
background-color: silver;
}*/
/* Pagination links */
.pagination a {
color: #6EB25A;
float: left;
padding: 21px 211px;
text-decoration: none;
transition: background-color .3s;
border: #ffab80 1px solid;
}
/* Style the active/current link */
.pagination a.active {
background-color: dodgerblue;
color: white;
}
/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {background-color: #ddd;}
Please excuse any errors in this post and direct me to best practices as it is my first. I tried using the code button but not sure it is gonna work. Thanks in advance :)
Right, so you need to add a new row between your first two and last two col-xs-6. Your general structure should look like the following:
<section id="visualizations">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</section>
You may add a transparent border to inactive images, so that the size remains the same when the border is visible, a CSS only solution could be this:
#visualizations a img {
border: 2px solid transparent;
}
#visualizations a img.active {
border: 2px solid #5A5AB2;
}
#visualizations a img:hover {
border: 2px solid #FFAB80;
}
The problem is because the frame has a very tight width, and when you place the 2px border, there is no more element on the same line and gives this problem in some elements.
If you do not want to mess around much in the structure, you can edit this part of your CSS:
img.active {
border: #5A5AB2 2px solid;
width: calc(100% - 2px); /*add this line*/
}
That way it decreases 2px wide in this element when it is with that class. I used the CSS method of calc to set only 2px to less.
(I tested it directly on your site by the element inspector and it worked)
Hope this helps!
This practice also happened to me recently, but it is quite simple using CSS. You simply have to generate a transparent color border beforehand and so when you modify its color with :hover you simply have to change its color. I share the code to my method:
nav a {
border: transparent 2px solid;
}
nav a:hover {
border-color: #ffab80;
}
To solve, simply separate the pairs of images by rows to correctly separate the content and do not misfit. I enclose
<section id="visualizations">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</section>
I'm working with bootstrap panel. PSD suggest that when I hover over a panel background color and content color will change. that's fine I can do that.
but how to extend hover-color in top and bottom? and content position should stay there!
<div class="row">
<div class="col-md-4">
<div class="panel">
</div>
</div>
</div>
.panel:hover{
background-color: #13BDFF;
}
Update
Just use outline CSS property which has excellent browser support (IE8+). Demo:
.panel:hover {
background-color: #13BDFF;
outline: 5px solid #13BDFF;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
Original answer (not recommended way)
You can use transparent borders (also padding can help you with this) and negative margin for this:
.panel:hover {
background-color: #13BDFF;
border: 5px solid transparent;
margin-left: -5px;
margin-top: -5px;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
https://jsfiddle.net/xkqvv92p/
Here's a version using padding on hover.
.rowArea {
height: 400px;
background-color: red;
display: flex;
align-items: center;
}
#container {
margin: auto;
width: 200px;
height: 300px;
background-color: white;
border-radius: 5px;
padding: 5px;
}
#container:hover {
padding: 30px 5px;
background-color: #13C3FF;
}
<div class="rowArea">
<div id="container">hi</div>
<div id="container">hi2</div>
</div>
Changing the border color and size might solve the issue.
please refer the sample fiddle :
.panel:hover{
background-color: #13BDFF;
border-color : #13BDFF;
border:10px solid #13BDFF;
}
https://jsfiddle.net/3wkjuzbk/1/
So I have a tab menu written in CSS. It works fine, but there's one problem - all tabs are not active until I click on one of them. And I'd like, for example, first tab to be active just when I load the homepage, so I can read a content that's in the tab, not needing to click on it to read it.
HTML:
<div class="tabmenu">
<div id="polski-tab" class="current">
Polski
<div>Put content here</div>
</div>
<div id="deutsch-tab">
Deutsch
<div>Put a different content here</div>
</div>
<div id="russian-tab">
Russian
<div>And thank God if it works</div>
</div>
<div id="french-tab">
French
<div>It works! :D hahaha</div>
</div>
<div id="greek-tab">
Greek
<div>Fabuloso :D</div>
</div>
</div>
CSS:
.tabmenu {
min-height: 178px;
position: relative;
width: 100%;
}
.tabmenu>div {
display: inline;
}
.tabmenu>div>a {
margin-left: -1px;
position: relative;
left: 1px;
text-decoration: none;
color: black;
background: white;
display: block;
float: left;
padding: 5px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid white;
}
.tabmenu>div:not(:target)>a {
border-bottom: 0;
background: linear-gradient(to bottom, white 0%, #eee 100%);
}
.tabmenu>div:target>a {
background: white;
}
.tabmenu>div>div {
background: white;
z-index: -2;
left: 0;
top: 30px;
bottom: 0;
right: 0;
padding: 20px;
border: 1px solid #ccc;
}
.tabmenu>div:not(:target)>div {
position: absolute;
}
.tabmenu>div:target>div {
position: absolute;
z-index: 1;
}
Modify your code like this:
.tabmenu>div:target>a, .tabmenu>div.current>a {
background: white;
}
.tabmenu>div:target>div, .tabmenu>div.current>div {
position: absolute;
z-index: 1;
}
To use javascript the fastest way is use jQuery library, by adding:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
before the closing </body> tag and then use following piece of code:
<script>
jQuery(function($){
$(".tabmenu").children("div").click(function(){
$(".current").removeClass("current");
});
});
</script>
jsFiddle - updated.
Let we have the following html markup:
<div id="parent" class="parent">
<div id="child" class="child">
</div>
</div>
and corresponding css styles:
.parent{
border-style: solid;
border-color: green;
border-bottom: solid 10px;
background:grey;
width: 300px;
height: 300px;
padding: 10px;
}
.child{
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
.parent {
border-style: solid;
border-color: green;
border-bottom: solid 10px;
background: grey;
width: 300px;
height: 300px;
padding: 10px;
}
.child {
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
<div id="parent" class="parent">
<div id="child" class="child">
</div>
</div>
We can see that child's border color is black, but i dont define this color explicitly.
How I can change this default color to green?
You can't change the default. The default is whatever the browser defines it as.
If you want to inherit the value from the parent (as your mentioning the parent in the question implies), then you must explicitly inherit it.
.child {
border-color: inherit;
}
You must also not use the shorthand border property with the color value omited, since that will reset the property to the default.
.child {
border-color: inherit;
border-width: 20px;
border-style: solid;
}
You can also simply be explicit:
.child {
border-color: green;
border-width: 20px;
border-style: solid;
}
Most of the currently accepted answer is inaccurate:
You can change the default border color: not by CSS, but in the user's graphic environment (system settings, usually available as desktop settings in OS).
You can omit the color value in border shorthand property. In CSS3 the border-color is then set to currentColor, which can also be specified explicitly.
border: 1px solid currentColor; /* CSS3 */
The currentColor is usually black by default system settings. In CSS2, you can also use other system values, see in the link above. These are deprecated, but still working in my Opera.
border: 1px solid ThreeDDarkShadow; /* CSS2 deprecated */
Now the color is gray in my environment. The CSS2 values are (quoting the link above):
ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace,
ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText,
Highlight, HighlightText, InactiveBorder, InactiveCaption,
InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText,
Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight,
ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText.
Note: currentColor is different from inherit (which will solve your problem as Quentin suggests) and there is no value keyword like default, auto or initial in border-color property. One might think that if you specify invalid or browser-unsupported color, the browser has to pick some color and if there is no way to infer that color, it logically picks the system color anyway since browsers don't stop output on syntax error. However, some browsers implement a mystical numerologic algorithm to infer colors from unknown strings. It doesn't apply in my Opera.
Check your system colors in the snippet
div { float: left; margin: 5px; width: 125px; padding: 20px; border: 1px solid black; color: #800; text-shadow: 0 1px black;}
.ActiveBorder { background-color: ActiveBorder; }
.ActiveCaption { background-color: ActiveCaption; }
.AppWorkspace { background-color: AppWorkspace; }
.Background { background-color: Background; }
.ButtonFace { background-color: ButtonFace; }
.ButtonHighlight { background-color: ButtonHighlight; }
.ButtonShadow { background-color: ButtonShadow; }
.ButtonText { background-color: ButtonText; }
.CaptionText { background-color: CaptionText; }
.GrayText { background-color: GrayText; }
.Highlight { background-color: Highlight; }
.HighlightText { background-color: HighlightText; }
.InactiveBorder { background-color: InactiveBorder; }
.InactiveCaption { background-color: InactiveCaption; }
.InactiveCaptionText { background-color: InactiveCaptionText; }
.InfoBackground { background-color: InfoBackground; }
.InfoText { background-color: InfoText; }
.Menu { background-color: Menu; }
.MenuText { background-color: MenuText; }
.Scrollbar { background-color: Scrollbar; }
.ThreeDDarkShadow { background-color: ThreeDDarkShadow; }
.ThreeDFace { background-color: ThreeDFace; }
.ThreeDHighlight { background-color: ThreeDHighlight; }
.ThreeDLightShadow { background-color: ThreeDLightShadow; }
.ThreeDShadow { background-color: ThreeDShadow; }
.Window { background-color: Window; }
.WindowFrame { background-color: WindowFrame; }
.WindowText { background-color: WindowText; }
<div class="ActiveBorder">ActiveBorder</div>
<div class="ActiveCaption">ActiveCaption</div>
<div class="AppWorkspace">AppWorkspace</div>
<div class="Background">Background</div>
<div class="ButtonFace">ButtonFace</div>
<div class="ButtonHighlight">ButtonHighlight</div>
<div class="ButtonShadow">ButtonShadow</div>
<div class="ButtonText">ButtonText</div>
<div class="CaptionText">CaptionText</div>
<div class="GrayText">GrayText</div>
<div class="Highlight">Highlight</div>
<div class="HighlightText">HighlightText</div>
<div class="InactiveBorder">InactiveBorder</div>
<div class="InactiveCaption">InactiveCaption</div>
<div class="InactiveCaptionText">InactiveCaptionText</div>
<div class="InfoBackground">InfoBackground</div>
<div class="InfoText">InfoText</div>
<div class="Menu">Menu</div>
<div class="MenuText">MenuText</div>
<div class="Scrollbar">Scrollbar</div>
<div class="ThreeDDarkShadow">ThreeDDarkShadow</div>
<div class="ThreeDFace">ThreeDFace</div>
<div class="ThreeDHighlight">ThreeDHighlight</div>
<div class="ThreeDLightShadow">ThreeDLightShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="Window">Window</div>
<div class="WindowFrame">WindowFrame</div>
<div class="WindowText">WindowText</div>
* { border-color: green; }
keep in mind using wildcard selectors is not encouraged from a performance perspective
Add border-color: green; in the .child class. See updated fiddle
You change change as below to make the border color green
.child {
border : 20px solid green;
}
If it's only divs with the child class, you can use this in your stylesheet.
.child { border-color:#00ff00!important; }
That is browser behavior, you cannot change that behavior until there is any theme you apply, what you can do is to override color by using:
border-color: green;
Here is fiddle
Use color:green. When border-color is not specified, browser uses text color of an element as its border-color