I'm trying to have jQueryUI's draggable on my element:
html:
<div class="draggable"></div>
js:
$('.draggable').draggable();
Until now everything works ok, but when I add css material design styles:
.draggable {
position: absolute;
width: 100px;
height: 50px;
background-color: red;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
transition: all 250ms;
}
.draggable:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
transform: translateY(-2px);
}
div element starts to work in a wrong way - it is locking every some time.
Here's plunker: http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview
I found solution thanks to Tom suggestion:
var memo;
$('.draggable').draggable({
start: function() {
memo = $(this).css('transition');
$(this).css('transition', 'none');
},
stop: function() {
$(this).css('transition', memo);
}
});
Plunker: http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview
My guess is that it needs both the start and end point to do a transition so it is only displayed when it thinks the movement has finished.
I know this isn't an answer but I can't comment yet, sorry.
Related
I'm using Elementor Pro and wanted certain images to zoom within the div container and had a shine on them when hovering, so upon asking for help someone wrote this code for me, but it didn't scale the image. I added the transform property to scale it, but I don't know how to keep it within the container. I also wanted the transition to be smooth so I also added the transition property which doesn't seem to work at all. This is my first time asking asking a question here and I do not have a coding background so I apologize if I say something wrong.
.shine-test::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
content: '';
transition: all 0.6s;
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);
}
.shine-test:hover::before {
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);
}
.shine-test:hover {
transition-timing-function: ease-in-out;
transition-duration: .6s;
}
.shine-test:hover {
transform: scale(1.2)
}
You need JavaScript if you want to change the size of the wrapper, because things changed by scale keeps their original 'box'.
Although if you knew the size you were scaling it to you can do something like this:
Box = 40*40
Scale 1.5 = Box width 60*60
.box {
width: 40px;
height: 40px;
}
.box.scaled {
width: 60px;
height: 60px;
}
.box.scaled > .shine-test {
transform: scale(1.5);
}
I'm currently editing a subreddit on reddit.com and my methods are restricted on CSS only.
I managed to get a overlay effect when you hover over the menu on the left side. It's fading in, but I don't know how to fade it out. Since transition wasn't working I tried another method with an animation.
TL;DR: Overlay fade in: yes - fade out: no :(
Here are some parts of the code I used:
#sr-header-area .drop-choices:hover:before {
content: "";
font-size: 13px;
display: block;
position: fixed !important;
height: 100%;
width: 100%;
margin-left: 300px;
pointer-events: none;
z-index: 700 !important;
animation: fade 0.5s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;}
#keyframes fade {
0% {background-color: rgba(0, 0, 0, 0);}
100% {background-color: rgba(0, 0, 0, 0.4);}}
Maybe someone can help me out here.
You should be able to achieve this effect with transitions and that would be the way I'd personally recommend. Heres a quick implementation: https://jsfiddle.net/z1c8bvcd/1/
The main thing to remember is that you need to define the CSS properties that the div will return to once the hover state is no longer in effect, not just what they look like when hovered otherwise the :before pseudo element will be removed from the DOM.
#foo:before {
content: "";
background: rgba(255, 255, 255, 0);
transition: background 0.5s, margin-left 0.5s;
width: 100%;
height: 100%;
position: fixed!important;
margin-left: 50px;
}
#foo:hover:before {
background: rgba(0, 0, 0, 0.3);
margin-left: 300px;
}
I think you can also achieve a similar effect using keyframes, but I think the animation would run once when the page loads and then whenever the div is hovered.
i am designing a custom animated button and needed to use a combination of simple CSS-3 transitions and psedo elements .
now i am aware of the fact that pseudo elements are affected by declarations to the element to which they are attached . but i have a contextual question with a difficulty i am having.
background :
now i have a custome animation that turn an elements opacity to 0 , however i would like it if the psedo element and its properties can be preserved visually without thier opacity being changed to 0 .
here's a fiddle : fiddle
see how along with the span element being turned to opacity:0 the psedo element too gets its opcaty turned to 0.
BTW , the custome animation is as follows :
#-moz-keyframes hidden {
0%{
opacity: 0;
}
100%{
opacity: 0;
transform: translateX(100px);
}
}
and the code that fires the custom animation is as follows :
.btn:hover span{
animation-name:hidden;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
I know if i choose to go without the psedo element there would be a solution , but i'd really like to keep the psedo element in the code .
Thanks .
Alexander.
You can do this by transitioning rgba(Red, Greeb, Blue, Alpha) instead of the opacity.
* {
box-sizing: border-box;
transition: .3s;
}
.btn {
outline: 0;
/*padding: 20px 0;*/
border: 1px solid green;
margin: 0 auto;
text-align: center;
}
.btn span {
width: 100%;
height: 100%;
position: relative;
left: 0;
background: rgba(0, 255, 0, 1);
color: rgba(101, 141, 102, 1);
transition: all 0.5s;
}
.btn:hover span {
left: -100%;
background: rgba(0, 255, 0, 0);
color: rgba(101, 141, 102, 0);
}
.btn span:after {
background: red;
content: 'new content';
position: absolute;
left: 100%;
width: 100%;
height: 100%;
text-align: center;
}
.btn:hover span:after {
color: rgba(101, 141, 102, 1);
margin-left: 6px;
}
<button class="btn">
<span>Hey press me</span>
</button>
I'm getting some issues trying to use the transform scale CSS property.
Here's my CSS on hover:
#pricing-table .pricing-column:not(.labels):hover {
position: relative;
z-index: 50;
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
transform: scale(1.02);
-webkit-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
-moz-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
box-shadow: 0 0 3px rgba(1, 1, 1, 0.3); }
Here's the result, note the weird grey border on some of the list items:
Screenshot of issue
I've had similar issues with chrome and CSS3 transforms before and have never been able to figure out how to solve them. Would appreciate any insight! Thanks
Here's the live demo:
Demo Link
U can try to add borders. I checked your code and this worked.
#pricing-table .pricing-column:not(.labels) li,
#pricing-table .pricing-column:not(.labels):hover li {
border: 1px solid #FFF;
}
U can use nth child to remove it from first li if that bothers u.
#pricing-table .pricing-column:not(.labels):hover li:first-of-type {
border: none;
}
Here is an image I created of a board with a shadow behind it. The board is supposed to be leaning against a wall so the shadow is in a triangular shape on both sides.
Is it possible to create a shadow like this using only CSS? Also, if possible, is the method cross-browser compatible?
Is it possible to create a shadow like this using only CSS?
Yes, using pseudoelements, box shadows, and 2D transformations – specifically, a rotation. An example is at the end of this answer.
Is the method cross-browser compatible?
Sort of. The ideal code isn't fully compatible with older versions of IE. To get that support, you'll need to make some compromises, which I'll list below:
Here's the support breakdown:
:before and :after – IE8+ only. For deeper support, you could replace these with less-semantic div elements.
rotation – IE6+ with IE-specific rules; a reference that shows these rules is in the note at the end of the example
box-shadow – IE9+ To make these shadow work in IE6+, you could use CSSPie.
Example of the ideal code
Here's a very quick example to get you started.
<div id="board">
Place image here!
</div>
CSS
#board {
position: absolute;
left: 50px;
top: 50px;
background: #e5e5e5;
text-align: center;
width: 100px;
height: 100px;
}
#board:before {
z-index: -1;
position: absolute;
content: "";
bottom: 0;
left: 5px;
width: 5px;
height: 50%;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: -5px 0 10px rgba(0,0,0, 0.7);
-moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
}
#board:after {
z-index: -1;
position: absolute;
content: "";
bottom: 0;
right: 5px;
width: 5px;
height: 50%;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 5px 0 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
Where should I go from here?
You'll want to implement the syntax for rotations in early IEs, or use a Javascript library to add the support, both of which can be read about over here.
You might also want the shadows to cut off like they do in your image. This could be done by covering up the part of the shadow that sticks out with an element that's beneath it.
I also threw that together pretty quickly, so you might want to adjust it to get the shadows looking just like how you want them.