In Discord web app, when clicking & holding on a navbar (Server) button, it shifts a little bit down as shown in this GIF : https://imgur.com/a/bC25LtO
How can I achieve this effect in CSS, or maybe CSS & JS?
You can use pseudo :active and position absolute
.btn {
position: relative;
top: 0px;
font-family: "Open Sans";
text-decoration: none;
font-size: 25px;
padding: 15px 50px;
margin: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 5px 0px #ccc;
transition: all 250ms ease;
}
.btn:active {
position: relative;
top: 5px;
box-shadow: none !important;
transition: all 250ms ease;
}
<button class="btn">press me</button>
or use :active with translateY()
Related
The interface shown below toggles if the toggle button is clicked. For now I used only opacity to toggle the visibility but it doesn´t look even close what I am trying to achieve. I am trying to visualize the whole div in a way, that it look like it is pushed from the background to the front. You may know those child toys (nailboards).
Update - modified the code:
I added #keyframes for the opacity, visibility and box-shadow which I reversed. The result is ok but the could be improved. Overall I am fine with it but for sure an CSS would improve that easily.
$("#toggle").click(function() {
$(".wrapper").toggleClass("animate")
$(".properties").toggleClass("animate")
$(".button").toggleClass("animate-button")
})
body {
font-size: 14px;
font-family: 'Lato', sans-serif;
text-align: left;
color: #757575;
cursor: default;
overflow: hidden;
background: #ECF0F3;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 350px;
padding: 40px 35px 35px 35px;
margin: 30px;
border-radius: 20px;
background: #ecf0f3;
visibility: hidden;
}
.animate {
animation-name: fadeInDiv;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.animate-button {
animation-name: fadeInButton;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes fadeInDiv {
0% {
opacity: 0.8;
visibility: visible;
box-shadow: inset 0px 0px 0px #cbced1,
inset -0px -0px 0px #ffffff;
}
100% {
opacity: 1;
visibility: visible;
box-shadow: inset 10px 10px 10px #cbced1,
inset -10px -10px 10px #ffffff;
}
}
#keyframes fadeInButton {
0% {
box-shadow: 0px 0px 0px #b1b1b1,
-0px -0px 0px #ffffff;
}
100% {
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
}
}
#title {
text-align: center;
font-size: 24px;
padding-top: 10px;
letter-spacing: 0.5px;
}
.visible {
visibility: visible;
}
#sub-title {
text-align: center;
font-size: 15px;
padding-top: 7px;
letter-spacing: 3px;
}
.field-icon {
font-family: FontAwesome;
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
width: 40px;
color: #F59B69;
}
.fields {
width: 100%;
padding: 45px 5px 5px 5px;
}
.fields input {
border: none;
outline: none;
background: none;
font-size: 16px;
color: #555;
padding:20px 10px 20px 5px;
width: fit-content;
}
.properties {
padding-left: 10px;
margin-bottom: 20px;
border-radius: 25px;
}
#confirm-button {
position: relative;
bottom: 0;
left: 0;
outline: none;
border:none;
cursor: pointer;
width:100%;
height: 50px;
border-radius: 30px;
font-size: 20px;
color:#fff;
text-align: center;
background: #F59B69;
margin-top: 30px;
}
#cancel-button {
position: absolute;
top: 0;
right: 0;
margin: 20px;
outline: none;
border:none;
cursor: pointer;
width: 50px;
height: 30px;
border-radius: 30px;
font-size: 14px;
color:#fff;
text-align: center;
background: #F59B69;
}
#confirm-button:hover, #cancel-button:hover {
background:#fff;
color: #F59B69;
}
#confirm-button:active, #cancel-button:active {
box-shadow: inset 3px 3px 8px #b1b1b1,
inset -3px -3px 8px #ffffff;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS Playground</title>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button id="toggle">toggle</button>
<div class="wrapper">
<div id="title">Title</div>
<div id="sub-title">Sub-Title</div>
<div class="fields">
<div class="properties"><span class="field-icon"><i class="fa-solid fa-pen-to-square"></i></i></span><input placeholder="name"></div>
<div class="properties"><span class="field-icon"><i class="fa-solid fa-palette"></i></span><input placeholder="color"></div>
<button class="button" id="confirm-button"><i class="fas fa-check-circle"></i></button>
</div>
<button class="button" id="cancel-button"><i class="fas fa-times-circle"></i></button>
</div>
</body>
</html>
I think you are searching for animating visibility so it appears like a
pin?
Although Animation in visibility is not really a thing Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (it steps instead of moves slowly) so you should ease in and ease out the effects that appear to give the DIV depth.
I can't be sure if you want the div to always be visible or just make it visible and then animate into the nailbord type.
In that case:
visibility: hidden; -> visibility: visible;
followed by:
shadows / effects just after that with the same type (place a div under it or something)
If it's not clear I'll try to make an example this weekend.
I'm trying to mess around with inputs and I want to give the input and the submit button (not an input type, a normal button) to get box shadows, but only the input gets the box-shadow while the button only transforms.
Is there a way to do this with javascript, css, or both?
Here is my CSS:
.submit {
transform: translateX(310px) translateY(38px);
font-size: 38px;
background-color: black;
color: white;
border-radius: 10px 10px 10px 10px;
-webkit-transition-duration: 0.4s;
}
.input {
border: none;
border-bottom: solid;
font-size: 30px;
transform: translateX(350px) translateY(38px);
-webkit-transition-duration: 0.4s;
}
.input:focus, .input:focus + .submit {
outline: none;
border-top: solid;
border-bottom: solid;
border-right: solid;
border-left: solid;
border-radius: 10px 10px 10px 10px;
transform: translateY(20px);
}
.input:focus {
width: 600px;
}
.submit:focus {
outline: none;
}
I made a quick snippet showing how to get box-shadow on both elements when focused on the input. You could modify depending on your styling. The input:focus, input:focus + button selector is the part in which it chooses both elements.
input:focus, input:focus + button {
box-shadow: 10px 5px 5px red;
}
<input type="text">
<button>Submit</button>
You need to add the box-shadow property back onto your button's CSS if you want it to have a box shadow. This codepen I found has a great example of a button with box-shadow as well as the transition that you already have:
https://codepen.io/LeoPragi/pen/gzrGoG
These are the important parts for your button's CSS:
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
You are also probably going to want to put the box-shadow on the button's hover instead of on the focus, like in the codepen:
.button:hover {
background-color: #2EE59D;
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
color: #fff;
transform: translateY(-7px);
}
I am trying to add a modalbox on a href click in html.
The code for HTML is :
Open Modal
<div id="openModal" class="modalDialog">
</div>
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
Below is the CSS that I had applied to my dialog box :
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 1000ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-front {
z-index: 100;
}
As expected, on clicking the 'Model Open' link I should be able to see a modal pop-up with body inside it.
However, my screen appears like an open modal without any body in it (No body contents and close icon).
See the attached image . It shows how the modal looks on opening. The background is disabled as it should be.
Can someone tell me where am I going wrong?
Thanks in advance.
That's because you have an empty container with the same id opening up
If you remove the following empty div it works fine
<div id="openModal" class="modalDialog">
</div>
see here: http://jsfiddle.net/s6zn93ze/1/
I want to make a pure CSS modal window, I found this example.
my problem is that the modal windows is shown quickly then disappear on load. when I clic, all is fine. WhenI try the sample olone, it works great, but when I embed it into my huge code, I see this flashing modal window
How can I stop it to do that flash onload ?
HTML
Open Modal
<div id="openModal" class="modalDialog">
<div> X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
</div>
</div>
My CSS
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
I changed your fiddle a bit. Instead of transitioning the opacity I put the transition on the background, transitioning the rgba from
background: rgba(0,0,0,0.0);
to
background: rgba(0,0,0,0.8);
I also removed the opacity entirely. Hopefully this will work in your environment.
Fiddle: http://jsfiddle.net/GG9Sa/1092/
I am following a tutorial found here and I can't seem to get it to show up. I am using a bootstrap enabled website so I am not sure if that is the problem. I've been at it for two hours and can't seem to get anywhere. My button that I want users to click on in order to bring up the popup looks like this: Contact Me The framework for the popup looks like this:
<div id="openModal" class="contactus">
<div>
X
<h2>Title</h2>
<p>Content</p>
</div>
</div>
The CSS document looks like:
.contactus {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.contactus:target {
opacity:1;
pointer-events: auto;
}
.contactus > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
I have JavaScript enabled on my browser it if you click on it, you can't scroll up on the page unless you press "Esc" so I think it's puling up, you just can't see it. I was thinking it had something to do with z-index: 99999; but I don't know what that does exactly.
Any ideas??