Image Scaling by CSS: Is There a Webkit Alternative for -Moz-Crisp-Edges

.sliding-images{position:absolute;  align-items: center;  display: flex;  flex-flow: row nowrap;  height: 70%;  justify-content: center;}
.sliding-images img{  transition: transform 1s;  -webkit-transition: transform 1s;  width: calc(100%/7);}
.sliding-images img:nth-child(1){  transform-origin: right;  -webkit-transform-origin: right;  z-index: 1;  -webkit-animation: slide-left 0.15s ease-out both,scale11 0.1s both;          animation: slide-left 0.15s ease-out both,scale11 0.1s both;}
.sliding-images img:nth-child(2){  transform: scale(1.2) translateX(178%);  -webkit-transform: scale(1.2) translateX(178%);  transform-origin: right;  -webkit-transform-origin: right;  z-index: 2;  -webkit-animation: slide-left 0.10s ease-out both,scale12 0.1s both;          animation: slide-left 0.10s ease-out both,scale12 0.1s both;}
.sliding-images img:nth-child(3){  transform: scale(1.3) translateX(-87%);  transform: scale(1.3) translateX(-87%);  transform-origin: right;  -webkit-transform-origin: right;  z-index: 3;  -webkit-animation: slide-left 0.5s ease-out both,scale13 0.1s both;          animation: slide-left 0.5s ease-out both,scale13 0.1s both;}
.sliding-images img:nth-child(4){  transform: scale(1.4);  -webkit-transform: scale(1.4);  z-index: 4;}
.sliding-images img:nth-child(5){  transform: scale(1.3) translateX(-87%);  -webkit-transform: scale(1.3) translateX(-87%);  transform-origin: left;  -webkit-transform-origin: left;  z-index: 3;  -webkit-animation: slide-right 0.5s ease-out both,scale13 0.1s both;         animation: slide-right 0.5s ease-out both,scale13 0.1s both;}
.sliding-images img:nth-child(6){  transform-origin: left;  -webkit-transform-origin: left;  z-index: 2;  -webkit-animation: slide-right 0.10s ease-out both,scale12 0.1s both;         animation: slide-right 0.10s ease-out both,scale12 0.1s both;}
.sliding-images img:nth-child(7){  transform-origin: left;  -webkit-transform-origin: left;  z-index: 1;  -webkit-animation: slide-right 0.15s ease-out both,scale11 0.1s both;         animation: slide-right 0.15s ease-out both,scale11 0.1s both;}
 @-webkit-keyframes slide-left {  0% {    -webkit-transform: translateX(0);            transform: translateX(0);  }  100% {    -webkit-transform: translateX(calc(-100%/7));            transform: translateX(calc(-100%/7));  }}
@keyframes slide-left {  0% {    -webkit-transform: translateX(0);            transform: translateX(0);  }  100% {    -webkit-transform: translateX(calc(-100%/7));            transform: translateX(calc(-100%/7));  }}
 @-webkit-keyframes slide-right  {  0% {    -webkit-transform: translateX(0);            transform: translateX(0);  }  100% {    -webkit-transform: translateX(calc(100%/7));            transform: translateX(calc(100%/7));  }}
@keyframes slide-right {  0% {    -webkit-transform: translateX(0);            transform: translateX(0);  }  100% {    -webkit-transform: translateX(calc(100%/7));            transform: translateX(calc(100%/7));  }}
@keyframes scale11 {  0% {    -webkit-transform: scale(1);            transform: scale(1);  }  100% {    -webkit-transform: scale(1.1);            transform: scale(1.1);  }}
@keyframes scale12 {  0% {    -webkit-transform: scale(1);            transform: scale(1);  }  100% {    -webkit-transform: scale(1.2);            transform: scale(1.2);  }}
@keyframes scale13 {  0% {    -webkit-transform: scale(1);            transform: scale(1);  }  100% {    -webkit-transform: scale(1.3);            transform: scale(1.3);  }}

<div class="sliding-images">    <img src="https://via.placeholder.com/432x864/fdc34f/FEFEFE?text=1">    <img src="https://via.placeholder.com/432x864/3e72ff/FEFEFE?text=2">    <img src="https://via.placeholder.com/432x864/222222/FEFEFE?text=3">    <img src="https://via.placeholder.com/432x864/fe7b7b/FEFEFE?text=4">    <img src="https://via.placeholder.com/432x864/24d366/FEFEFE?text=5">    <img src="https://via.placeholder.com/432x864/afd33c/FEFEFE?text=6">    <img src="https://via.placeholder.com/432x864/41c8b8/FEFEFE?text=7">  </div>

CSS: Using Mask as a fallback for Webkit-Mask-Image

Too bad masking has awful support.

I created an alternative way of masking, taking advantage of the :before and :after pseudo elements.

jsFiddle demo here - way better cross-browser support.

HTML

<div class="hex"></div>

CSS

.hex {
    width: 205px;
    height: 233px;
    position: relative;
    background: url('https://s3.amazonaws.com/images.dailydabbles.com/artwork/skull-link5243b4c783a87-crop-260x260-medium.png');
}

.hex:before {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 60px solid transparent;
    border-left: 103px solid white;
    border-right: 102px solid white;
    position: absolute;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: 0px;
    border-top: 60px solid transparent;
    border-left: 103px solid white;
    border-right: 102px solid white;
}

Property is nonstandard. Avoid using it. for '-webkit-mask-image' & '-webkit-mask-size'. What should I use instead?

Try to change it from -webkit-mask-image / -webkit-mask-size to only mask-image and mask-size and see if that resolves the issue for you.

a.effect-shine:hover {
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    mask-size: 200%;
    animation: shine 1s infinite;
}

You can also just add and define the properties mask-image and mask-size as shown below:

a.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    -webkit-mask-size: 200%;
    mask-size: 200%;
    animation: shine 1s infinite;
}

But that would still give you an error of 'Property is non standard. Avoid using it' but that would remove the red marks. I'd recommend going with the first snippet of code in my answer as these properties 'mask-image' and 'mask-size' are also a standard for browsers such as Safari,Opera, Chrome, Edge and Firefox.

---

Related Topics