In CSS3, I can easily blur anything with this:
-webkit-filter: blur(5px);
-moz-filter: ...
Right now, I am trying to create a draggable circle on top of text so that anything inside the area of that circle will be blurred:
position:absolute;
-webkit-filter: blur(3px);
background: rgba(255, 255, 255, .3);
This technically should work, but this is what I see instead:
It looks buggy, and the most important part is that the text inside the semi-transparent circle is not blurred. Is there a way to fix it with CSS or JavaScript?
The example: http://jsfiddle.net/hSpHd/
The problem is that there is no suport for masking a filter.
That is, the filter is applied to all the element.
One workaround for this limitation is to have 2 elements, apply the filter to one, and mask it to transparency. Then you have the second (identical) element showing, unfiltered.
The CSS would be:
#one, #two {
position: absolute;
width: 200px;
height: 400px;
font-size: 18px;
}
#one {
top: 20px;
left: 20px;
background: radial-gradient(circle, white 40px, lightblue 45px, transparent 50px);
background-position: -20px -20px;
}
#two {
top: 0px;
left: 0px;
-webkit-filter: blur(2px);
-webkit-mask-position: -20px -20px;
-webkit-mask-size: 200px 400px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 32px, rgba(0, 0, 0, 0) 38px);
background-color: white;
}
abd the HTML is
<div id="one">Lorem ipsum ...
<div id="two">Lorem ipsum ....
</div>
</div>
that is 2 div nested, and with the same content.
Fiddle
Things that I don't like about that:
You need 2 divs with the same content.
You need to synchronize the mask position (in div 2) with the background position (in div1).
You could set the circle in div 2 and maybe move everything at the same time, but then the circle is blurred.
But it's a start :-)
BTW, I have used everywhere the latest syntax of gradients. Since you are limited in compatibility from the beginning, I don't think you should care.
this might work -webkit-tap-highlight-color: transparent;
Related
I have a css code:
-moz-border-radius-topleft:50px;
I get the result:
Is there any possibilities to give like this:
Just to update this, it seems you can in multiple ways.
Lea Verou posted a solution
Here is mine using border-image
Using border image
html
<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>
css
div {
width: 200px;
border-width: 55px;
-moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
margin: 50px auto;
}
Using radial gradient
Lea Verou's solution
html
<div class="inner-round"></div>
css
.inner-round {
background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}
In modern browsers, you can use mask-image:
#aux-container {
width: 100px;
height: 100px;
background: #f00;
-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
<div id="aux-container"></div>
http://jsbin.com/eViJexO/1/
Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.
You can also use and inline svg with a path element:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 10">
<path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>
In this example, I use a cubic bezier curve for the inverted round edge.
With this approach, you can also fill the shape with an image or gradient:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>
This can be done with a radial gradient.
div {
width: 20vw;
height: 20vw;
background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>
Just for fun, additional inverted corners can be added by defining multiple backgrounds - one for each corner:
div {
width: 40vw;
height: 40vw;
position: relative;
background-color: darkblue;
--circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: var(--circle), var(--circle), var(--circle), var(--circle);
background-size: 18vw 18vw;
background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
background-repeat: no-repeat;
}
<div></div>
Update: There are a plethora of options available now. Check out one of the other answers.
Original answer:
Unfortunately, there is currently not a solution based on official or implemented CSS Specs :(
However, as other people have added, there are possible solutions (or cheats?) you can do to achieve the same effect using JS libraries or complex HTML/CSS implementations. I came across this issue whilst looking for a way to make even more complex corners than the OP without using images.
I have filed a bug (Feature Request) over at the webkit site - as there does not appear to be one filed already.
Bug 62458 - Feature Request: Inverse rounded corners
For a plain background-color, you actually can, using pseudo element and box shadow to draw background-color instead, and it will not hide backgrounds of parent's container, you will actually see them through.
What you need is a browser that understands :before/:after and box-shadow :) ...
For IE8 , you can draw hudge borders instead shadows. http://codepen.io/anon/pen/fFgDo
box-shadow approach : http://codepen.io/anon/pen/FwLnd
div {
margin:2em; /* keep it away from sides to see result */
padding:2em;/* for test to size it when empty */
position:relative; /* reference to set pseudo element where you wish */
overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
content:'';
position:absolute;
width:80px;
height:80px;
top:-40px;
left:-40px;
border-radius:100%;
box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}
pseudo element can take any shape, and transform via css and set any where in its element to draw kind of holes through : examples : http://codepen.io/gc-nomade/pen/nKAka
I made an online generator to easily get the code of any combination you want: https://css-generators.com/custom-corners/
A few examples:
.one {
--mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.two {
--mask:
radial-gradient(40px at 0 0,#0000 98%,#000) 0/51% 100% no-repeat,
radial-gradient(40px at 100% 100%,#0000 98%,#000) 100%/51% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.three {
--mask:
radial-gradient(60px at 60px 60px,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000) -60px -60px,
linear-gradient(90deg,#000 20px,#0000 0) -10px 50% /100% calc(100% - 120px + 10px) repeat-x,
linear-gradient( #000 20px,#0000 0) 50% -10px/calc(100% - 120px + 10px) 100% repeat-y;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.four {
--mask: radial-gradient(60px at 0 0,#0000 98%,#000);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.five {
--mask:
radial-gradient(60px at 100% 0,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000),
conic-gradient(from 90deg at 10px 10px,#0000 25%,#000 0) 0 0/calc(100% - 60px + 10px) 100% repeat-y,
conic-gradient(at bottom 10px right 10px,#000 75%,#0000 0) 0 100%/100% calc(100% - 60px + 10px) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.box {
width: 150px;
aspect-ratio:1;
display:inline-block;
background:linear-gradient(red,blue);
}
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
There are ways you could solve this issue by using just CSS - however it would depend on the colour of your background (if solid its easier) if you have a pattern for background it might be slightly more complex.
I cover a basic example here of how to make an Inverse Border Radius in CSS (here). This uses a trick with the size of Border to use the inside, you might have to do some positioning to get it to work properly however as you can see its possible. Especially if you specify a background-color for each span.
If you want all 4 corners you would have to add a separate class for each span inside your div, and each class would simulate a corner, top left, top right etc.
No.
If you have solid background you can probably use css to create the bite.
Otherwise, there isn't anything special you can do beyong using PNGs, much like you'd create round corners before border-radius.
actually there's one way, like this:
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
but as #Domenic says you'll need a solid background, otherwise you'll get this:
<div style=" background-color:#666">
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
I'm creating a homepage using HTML/CSS/Javascript, on this page I have text floating on the top left portion of the screen. I have a number of backgrounds saved from Reddit and a script which randomly selects one upon start, my problem is that because this background can be any colour it is difficult for the text to be readable, so my idea was to blur the background around just the text in order to make it readable. Ideally, it would follow just the text and blur the outline of it but I tried placing it in a box, however, because it uses relative layout it was difficult to have the box fill and blur the minimum space possible.
How can I improve the readability of text by blurring the background just around the text? I'm also open to other suggestions to improve readability (remembering the background changes)
Try using the CSS3 filters: https://www.inserthtml.com/2012/06/css-filters/
The link above should have a guide on how to blur image and you should be able to modify this to fit your requirements.
You have chosen the difficult way. Simply use CSS text-shadow Property. For example if the text is in black, use white shadow color for it.
Example:
body {
background-image: url('https://images.template.net/wp-content/uploads/2015/09/01191816/Perfect-Summer-Background-Free-Download.png');
background-size: cover
}
.text {
color: #000;
font-size: 3em;
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff
}
<div class="text">Some Text</div>
It's a quick n dirty fix... but I usually just add a contrast background color to the text wrapper (like the first one in the example below). You can also use blur filter if you want. I referred to this article frosting glass css filter for the second one. But in the comment of that article, some say there's a trade off of performance.
#bg {
background: url(https://picsum.photos/500/400?image=0) center center no-repeat;
background-size: cover;
width: 500px;
height: 300px;
margin-bottom: 30px;
}
#text-wrap1 {
padding: 30px;
background-color: rgba(255,255,255,0.7);
text-shadow: 1px 1px 1px white;
width: 150px;
}
#text-wrap2 {
padding: 30px;
width: 150px;
position: relative;
}
#text-wrap2 p {
position: relative;
text-shadow: 1px 1px 1px white;
}
#text-wrap2:before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: white;
position: absolute;
left:0;
top:0;
-webkit-filter: url('#blur');
filter: url('#blur');
-webkit-filter: blur(5px);
filter: blur(5px);
background-size: cover;
opacity: 0.7;
}
<div id="container">
<div id="bg">
<div id="text-wrap1">
This is a random paragraph
</div>
</div>
<div id="bg">
<div id="text-wrap2">
<p>This is a random paragraph</p>
</div>
</div>
</div>
JSFiddle of SSCCE here.
I have a fullscreen background-image on html, like
html {
background: url(flowers.png) no-repeat center center fixed;
background-size: cover;
}
And I have a background-color applied to body, and its value has some transparency, like this:
body {
background-color: rgba(255, 255, 255, 0.75);
}
This way, as an overall look of the page, there is an image in the background peeping through a translucent (semi-transparent) overlay (body's background-color).
Then the body contains a table which has a number of columns, due to which horizontal scrolling is enabled.
The problem is that when the user scrolls horizontally, we see that the overlay which is body's background-color ends with the viewport, after which there is naked html's background-image with table-content floating over it.
The question is that how do I make the body stretch to the width of the html?
I tried giving width:100% to body and different positions to html and body, but that didn't help.
Use below css:
body {background:none}
body:before {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.75);
left: 0;
right: 0;
top: 0;
bottom: 0;
content: "";}
As an alternate solution you could use linear-gradient as part of the background declaration on the html element:
html {
background: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
url(flowers.png) no-repeat center center fixed;
background-size: cover;
}
You may wish to check browser support before implementing.
give background-color from body and add that property in table like
.mdl-data-table {
background-color: rgba(255, 255, 255, 0.75);
}
or in this css
.panel-h
background-color: rgba(255, 255, 255, 0.75);
{
#Shivas solution is good but you would just have to add the z-index: -1 on body:before.
On the other hand, why make page horizontaly scrolable when you can just make an element scrollable. Just the table.
Something like this:
https://codepen.io/ivandoric/pen/PRLKXJ
That way whole page doesn't have to scroll, because that could caouse a problem if you have some content above or below the table. It would just dissapear to the left. Which would look ugly.
My suggestion would be to do it like shown in the codepen.
Picture:
What I want:
I want the hover to be registered even when the mouse cursor moves over that blue diamond shaped area in the picture above.
Problem:
Whenever I hover over that blue diamond shaped area, which visually appears to the user as a region in .path_part, the hover rule .folder_path .path_part:hover is not being applied on .part_part.
What I tried:
Set the z-index of .path_part to 10000 and that of .right_arrow to -1. Still no luck.
JSFiddle link
Working fiddle.
First of all, z-index can have a maximum value of 9999.
One thing to note is that only the left portion .right-arrow is overlapping with .path-part, and since the hover handler is on .path-part only that left portion will trigger the hover handler.
Also, for z-index to work both .path-part and .right-arrow need to be positioned, that is, position property set to either relative, absolute or fixed.
Change your CSS to:
.folder_path .right_arrow {
position: relative;
z-index: 1;
display: inline-block;
vertical-align: middle;
height: 35px;
width: 35px;
content: "";
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #000000), to(#000000));
margin-left: -25px;
}
.folder_path .path_part {
position: relative;
display: inline-block;
height: 50px;
line-height: 50px;
vertical-align: middle;
min-width: 40px;
font-size: 20px;
padding: 0 10px;
z-index: 2;
}
$(".path_part").hover(function(){
$(this).next().css({"background": "rgba(255, 255, 255, 0.3)"});
}, function(){
$(this).next().css({"background": "unset"});
});
You can use jquery.This code will work for you.
I have a custom page header set within a WordPress theme which simply displays a background image and some custom text that is added on top of the image.
Currently the header looks like this:
I would like to add a skewed background bar to the text that is imposed on top of the background image so that it looks like this:
The skewed div would give gradient backgrounds to both the header and subheader text. I am trying to created the graient divs using the CSS pseudo selector ::before tag.
My issues are that the text is actually contained within a Container div which sets the width of the containing div.
I am trying to get the Summer Sale div background to but up close to the left hand browser window edge. This would mean it would have to break out of the container. I would like to do the same for the subheader text.
Also I am finding that currently the width of the summer sale spans the whole width of the containing div as pictured. I am not after this. I would like it to only span the width of the summer sale text.
Here are my code snippets:
HTML Code
<div class="container">
<div class="row">
<div class="col span_6">
<h1>Summer Sale</h1>
<span class="subheader">Save big on selected products</span>
</div>
</div>
</div>
CSS Code
#page-header-bg h1::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 6px;
background: rgba(0,0,0,0.4);
border-color: rgba(0,0,0,0.5);
border-right-width: 4px;
border-right-style: solid;
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg)
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.35)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000', GradientType=1 );
}
#page-header-bg .subheader, #page-header-bg h1 {
position: relative
}
#page-header-bg .subheader::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #000;
background: rgba(0,0,0,0.7);
z-index: -1;
padding: 0px 5px 5px 10px;
border-radius: 6px
}
I thought about setting the width of the #page-header-bg h1::before tag however I cannot do that as the text will change and I can;t know what the width will be.
Any help would be greatly appreciated.
I don't know if you made any changes to your site after charlietfl's suggestion but as per the current code in your site you don't need to set the h1 to display: inline-block and width: auto because the h1 and the .subheader are already floated to the left. (Based on your last comment it does seem like you did.)
The reason why the skewed gradient element doesn't expand till left edge of the window is because the .container element has got padding: 0 90px set (meaning, there is a padding of 90px on the left and right). We can easily remove or override this setting to fix the issue but that would result in a lot of alignment changes within your webpage. Hence the simplest option would be to add a negative left position (equal to the padding) to the h1 and .subheader elements like below:
#page-header-bg .subheader,
#page-header-bg h1 {
left: -90px;
}
Alternately, you could also use transform: translate(...) to shift the h1 and .subheader to the left by the same no. of pixels as the padding on .container. Generally, I would prefer the positioning approach because transforms aren't supported by older browsers but since you are already using skew transforms, either of the approaches should be fine.
#page-header-bg .subheader,
#page-header-bg h1 {
transform: translate(-90px);
}
I have not added any demo because there are quite a lot of settings that require to be copied from the actual webpage.
Change the h1 to display:inline-block and width:auto so it doesn't run full width and your :before should then adjust also based on text width