I'm trying to do a gradient on a button but I can't make it have the same gradient as the other part of the button.
I tried adding a gradient inside a gradient but it doesn't seems to work and can't find a solution for it.
This the code I'm using:
button{
color: white;
padding: 3px 3px 3px 0px;
border: 0px;
font-size: 20px;
width: 200px;
text-align: right;
background: linear-gradient(50deg , transparent 50%, rgb(149, 151, 155) 0%) left no-repeat, linear-gradient(rgb(200, 205, 212), rgb(149, 151, 155)) 30px 0 no-repeat;
background-size: 30px 100%, 100% 100%;
position: relative;
cursor: pointer;
}
<button>Meet the Team</button>
Is there a way to solve this problem?
Thanks in advance
Consider a skew transformation on a pseudo element where you apply the gradient. Since it's a top/bottom direction, the gradient will not get affected by the skewing
button{
color: white;
padding: 3px 3px 3px 0px;
border: 0px;
font-size: 20px;
width: 200px;
text-align: right;
position: relative;
cursor: pointer;
overflow:hidden;
background:none;
z-index:0;
}
button::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
transform-origin:top;
transform:skewX(50deg);
background:linear-gradient(rgb(200, 205, 212), rgb(149, 151, 155));
}
<button>Meet the Team</button>
For another direction, you may need to adjust the degree of the gradient:
button{
color: white;
padding: 3px 3px 3px 0px;
border: 0px;
font-size: 20px;
width: 200px;
text-align: right;
position: relative;
cursor: pointer;
overflow:hidden;
background:none;
z-index:0;
}
button::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
transform-origin:top;
transform:skewX(50deg);
background:linear-gradient(-50deg,purple,red);
}
<button>Meet the Team</button>
That's because you are already using the linear-gradient property as a trick to create a triangle end on your button.
You can't use the same property multiple times. If you want a triangle end, maybe stick with flat color on your button.
Related
I am trying to implement bracket at bottom of a div. here my shadow will be like bracket .
I tried below section. Bur problem is it's taking full left right section. I want like this image. any suggestion will be appreciable.
div{
-webkit-box-shadow:0px 1px 1px #de1dde;
-moz-box-shadow:0px 1px 1px #de1dde;
box-shadow:0px 1px 1px #de1dde;
height:100px;
}
<div>wefwefwef</div>
You can use gradient for this:
div {
margin: 20px;
width: 300px;
height: 50px;
padding:3px;
background:linear-gradient(to right,blue 3px,transparent 0px,transparent calc(100% - 2px),blue 0) 0 100%/ 100% 30px no-repeat,
linear-gradient(to top,blue 2px,transparent 0);
}
<div>wefwefwef</div>
Or a pseudo element like this:
div {
margin: 20px;
width: 300px;
height: 50px;
padding:3px;
position:relative;
}
div:before {
content:"";
position:absolute;
bottom:0;
height:20px;
left:0;
right:0;
border:2px solid blue;
border-top:none;
}
<div>wefwefwef</div>
Or border-image with gradient:
div {
margin: 20px;
width: 300px;
height: 50px;
padding:3px;
border: 3px solid transparent;
border-image: linear-gradient(to bottom,transparent 60%,blue 0) 10;
}
<div>wefwefwef</div>
You can do it with the :before and :after pseudo-elements:
div {
position: relative;
-webkit-box-shadow: 0px 1px 1px #de1dde;
-moz-box-shadow: 0px 1px 1px #de1dde;
box-shadow: 0px 1px 1px #de1dde;
height: 100px;
}
div:before,
div:after {
content: "";
position: absolute;
bottom: 0;
width: 1px; /* adjust */
height: 10px; /* adjust */
background: #de1dde;
}
div:before {
left: 0;
}
div:after {
right: 0;
}
<div>wefwefwef</div>
Is it possible to add a blur to only one side of a div using box-shadow?
What I am trying to achieve is a shadow with no width, just blur on only one side of a div. In my example I try to apply it to the bottom but the side really shouldn't matter.
I tried have using box-shadow: 0px 5px 5px -5px #000000; however using this method the shadow does not cover the whole length on the bottom of the div.
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box {
width: 100%;
height: 100%;
box-shadow: 0px 5px 5px -5px #000000;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
Only HTML and CSS solutions please.
You could use an after element and stretch it a little:
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box:after {
content:'';
display:block;
position:absolute;
z-index:0;
top:0;
left:-4px;
right:-4px;
bottom:0;
box-shadow: 0px 5px 5px -5px #000000;
}
#box {
width: 100%;
height: 100%;
position:relative;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
try this for bottom positioned box-shadow
.your_class {
box-shadow: 0 8px 6px -6px black;
}
You can also read https://developer.mozilla.org/en/docs/Web/CSS/box-shadow to understand how the box-shadow works
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box {
width: 100%;
height: 100%;
border-bottom: 2px solid #ccc;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
There is no readily available way to do precisely what you seek, at least not using a single box-shadow. Remember, the CSS box-shadow property accepts multiple comma-delimited entries, so this is your best bet if you're committed to using them. In the example below, I'm simply using two copies of the same box-shadow value with one difference: I've offset the first horizontally toward the left by 2.5px and the other toward the right by positive 2.5px. Additionally, I've added opacity to the color (due to mitigate the darkening effect of overlapping shadows).
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #EEE;
}
#box {
width: 100%;
height: 100%;
box-shadow: -2.5px 5px 5px -3px rgba(0, 0, 0, 0.50),
2.5px 5px 5px -3px rgba(0, 0, 0, 0.5);
background-color: Yellow;
}
<div id="bg">
<div id="box"></div>
</div>
Try this
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box:after {
content:'';
display:block;
position:absolute;
z-index:0;
bottom:0px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #9C9C9C),
color-stop(0.22, #EEEEEE)
);
background-image: -o-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -moz-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -webkit-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -ms-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: linear-gradient(to bottom, #9C9C9C 0%, #EEEEEE 22%);
height:10px;
width:100%;
}
#box {
width: 100%;
height: 100%;
position:relative;
background: yellow;
}
https://jsfiddle.net/Lfa4z5b4/
I've created a "tag" shape using CSS (the rectangular base + triangle). Since I have more than one tag shape I wanted to add the hover property to the class which defines that shape and that way automatically attach hover to all tags. However, it appears its not working and the only way to apply hover is by id. Why is that? There surely must be an easier way to apply hover to several elements at once.Second question, since tag shape is built using two shapes, how should the hover color transition should be made?
JSfiddle
#q{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
#q:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: background 0.3s;
}
#q:hover{
background: green;
border-left:18px solid lightblue;
}
HTML:
<span class="pricetag-right" id="q">tag is here!</span>
DEMO PAGE
#q{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
#q:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#q:hover{
background: green;
}
#q:hover:after{
border-left-color:green;
}
You needed to set the transition of the :after to border and not background, since it's the border property being transitioned.
Here's a fiddle based on vsync's with class selectors:
https://jsfiddle.net/ajanini/9z3Lvp90/
.pricetag-right{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
.pricetag-right:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
.pricetag-right:hover{
background: green;
}
.pricetag-right:hover:after{
border-left-color:green;
}
I am trying to replicate as pixel perfect as I can get and im having trouble trying to do the shadow on the right. Is this possible with css?
CSS:
*{margin:0px;padding:0px;}
html {
width:100%;
height:100%;
text-align: center;
}
.bold {
font-weight:700;
}
#ribbon {
padding: .34em 1em;
margin: 0;
margin-top: 5%;
position:relative;
color: #000;
text-align: center;
letter-spacing:0.1em;
padding-top:12px;
padding-bottom:12px;
display: inline-block;
background: #ffd82b;
z-index:100;
box-shadow: 0 7px 0px -2px #ebeced;
}
#ribbon:after {
content: "";
width:3.2em;
bottom:-.5em;
position:absolute;
display:block;
border: .9em solid #ffd82b;
box-shadow: 0 7px 0px -2px #ebeced;
z-index:-2;
}
#ribbon:after {
right: -4.3em;
border-left-width: .75em;
border-right-color:transparent;
}
#content:after {
content:"";
bottom:-.5em;
position:absolute;
display:block;
border-style:solid;
border-color: #fc9f42 transparent transparent transparent;
z-index:-1;
}
#content:before {
content:"";
top:-.5em;
transform: rotate(90deg);
position:absolute;
display:block;
border-style:solid;
border-color: #fc9f42 transparent transparent transparent;
z-index:-1;
}
#content:before {
left: 0;
border-width: .5em 0 0 .5em;
}
#content:after {
right: 0;
border-width: .5em .5em 0 0;
}
HTML:
<div id="ribbon">
<span id="content"><span class="bold">Special Offer:</span> Recieve bonus rewards points for signing up</span>
</div>
Or here's a jsfiddle:
http://jsfiddle.net/k0a6jhv6/
You can make this ribbon without using box-shadows, only with borders, z-index and pseudo elements :
DEMO
output :
.ribbon{
font-size:20px;
position:relative;
display:inline-block;
margin: 2em 1em;
text-align:center;
}
.text{
display:inline-block;
padding:0.5em 1em;
min-width:20em;
line-height:1.2em;
background: #FFD72A;
position:relative;
}
.ribbon:after,.ribbon:before,
.text:before,.text:after,
.bold:before{
content:'';
position:absolute;
border-style:solid;
}
.ribbon:before{
top:0.3em; left:0.2em;
width:100%; height:100%;
border:none;
background:#EBECED;
z-index:-2;
}
.text:before{
bottom:100%; left:0;
border-width: .5em .7em 0 0;
border-color: transparent #FC9544 transparent transparent;
}
.text:after{
top:100%; right:0;
border-width: .5em 2em 0 0;
border-color: #FC9544 transparent transparent transparent;
}
.ribbon:after, .bold:before{
top:0.5em;right:-2em;
border-width: 1.1em 1em 1.1em 3em;
border-color: #FECC30 transparent #FECC30 #FECC30;
z-index:-1;
}
.bold:before{
border-color: #EBECED transparent #EBECED #EBECED;
top:0.7em;
right:-2.3em;
}
<p class="ribbon">
<span class="text"><strong class="bold">Special Offer:</strong> Recieve bonus rewards points for signing up</span>
</p>
What if you add a new element to create missing shadow?
#abc {
display:inline-block;
border: .9em solid #ebeced;
border-right-color:transparent;
position:absolute;
right:-73px;
z-index:-3;
bottom:-12px;
}
http://jsfiddle.net/k0a6jhv6/9/
another solution, use span:after inside #content
#content span:after {
content:'';
display:block;
border: .9em solid #ebeced;
border-right-color:transparent;
position:absolute;
right:-73px;
z-index:-3;
bottom:-12px;
}
http://jsfiddle.net/k0a6jhv6/11/
I've been looking on several threads on stackoverflow, but cant seem to make it work. What i've found out is that i need to apply relative position on the parent div and then absolute on the child text, but this is not working? what am i doing wrong`
.the-image {
position: relative;
border: 1px solid;
width: auto;
}
.the-h3 {
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
.the-h3 span {
color: #ffffff;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
<div class="the-image">
<img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img>
<h3 class="the-h3"><span>TEST</span></h3>
</div>
You are giving the h3 a top property which is more than the image is high.
Simply lower that value to something more fitting:
.the-image {
position: relative;
border: 1px solid;
width: auto;
}
.the-h3 {
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:10px;
}
.the-h3 span {
color: #ffffff;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
<div class="the-image">
<img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img>
<h3 class="the-h3"><span>TEST</span></h3>
</div>