What's the general idea/technique behind doing something like this in CSS3? Would it be possible?
(I'm talking about the line, not the label, which I know how to do)
I found it here
I believe this can be done using SVG animations.
You can use a library called SnapSVG.
Take a look at some of these amazing fluid SVG animations Elastic SVG Elements created by Mary Lou.
This Is Not Exactly What You Want. But Take A Look:
body,
html {
background: #111;
}
#ib {
width: 300px;
height: 50px;
font-size: 40px;
background: transparent;
color: white;
border: none;
border-bottom: 2px solid #09f;
outline: none;
}
#ib:focus {
-webkit-animation: anim 0.3s cubic-bezier(0.080, 0.805, 0.930, 0.220);
}
#-webkit-keyframes anim {
0% {
border-radius: 0px;
}
50% {
border-radius: 150px/10px;
}
100% {
border-radius: 0px;
}
}
<input type="text" id="ib" placeholder="Type Something">
Related
I've tried everything, searched the whole stack overflow and google.
Can someone help me to make this particular type of scrollbar?
When I use the border-right/top/bottom to make the spaces around it, it breaks the border-radius and gets ugly. As a reference, it's the same scrollbar used in Googledocs, a slim, rounded and doesn't touch the margins of the page: https://docs.new/
Here's the image: rounded, slim and not touching
So far I got:
::-webkit-scrollbar {
background: #262338;
width: 6px;
}
::-webkit-scrollbar-thumb {
padding: 0 4px;
background: #6E7191;
border-radius: 6px;
height: 48px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
border-radius: 34px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 8px;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 16px;
}
This would get you the main design of the scrollbar you are looking. This is what I used on my website. Hope this is the design you want!
Scrollbar Padding
I think you'll have to use a container to accomplish the not touching part of your requirements.
Chrome vs Firefox
Be aware that the support to adjust the scrollbar is very limited in firefox compared to chrome browsers. The result of it will not show up in this snippet, nor on websites like jsfiddle. Rounded corners are impossible to achieve in firefox without using your own implementation or a third party library like thisone for example.
Example
body {
background-color: #14142B;
}
/* FIREFOX */
html {
scrollbar-width: thin;
scrollbar-color: #6E7191 #262338;
}
/* CHROME */
::-webkit-scrollbar {
width: 12px;
border-radius: 34px;
}
::-webkit-scrollbar-track {
background: #262338;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background: #6E7191;
border-radius: 8px;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
::-webkit-scrollbar-thumb:hover {
background: #7E81A1;
}
.container {
margin: 1.5rem .5rem;
overflow-y: scroll;
max-height: calc(100vh - 3rem);
}
.content {
height: 25rem;
}
hr {
border: 0;
border-top: 2px solid #201F36;
}
.filler {
height: 3rem;
}
<div class="container">
<div class="content">
<div class="filler"></div>
<hr>
<div class="filler"></div>
<hr>
<div class="filler"></div>
<hr>
<div class="filler"></div>
</div>
</div>
im trying to style an input type='range' i am able to style the runnable track but for some reason the thumb isnt getting styled fully
this is my code:
<input type="range" min="0" max="100 " value="50" id="slider" class="volume">
#slider {
width: 0;
opacity: 0;
transform: translateX(-50px);
position: absolute;
transition: 0.5s;
}
#slider::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 3px;
background-color: var(--white2);
}
#slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 7px;
width: 7px;
transform: translateY(-5px);
background-color: var(--white);
border: 1px solid;
}
somehow the transform: translateY(-5px); is getting applied but nothing else is.
Nevermind, it was an issue cause by an experimental chrome flag :/ sorry for wasting your time.
Kindly take a look at a GIF here that I've screen recorded on my device featuring an example of a button that turns green and then turns back to the original color, and then turns to green, all of this after one click only:
How can I achieve this? All I've got is this one. And then I don't know what to do next to achieve that kind of animation. Please help.
.query__choice {
height: 2rem;
margin: 0.3rem 0.75rem;
border-radius: 5px;
font-size: 1em;
border: 1px solid lightgrey;
color: black;
}
.query__choice:hover {
font-weight: bold;
border: 2px solid lightgrey;
color: black;
}
.query__choice:active {
text-decoration: none;
color: black;
border: 2px solid rgb(57, 235, 57);
background: green;
}
<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B"></p>
<p class="query__choice" id="choice-C"></p>
<p class="query__choice" id="choice-D"></p>
I created an example with javascript. I write an animation and repeated it 3 times.
document.querySelectorAll(".query__choice").forEach(p => {
p.addEventListener("click", () => {
p.classList.add("active");
setTimeout(() => {
p.classList.remove("active");
}, (500 * 3))
// 500 * 3 = animation-duration * animation-iteration-count
});
});
.query__choice {
height: 2rem;
margin: 0.3rem 0.75rem;
border-radius: 5px;
font-size: 1em;
border: 1px solid lightgrey;
color: black;
}
.query__choice.active {
animation-name: button;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: 3;
}
.query__choice:hover {
font-weight: bold;
border: 2px solid lightgrey;
color: black;
}
.query__choice:active {
text-decoration: none;
color: black;
border: 2px solid rgb(57, 235, 57);
}
#keyframes button {
50% {
background: green;
}
}
<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B"></p>
<p class="query__choice" id="choice-C"></p>
<p class="query__choice" id="choice-D"></p>
A CSS only solution.
.query__choice {
height: 2rem;
margin: 0.3rem 0.75rem;
border-radius: 5px;
border: 1px solid lightgrey;
}
.query__choice:hover {
border: 2px solid lightgrey;
}
.query__choice {
animation:
change 0.3s linear 6 alternate, /* run the animation 6 times with alternate so we get 3 go-back*/
h 2s ; /* this will block the above animation on page load (2s > 0.3s*6) */
}
.query__choice:active {
border: 2px solid rgb(57, 235, 57);
/* on active (click) we change one of the two animations so that it's changed back
on unclick and it will get triggered */
animation:
anything, /* a random name here */
h 2s; /* we keep the "blocking" animation so it won't get triggred and block again (yes it's crazy ...)*/
}
#keyframes change {
to {
background:green;
}
}
#keyframes h {
0%,100% {background:initial;}
}
<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B"></p>
<p class="query__choice" id="choice-C"></p>
<p class="query__choice" id="choice-D"></p>
You can even consider CSS variable to have a different color for each button
.query__choice {
height: 2rem;
margin: 0.3rem 0.75rem;
border-radius: 5px;
border: 1px solid lightgrey;
}
.query__choice:hover {
border: 2px solid lightgrey;
}
.query__choice {
animation:
change 0.3s linear 6 alternate, /* run the animation 6 times with alternate so we get 3 go-back*/
h 2s; /* this will block the above animation on page load */
}
.query__choice:active {
border: 2px solid rgb(57, 235, 57);
/* on active (click) we change one of the two animations so that it's changed back
on unclick and it will get triggered */
animation:
anything, /* a random name here */
h 2s; /* we keep the "blocking" animation so it won't get triggred and block again (yes it's crazy ...)*/
}
#keyframes change {
to {
background:var(--c,green);
}
}
#keyframes h {
0%,100% {background:initial;}
}
<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B" style="--c:red"></p>
<p class="query__choice" id="choice-C" style="--c:blue"></p>
<p class="query__choice" id="choice-D" style="--c:purple"></p>
I have a dropdown where the overflow text is gradient out. There's transition applied to the selection's wrapper but now it looks a bit odd when it's hovered out. How can I make it look better?
html snippet:
<div class="durationDropdown">
<select role="listbox" class="durationSelect">
<option value="0">Less than 1 month</option>
</select>
</div>
css snippet:
.container {
width: 150px;
}
.durationDropdown {
padding: 0px;
flex: 1;
text-align: left;
position: relative;
cursor: pointer;
height: 5.1875rem;
transition: 250ms;
border: 1px solid #eee;
}
.durationDropdown::after {
content: "";
display: block;
width: 40px;
top: 0%;
right: 0;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 63%);
pointer-events: none;
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
background: none;
}
.durationDropdown:hover {
background: black;
}
Here's my fiddle where you can see how it looks like and the rest of the css in the fiddle. Any help/suggestions would be great!
I am afraid you cannot add transition to the gradient, see details here Use CSS3 transitions with gradient backgrounds.
What you really see it's smooth changing of the 'color' property but not the gradient transition. If you want to hide a part of the sentence with a gradient and have a smooth transition on it, you could do like so:
Add transition to 'durationDropdown::after' element and replace 'background: none;' by 'opacity: 0;' like so:
.durationDropdown::after {
...
transition: 250ms opacity ease-in-out;
...
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
/* background: none; */
opacity: 0;
}
I have two boxes that when you hover over, the background opacity should change, but the foreground text opacity should not change. I know the solution to this is on hover, set the rgba to the background color and add the opacity. Example:
#join:hover {
rgba(0, 102, 255, .4)
}
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option. I'd like to use just opacity: .4 so that the opacity is the same regardless of the background color of each box.
When I use opacity on hover, the opacity of the text in each box changes as well. To get around this, I tried using z-index/position: relative and setting the text (#join-text, #learn-text) to a higher z-index and the background (#join, #learn) to a lesser z-index. This did not render the correct results.
I also tried using pseudo class ::before like #join:hover::before but that also did not render the correct results, the position:absolute changed the position of the buttons.
Is there any way to change the opacity on hover ONLY for the background, using the opacity: .4 property? Any input would be greatly appreciated.
Find code here: https://jsfiddle.net/Lsqjwu15/1/
You can use CSS3 :before selector
#join:before {
background: #0066ff;
}
#learn:before {
background: #ffb31a;
}
.rectangle:before {
content: "";
width: inherit;
height: inherit;
position: absolute;
}
.rectangle:hover:before {
opacity: .4;
}
JSFiddle
You could make a workaround with pseudo elements (changed the "join" box):
.rectangle {
position:relative;
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join:before {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: #0066ff;
}
#learn {
background: #ffb31a;
}
#join:hover:before,
#learn:hover {
opacity: .4;
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
Could you make the text "rgba(0,0,0,1) !important" to override the background opacity? would that still fade with the background?
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option.
You haven't specified HOW the background colors are changed or what they are initially but using RGBA Colors throughout seems simple enough. JQ is perfectly capable of handing RGBA.
.rectangle {
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join {
background: rgba(0, 102, 255, 1)
}
#learn {
background: rgba(255, 179, 26, 1)
}
#join:hover {
background: rgba(0, 102, 255, .4)
}
#learn:hover {
background: rgba(255, 179, 26, .4)
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
If there is something else you haven't told us then if you want a solution to your code, you're going to have to reproduce the exact issue including the JS/JQ