How can I make very small blur effect with -webkit-filter (or filter), between 1px and 0?
I've already tried something between 1em and 0.01em but as far as this filter is recalculating this to pixels and below if it's drops below 1px then is no blur at all..
here is a quite complex solution which involves duplicating some content:
http://jsfiddle.net/BWj28/1/
It works by replicating the content box 4 times, shifting the replicants by 1 pixel in every direction and calculating the approppriate opacity for the replicants. The version above requires an opaque background.
---
-a-
---
--- con ---
-d- ten -c-
--- t ---
---
-b-
---
HTML sample layout:
<div class="wrap">
<div class="a t">Hello World!</div>
<div class="b t">Hello World!</div>
<div class="c t">Hello World!</div>
<div class="d t">Hello World!</div>
<div class="content">Hello World!</div>
</div>
CSS:
.wrap {
position: relative;
}
.a,.b,.c,.d {
position: absolute;
}
.a { top: -1px; left: 0px; z-index:1; opacity:1; }
.b { top: +1px; left: 0px; z-index:2; opacity:0.5; }
.c { top: 0px; left: +1px; z-index:3; opacity:0.333; }
.d { top: 0px; left: -1px; z-index:4; opacity:0.25; }
.wrap > div {
background: yellow; /* any opaque background */
}
One think i want to tell you this type of features in not applied in CSS3 because it doesn't have full support but the future of CSS may provide this feature...
Anyways -webkit-filter are only applicable in chrome only...
So, codes like that can be useful to you,
img {
-webkit-filter: grayscale(0.5) blur(10px);
}
Refer this: Click...
Related
I’m trying to make an hover effect with an image that increase the size but it doesn’t react everywhere. For other words, how do increase the Hitbox for a image without it actually expanding
Ok, first of all. I tried to use different kinds of scaling, margin, padding, etc. but I just don’t have enough experience
You can set the width and height of the image by doing this into your css file :
your class / attriute{
width:50px;
height:50px;
transition: transform .2s; /* Simple animation */
}
And then you can add this property :
your class / attriute:hover{
transform:scale(2.5);
}
Here are a few ways to enlarge the hit-hover area of an element.
Option 1: large transparent border
img {
border: 50px solid transparent;
}
img:hover {
filter: contrast(0.3);
}
<img src="https://via.placeholder.com/150" />
Option 2: add the image in CSS background: url()
div {
width: 300px;
height: 300px;
background: url(https://via.placeholder.com/150) no-repeat 50% 50%;
}
div:hover {
filter: contrast(.3);
}
<div></div>
Option 3: Target a sibling element
.wrap {
position: relative;
}
.wrap div,
.wrap img {
position: absolute;
}
.wrap div {
width: 300px;
height: 300px;
z-index: 2;
}
.wrap div:hover + img {
filter: contrast(.3);
}
<div class="wrap">
<div></div>
<img src="https://via.placeholder.com/150" />
</div>
I'm working on site where I need to animate divs that move over a sibling and apply a mix-blend-mode. I'm working with a library that create 2 divs the wrap around the blending element. The library also adds a transform to the direct parent, which is now breaking the blending. I figured this might relate to a stacking issue, but no matter how many/where I add a transform3d(0,0,0 ) the blend is still broken.
Due to the constraints of the library, I can't do much about of the wrappers or that the background is a sibling of the outermost wrapper.
If you toggle the requiredParent2 transform, everything works (as stated, this transform is added by a required library).
Additionally there are siblings to the blending element (mixBorder, which prevents me from moving the blending to the requiredParents)
Fiddle also here: https://jsfiddle.net/hb7qaod6/5/
.bg,
.root,
.requiredParent1,
.requiredParent2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.requiredParent2 {
transform: translate3d(0px, 2px, 0px);
}
.bg {
background-color: red;
}
.mix,
.mixBorder {
position: absolute;
top: 50%;
left: 50%;
width: 25%;
height: 25%;
}
.mix {
background-color: white;
mix-blend-mode: difference;
}
.mixBorder {
outline: white solid thick;
}
<div class="root">
<div class="bg"></div>
<div class="requiredParent1">
<div class="requiredParent2">
<div class="mix">
</div>
<div class="mixBorder">
</div>
</div>
</div>
I want to have an overlay over my image background, in order to see the white text above the image more clearly.
Why won't this solution work ?
HTML:
<div id="myDiv" class="bg1 image-cover">
<p>H</p>
</div>
CSS:
#myDiv {
width: 300px;
height: 300px;
color: #fff;
position: relative;
font-size: 100px;
font-weight: bold;
}
.image-cover:before {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
.bg1 {
background-size: cover;
background: url('https://2zpt4dwruy922flhqyznip50-wpengine.netdna-ssl.com/wp-content/uploads/2014/12/lock-and-stock-photos.jpg');
}
while this one does:
HTML:
<div id="myDiv" class="bg1">
<div class="image-cover">
<p>H</p>
</div>
</div>
CSS:
...
.image-cover {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
...
I think I am misunderstanding the way :before works, but I am not fan of the second solution as it has one more div than the first.
I'm glad you're already aware of the second solution; this tends to be the approach I normally use (though not for any particular reason). You can simply modify your original approach as follows and get the desired effect:
#myDiv > p {
position: relative;
}
Namely, give the nested <p> tag a non-static position value. See here: CodePen
You can just increase the z-index of the text which is to be overlaid over the image like this:
#myDiv{
z-index: 1;
}
#myDiv p{
z-index: 2; /* should be more than the z-index of the background */
}
Given a container with 3 columns using the css property column-count, and each column is skewed with transform: skewX(-15deg), if I apply another skew operation inside of the columns, starting from the 2nd column the affected elements become invisible.
I made a little example illustrating the problem:
https://jsfiddle.net/yvkeax2s/4/
.outer {
background-color: #aaffaa;
margin: 50px;
height: 200px;
width: 510px;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count-gap: 20px;
-mozcolumn-count-gap: 20px;
-webkitcolumn-count-gap: 20px;
}
.inner {
display: inline-block;
width: 150px;
transform: skewX(-15deg);
background-color: #ff9999;
height: 100%;
}
.unskewed {
transform: skewX(15deg);
}
<div class="outer">
<div class="inner">
<div class="unskewed">skewed 1 <img src="http://placehold.it/40x20"></div>
raw text 1 <img src="http://placehold.it/40x20">
</div>
<div class="inner">
<div class="unskewed">skewed 2 <img src="http://placehold.it/40x20"></div>
raw text 2 <img src="http://placehold.it/40x20">
</div>
<div class="inner">
<div class="unskewed">skewed 3 <img src="http://placehold.it/40x20"></div>
raw text 3 <img src="http://placehold.it/40x20">
</div>
</div>
On Google chrome (Version 51.0.2704.103 m), I get the following:
On Firefox (47.0) I get the correct, expected result:
(The skewed blocks getting truncated seems to be another problem, which I currently don't care about, but might still be noteworthy)
This seems to be a bug in chrome with column-count, but is there a workaround to get this to work?
EDIT: I tested this on Version 53.0.2780.0 canary, and it worked, so the bug seems already fixed for the future.
You can force it to display by changing the .text class to the following:
.text {
transform: skewX(15deg) translateZ(0);
}
But do you need to use the column property? It's currently highly experimental, is full of bugs and requires a lot of browser prefixes, see Can I use.
What you are doing could be achieved in a number of different ways without using the column property. I have modified your fiddle to work without it: https://jsfiddle.net/yvkeax2s/6/
.outer {
background-color: #aaffaa;
margin: 50px;
height: 200px;
width: 510px;
}
.inner {
float: left;
width: 150px;
transform: skewX(-15deg);
background-color: #ff9999;
height: 100%;
margin: 0 10px;
}
.text {
transform: skewX(15deg);
}
I'm trying to make a splash page on my website with 2 large buttons, each a right angled triangle, and both join by the longest side to create a square. Basically I'm looking to find out how to make non-rectangular buttons in css.
I have no idea if this is even possible though, and cannot find anything online explaining similar techniques for buttons which are not rectangular, and i'm not particularly skilled in css. A push in the right direction would be very helpful!
A very old (unanswered question) deserves an answer.
You could use a nested div element in which the parent has an overflow set to hidden, with the child element rotated.
Here is a basic example: (please note: jQuery only required for demo)
$('.tri').click(function() {
alert("triangle clicked!");
});
.wrap {
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
margin: 2px auto;
}
.wrap .tri {
position: absolute;
height: 70%;
width: 70%;
background: tomato;
transform-origin: bottom left;
bottom: 0;
transition: all 0.6s;
left: 0;
cursor: pointer;
transform: rotate(45deg);
}
.wrap2 {
transform: rotate(180deg);
}
.wrap .tri:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="tri"></div>
</div>
<div class="wrap wrap2">
<div class="tri"></div>
</div>