Hi I am trying to zoom a division when user hover , but it get blurred in chrome
here is my code:
.cost_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
transform: scale(1.01) translateY(-5px);
z-index: 1;
border-bottom: 0 none;}
I tried many time but still not getting right result.
Unfortunately you can't get totally rid of the blurred effect in Chrome.
But you can force the element to be drawn by the GPU by applying the following:
.cost_block {
-webkit-transform: translateZ(0);
}
Check out this article for further information.
.cost_block {
-webkit-transform: scale(1) translateY(0) translateZ(0);
}
.cost_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.01) translateY(-5px) translateZ(0);
z-index: 1;
border-bottom: 0 none;
}
it's chrome's problem and we cant solve this by now. The only way to do is using integer in attribute values and it may getting better
You'd have more luck using the cross-browser prefix:
.cost_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
transform: scale(1.01) translateY(-5px);
-webkit-transform: scale(1.01) translateY(-5px);
z-index: 1;
border-bottom: 0 none;
}
Related
The container transform: translatex(-100%); moving to transform: translatex(0); in Internet Explorer 11 and Edge not working properly. Content moves but it goes back when touch on mouse.
.widget {
position: fixed;
top: 0;
bottom: 0;
margin: auto;
background-color: #fff;
border-radius: 4px;
transition: all 1.5s;
max-height: 400px;
left: 0;
transform: translatex(-100%);
}
.widget:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transform: translatex(0);
}
Demo: https://codepen.io/anon/pen/MEMKKL
As mentioned previously, you will need to add a prefix of -ms- for browser support.
For reference, you can use: https://caniuse.com/#search=transform
I am making a ticker animation on my site.
This is the HTML:
<div class="top-news">
<div class="t-n-c">
<div class="textwidget">Latest News: Our first 20 customers get 20% off their first order! Order now with the coupon 20FOR20 to use this offer!
</div>
</div>
</div>
And this is the CSS:
.top-news{
color: white;
-webkit-font-smoothing: subpixel-antialiased;
font-weight: bold;
text-shadow: 0 1px 0 #ac8b00;
background-color: #f0cf31;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0cf31), to(#bd9c00));
background-image: -webkit-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -moz-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -ms-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -o-linear-gradient(top, #f0cf31, #bd9c00);
background-image: linear-gradient(to bottom, #f0cf31, #bd9c00);
border: 1px solid #9b7a00;
-webkit-border-radius: 0.202em;
border-radius: 0.202em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #fff153, inset 0 -1px #ac8b00;
box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #fff153, inset 0 -1px #ac8b00;
padding: 10px;
overflow: hidden;
white-space: nowrap;
padding-left: 100%;
}
.top-news > .t-n-c{
padding-right: 100%;
}
.top-news > .t-n-c > .textwidget{
display: inline-block;
animation-name: ticker;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 35s;
}
.top-news:hover > .t-n-c > .textwidget{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
However the result is that the text isn't going all the way to the left on my laptop. It is working fine on my iPhone, probably because the screen is smaller but if you check the live demo at: https://codepen.io/anon/pen/RRGvgG you will see that it isn't working properly on laptops.
It looks like it isn't finishing because the text finished. How can I make it so it keeps scrolling even after there is no more text?
It stops because it reaches 100% when all the text is shown. I changed
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
to
-webkit-transform: translate3d(-250%, 0, 0);
transform: translate3d(-250%, 0, 0);
and it works.
The way that translate3d works is that the percentage specified is based on the actual element's width, not the width of its container like you might expect. Therefore, if the screen is less than the width of the ticker (which is 800px, or so), it appears to be skipping back to the beginning.
You will need to increase the percentage high enough that it will always make a full rotation on all screens and slow it down. This will make the loop inaccurate, so that's something to consider. I increased the animation duration to account for the greater distance animated. See this updated codepen:
https://codepen.io/thecox/pen/pbEGVQ
.top-news > .t-n-c > .textwidget{
animation-duration: 45s;
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-300%, 0, 0);
transform: translate3d(-300%, 0, 0);
}
}
i have here a problem that i never seen before. i build a header with an menu icon on the left side and three icons on the right side of it. Two of the three icons on the right side, have badges. The problem is that the badges are looking perfect on safari, firefox, edge etc. but on chrome are they to much left. if i change now the margin from margin: 0 0 0 -8px to margin: 0 0 0 11px is it looking good on chrome, but in all other browser is it to much right. How can it be that a margin looks different? Never seen it before.
.pulse-badge {
background: rgba(51,51,51, 0.87); ;
border-radius: 50%;
min-height: 1.3rem;
margin: 0 0 0 -8px;
position: absolute;
min-width: 1.3rem;
top: 0.8em;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51,51,51, .051);
transform: translate3d(0, 0, 0);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);}
#keyframes pulse {
to {
box-shadow: 0 0 0 12px transparent, 0 0 0 16px rgba(90, 153, 212, 0);
}
}
thats the css of the badges and im using skeleton as framework. I also have here a jsfiddle where ya can see it, if ya change the margin. and here is a link with the live project if ya whant to see it with the other content if it helps live
Try to use right than margin: then position your list to relative
Check this out https://jsfiddle.net/febg4cuo/3/
Edited:
you need to add position relative to your list
.notification-bar> li{position:relative;}
You can position the badges absolutely and just add position: relative; to the <li> elements. This together with fiddling with the top and right css attributes solves the problem.
This is the part of css I modified:
.notification-bar> li {
position: relative; // Add this so the badges keep inside the li element
cursor: pointer;
display: table-cell;
padding: 19px 20px 15px 20px;
margin-bottom: 0;
}
.notification-bar>li:hover {
background-color: rgba(241, 241, 241, 0.7);
transition: background-color 0.6s ease;
}
.pulse-badge {
background: rgba(51, 51, 51, 0.87);
;
border-radius: 50%;
min-height: 1.3rem;
margin: 0;
position: absolute;
min-width: 1.3rem;
top: 1em; // Edit this a little to place it where you wanted
right: 1.1em; // Add this so the badges will be aligned on the right side of the icon
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, .051);
transform: translate3d(0, 0, 0);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
}
Here is a working fiddle: https://jsfiddle.net/mz2m2qc1/1/
The problem with your code is you use margin instead of right position remove margin and use right position and every thing will be fine. Check Demo
I have a element I would like to shadows to create a page curl effect with using before and after css properties. I have done this else where on an item that has relative positioning. This works fine and was done like this:
.feed li{
display:block;
height:50px;
width:80%;
margin-left:10%;
position:relative;
clear:both;
margin-top:20px;
overflow:visible;
background:#FFF;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
.feed li:before, .feed li:after{
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 0px;
bottom: 12px;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
z-index: -1;
}
.feed li:after{
left:auto;
right: 0px;
top:12px;
bottom:auto;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
}
However when I use a similar method on an object the z-index appears to be overridden and has my shadows appear on top of the element instead of behind it. This is what I have for this:
.nav{
z-index:1;
position:fixed;
background:#FFF;
top:0px;
bottom:0px;
left:0px;
width:200px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.nav:before,.nav:after{
content:'';
position:fixed;
background: transparent;
z-index: -1;
width:195px;
height:50%;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.6);
}
.nav:before{
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
bottom:0px;
left:0px;
}
.nav:after{
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
bottom:auto;
top:0px;
left:0px;
}
I'm not entirely sure what the problem is here, I have done this method on other items without any problems. The only I can thnik of is that fixed elements are affected differently to others.
tl;dr: Fiddle
Referring to W3C:
The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.
That means they lie on another stack relative to the parent. It is possible to position them behind the parent though. That's done by adding a negative z-index like you did.
But it seems like there's a problem putting those pseudo elements behind the parents background (if it has one). As a solution it is suggested to add z-index:1; and position:relative; to the parent. That's why your first example works fine while the one with position:fixed; causes problems.
In my solution I changed the markup:
<div class="nav">
<div class="content">lorem ipsum</div>
<div class="shadows"></div>
</div>
and applied appropriate rules to the elements. I don't know how you imagined the navigation to look in the end, but I think my solution looks great. See Fiddle.
Attaching single visual shadows
Using the less CODE#1 like in this HTML-snippet, ...
<div class="shadowBottom" style="width: 200px;" >
... stuff here ...
</div>
one can easily attach shadows to e.g. DIV-sections of HTML-pages:
The less code adds box-shadows below the lower-left and the lower-right corner of an element and rotates them a bit. Using z-index=-1 the shadows get behind the target element. Thus, only some shadow gets visible just below the target element. É voilà!
Certainly, the target element needs to have a non-transparent background to not show the box-shadowed element at z-index=-1.
Attaching two visual shadows
With quite similar code, a shadow left of the lower/left corner is possible.
To combine both shadow effects, one needs to wrap two DIVs around the actual content [applying both classes to the same DIV does not work]:
<div class="shadowLeft" style="width: 200px;">
<div class="shadowBottom" style="width: 200px;" >
... stuff here ...
</div>
</div>
Renders like this:
Actually, this isn't what I want to achieve, since there is a gap between the two shadow effects.
Question
I'd be too happy to see how to fill the gab and generate a homogenous shadow around the corner. Something like this:
Code#1 [LESS]
.shadowBottom {
background-color: #FFFFFF;
width: 100%;
position: relative;
}
#shadowRotation: 6deg;
#horizontalOffset: 0px;
#alpha: 0.2;
.shadowBottom:before {
content: '';
position: absolute;
bottom: 10px;
left: #horizontalOffset;
z-index: -1;
width: 100px;
height: 20px;
-webkit-box-shadow: 0 10px 5px rgba( 0, 0, 0, #alpha );
-moz-box-shadow: 0 10px 5px rgba( 0, 0, 0, #alpha );
box-shadow: 0 10px 5px rgba( 0, 0, 0, #alpha );
-webkit-transform: rotate( -#shadowRotation );
-moz-transform: rotate( -#shadowRotation );
-o-transform: rotate( -#shadowRotation );
-ms-transform: rotate( -#shadowRotation );
transform: rotate( -#shadowRotation );
}
.shadowBottom:after {
content: '';
position: absolute;
bottom: 10px;
right: #horizontalOffset;
z-index: -1;
width: 100px;
height: 20px;
-webkit-box-shadow: 0 10px 5px rgba( 0, 0, 0, #alpha );
-moz-box-shadow: 0 10px 5px rgba( 0, 0, 0, #alpha );
box-shadow: 0 10px 5px rgba( 0, 0, 0, #alpha );
-webkit-transform: rotate( #shadowRotation );
-moz-transform: rotate( #shadowRotation );
-o-transform: rotate( #shadowRotation );
-ms-transform: rotate( #shadowRotation );
transform: rotate( #shadowRotation );
}
Edit: the closest I've got to this is by using skew to make a rhomb like figure:
.shadowBottom{
position:relative;
box-shadow: 0 0 6px rgba( 0, 0, 0, 0.2);
}
.shadowBottom::before, .shadowBottom::after{
content: '';
position: absolute;
bottom: 10px;
left: 10px;
z-index: -1;
width: 50%;
height: 90%;
box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.4);
transform: skewX(-10deg) rotate(-4deg);
/* ^ skew value should be adjusted to match box w/h */
}
.shadowBottom::after{
transform: skewX(10deg) rotate(4deg);
/* ^ same here */
left: auto;
right: 10px;
}
DEMO