Below is an image of a button we use on our site, it's a .png.
We'd like to see if we can get really close to it with CSS on a standard button.
The gradient goes top: #E14C5B to middle: #D33742 to bottom: #B61C27 with a couple pixel radial of round corners.
Is that even possible in CSS?
I'll get ya started...
HTML
<button>Submit</button>
CSS with some background gradients
#import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 1.5em;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
border-radius: 3px;
height: 50px;
width: 100px;
color: white;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
DEMO
Screenshot:
If you want some kind of clicky feedback type look on click, you could also add:
button:active {
-webkit-transform: translate(1px, 1px);
box-shadow: none;
}
DEMO w/ :active
This is only prefixed for -webkit browsers. You'll need to provide the proper vendor prefixes for whatever you are supporting.
Here is the cross-browser version using css gradient.
I specified 4 colors for the gradient.
The first gradient from 0 to 50% and the second gradient from 51% to 100%.
Ex.
background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);
jsfiddle demo here
Please note that the red i took are brighter than in tour example.
Just play with the css to adjust colors that fit your needs.
Related
For background-image you can add as many radial-gradient and/or linear-gradient you want. But for border-image it seems like you can only add one. If find it quite strange, because the principle of how to display gradients should be the same for border and background, right?
Is there a way to add more than one gradient in border-image? I'm only interested in a pure CSS solution.
This doesn't work, because it contains more than 1 gradient:
div {
height: 30px;
width: 40px;
border: 50px solid black;
border-image:
radial-gradient(circle at 20px 30px, green 20px, rgba(0,0,255, .5) 20px),
radial-gradient(30deg, blue 22px, red 22px);
}
https://jsfiddle.net/thadeuszlay/p6r2p78g/
This works, but contains only one gradient:
div {
height: 30px;
width: 40px;
border: 50px solid black;
border-image: radial-gradient(circle at 20px 30px, green 20px, rgba(0, 0, 255, .5) 20px);
}
https://jsfiddle.net/thadeuszlay/p6r2p78g/1/
No, you can't set more than one image to the border-image shorthand or the border-image-source longhand property.
As per spec for border-image-source, we can see that only one image layer is specified as value.
Name: border-image-source
Value: none | <image>
whereas for background-image, we can see that multiple layers are specified.
Name: background-image
Value: <bg-image> [ , <bg-image> ]*
Below is an extract from the spec which introduces layering of background images: (emphasis mine)
The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property.
Just stubled upon this question when I was looking for the same thing.
But for other people, trying this:
You could just add a pseudo-element, and give that one a border too.
Guessing you would use transparent, because otherwise multiple gradients wouldn't be visible at all.
I've got the following:
h1{
--border-width: 5px;
border-width: var(--border-width);
border-style: solid;
border-image: linear-gradient(135deg, #ff0000, transparent 20%);
border-image-slice: 1;
font-size: 5rem;
position: relative;
}
h1::after{
position: absolute;
inset: calc(var(--border-width) * -1);
content: '';
background: transparent;
border-width: var(--border-width);
border-style: solid;
border-image: linear-gradient(135deg, transparent 80%, #ff0000 100%);
border-image-slice: 1;
}
I set the inset of the pseudo element to negative the border-width to make sure it aligns with the parents border.
I made a CSS class that applies a gradient and rounded corners to a span element to act as a button. It seems to work in most browsers that I've tested, but IE9 is giving me some issues. As the class is now the rounded corners aren't working correctly. However if you look very close it seems like there are rounded corners underneath a layer that is not rounded (I think that's the best way to explain how it looks, forgive me if that doesn't make sense)
Anyway, by trial and error I messed with the class until I found that removing the 'display:inline-block;' property allows for the rounded corners to be displayed correctly, but as a result the gradient no longer works. Any ideas?
http://jsfiddle.net/jessikwa/wcgzkkgr/
The HTML:
<span class="action_button">Button</span>
The CSS:
.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}
Update: Further reading of other posts in StackOverflow gets me a bit closer, but still not quite right.
IE9 border-radius and background gradient bleeding
This post's answer suggestions using an image, which I would prefer to avoid. Another proposed answer of the thread puts a wrapper around the button with "overflow:hidden;", but this doesn't seem to be quite right, either.
http://jsfiddle.net/uu19uqg4/
you have forgot the "-" near webkit-border-radius
try this :
-webkit-border-radius: 3px;
this link can be usefull
Add the following in the head of the page.
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9" />
This will disable the compatibility mode in IE9. If it's due to compatibility issue then it will be solved.
I'm trying to do something like this for a client who has a blog.
She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....
Well if you want fully transparent than you can use
border: 5px solid transparent;
If you mean opaque/transparent, than you can use
border: 5px solid rgba(255, 255, 255, .5);
Here, a means alpha, which you can scale, 0-1.
Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity.
For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hex color to your element.
Demo
Demo 2 (With a background image for nested div)
Demo 3 (With an img tag instead of a background-image)
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fall back, not used in fiddle */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fall back, not used in fiddle */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontal Center */
margin-top: 10px; /* Vertical Center ... Yea I know, that's
manually calculated*/
}
Note (For Demo 3): Image will be scaled according to the height and
width provided so make sure it doesn't break the scaling ratio.
You can also use border-style: double with background-clip: padding-box, without the use of any extra (pseudo-)elements. It's probably the most compact solution, but not as flexible as the others.
For example:
<div class="circle">Some text goes here...</div>
.circle{
width: 100px;
height: 100px;
padding: 50px;
border-radius: 200px;
border: double 15px rgba(255,255,255,0.7);
background: rgba(255,255,255,0.7);
background-clip: padding-box;
}
If you look closely you can see that the edge between the border and the background is not perfect. This seems to be an issue in current browsers. But it's not that noticeable when the border is small.
Using the :before pseudo-element,
CSS3's border-radius,
and some transparency is quite easy:
LIVE DEMO
<div class="circle"></div>
CSS:
.circle, .circle:before{
position:absolute;
border-radius:150px;
}
.circle{
width:200px;
height:200px;
z-index:0;
margin:11%;
padding:40px;
background: hsla(0, 100%, 100%, 0.6);
}
.circle:before{
content:'';
display:block;
z-index:-1;
width:200px;
height:200px;
padding:44px;
border: 6px solid hsla(0, 100%, 100%, 0.6);
/* 4px more padding + 6px border = 10 so... */
top:-10px;
left:-10px;
}
The :before attaches to our .circle another element which you only need to make (ok, block, absolute, etc...) transparent and play with the border opacity.
use rgba (rgb with alpha transparency):
border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity
The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
I am trying to use gradient style for my buttons, but, I have a problem with hover style,
Here is the button before hover:
And here is after hover:
Here is haml of button:
= link_to '#', {:class=>'tour_btn btn btn-large btn-primary', :style=>'margin-left: 10px; width: 105px;'} do
%h3
Take a Tour
LESS:
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
}
Any idea please ? is it possible to specify another gradient style for hover state ?
Or at least, not to change button when hover ?
Twitter Bootstrap animates the background-position on hover with a transition (since background-gradients cant have a transition). What is happening in your case, is the background-gradient is getting shifted up with background-position: -15px, and you are seeing the background-color underneath.
To fix this set your background-color to the bottom color of your button gradient on hover:
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
&:hover { background-color: #a35b35 }
}
If you have a set a background image for a button, the background shifts up by 15px on hover. You can set it to 0px.
.tour_btn:hover {
background-position: 0px !important;
}
When using custom css instead of LESS to style your buttons, try http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E. You will get all css for your custom buttons including hover effect and disabled / active states.
For the button above you could use possible:
.btn-custom-lighten.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-custom-lighten {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #f29461;
background-image: -moz-linear-gradient(top, #f1874e, #f5a77d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1874e), to(#f5a77d));
background-image: -webkit-linear-gradient(top, #f1874e, #f5a77d);
background-image: -o-linear-gradient(top, #f1874e, #f5a77d);
background-image: linear-gradient(to bottom, #f1874e, #f5a77d);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1874e', endColorstr='#fff5a77d', GradientType=0);
border-color: #f5a77d #f5a77d #ef7736;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #f5a77d;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-lighten:hover,
.btn-custom-lighten:focus,
.btn-custom-lighten:active,
.btn-custom-lighten.active,
.btn-custom-lighten.disabled,
.btn-custom-lighten[disabled] {
color: #ffffff;
background-color: #f5a77d;
*background-color: #f39766;
}
.btn-custom-lighten:active,
.btn-custom-lighten.active {
background-color: #f1874e ;
}
usage:
<button class="btn btn-custom-lighten btn-large">Your button</button>
Add the CSS below /after your bootstrap(.min).css
Using this css let's you custom button effects work in most browsers.
you can specify what you want the CSS to be when a button is hovered with the css :hover property.
So in your case you will want to do something like
.tour_btn:hover {
/* your custom css */
}
Using chrome developer tools you should be able to see what kind of gradients are currently being applied by bootstrap and then override them with your css.
.tour_btn:hover {
background-color: #a35b35;
background-position: 30px 30px;
}
i found this solution you can try this . it works with simple code
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed yesterday.
I want to make the list menu's background disappear by using opacity, without affecting the font. Is it possible with CSS3?
now you can use rgba in CSS properties like this:
.class {
background: rgba(0,0,0,0.5);
}
0.5 is the transparency, change the values according to your design.
Live demo http://jsfiddle.net/EeAaB/
more info http://css-tricks.com/rgba-browser-support/
Keep these three options in mind (you want #3):
1) Whole element is transparent:
visibility: hidden;
2) Whole element is somewhat transparent:
opacity: 0.0 - 1.0;
3) Just the background of the element is transparent:
background-color: transparent;
To achieve it, you have to modify the background-color of the element.
Ways to create a (semi-) transparent color:
The CSS color name transparent creates a completely transparent color.
Usage:
.transparent{
background-color: transparent;
}
Using rgba or hsla color functions, that allow you to add the alpha channel (opacity) to the rgb and hsl functions. Their alpha values range from 0 - 1.
Usage:
.semi-transparent-yellow{
background-color: rgba(255, 255, 0, 0.5);
}
.transparent{
background-color: hsla(0, 0%, 0%, 0);
}
As of the CSS Color Module Level 4, rgb and hsl works the same way as rgba and hsla does, accepting an optional alpha value. So now you can do this:
.semi-transparent-yellow{
background-color: rgb(255, 255, 0, 0.5);
}
.transparent{
background-color: hsl(0, 0%, 0%, 0);
}
The same update to the standard (Color Module Level 4) also brought in support for space-separated values:
.semi-transparent-yellow{
background-color: rgba(255 255 0 / 0.5);
}
.transparent{
background-color: hsla(0 0% 0% / 0);
}
I'm not sure why would these two be any better than the old syntax, so consider using the a-suffixed, comma-separated variants for greater support.
Besides the already mentioned solutions, you can also use the HEX format with alpha value (#RRGGBBAA or #RGBA notation).
That's contained by the same CSS Color Module Level 4, so it has worse support than the first two solutions, but it's already implemented in larger browsers (sorry, no IE).
This differs from the other solutions, as this treats the alpha channel (opacity) as a hexadecimal value as well, making it range from 0 - 255 (FF).
Usage:
.semi-transparent-yellow{
background-color: #FFFF0080;
}
.transparent{
background-color: #0000;
}
You can try them out as well:
transparent:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: transparent;
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `transparent`
</div>
hsla():
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: hsla(250, 100%, 50%, 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `hsla()`
</div>
rgb():
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: rgb(0, 255, 0, 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `rgb()`
</div>
hsla() with space-separated values:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: hsla(70 100% 50% / 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `hsla()` with spaces
</div>
#RRGGBBAA:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: #FF000060
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `#RRGGBBAA`
</div>
yes, thats possible. just use the rgba-syntax for your background-color.
.menue {
background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
Here is an example class using CSS named colors:
.semi-transparent {
background: yellow;
opacity: 0.25;
}
This adds a background that is 25% opaque (colored) and 75% transparent.
CAVEAT
Unfortunately, opacity will affect then entire element it's attached to.
So if you have text in that element, it will set the text to 25% opacity too. :-(
The way to get past this is to use the rgba or hsla methods to indicate transparency* as part of your desired background "color". This allows you to specify the background transparency*, independent from the transparency of the other items in your element.
Technically we're setting the opacity, though we often like to speak/think in terms of transparency. Obviously they are related, inverses of each other, so setting one decides the other.
The number specified is the opacity %. 1 is 100% opaque, 0% transparent & vice versa).
Here are 3 ways to set a blue background at 75% opacity (25% transparent), without affecting other elements:
background: rgba(0%, 0%, 100%, 0.75)
background: rgba(0, 0, 255, 0.75)
background: hsla(240, 100%, 50%, 0.75)
In this case background-color:rgba(0,0,0,0.5); is the best way.
For example: background-color:rgba(0,0,0,opacity option);
Try this:
opacity:0;
For IE8 and earlier
filter:Alpha(opacity=0);
Opacity Demo from W3Schools
Yes you can just plain text as
.someDive{
background:transparent
}
For your case, we can use rgba():
First, we manipulate the background-color, and use rgba.
.selector {
background-color: rgba(0, 0, 0, 0.3);
}
Now what this does is, it basically adds an opacity to your element, along with the black background color. This is how it'd look when you run it.
body {background-color: #0008f3;}
.container {
height: 100px;
width: 100px;
background-color: rgba(255,255,255,0.5);
}
<body>
<div class="container"></div>
</body>
full transparent -> .youClass{background: rgba(0,0,0,0.001);}