I am playing with CSS pseudo elements. As soon as the menu button gets hovered it receives a small orange underline. This element should stay as soon as the dropdown-container is visible. Is there a light weight solution to achieve such behaviors?
In case pseudo elements aren´t the best solution for my need, I am open minded for different solutions.
https://jsfiddle.net/j3g49fwd/
$(".dropdown-btn").click(function() {
this.classList.toggle("increase")
$(".dropdown-container").toggle()
})
.wrapper {
position: relative;
top: 5vh;
margin: 40px 30px 30px 30px;
height: fit-content;
background: white;
border-radius: 10px;
box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
15px 15px 15px rgba(70, 70, 70, 0.12);
padding: 1vw;
}
.dropdown-btn {
display: flex;
justify-content: center;
padding: 10px 0px 10px 20px;
text-decoration: none;
display: block;
border: 1px solid transparent;
background: none;
height: fit-content;
min-height: 5vh;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
transition: all 0.3s ease-in-out;
}
.dropdown-btn:after {
content: "";
display: block;
margin: 3px 0 0 0;
width: 0;
height: 1px;
background: rgb(242, 123, 57);
transition: all 0.4s;
}
.dropdown-btn:hover::after {
width: 100%;
}
.dropdown-container {
display: none;
padding: 10px 20px 10px 20px;
margin: 0 0 2vh 0;
}
.increase {
font-size: 20px !important;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<button class="dropdown-btn">I am a menu button
<label class="menu-title" id="flow-menu-title"></label>
<i class="fa-solid fa-gear col-1 dropdown-icon"></i>
</button>
<div class="dropdown-container">
Hello Stackoverflow
</div>
</div>
</body>
</html>
if I understand you correctly, you should be able to edit the CSS just like this:
.dropdown-btn.increase::after,.dropdown-btn:hover::after {
width: 100%;
}
https://jsfiddle.net/bkefg9dt/
Related
I am trying to make the image take up the whole page for my component but cannot figure out what I am doing wrong?
this is how it currently looks and I cannot figure out how to ensure it takes up the extra whitespace marked in red too.
I tried setting the min width and height of the div it is contained in. Is it maybe I need to set the image up in the body but I was confused how to do that in react.
current page:
css:
.container {
background-image: url("../images/img.jpg");
background-repeat: no-repeat;
background-size: contain;
min-height: 100%;
min-width: 100%;
}
.default-button {
align-items: center;
background-clip: padding-box;
background-color: #fa6400;
border: 1px solid transparent;
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "Rams Black";
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
}
.default-button:hover,
.default-button:focus {
background-color: #fb8332;
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
.default-button:hover {
transform: translateY(-1px);
}
.default-button:active {
background-color: #c85000;
box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
transform: translateY(0);
}
.powered-by-strava {
display: flex;
align-items: center;
justify-content: center;
}
.connect-btn {
background-color: transparent;
padding: 0;
border: none;
background: none;
}
component where image is rendered:
return (
<div className="container">
<button className="connect-btn" onClick={stravaAuth}><img src={connectSVG}
alt="Connect to Strava"/></button>
<button onClick={changeTheme}>Change mode</button>
<div className="powered-by-strava">
<img className="strava-img" src={poweredSVG}/>
</div>
</div>
);
.color-palette {
border-top: 2px solid lightgrey;
max-height: 32vh;
z-index: 1;
background: rgba(0, 0, 0, 0.75);
width: 90vw;
bottom: 2.75rem;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
padding: 0.75rem 0.5rem;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0px 5px 10px black;
animation-name: zoomIn;
animation-duration: 0.5s;
}
button {
font-family: inherit;
font-size: 0.8rem;
line-height: 0.9;
width: 3.75rem;
height: 3.75rem;
margin: 0.45rem 0.3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.5s;
border: none;
outline: none;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 0px grey, 0px 3px 0px 0px lightgrey,
0px 8px 5px #999;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
font-family: "Comic Neue", cursive;
width: 8.5rem;
font-size: 1rem;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 500;
bottom: 110%;
left: 35%;
margin-left: -60px;
}
span {
display: none;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
display: block;
}
<div class="color-palette">
<button class="tooltip">
<span class="tooltiptext">Cannot duplicate</span>
</button>
</div>
I got the tooltip code from https://www.w3schools.com/css/css_tooltip.asp.
I tried the answer here: CSS tooltip getting cut off
And have applied overflow: visible on my color-palette instead of overflow-y: auto; overflow-x: hidden; but this happened:
Yes, the tooltip worked, but my buttons were already outside the div (.color-palette).
I want this to work without removing the bottom arrow of the tooltip, without moving the tooltip downwards, without increasing the div to make the tooltip fit inside. All I want is to make the tooltip overlap. What to do?
Try changing value from 110 to 95 in the class:
.tooltip .tooltiptext {
bottom: 95%;
}
Update:
change top value in class
.tooltip .tooltiptext::after {
top: 100%;
}
Try this fiddle: https://jsfiddle.net/ecxobpg3/38/
I have been working on a project and I was able to create a double border css with box shadow... but the problem is I need a transparency on the first box..
I tried something:
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.box {
width: 5rem;
height: 3rem;
background-color: #789;
border: 3px solid black;
box-shadow: 8px -8px 0 -3px #ccc, 8px -8px 0 0 #000;
}
<div class="box"></div>
I need http://prntscr.com/nw6fed - the background of the first box should be transparent...Any help
You can get your second border with a pseudo element. I used :after in this example.
.box {
width: 200px;
height: 200px;
border: 3px solid cyan;
position: relative;
padding: 40px;
box-sizing: border-box;
}
.box::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
display: block;
top: 20px;
left: 20px;
border: 3px solid magenta;
}
<div class="box">
<h1>Text</h1>
</div>
I am attempting to create a stack of cards in a list, so that the cards can be swapped position-wise and organized.
However, while the ordering is not working either, right now I'm facing the problem of text from the card below showing up above the top-most card:
This is the code I have so far, for both the HTML and the CSS:
.catCards {
justify-content: space-between;
margin: 5px;
text-align: center;
z-index: 1;
margin-top: 256px;
}
.cwColumnCard {
margin-top: -190px;
}
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
}
.cwCTitle {
padding: 3px;
border-bottom: 1px solid #FFF;
text-align: center;
font-size: 18px;
z-index: 1;
}
.cwImage {
margin: 0 auto;
width: 130px;
height: 130px;
border: 1px solid #ccc;
margin-top: 5px;
z-index: 1;
}
.cwValue {
width: 100%;
text-align: center;
padding: 4px;
padding-bottom: 5px;
padding-top: 5px;
z-index: 1;
}
.cwSystemLabel {
width: 100%;
text-align: center;
padding-bottom: 4px;
padding-top: 4px;
z-index: 1;
}
<div class="catCards">
<ul>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card One</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card Two</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
</ul>
</div>
Z-Index was a brief attempt to fix the text positioning, but had no effect on it. What is causing the text to show up in this manner? The card below should be hidden once it's covered.
For the z-index property to work correctly you need to set the position property to something other than static.
In this case adding position: relative; to .cwCard will solve your issue.
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
position: relative;
}
Run the snippet below and the menu design has a hover effect color change. However, my problem is that in conjunction with the gradient effect to hide the extra long text on this menu design, I cannot get the hover to appear above the gradient.
Reading up on using and testing with z-index appears it's not possible with pseudo elements like I'm using.
Any ideas?
<li class="topic_nav_row">
<div class="topic_nav_title">
#Google
</div>
<div class="topic_nav_arrow">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
a,
li {
color: white;
text-decoration: none;
font-family: 'Abel';
}
a:active {
color: white;
text-decoration: none;
}
/* NAV > LIST > ROW */
li.topic_nav_row {
width: 100%;
height: 27px;
line-height: 20pt;
list-style-type: none;
display: block;
cursor: pointer;
clear: both;
position: relative;
}
li.topic_nav_row:hover {
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
/* LIST > ROW > TITLE */
.topic_nav_title {
font-family: Verdana;
width: 80%;
height: 27px;
padding-left: 10%;
position: relative;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
color: white;
}
.topic_nav_title a {
height: 20px;
}
.topic_nav_title::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgb(60, 57, 57) 95%, rgb(60, 57, 57) 100%);
}
.topic_nav_title:hover {
background-color: #514e4e;
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
.topic_nav_container {
width: 180px;
height: 100px;
float: left;
overflow: hidden;
position: fixed;
z-index: 10;
margin: 0;
padding: 0;
background-color: #3c3939;
}
<div class="topic_nav_container">
<li class="topic_nav_row">
<div class="topic_nav_title">
Menu Item One That Is Long
</div>
</li>
<li class="topic_nav_row">
<div class="topic_nav_title">
Menu Item Two That Is Too
</div>
</li>
</div>
you can get hover the gradient disabling it...... like the example
a,
li {
color: white;
text-decoration: none;
font-family: 'Abel';
}
a:active {
color: white;
text-decoration: none;
}
/* NAV > LIST > ROW */
li.topic_nav_row {
width: 100%;
height: 27px;
line-height: 20pt;
list-style-type: none;
display: block;
cursor: pointer;
clear: both;
position: relative;
}
li.topic_nav_row:hover {
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
/* LIST > ROW > TITLE */
.topic_nav_title {
font-family: Verdana;
width: 80%;
height: 27px;
padding-left: 10%;
position: relative;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
color: white;
}
.topic_nav_title a {
height: 20px;
}
.topic_nav_title::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgb(60, 57, 57) 95%, rgb(60, 57, 57) 100%);
}
.topic_nav_title:hover {
background-color: #514e4e;
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
.topic_nav_title:hover:before{
background:none;
}
.topic_nav_container {
width: 180px;
height: 100px;
float: left;
overflow: hidden;
position: fixed;
z-index: 10;
margin: 0;
padding: 0;
background-color: #3c3939;
}
<div class="topic_nav_container">
<li class="topic_nav_row">
<div class="topic_nav_title">
Menu Item One That Is Long
</div>
</li>
<li class="topic_nav_row">
<div class="topic_nav_title">
Menu Item Two That Is Too
</div>
</li>
</div>