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);
}
Related
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()
I'm trying to move boxes up when simply doing a mouseover. I can mouseover on each box, but can't get it to move up.
Here's my code:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
}
Here's my LIVE DEMO
Your given examples did it by two CSS properties:
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}
You should use transform like the following:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
transition: all 200ms ease;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translateY(-3px);
}
You can add the following code when you hover the element to move up.
.post-item:hover{transform:translateY(-3%);}
in the jsfiddle you will find a header
with a search icon which when pressed, will make a search bar appear under the header. but the problem is that it appears instantly. I want the header to smoothly expand and the search bar to fade in. I tried but couldn't get it to work.
jsfiddle: https://jsfiddle.net/HussamAlhassan/zwg0drne/15/
here's the code:html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/brands.css" integrity="sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
</head>
<div style="position: fixed; width: 100%; box-shadow: 0px 1px grey; transition: .4s ease-in-out;" id="headershell">
<div id="header">
<div id="searchicondiv">
<i class="fas fa-search searchicon"></i>
</div>
<div id="namediv">
<h1 id="name">Header</h1>
</div>
<div id="logindiv">
<a href="#">
<h2 id="login">Login</h2>
</a>
</div>
</div>
<div id="hiddensearch" class="Hidden" style=" background-color: black;">
<div style="width: 100%;">
<input id="search" placeholder="Search..">
</div>
</div>
</div>
css:
div#header {
width: 100%;
background-color: rgba(0, 0, 0, 1);
display: flex;
z-index: 1000000;
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
}
div#header #name {
color: white;
font-family: orbitron;
text-align: center;
font-size: 1.5em;
margin-left: 5%;
}
div#header #login {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
text-align: center;
font-size: 1em;
transition: .2s ease-in-out;
padding: 0px;
}
div#headershell .searchicon {
color: white;
margin: auto;
margin-left: 50%;
transition: .2s ease-in-out;
}
div#headershell .searchicon:hover,
#login:hover {
cursor: pointer;
opacity: 0.5;
}
div#namediv {
float: left;
width: 33.4%;
}
div#searchicondiv {
width: 33.3%;
margin: auto;
transition: .2s ease-in-out;
}
div#logindiv {
width: 33.3%;
float: left;
margin: auto;
}
div#hiddensearch {
z-index: 100;
transition: 0.4s ease-in-out;
padding-bottom: 1em;
height: inherit;
background-color: rgba(0, 0, 0, 1);
transition: .3s ease-in-out;
}
div#hiddensearch #search {
padding: .4em;
width: 80%;
margin-left: 10%;
margin-right: 10%;
border-radius: 5px;
margin-top: -5%;
color: white;
background-color: rgba(0, 0, 0, 1);
border: 2px white solid;
transition: 0.3s ease-in-out;
}
div#hiddensearch #search:focus {
text-decoration: none;
color: black;
background-color: white;
border: 2px black solid;
outline-width: 0px;
}
.headernotHidden {
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
}
.notHidden {
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
opacity: 1;
display: flex;
}
.Hidden {
display: none;
transition: .3s ease-in-out;
}
js:
$(document).ready(function() {
// jQuery methods go here...
$(".searchicon").click(function hidesearch() {
if ($("#hiddensearch").hasClass("Hidden")) {
$("#hiddensearch").removeClass("Hidden");
$("#hiddensearch").addClass("notHidden");
$(".searchicon").removeClass("fa-search");
$(".searchicon").addClass("fa-times");
$("#headershell").addClass("headershellHidden");
} else {
$("#hiddensearch").removeClass("notHidden");
$("#hiddensearch").addClass("Hidden");
$(".searchicon").removeClass("fa-times");
$(".searchicon").addClass("fa-search");
$("#headershell").removeClass("headershellHidden");
}
})
});
edit: solutions that consist of setting the opacity to 0 wont work because you can still click on the input which isnt what i want
Instead of display: none, use opacity: 0; on the CSS for .Hidden
https://jsfiddle.net/k1yg95gk/2/
I can see you are using jQuery.
Instead of using display: none; you can use the jQuery .hide() and .show().
You can use it this way :
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
or even simpler, with the .toggle(), like this :
$(selector).toggle(speed, callback);
All documentations are here :
For hide();
For show();
For toggle();
You'll just have to handle the speed as you wish.
EDIT
Edited JSFiddle :
https://jsfiddle.net/zwg0drne/30/
If the animation is not okay for you, you can use toggleClass(); with the animation you want in this CSS class (on the display, the height, the width.. whatever you want, with a transition speed).
Documentation here :
toggleClass() documentation
You can use any of the jQuery methods for animation listed below.
.slideUp()
.slideDown()
.fadeIn()
.fadeOut()
.slideToggle()
Here you go. I have used slideToggle() method in following fiddle.
https://jsfiddle.net/zwg0drne/27/
You were over-engineering and writing too many lines to achieve a simple thing. Please note that I have also made changes in CSS.
Edit: updated fiddle link to toggle search icon with close icon as well.
I have some JS code to make the box-shadow of buttons a darker version of the buttons background color, where the user can dynamically change the button background colors.
My code works but I also need the box-shadow values to change on hover and my code is changing the whole property instead of just the color of the shadow.
$("input[type=submit]").each(function() {
//get button color
var btnclr = $(this).css("background-color");
//make darker
$(this).css({
"box-shadow": "0 -3px 7px " + LightenDarkenColor(rgb2hex(btnclr), -80) + " inset"
});
});
input[type=submit] {
cursor: pointer;
border-radius: 5px;
border: 1px solid #555753;
background-color: cor11;
font-weight: normal;
text-transform: uppercase;
box-shadow: 0 -3px 7px #888a85 inset;
}
input[type=submit]:hover {
box-shadow: 0px 3px 7px #888a85 inset;
text-shadow: 0 0;
}
I know I can make the hover animation in JS but the CSS is lighter and I would prefer not having to redo it in JS.
How about maybe turning the box shadow property into a string and only changing the color part of it?
Yes it will changes over all the css from input[type=submit] to input[type=submit]:hover, Instead use all the needed css again with the hover.
input[type=submit] {
cursor: pointer;
border-radius: 5px;
border: 1px solid #555753;
background-color: cor11;
font-weight: normal;
text-transform: uppercase;
box-shadow: 0 -3px 7px #888a85 inset;
}
input[type=submit]:hover {
cursor: pointer;
border-radius: 5px;
border: 1px solid #555753;
background-color: cor11;
font-weight: normal;
text-transform: uppercase;
box-shadow: 0px 3px 7px #888a85 inset;
text-shadow: 0 0;
}
I'm using following jQuery to style my tooltips
$(function() {
// select all desired input fields and attach tooltips to them
$("#tooltips :input").tooltip({
// place tooltip on the right edge
position: "center left",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
});
});
and my CSS is
#myform {
height: auto;
}
#tooltip{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background-color: #fff !important;
border: 1px solid !important;
border-radius: 5px;
border-color: #bbb #bbb #a8a8a8;
padding: 16px;
z-index: 2000 !important;
width: 255px;
line-height: 17px;
top: 48px;
margin-left:-16px !important;
font-style: italic;
color: #7d7d7d;
font-size: 13px;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s;
}
#tooltip:after {
content: '';
position: absolute;
border: 3px solid rgba(51, 51, 51, 0.9);
border-color: transparent white;
border-width: 8px 0 8px 7px;
top: 40%;
right: -6px;
}
#tooltip:before {
content: '';
position: absolute;
border: 2px solid #333;
border-color: transparent #000;
border-width: 8px 0 8px 6px;
top: 40%;
right: -6px;
}
I'd like to change the CSS name to anything else rather than tooltip, but when i change my CSS name the tooltip doesn't work.
Any help would be appreciated
Not sure what you are trying to ask, but if you want to replace 'tooltip' with any other string like 'test' in CSS then you will have to replace same string inside $('#tooltip :input') by same name $('#test :input').
update the jQuery selector accordingly. For ex if want to name it anyRandomName then
selector should be
$("#anyRandomName:input").tooltip({
//...
});
Also make sure the element on which you want to show tootip have id as anyRandomName