I would like to have a mask that's fading out 16px from both sides.
So like: 16px fading in - white - 16px fading out.
What I got is this: DEMO
-webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent, white);
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-size: 16px 40px, 16px 40px;
-webkit-mask-position: 0 0, 100% 0;
-webkit-mask-origin: padding-box, padding-box;
The only problem is that it's not visible in the middle. How can i fix this?
One option is to add a third gradient (which will actually be uniformly white) covering the whole surface, and use -webkit-mask-composite: copy to make sure the other two gradients replace the parts on the sides:
-webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent, white), linear-gradient(to right, white, white);
-webkit-mask-composite: copy;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
-webkit-mask-size: 16px 40px, 16px 40px, 100% 100%;
-webkit-mask-position: 0 0, 100% 0, 0 0;
-webkit-mask-origin: padding-box, padding-box, padding-box;
Demo: http://codepen.io/anon/pen/crEyL
Note that of course, all of this only works on WebKit browsers.
Try this.
Here is the codepen for demo CODEPEN
Also I have attached the code, If you have any doubt let me know.
html
<div class="div">
<span>Example Program</span>
</div>
CSS
.div {
box-shadow: 0 16px 0px 0px white, 0 -16px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
-webkit-mask-position: 0 0, 100% 0;
-webkit-mask-size: 16px 40px, 16px 40px;
width: 30%;
height: 40px;
margin: 50px;
background: red;
}
span {
display: block;
background: rgb(255, 255, 255);
height: 40px;
}
This did the trick. Pretty hacky solution.
-webkit-mask-image: linear-gradient(white, white),linear-gradient(to right, white, transparent), linear-gradient(to left, white, transparent);
-webkit-mask-repeat: repeat,no-repeat, no-repeat;
-webkit-mask-size: 100% 100%,16px 100%, 16px 100%;
-webkit-mask-position: 0 0,0 0, 100% 0;
-webkit-mask-origin: padding-box, padding-box, padding-box;
-webkit-mask-composite: source-out;
Solution demo
Related
I am applying this CSS rule to some divs on a web application. Basically I need to display a border around the div, but without using the border property.
It works on every browser but Firefox. Can anyone help me understand what I'm doing wrong?
div {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image: radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
background-image: -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
background-position: top, right, bottom, left;
background-size: 1px 1px, 1px 1px;
background-repeat: repeat-x, repeat-y;
}
<div></div>
https://jsfiddle.net/za74L1st/1/
Many thanks!
This a job for linear-gradient not radial-gradient.
.box {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image:
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede);
background-position: top, right, bottom, left;
background-size: 100% 1px,1px 100%;
background-repeat: no-repeat;
}
<div class="box"></div>
You are for sure facing subpixel rendring issue since you are defining very small circles having less than 1px radius. If you increase the values you will see something on Firefox:
.box {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image:
/* doesn't matter what you put here as value since the background-size is already small */
radial-gradient(#dedede 51px, transparent 51px),
radial-gradient(#dedede 50px, transparent 50px),
radial-gradient(#dedede 99px, transparent 5px),
radial-gradient(#dedede 54px, transparent 54px);
background-position: top, right, bottom, left;
background-size: 1px 1px;
background-repeat: repeat-x, repeat-y;
}
<div class="box"></div>
I liked this book design in iBooks and have been wondering can it be easily made with css?
Original photo
have you tried gradients and shadows ?
.cover {
background: linear-gradient(to right, rgb(60, 13, 20) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 17px, transparent 22px), url(https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg);
box-shadow: 0 0 5px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
margin: auto;
border-radius: 5px;
width: 389px;
height: 500px;
}
body {
min-height: 100vh;
display: flex;
}
<div title=" Don't make me think " class="cover"></div>
I think this could be pretty easily done with gradients in CSS. Here's a (very rough) example fiddle: https://jsfiddle.net/6yok9c4w/
HTML:
<div class="overlay">
</div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg" />
CSS:
.overlay {
width: 400px;
height: 500px;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}
img {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
I used this tool to generate the gradient: https://cssgradient.io/
With more effort and tweaking, I think you can get really close to the original.
I have this code and I want to add weight to my curvy text-underline since it is too thin to actually have a visible impact. I've read about using border-bottom to add weight, but then I would not be able to make it curvy. Does anyone have any ideas on how to fix this?
.underline-yellow{
text-decoration: underline;
text-decoration-color: #FFBE00;
text-decoration-style: wavy;
padding-bottom:2px;
color: black;
}
There is no way set a text underline thickness without changing the font properties.
You can play with background-image and make a kind of wavy style.
body {
background: #ccc;
}
.underline-yellow{
color: black;
background-image: linear-gradient(45deg, transparent 65%, yellow 80%, transparent 90%), linear-gradient(135deg, transparent 5%, yellow 15%, transparent 25%), linear-gradient(135deg, transparent 45%, yellow 55%, transparent 65%), linear-gradient(45deg, transparent 25%, yellow 35%, transparent 50%);
background-repeat: repeat-x;
background-size: 20px 5px;
background-position: 0 100%;
padding-bottom: 3px;
}
<span class="underline-yellow">My decorated text</span>
Please try this:
.underline-yellow{
text-decoration: none;
color: black;
box-shadow: 0 1px 0 rgba(0,0,0,0), 0px 1px 0 #f7eb9a;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0), 0px 1px 0 #f7eb9a;
}
Pretty sure this is possible with CSS3, but I can't figure out how. Given this design pattern
create the horizontal hash marks in CSS3 that expands or contracts to fill a responsive container (as background?).
Chris Coyier proffered this Vertical Stripe CodePen, but how can it be revised to re-create the pattern above?
HTML
<div class="module">
<h2 class="stripe-6">Vertical</h2>
<p>You could do some schenigans where you have a big rotated element within
this header area (with hidden overflow) that has these stripes. That way
you could get away with not using repeating-linear-gradient.</p>
</div>
CSS
.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
}
.stripe-6 {
color: black;
background: repeating-linear-gradient(
to right,
#f6ba52,
#f6ba52 10px,
#ffd180 10px,
#ffd180 20px
);
}
Here's a larger, higher-contrast image to see the pattern better (thanks #Martin!)
Yes, it is definitely possible to create this pattern using linear-gradient background images. Unlike the pattern generated by Chris Coyier, this would require two linear gradients as there are two stripes of different heights and gaps.
.bg-pattern{
height: 50px;
width: 100%;
background-color: rgb(115,199,192);
background-image: linear-gradient(to right, rgba(0,0,0,0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0,0,0,0.25) 12px, rgba(0,0,0,0.25) 14px, transparent 14px, transparent 20px, rgba(0,0,0,0.25) 20px, rgba(0,0,0,0.25) 22px, transparent 22px, transparent 28px, rgba(0,0,0,0.25) 28px, rgba(0,0,0,0.25) 30px, transparent 30px, transparent 36px, rgba(0,0,0,0.25) 36px, rgba(0,0,0,0.25) 38px, transparent 38px);
background-repeat: repeat-x;
background-size: 44px 30px, 44px 20px;
background-position: 8px 0px;
border-top: 2px solid rgba(0,0,0,0.25);
}
<div class='bg-pattern'></div>
Below snippet has the same pattern added into your code:
.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
}
.module > h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
}
.module > p {
padding: 0 1rem;
}
.stripe-6 {
color: black;
height: 50px;
background-color: rgb(115, 199, 192);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0, 0, 0, 0.25) 12px, rgba(0, 0, 0, 0.25) 14px, transparent 14px, transparent 20px, rgba(0, 0, 0, 0.25) 20px, rgba(0, 0, 0, 0.25) 22px, transparent 22px, transparent 28px, rgba(0, 0, 0, 0.25) 28px, rgba(0, 0, 0, 0.25) 30px, transparent 30px, transparent 36px, rgba(0, 0, 0, 0.25) 36px, rgba(0, 0, 0, 0.25) 38px, transparent 38px);
background-repeat: repeat-x;
background-size: 44px 30px, 44px 20px;
background-position: 8px 0px;
border-top: 2px solid rgba(0, 0, 0, 0.25);
}
<div class="module">
<h2 class="stripe-6">Vertical</h2>
<p>You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.</p>
</div>
I am trying to build a box, and I want that each line/div to be fully transparent in the middle and opaque at the edges. (In the image, the circled parts should be transparent...) I wrote something like this:
.box {
height: 100px;
width: 100px;
border-left: solid green;
border-right: solid green;
border-top: solid red;
border-bottom: solid red;
}
but, of course, it does not give me the result I want.... I can not figure out any way to fix that "opaque-transparent" problem.. Any help? Thanks in advance!
You need to draw your borders via a gradient eventually: (untill border gradient is avalaible through all major browser ... chrome can do it for ages, FF still not )
.box {
height: 100px;
width: 100px;
padding:3px;
background:
linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) top left no-repeat,
linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) bottom left no-repeat,
linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%) top left no-repeat,
linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%)top right no-repeat;
background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%;
}
<div class="box"></div>
Box-shadow on a known sized box can do some things too :
.boxbis {
margin: 3em;
height: 200px;
width: 200px;
background: gray;
box-shadow: 70px 70px 0 -60px turquoise, 70px -70px 0 -60px pink, -70px 70px 0 -60px tomato, -70px -70px 0 -60px orange, inset 0 0 0 3px white
}
<div class="boxbis">
<div>