This question already has an answer here:
How to cut a circular part from an image?
(1 answer)
Closed 1 year ago.
I am trying to create image icons that have a status dot which emulates Slack member-icons (left).
How can I use CSS to add a transparent ring around the dot?
.memberIconRow {
display: flex;
.memberIconArea {
position: relative;
img {
width: 30px;
margin: 0 6px 0 0;
border-radius: 5px;
}
.statusDot {
background: #f00;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
z-index: 2;
top: 21px;
left: 23px;
}
}
}
Some dirty trick what I think of is add border to your dot with the same background as your photo, in this case - a light yellow.
Like this -
.statusDot {
...
border:4px solid yellow; /* same color as you profile photo background */
}
In multiple background colours case, use css var() like;
:root {
--blue: #1e90ff;
}
.member-bg {
background-color: var(--blue);
}
. statusDot {
border: 4px solid var(--blue);
}
Related
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 1 year ago.
Trying to replicate this design using css. The quotes are pngs. But can only find help for solid rectangles and more of a page corner folded to save a spot.Design I'm trying to replicate with Css
I gave them different colors so you could visualize what's happening easily.
.myDiv {
margin-top: 30px;
position: relative;
width: 50px;
height: 50px;
background-color: transparent;
border: 10px solid red;
border-radius: 0 0 15px 15px;
border-top: none;
}
.myDiv::before {
content: '';
position: absolute;
height: 20px;
width: 40px;
background-color: orange;
top:-10px;
left:20px;
border-radius: 0 10px 0 0;
}
I want to style QScrollBar to look like this without the indicators in the end
I tried with the stylesheets:
QScrollBar::up-arrow:vertical, QScrollBar::down-vertical
{
border: none;
background: none;
color: none;
}
But this hides the indicator arrow not the 2 buttons at the end
You can use something like this:
QScrollBar:vertical {
background: #2f2f2f;
width: 15px;
margin: 0;
}
QScrollBar::handle:vertical {
background: #5b5b5b;
}
QScrollBar::add-line:vertical {
height: 0px;
}
QScrollBar::sub-line:vertical {
height: 0px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
height: 0px;
}
The classes you were looking for are add-line, sub-line, add-page and sub-page. Since they support the box-model, you can just set their height to 0 to make them disappear.
The code above was tested with Qt 5.9.
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;
}
}
I have done a calendar with plugin full-calendar. I want to change the style of today date.
.fc-unthemed .fc-today {
color: #fff !important;
background-color: red;
}
But the background color of the cell, have to be like the next image.
How could do it? Thanks
You can apply CSS to create border like a triangle and show it at the top-right corner.
.fc-day.fc-today {
position: relative;
}
.fc-day.fc-today::before,
.fc-day.fc-today::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.fc-day.fc-today::before {
border-width: 1.5em;
}
.fc-day.fc-today::after {
border-radius: 0;
border-width: 1.5em;
border-right-color: red;
border-top-color: red;
}
The output will be shown like below.
Is it possible to somehow create the following in CSS? (See attached image)
What i want to achieve is to be able to change the background-color of the bubble with CSS.
One solution would be to save the background bubble in a bunch of different colors and depending on the color chosen display the correct background image. However this would not be as dynamic as i wish.
Any ideas here?
Something like this was done over at CSS Tricks using pseudo-elements. The only limitation I can think of or foresee is the border that goes around the object... CSS Round-out borders
Using the :after and :before pseudo elements I was able to take the same concept and apply it to create your shape. Again... The only catch is the border. Also... it requires the background behind it to be solid, so that you can mimic the background color... No patterns or transparency here. Try changing the colors of the :after and :before elements and you'll see how its done.
JSFiddle Example
<div class="bubble">
<span>Some Text</span>
</div>
body { background: #999;}
.bubble {
position: relative;
width: 150px;
height: 60px;
border-radius: 10px 10px 0 10px;
border: 1px solid #fff;
background: #444;
}
.bubble:before {
content: " ";
position: absolute;
width: 30px;
height: 30px;
bottom: 0;
right: -30px;
background: #444;
}
.bubble:after {
content: " ";
position: absolute;
width: 60px;
height: 60px;
bottom: 0;
right: -60px;
background: #999;
border-radius: 100%;
}
The other options are nice css approaches but with the border on a shape like that will not be possible with just css.
In my approach I am going to use an svg image.
This is a path in the image and as you can see classes and ids are possible to use on an svg image.
<path class="bubBg" fill="#7C7C7C"
Here is a JSFIDDLE you can play around with.
(currently I believe this is the best option to have that exact design but Michael's answer is pretty good)
Here's what I did: Not exactly the same bubble but similiar, Check it out
Fiddle: http://jsfiddle.net/zD3bV/1/
CSS
#speech-bubble {
width: 120px;
height: 80px;
background: purple;
top: 2px;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid purple;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
#talk-bubble {
width:120px;
height:80px;
background:blue;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#talk-bubble:before {
content:"";
position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid transparent;
border-right:26px solid blue;
border-bottom:13px solid transparent;
}
Also, search for css shapes you'll more likely to get the best results and then you can modify them according to your needs