This is the example: https://jsfiddle.net/0w4bcy93/
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
transform: rotateX(40deg) rotateY(0deg) rotateZ(0deg);
}
.circle--1 {
filter: blur(10px) opacity(1);
}
<div class="circle circle--1"></div>
<div class="circle circle--2"></div>
Both has the same styling except .circle--1 has filter blur. Is this a browser issue?
edit: You can also try increasing the rotateX and the cropped area will be bigger
edit2: I logged a bug in Chromium https://bugs.chromium.org/p/chromium/issues/detail?id=1108298
In case of it's a chrome bug itself. There's a cheat way to work around. By using a parent
filter layer to blur.
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
transform: rotateX(75deg) rotateY(0deg) rotateZ(0deg);
}
.blur-filter {
filter: blur(10px);
width: 100px;
height: 100px;
}
.circle--1 {
filter: opacity(1);
}
<div class="blur-filter">
<div class="circle circle--1"></div>
</div>
<div class="circle circle--2"></div>
Related
I just stumbled upon a very strange behavior when working with transform: translate3d().
As long as I use only the translate3d() property everything works exactly as translate(). But if I combine the this with scale3d() the behavior changes.
See the attached exmple to see whats happening.
Why are the results different? Anyone any idea?
.wrapper {
margin-top:10px;
display:flex;
width: 650px;
justify-content: space-between;
box-shadow: 0px -30px 0px black inset;
}
.translate,
.translate3d,
.translatey {
width: 30%;
height: 100px;
font-size: 24pt;
}
.translate {
will-change: transform, scale;
transform: scale(0.75) translate(0px, -22.5px);
background-color:lightcoral;
}
.translate3d {
transform: translate3d(0, -22.5px, 0) scale3d(0.75, 0.75, 0.75);
background-color:lightblue;
}
.translatey {
transform: scale(0.75) translateY(-22.5px);
background-color:springgreen;
}
<div class="wrapper">
<div class="translate">
translate
</div>
<div class="translate3d">
translate3d
</div>
<div class="translatey">
translatey
</div>
</div>
Long story short, I want my (any) image to change the color on hover, but I can't make it work well on PNG images. The problem is with transparency. I don't want to apply my color on transparent space. My CSS looks like this:
background-blend-mode: color-burn;
background-color: #edeb52;
Here is the full jsFiddle example. All I want is to get rid of that color around the icon, which should be transparent.
6 months late to the party but you could use the mask-image CSS property. Its experimental but fairly well supported:
.maskedimage {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
background-size: cover;
-webkit-mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
-webkit-mask-mode: alpha;
-webkit-mask-size: cover;
mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
mask-mode: alpha;
mask-size: cover;
}
.maskedimage.blue {
background-blend-mode: luminosity;
background-color: blue;
}
.maskedimage.red {
background-blend-mode: luminosity;
background-color: red;
}
.maskedimage:hover {
background-blend-mode: multiply;
background-color: red;
}
<div class="maskedimage original"></div>
<div class="maskedimage blue"></div>
<div class="maskedimage red"></div>
Alternatively you can get a similar effect using css filters:
.filteredimage {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
background-size: cover;
}
.filteredimage.blue {
filter: sepia(1) hue-rotate(170deg) brightness(45%) saturate(1000%);
}
.filteredimage.red {
filter: sepia(1) hue-rotate(313deg) brightness(45%) saturate(1000%);
}
.filteredimage:hover {
filter: sepia(1) hue-rotate(313deg) brightness(25%) saturate(1000%);
}
<div class="filteredimage original"></div>
<div class="filteredimage blue"></div>
<div class="filteredimage red"></div>
Your mileage may vary.
This can be done with css, but unfortunately browser support is very bad (may be webkit only).
https://jsfiddle.net/devefrontend/fowzemd2/2/
.image .img {-webkit-mask-box-image:'YOURIMAGEURL';}
and this may be the same question as you:
Is there any way to colorize a white PNG image with CSS only?
Its is a Example
you can more learn it
https://www.w3schools.com/howto/howto_css_image_overlay.asp
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
color: white;
font-size: 16px;
width:400px; height:350px;
}
<div class="container">
<img src="http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png" alt="Avatar" class="image" style="width:100%">
<div class="middle" ">
<div class="text">example</div>
</div>
</div>
Try like this. See if it is helpful. I have used filter property here.
.image {
display: inline-block;
}
.image .img {
width: 375px;
height: 360px;
background-image: url('http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png');
background-size: cover;
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
<div class="image">
<div class="img"></div>
</div>
Does it have to be PNG? Preferably you could use an inline svg. This way you can not only apply a fill color of your choice via css but you also get all the benefits of vector based graphics: Crispy on any size and smaller file (be sure to optimize with svgo)
I create two squares with z translate and put in perspective-origin in css.
This is the link to jsbin: https://jsbin.com/bebucum/edit?html,output.
Following is the most relevant CSS:
.container {
-webkit-perspective: 700;
-webkit-perspective-origin: 450px 000px;
}
.square:nth-child(1) {
-webkit-transform: translateZ(100px);
}
.square:nth-child(2) {
background: yellow;
-webkit-transform: translateZ(-200px);
}
Most of the output makes sense to me. However there is one part I do not quite understand.
I think the yellow square should be below the blue one, as its translateZ is negative. But the output is the other way around.
Can someone help me understand this behavior?
To achieve correct 3d positioning, you need to set
transform-style: preserve-3D;
I have also removed webkit prefixes, they aren't necesary now.
.container {
perspective: 700px;
perspective-origin: 450px 0px;
transform-style: preserve-3D;
}
.square {
background: blue;
position: relative;
top: 300px;
left: 300px;
height: 100px;
width: 100px;
}
.square:nth-child(1) {
transform: translateZ(100px);
}
.square:nth-child(2) {
background: yellow;
transform: translateZ(-200px);
}
<div class="container">
<div class="square">
</div>
<div class="square">
</div>
</div>
Have a box with some text inside. When I hover it, I want to scale / zoom it bigger with an animation. When the animation ends, the blurred effect is removed from the container. Is there anyway to remove the blur effect after the transition ?
The Code (http://codepen.io/ptongalex/pen/dNZdmV):
.box {
border: solid red 2px;
width: 100px;
position:relative;
text-align:center;
left: 50%;
top:200px;
}
.box:hover {
-webkit-filter: blur(0);
-webkit-transform: translateZ(0);
transform: scale(3);
transition: transform 1s;
}
<div class='box'>
<h1>Text</h1>
</div>
One solution could be to start you box as big and then have it scaled down to your desired size. When you then hover the box you scale it up to 1. This way you prevent the box and its content from being pixelated/blurry when scaling:
.box {
border: solid red 6px;
width: 300px;
position:relative;
text-align:center;
font-size: 54px;
transform: scale(0.33);
margin: 0 auto;
transition: transform 1s;
}
.box:hover {
transform: scale(1);
}
<div class='box'>
<h1>Text</h1>
</div>
This should work.
filter: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
-ms-filter: blur(0);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
But in some cases the element will be blurred during animation if you use transition.
I'm trying to draw a cuboid with css (like this http://upload.wikimedia.org/wikipedia/commons/d/dc/Cuboid.png but ONLY 3 visible faces needed)
Lots of stuff checked, but nothing found exactly :S
Can anyone help?
SOLVED. The code is:
<style>
#cubetop {
width: 200px;
height: 40px;
background: green;
-webkit-transform:
translateX(20px)
skew(-45deg, 0deg);
}
#cubeface {
width: 200px;
height: 60px;
background: yellow;
display:block;
float:left;
}
#cuberight {
width: 40px;
height: 60px;
background: navy;
display:block;
float:left;
-webkit-transform:
translateY(-20px)
skew(0deg, -45deg);
}
</style>
<div id="cubetop"></div>
<div id="cubeface"></div>
<div id="cuberight"></div>
If you're ok with css3, you can use transforms. Have 3 separate div elements and apply the transformations on each.
Something like this in Mozilla
-moz-transform: rotate(15deg)
translateX(230px)
scale(1.5);
And Like this in IE
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";
Alternatively try :
http://www.useragentman.com/tests/cssSandpaper/cube3.html