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);
Related
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>
I have a semi-round button. But I don't know how to bend it for my semi-round button in it's border.
.semi-circle {
display: inline-block;
padding: 9px 16px;
border-radius: 999px !important;
text-align: center;
/*border: 10px solid transparent;*/
/* -moz-border-image: -moz-linear-gradient(right, #FC913A 0%, #FF4E50 100%);
-webkit-border-image: -webkit-linear-gradient(right, #FC913A 0%, #FF4E50 100%);
border-image: linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
/*border-image-slice: 1;*/
border: linear-gradient(to right, green 0%, blue 100%);
/*background-image: linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -o-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -moz-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -webkit-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -ms-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
*/
}
Forgive me for not being able to embed the image because of lack of reputation. Thx for the stack overflow community for its great service.
Here is solution. It works fine in webkit. In other browsers text color is solid.
HTML
<button data-text="Round button"></button>
<button class="active" data-text="Active round button"></button>
CSS
body {
background: #384041;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
button {
display: inline-block;
border: none;
outline: none;
appearance: none;
background: red;
position: relative;
z-index: 3;
height: 60px;
border-radius: 30px;
padding: 0 21px;
font-size: 21px;
box-shadow: -1px -1px 1px 0 black;
background: #4f4f4f;
}
button:before {
content: attr(data-text);
min-width: 144px;
z-index: -1;
border-radius: 27px;
color: #4f4f4f;
}
#media screen and (-webkit-min-device-pixel-ratio:0) { button:before {
background: #4f4f4f;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}}
button:after {
content: '';
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
z-index: -2;
border-radius: 30px;
background: #151515;
}
button:hover {
cursor: pointer;
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
}
.active {
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
}
.active:before{
color: #2084c3;
}
#media screen and (-webkit-min-device-pixel-ratio:0) { .active:before {
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}}
Demo
There are probably better ways to do this, but without further thinking I'd try something like this:
<style type="text/css">
.semi_outer {
padding: 2px;
text-align: center;
border-radius: 11px;
background: linear-gradient(to right, #0f0, #00f);
}
.semi_inner {
margin: 2px;
border-radius: 7px;
background-color: #000;
color: #0f0;
}
.semi_outer:hover {
background: linear-gradient(to right, #c00, #0c0);
}
.semi_outer:active {
background: linear-gradient(to right, #f00, #0f0);
}
</style>
<div class="semi_outer">
<div class="semi_inner">
semi_inner
</div>
</div>
This is your semi-round button . may be it will be helpfull for you.
.outer {
padding: 2px;
text-align: center;
border-radius: 11px;
background: linear-gradient(to right, #0f0, #00f);
width: 200px;
height:30px;
}
.inner {
margin: 3px;
border-radius: 7px;
background-color: #000;
color: #0f0;
height:25px;
}
.outer:hover {
background: linear-gradient(to right, #c00, #0c0);
}
.outer:active {
background: linear-gradient(to right, #f00, #0f0);
}
<div class="outer">
<div class="inner">
BUTTON
</div>
</div>
I have created a shape which represents a page with a shadow that gets bigger towards the bottom.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
I need this to be rotated but when i try to add transform: rotate(10deg), the box-shadow illusion gets ruined and goes on top of the parent layer.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: rotate(10deg);
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
I have found this question: Which CSS properties create a stacking context? but there doesn't seem to be a proposed solution for my requirement.
Would there be any good solutions which would work in my case. I do not mind if they are SVG, filter, canvas or any thing else as long as it is supported reasonably well.
If you use another div it fixes the problem that you are experiencing, so that the background colour is on the inner div and the rotate is on the outer div.
Else you might need to use another method to get the same result.
body {
background: #dddddd;
}
.two{
background: white;
height: 300px;
width: 300px;
padding: 10px;
}
div.one {
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
transform: rotate(10deg);
}
div.one:before,
div.one:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div.one:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="one">
<div class="two">
</div>
</div>
Note: This answer does not describe how to fix the stacking context problem that is seen in your approach. This just provides a couple of alternate approaches that could be used to achieve a similar effect. Advantage of these approaches is that they should work in IE10+ and does not require any extra elements.
I would still recommend vals' answer if IE support is not mandatory.
Method 1: Perspective Transform
This is almost similar to the one that you had used except that it uses a single pseudo-element rotated with perspective to produce the shadows. Since only one pseudo-element is utilized, the other pseudo can be used to add a white foreground above the shadows.
body {
background: #dddddd;
}
div {
position: relative;
height: 300px;
width: 300px;
padding: 10px;
margin: 40px auto;
transform: rotate(10deg);
}
div:before,
div:after {
position: absolute;
content: '';
top: 0px;
}
div:before {
height: 100%;
width: 100%;
left: 0px;
background: white;
}
div:after {
height: 98%;
width: 97%;
left: 1.5%;
transform-origin: bottom;
transform: perspective(125px) rotateX(1deg);
box-shadow: 10px 0px 10px rgba(0, 0, 0, .5), -10px 0px 10px rgba(0, 0, 0, .5);
z-index: -1;
}
<div></div>
Method 2: Linear Gradients
We can use linear-gradient background images and position them appropriately to produce an effect similar to the one produced by the box-shadows. But as you can see in the output, it doesn't quite match up to a shadow because the blurred areas are not the same.
Here, we make use of the following:
One small angled linear gradient image (to top left) to produce the shadow on the left side of the box.
Another small angled linear gradient image (to top right) to produce the shadow on the right side of the box.
A large linear-gradient image for the white colored area (which is almost a solid color). A gradient is used here instead of a solid color because the size of a gradient image can be controlled.
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%);
background-size: 280px 100%, 10px 97%, 10px 97%;
background-position: 10px 0px, left top, right top;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
The bottom of the gradient still doesn't get the blur that is seen in the box-shadow output. If needed, this can be achieved to some extent by adding even more gradients like in the below snippet.
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 60%), linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 70%);
background-size: 280px 100%, 10px 97%, 10px 97%, 10px 2.5%, 10px 2.5%;
background-position: 10px 0px, left top, right top, left 99.25%, right 99.25%;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
When you go into the transforms world, the transforms themselves will solve some of the problems that they create.
You can solve this with the 3d equivalent of z-index, the Z coordinate
Unfortunately, this won't work in IE (I believe until they support preserve 3d)
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: translateZ(1px) rotate(10deg);
transform-style: preserve-3d;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: translateZ(-1px) rotate(1.5deg);
}
div:after {
transform: translateZ(-1px) rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></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/
I'm using the following code for pure css speech bubble but however i still can not add border to the whole bubble include the arrow at down side
HTML
<div class="bubble">Welcome</div>
CSS Code
.bubble {
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}
Results
if i added border code border:2px solid #493A34; at class .bubble
Results
Problem
How to add the border to the arrow as well ? ~ any idea
EDIT: Here is the fiddle link with box-shadow applied.
You can make a slightly larger brown arrow with the :after psudo-element, and position it behind the smaller green arrow (made with :before), and down 2px to create a border effect.
here's the fiddle: http://jsfiddle.net/rhGCb/
And the css:
.bubble {
border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;
}
.bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}
A bit of a trick, but you can add a box-shadow that behaves as a border (meaning, blur is set to 0):
.speech-bubble{
/* ... */
/* 2px = border-width #333 = border-color */
-webkit-box-shadow:0 0 0 2px #333;
box-shadow:0 0 0 2px #333;
}