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%);}
Related
I am using react-mentions in my project for mentioning users.. The problem is My comment input is at bottom of the page.. The react-mentions show the suggestion when we type # in the bottom of the cursor. I want this list to be above the cursor...Can anyone help me?
I tried Editing the css, but my methods doesn't work.
This is the Css i am using
.mentions {
margin: 1em 0;
}
.mentions--singleLine .mentions__control {
display: inline-block;
/* width: 130px; */
}
.mentions--singleLine .mentions__highlighter {
/* padding: 1px; */
border: 2px inset transparent;
}
.mentions--singleLine .mentions__input {
/* padding: 1px; */
border: 2px inset;
}
.mentions--multiLine .mentions__control {
font-family: monospace;
/* font-size: 14pt; */
}
.mentions--multiLine .mentions__highlighter {
border: 1px solid transparent;
/* padding: 5px; */
/* min-height: 63px; */
}
.mentions--multiLine .mentions__input {
border: 1px solid silver;
/* padding: 9px; */
outline: 0;
}
.mentions__suggestions{
left: 0;
bottom: 100%;
width: 90%;
}
.mentions__suggestions__list {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.15);
left: 0;
bottom: 100%;
width: 90%;
/* font-size: 10pt; */
}
.mentions__suggestions__item {
padding: 5px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.mentions__suggestions__item--focused {
background-color: #cee4e5;
}
.mentions__mention {
position: relative;
z-index: 1;
color: blue;
text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
-1px -1px 1px white;
text-decoration: underline;
pointer-events: none;
}
This is the js code
<MentionsInput className="mentions" value={newComment} onChange={e => setNewComment(e.target.value)} >
<Mention
trigger="#"
data={tagUserList}
/>
</MentionsInput>
But the output is still like the same..The list is showing below the cursor
Please help me to solve the problem
You can use forceSuggestionsAboveCursor={true}
<MentionsInput
value={value}
onChange={onChange}
style={defaultStyle}
placeholder={"Mention people using '#'"}
suggestionsPortalHost={container}
forceSuggestionsAboveCursor={true}
>
<Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
</MentionsInput>
There is a demo page that shows how it works.
This code example can be found in their GitHub here
It's the middle one from BottomGuard's section.
You can also use allowSuggestionsAboveCursor={true}, which will use bottom only if there's space.
This question already has answers here:
CSS/HTML: Create a glowing border around an Input Field
(11 answers)
Closed 3 years ago.
I want to recreate this 'on-focus-blue-glow' effect on the input tag like this:
Here is my effort :
input:focus{
outline-color : lightskyblue;
outline-width : 5px;
border : 1px solid blue;
}
input{
padding : 0;
line-height : 35px;
border-radius : 5px;
border : 1px solid black;
width : 500px;
}
<input type="text" />
But the outline is very small and unnoticeable. And the outline doesn't have round corners, either.
So how can I recreate the effect?
Hello here I developed an example, I hope it serves you.
*, ::after, ::before {
box-sizing: border-box;
}
input {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
overflow: visible;
}
.input-focus {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#media (prefers-reduced-motion: reduce) {
.input-focus {
transition: none;
}
}
.input-focus::-ms-expand {
background-color: transparent;
border: 0;
}
.input-focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #495057;
}
.input-focus:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
.input-focus::-webkit-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::-moz-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus:-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus:disabled {
background-color: #e9ecef;
opacity: 1;
}
#media print {
*, ::after, ::before {
text-shadow: none !important;
box-shadow: none !important;
}
}
<input type="text" class="input-focus" aria-describedby="emailHelp">
You can try using a box shadow in CSS and RGBA for a slightly transparent effect on your border's glow. That should give you the desired soft glow effect because of the blur and tiny bit of transparency in it, for example:
input:focus {
outline-color: lightskyblue;
outline-width: 1em;
border: .25em solid blue;
box-shadow: 0em 0em .75em rgba(0,0,255,0.95);
}
input {
padding: 0;
line-height: 35px;
border-radius: 5px;
border: 1px solid black;
width: 500px;
}
<input type="text" />
With box shadow you can have setting for: v-offset h-offset blur. The third setting is what give you the fuzzy or blurred look around the border/outline. For more detailed info check out the MDN about it.
.input{
padding : 0;
line-height : 35px;
border-radius : 5px;
border : 1px solid black;
width : 500px;
}
input:focus{
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
<input class="input" />
I've created a button that looks like a document with a label below it by moving the button's text outside of its self with position absolute:
$('.item-title').hover(function() {
$(this).parent().addClass('hover');
}, function() {
$(this).parent().removeClass('hover');
});
$('.item-title').on('click', function() {
alert('test this')
});
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="item-button"><span class="item-title">File Title</span></button>
However I can't seem to get the label that's now floating outside the control to react at all to any mouse events. How can I get it to be clickable and pass its hover state back to its parent?
Edit: Seems this is a browser specific issue to firefox, works correctly in Chrome and IE.
Have you tried to write "e.stoppropagation()" in the click event of the label. this will stop the label to push events to its parents.
Update: I tried binding a click event to your label and it works without an issue,
$('.item-title').on('click',function(){
alert('test this')});
Edit your Css code :
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
z-index : 888;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
If you are using Angular 4, you are probably suffering if you need to use a range slider. Most of the packages available are for AngularJS or Angular 2 that doesn't work flawless.
So, I'm trying to build up a cross browser multiple range slider with native html5 input ranges. However, when it comes to IE and Edge, it seems there is a little issue understanding the pointer events for pseudo elements and it doesn't work.
Although I'm using Angular 4, I just created a JSFiddle in AngularJS as an example as I believe this is more a CSS issue maybe with a Javascript workaround.
I appreciate your help. Thanks,
#filter .slider_container{
display: block;
width: 99.5%;
background-color: rgba(0,0,0,0);
height: 15%;
min-height: 85px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
-moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
margin-top:1px;
border-bottom: 1px solid gray;
}
#filter .slider_container p{
font-weight: 300;
margin-left: 5%;
font-size: 0.8em;
text-align: center;
display: block;
margin:0;
margin-bottom: 15px;
color: #000000;
}
#filter .slider_container p:nth-of-type(1){
font-weight: 500;
font-size: 0.8em;
margin-bottom: 0;
padding-top:10px;
}
#filter .slider_container .gender{
outline: 0;
background: #ffffff;
border: 1px solid #000000;
color: #000000;
width: 45%;
height: 20px;
max-width: 150px;
border-radius: 20px;
margin: 0.8%;
cursor: pointer;
font-size: 0.65em;
}
#filter .slider_container .gender:focus{
outline: 0;
}
#filter .slider_container .gender:hover{
background-color: #EA0A8A;
background-image: -webkit-linear-gradient(#EA0A8A, #ec5aae);
background-image: -moz-linear-gradient(#EA0A8A, #ec5aae);
background-image: -o-linear-gradient(#EA0A8A, #ec5aae);
background-image: linear-gradient(#EA0A8A, #ec5aae);
/*text-shadow: 1px 1px 2px black , 0 0 25px black , 0 0 5px black;
-webkit-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.75);*/
cursor: pointer;
color: #ffffff;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
-moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
border: 0px solid #ffffff;
}
#filter .slider_container .active{
background: #EA0A8A;
color: #ffffff;
border: 0px solid #ffffff;
}
#filter input[type=range]{
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 80%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
margin-left: 10%;
}
#filter input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
#filter input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
#filter input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
/* Special styling for WebKit/Blink */
#filter input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 3vh;
width: 3vh;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -4px;
}
/* All the same stuff for Firefox */
#filter input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 3vh;
width: 3vh;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -4px;
}
/* All the same stuff for IE */
#filter input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 15px;
width: 15px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -3px;
}
#filter input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background: none transparent;
border-radius: 1.3px;
border: 0px solid #010101;
}
#filter input[type=range]:focus::-webkit-slider-runnable-track {
background: none transparent;
}
#filter input[type=range]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: none transparent;
border-radius: 1.3px;
border: 20px solid #FFFFFF;
margin: 0;
}
#filter input[type=range]::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
z-index: -9;
border: 20px solid #FFFFFF;
margin: 0;
}
#filter input[name='distanceslider']::-ms-fill-lower {
background: #EA0A8A;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter input[name='distanceslider']:focus::-ms-fill-lower {
background: #EA0A8A;
}
#filter input[name='distanceslider']::-ms-fill-upper {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter input[name='distanceslider']:focus::-ms-fill-upper {
background: #c5c5c5;
}
#filter .ghost{
position: absolute;
z-index:1;
pointer-events: none;
}
#filter .ghost::-webkit-slider-thumb{
z-index:1;
pointer-events: all;
}
#filter .ghost::-moz-range-thumb {
z-index:1;
pointer-events: all;
}
#filter .ghost::-ms-thumb {
z-index:1;
pointer-events: all;
}
#filter .ghost::-webkit-slider-runnable-track {
z-index: -10;
pointer-events: none;
}
#filter .ghost:focus::-webkit-slider-runnable-track {
z-index: -10;
pointer-events: none;
}
#filter .ghost::-moz-range-track {
z-index: -10;
pointer-events: none;
visibility: hidden;
}
#filter .ghost::-ms-track {
z-index: -40;
pointer-events: none;
visibility: hidden;
}
#filter .ghost::-ms-fill-lower {
background: none transparent;
border: 0px solid #010101;
border-radius: 2.6px;
visibility: hidden;
z-index: -9;
}
#filter .ghost:focus::-ms-fill-lower {
background: none transparent;;
}
#filter .ghost::-ms-fill-upper {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .ghost:focus::-ms-fill-upper {
background: #c5c5c5;
}
#filter .main{
position: absolute;
z-index: 0;
pointer-events: none;
}
#filter .main::-webkit-slider-thumb{
z-index: 0;
pointer-events: all;
}
#filter .main::-moz-range-thumb {
z-index: 0;
pointer-events: all;
}
#filter .main::-ms-thumb{
z-index: 1;
pointer-events: all;
}
#filter .main::-webkit-slider-runnable-track {
z-index: -11;
pointer-events: none;
}
#filter .main:focus::-webkit-slider-runnable-track {
z-index: -11;
pointer-events: none;
}
#filter .main::-moz-range-track {
z-index: -11;
border: 0px solid #FFFFFF;
pointer-events: none;
height: 15px;
}
#filter .main::-ms-track {
z-index: 0;
pointer-events: none;
}
#filter .main::-ms-fill-lower {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .main:focus::-ms-fill-lower {
background: #c5c5c5;
}
#filter .main::-ms-fill-upper {
background: #EA0A8A;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .main:focus::-ms-fill-upper {
background: #EA0A8A;
}
https://jsfiddle.net/guarinex/00Lh7kfd/28/
This is the desired slider css which works on dekstop.
But only on mobile device (android) it shows like this. I wonder where the textfield like input shows like attached to the slider.
Here's the fiddle http://jsfiddle.net/p5zo31q8/
CSS
/* INPUT RANGE*/
/*chrome*/
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 1px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #fff;
height: 36px;
width: 36px;
border-radius: 50%;
background: #4BDAFF;
margin-top: -14px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
/*firefox*/
input[type=range]{
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 200px;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
background: #ccc;
}
/*internet*/
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
/*scrollbar*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
margin-top:30px;
margin-bottom:30px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
background-color:#00B0F0;
}
input[type='range']{
background: #0c0;
height:10px;
}
input[type='range']::-webkit-slider-thumb{
background:#f60;
height:30px;
width:30px;
border-radius: 30px;
}