I have this div in styled components
const StyledDots = styled.div`
width: 16px;
height: 16px;
border: solid 1px #d2d2d2;
border-radius: 20px;
background-color: #ffffff;
position: relative;
top: 50px;
right: 15px;
::focus {
background: black;
} `
I tried to change background color to gray with focus but as you see I'm doing something wrong and i Dont know what,Any suggestions please?
(Would be better if only 50% of the div will change the color)
to change style onHover, onFocus, ...etc with styled components you need to use this syntax:
&:focus {
background: black;
}
for background to be 50% of the height you can use linear-gradient to set the background color:
&:focus {
background: linear-gradient(180deg, black 50%, white 50%);
}
Related
I want to change the scrollbar width wider, so it looks clear when user hover on it.
So I wrote:
::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #ddd;
}
::-webkit-scrollbar:hover {
width: 10px;
height: 10px;
background-color: red;
}
The background color changed to red, but not the width, Is there anyway to solve this?
Here is plnkr
*:hover::-webkit-scrollbar {
width: 10px;
height: 10px;
}
This will change the width and height of any element's scrollbar. If you want to be more specific, just exchange the '*' to a selector of your choice. For instance, to apply it to scrollbars of elements with the class of 'my-custom-scrollbar':
.my-custom-scrollbar:hover::-webkit-scrollbar {
width: 10px;
height: 10px;
}
You can achieve that by using border instead of width:
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background: #ababab;
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box; // <== make the border work
}
::-webkit-scrollbar-thumb:hover{
border: 0;
}
::-webkit-scrollbar-track {
background: transparent;
}
this is a workaround I used using mousemove event:
document.addEventListener("mousemove", function(e){
let ele = document.getElementById('element');
let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
});
and styling would be
#element::-webkit-scrollbar-thumb {
background: #888;
}
#element::-webkit-scrollbar {
width: 5px;
}
#element.more-width::-webkit-scrollbar {
width: 10px;
}
codepen sample: https://codepen.io/KhaleD_D/pen/OJpgJKM
This solution uses scrollbar which is natively 16px large, but we show only 6px to make it thinner (and leave more space for content). But the trick is overflow: overlay which allows content to be displayed even over scrollbar area.
Using this approach you have thin scrollbar which enlarges on hover (and the hover are is a bit wider).
I got inspired by Khaled's solution, but I used CSS only approach:
.custom-scrollbar {
scrollbar-color: var(--gray) var(--secondary);
scrollbar-width: thin;
overflow: overlay !important;
}
.custom-scrollbar::-webkit-scrollbar {
width: 16px;
height: 16px;
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-track-piece {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(to left, var(--gray) 6px, transparent 0%);
}
.custom-scrollbar::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(to bottom, var(--gray) 6px, transparent 0%);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--gray);
}
I use following code to achieve increase width on hover effect.
Sadly, its working on Chrome and Edge only. My apologies for incorrect formatting.
* {
&::-webkit-scrollbar-thumb {
border: 5px solid transparent;
border-radius: 10px;
background-color: grey;
background-clip: content-box;
-webkit-background-clip: content-box;
}
&::-webkit-scrollbar-thumb:hover {
background-color: black;
background-clip: border-box;
-webkit-background-clip: border-box;
}
&::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: transparent;
}
}
Open Layers map overlay popup does not take background color value.
Only one line of text is white.
The rest (2-4 lines) is transparent.
div.ol-popup {
display: -moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
background: white !important;
background-color: white !important;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
//https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents
}
//on Click
var element = popup.getElement();
$(element).html(istr); // $(element).text(istr); //
$(element).addClass('ol-popup');
$(element).css('.ol-popup', 'background-color: white !important;');
popup.setPosition(coo);
putting your code up on Codepen and then sharing might help to better understand what the problem is, however from my understanding of your post, I think you want the text to be a certain color and it's not complying.
If that is the case,
add color: white; to you code, and then you might want to set the background color to something else, say background-color: red;
I'm looking for an easy way with a single tag (just <a>)to create a skew effect on the borders, but keep the text the way it is.
I would know how do with a span in- or outside, but I don't want to have additional, pretty much zero meaning HTML on the page.
Example below.
You can unskew the child element i.e. provide the opposite skew co-ordinates as you specified for the parent.
Here is a working example
Suppose you have below as you html,
<div class="btn">
<button><div class="btn-text">Click</div></button>
</div>
If we skew the parent element by 20deg then we should skew the child element by -20deg as,
.btn {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
.btn-text {
-ms-transform: skewX(-20deg); /* IE 9 */
-webkit-transform: skewX(-20deg); /* Safari */
transform: skewX(-20deg);
padding: 20px;
}
You can simply accompish desired effect using CSS triangle tricks.
Just add some styles for the ::before and :: after pseudo-classes.
.skewed_button {
background: #32CD32;
color: #000;
text-decoration: none;
font-size: 20px;
display: inline-block;
height: 30px;
margin-left: 15px;
padding: 6px 10px 0;
}
.skewed_button::before {
content: "";
float: left;
margin: -6px 0 0 -25px;
border-left: 15px solid transparent;
border-bottom: 36px solid #32CD32;
height: 0px;
}
.skewed_button::after {
content: "";
float: right;
margin: -6px -25px 0 0 ;
border-left: 15px solid #32CD32;
border-bottom: 36px solid transparent;
height: 0px;
}
Some Text
You can also use clip-path for this, eg:
clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
.skewed_button {
background: yellow;
text-decoration: none;
display: inline-block;
padding: 10px 20px;
clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
}
Some Text
One solution is to use css triangles on :before and :after. This solution leaves the cleanest HTML.
This jsfiddle demonstrates
.is-skewed {
width: 80px;
height: 40px;
background-color: #f07;
display: block;
color: #fff;
margin-left: 40px;
}
.is-skewed:before,
.is-skewed:after {
content: '';
width: 0;
height: 0;
}
.is-skewed:before {
border-bottom: 40px solid #f07;
border-left: 20px solid transparent;
float:left;
margin-left: -20px;
}
.is-skewed:after {
border-top: 40px solid #f07;
border-right: 20px solid transparent;
float:right;
margin-right: -20px;
}
CSS triangles use thick borders on elements with 0 dimensions with the points at which the borders meet providing the diagonal line required for a triangle (a good visualisation is to look at the corner of a picture frame, where the two borders meet and create triangles). It's important that one border is transparent and one coloured and that they are adjacent (i.e. left and top, not left and right). You can adjust the size, orientation and the lengths of the sides by playing with the border sizes.
For your button, we also use floats and negative margins to pull them outside of the element and line them up right. Position absolute and negative left and right values would also be a good solution to positioning
You can also do :hover states
.is-skewed:hover {
background-color: #40f;
}
.is-skewed:hover:after {
border-top-color: #40f;
}
.is-skewed:hover:before {
border-bottom-color: #40f;
}
It's important to note the use of background-color and border-color and also that the :hover comes first in all the relevant selectors. If the hover came second this would happen
I want to create a gradient arrow shape button with gradient border and 1px inner shadow from CSS.
I've created an image to show the button and the style rules:
This is what I have so far:
.button {
color: #FFF;
background-color: #D02180 !important;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f84aa4), to(#d02181));
background: -webkit-linear-gradient(#f84aa4, #d02181);
background: -moz-linear-gradient(#f84aa4, #d02181);
background: -o-linear-gradient(#f84aa4, #d02181);
background: linear-gradient(#f84aa4, #d02181);
padding: 5px 10px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #ab1465;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
<a class="button">Next</a>
Cross-browser support is a main thing so it's also ok if everything can be done from CSS expect the gradient border. In this case the border will have one simple color — #ab1465.
The main problem starts with the gradient. I can make an arrow shape with the help of css pseudo elements, but I need a cross browser solution to have one continuous gradient for the whole arrow shape.
Gradient Arrow Button
Let's get creative!
This button has been created entirely with CSS — skew, border and gradient with pseudo elements. It looks like this:
It looks nice zoomed in and doesn't break:
This is the shape that creates it:
The shape is cut off with overflow: hidden on the parent.
The CSS
Create the angled shape and gradient with the :before.
The inner shadow is created with the :after using a simple border
The gradient is given an angle to match the direction of the pseudo elements rotation
Note the use of transform: translateZ(0). This prevents a jagged appearance of the rotated pseudo element. Currently the pseudo element is placed underneath the text with z-index: -1.
Complete Example
You will need to tinker with the fine details, but it should speak for itself. In order to take more text, the pseudo element with the gradient would need to be larger.
#import url(http://fonts.googleapis.com/css?family=Exo+2:300);
a {
color: #000;
text-decoration: none;
position: relative;
color: #FFF;
display: inline-block;
padding: 10px 40px 10px 10px;
border-radius: 5px;
overflow: hidden;
transform: translateZ(0);
font-family: 'Exo 2', sans-serif;
}
img {
position: relative;
z-index: -1;
}
a:before {
content: '';
display: block;
position: absolute;
top: 50%;
margin-top: -2.4em;
left: -20%;
width: 100%;
height: 200%;
background: #D02180 linear-gradient(130deg, rgba(248, 74, 165, 1) 30%, rgba(248, 74, 165, 1) 80%);
transform: rotate(55deg) skewX(20deg) translateZ(0);
z-index: -1;
}
a:after {
content: '';
display: block;
position: absolute;
top: 1px;
left: 1px;
width: 70%;
height: 100%;
transform: translateZ(0);
z-index: -1;
border-top: solid 1px #FFF;
border-radius: 5px 0;
opacity: 0.4;
}
Next
I have the following div stricture.
<div class="profile_outer>
<div class="profile"></div>
</div>
And the following CSS
.profile_outer {
border: 2px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 100;
}
.profile_outer:hover {
background-color: blue;
}
you can find the fiddle here
Both divs do not have a background, the background is determined by an image on some parent div. So they are transparent.
So, on a hover I just want to change the background of the outer profile. It only works if I also change the background color of the inner div using
.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}
I tried the following combinations of these:
.profile_outer:hover .profile {
display: block;
background : none !important;
background-color:transparent;
}
Thanks for your help.
Well, I guess that the effect that you want is this
.profile_outer {
border: 2px solid #660000;
border-radius: 5px;
overflow: hidden;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
border-radius: 5px;
z-index: 100;
}
.profile:hover {
box-shadow: 0px 0px 0px 1000px blue;
}
fiddle
... but you should review your ideas about transparency ...
After re-reading the question, I think that Moob's sugestion is right, the answer to the question is
.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
Set the child's background to #fff and it'll work.
Your problem happens because the default background color for all elements is transparent
There is one other way to get this effect but it could be really annoying to implement. I'm only offering it up as a solution for completeness. Effectively you have the SAME background image on the bit that is supposed to appear masked:
body {
margin:0px;
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}
http://jsfiddle.net/PdQFJ/1/