I would like the bottom wave effect on top too! Can anyone show me how it's done.
The effect should look the same on the top of where it is placed on the top as well as the bottom.
I am actually trying to do is break a image top and bottom with waves, so that partial top and bottom of image disappears in waves.
#import url(https://fonts.googleapis.com/css?family=Montserrat);
//variables
$background: #FFF;
body {
background-color: $background;
color: #ffF;
font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 2em;
margin: 0;
padding: 0;
}
.wave{
text-align: center;
background: linear-gradient(to bottom, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
.content {
color: #333;
font-size: 0.8em;
padding: 1em;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Rounded Borders</title>
</head>
<body>
<div class="wave">I'm wavy</div>
<div class="content">
With two special pseudo elements (before and after) and the power of repeating css3 radial gradients this ruffle like waves are done much easier than before without an image file.
</div>
</body>
</html>
You can do one part using the pseudo elements and the other using multiple background:
.wave{
text-align: center;
background:
radial-gradient(circle at 10px 15px, white 12px, transparent 13px) left 0 bottom -5px/40px 20px repeat-x,
radial-gradient(circle at 10px -5px, transparent 12px, white 13px) left 0 bottom -10px/20px 20px repeat-x,
linear-gradient(to bottom, sandybrown, chocolate);
padding:40px 0;
position: relative;
}
.wave::before,
.wave::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
background-repeat: repeat-x;
transform:scaleY(-1);
}
.wave::before{
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
<div class="wave">I'm wavy</div>
Related
how can I make something like this, but on all 4 sides of the border (top, right, left, bottom)?
.zigzag {
position: relative;
padding: 4px 4px 20px 4px;
background: lightgray;
}
div>div {
text-align: center;
height: 200px;
}
.zigzag:after {
background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
}
<div class="zigzag">
<div>ZigZag</div>
</div>
Here is a shadow:
So I need this to be a shadow which appears on button hover. I know its css but I didn't manage to make any blur:
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
border-radius: 100px;
filter: blur(5px);
So, two basic questions:
Is it possible to make this blurred thing with CSS?
If yes, is it possible to make it a button shadow? Or how else can I solve this? One thought was to just make a png with absolute positioning, which is hacky a bit
update
So the final result I want achieve looks something like this:
The shadow repeats button gradient which is
linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
New answer
I have made an online generator that helps you get a gradient shadow easily: https://css-generators.com/gradient-shadows/
All you have to do is to adjust a few values and get the code:
button {
margin: 50px;
border-radius: 999px;
padding: 10px 30px;
font-size: 25px;
color: #fff;
text-align: center;
line-height: 50px;
border: none;
background: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
position: relative;
transform-style: preserve-3d;
}
button::before {
content: "";
position: absolute;
inset: -10px;
background: inherit;
filter: blur(20px);
transform: translate3d(15px,15px,-1px);
border-radius: inherit;
pointer-events: none;
}
<button >
this a button
</button>
More detail: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
Old answer
What about multiple box-shadow:
.box {
margin:50px;
width:100px;
height:50px;
border-radius:20px;
color:#fff;
text-align:center;
line-height:50px;
box-shadow:
20px 5px 40px #CF77F3,
0px 5px 40px #009BFF,
-20px 5px 40px #2AC9DB;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
}
<div class="box">
this a button
</div>
You can get this effect in modern browsers using a pseudo element with the same background, and a filter blur applied on it.
To get compatibility with IE, you can set also a pseudo, and to get the blurred borders use an inset shadow. At least in Chrome, there is a small left over of the border that still can be seen.
.test {
margin: 20px;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);;
border-radius: 50px;
display: inline-block;
height: 100px;
width: 200px;
position: relative;
border: solid 4px black;
}
#test1:after {
content: "";
position: absolute;
background-image: inherit;
border-radius: inherit;
width: inherit;
height: inherit;
transform: translate(0px, 20px) scale(1.1);
z-index: -1;
filter: blur(14px);
}
#test2:after {
content: "";
position: absolute;
border-radius: 90px;
width: 250px;
height: 150px;
z-index: -1;
top: 1px;
left: -25px;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
box-shadow: inset 0px 0px 25px 18px white;
}
<div class="test" id="test1">
</div>
<div class="test" id="test2">
</div>
Is it possible to create two arrows like the photo below with css or I have to use a png or svg?
So far
HTML
a {
position: relative;
display: block;
padding-left: 30px;
line-height: 45px;
height: 45px;
}
a:after,
a:before {
right: 100%;
top: 26px;
border-left: 1px solid black;
content: " ";
height: 30px;
width: 25px;
position: absolute;
pointer-events: none;
left: 7px;
}
a:after {
-webkit-transform: rotate(135deg);
left: -11px;
}
a:before {
-webkit-transform: rotate(45deg);
top: 5px;
}
Next
jsfiddle
I can't figure how to put another pair of borders.
Thanks in advance
With a bit of tinkering of your example, it's possible, but you'd probably be better off using another method to draw it or using an icon or icon font.
Here's the fiddle
Achieved with
transform: skew();
rather than rotate.
It's possible, but I would just use a SVG in this case:
http://jsfiddle.net/6v7Np/
HTML
<div class="arrow_box"></div>
<div class="arrow_box alt"></div>
CSS
.arrow_box {
position: relative;
background: #fff;
top:50px;
left:60px;
}
.arrow_box.alt {
left:80px;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 30px;
margin-top: -30px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000;
border-width: 31px;
margin-top: -31px;
}
With gradients:
a{
position: relative;
padding-left: 40px;
}
a::before{
content: '';
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
background-image:
linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px);
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 0% top, 0% bottom, 50% top, 50% bottom;
/* distance ^ ^ */
}
http://jsfiddle.net/E8sRw/
That is my css:
width: 0;
height: 0;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
border-left: 31px solid #0caa3f;
Is it possible to make border-left have a gradient?
Demo: http://jsfiddle.net/abhitalks/fg7Ex/3/
#grad {
width: 60px;
height: 60px;
position: absolute;
top: 32px;
left: 32px;
clip: rect(auto 30px 60px auto);
}
#grad:after {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, .7);
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
-webkit-transform: rotate(-45deg);
background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(.75, #52882d), color-stop(0, #eee));
border: 1px solid #fff;
}
<div id="grad"></div>
Shamelessly picked up from here: https://gist.github.com/distilledhype/582201
You can check the same kind of question in stackoverflow for solution right border gradient
Here is Jsfiddle Demo
There is no cross-browser css solution as it only supports chrome and firefox. So I recommend using div as parent and assigning it css:
.gradient {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(173, 14, 173)), color-stop(0.67, rgb(255, 0, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(173, 14, 173) 33%, rgb(255, 0, 255) 67%);
padding: 2px;
}
.gradient > div {
background: #fff;
}
here is html:
<div class="gradient">
<div>text in div</div>
</div>
How about using a box-shadow on a pseudo element of the div. Something like
FIDDLE
div:before
{
content: '';
display: block;
height: 60px;
width: 3px;
box-shadow: -3px 2px 2px 0 rgba(0,0,0,.5);
left: -30px;
top: -31px;
position: relative;
}
--color:#777;
margin:0 1%;
padding:0 5%;
background:linear-gradient(to right, transparent, var(--color) 5%, transparent 5%, transparent 95%, var(--color) 95%, transparent);
Is it possible to create this shape in CSS3? How?
I am stuck: http://dabblet.com/gist/2962169
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
transform: skew(-20deg);
}
<h1>TEST</h1>
You mean somthing like this
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
width:500px;
height:40px;
border-right: 40px solid transparent;
}
h1:after{
position:absolute;
width: 80px;
border-top: 40px solid #434b82;
margin-left:500px;
border-right: 20px solid transparent;
content:"";
}
<h1></h1>
We can use linear-gradient() to draw this shape on rectangular element.
This trick uses the idea of dividing whole shape in two parts and then draws each part on the background independently.
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
}
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
border-radius: 30px 0 0 30px;
line-height: 50px;
padding: 0 25px;
height: 50px;
width: 200px;
color: #fff;
}
<div>
Some Text Here...
</div>