I'm looking to create a styled button for my app. The hope is to use css to generate a button which looks similar to:
The blue comes from the background so it's not relevant, its the shades of green I'm interested in. I'm not sure first if its possible to do it with CSS or how to do it if it is possible.
Can you start a gradient in the top left corner, move into a different colour from there and finish with a final colour at the bottom of the gradient?
If so are there any examples that you know of which I can refer too?
You can do this easily enough with a CSS-gradient using color stops. Here's a snippet example:
.gradientButton {
height: 50px;
width: 100px;
line-height:50px;
vertical-align:middle;
text-align:center;
font-family:arial;
font-size:26px;
font-weight:bold;
color:white;
text-shadow:2px 2px #336633;
box-shadow:2px 2px #336633;
border: 1px solid black;
border-radius:12px;
background: linear-gradient(to bottom right, LawnGreen 15%, green 85%, DarkGreen 90%);
}
.gradientButton:hover {
text-shadow:1px 1px #336633;
box-shadow:1px 1px #336633;
background: linear-gradient(to bottom right, LawnGreen 5%, green 80%, DarkGreen 85%);
}
<html>
<body>
<div class="gradientButton">log in</div>
</body>
</html>
Using things like gradients and shadows you can even provide hover effects like I've done here making it look like the button's depressed when you hover over it.
Related
I am trying to create a navbar with a gradiented background as shown in the image below
How can I create the gradient in the red box in this image
This is a sample CSS class for using gradients.
#gradient {
height: 50px;
opacity: 0.2;
background-color: transparent;
background-image: linear-gradient( black, white);
}
You can tweak the opacity for shadows accordingly.
Your code:
div {
background-image: linear-gradient(black, white);
height:60px;
position:fixed;
top:0px;
width:100%;
border:2px solid black;
text-align:center;
}
There you go:
div {
background-image: linear-gradient(grey, white);
height:60px;
position:fixed;
top:0px;
width:100%;
border:2px solid black;
text-align:center;
}
<div><h1>My Youtube Channel</h1></div>
A completely working example!
You'll want to use linear-gradient.
background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);
This is rgba black full opacity (1) to rgba black 0 opacity. If you want it to be lighter you can set the first rgba to something like rgba(0,0,0,0.5), black half opacity (0.5).
I want to make my whole div section with fading border. Here is my code:
.usermanagement {
-webkit-border-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#fff),
to(#afd4ec),
color-stop(0.2, #afd4ec)
)
0 0 0 0 repeat repeat;
}
The effect is exactly what I want but only for top:
Then all goes to light blue and finishes like this:
Without this fading effect. I want to make the same effect as in the top for the bottom end of the section. How it is possible?
You can try like below. make sure to correctly set the different values.
.box {
height:50px; /* this need to be a multiple of 10 for the effect to work */
border-top: 10px solid;
border-bottom:10px solid;
background:#f2f2f2;
border-image:repeating-linear-gradient(#fff 0,red 10px) 10;
}
<div class="box"></div>
You can also do it with multiple background:
.box {
height:50px;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
background:
linear-gradient(#fff ,red ) top,
linear-gradient(#fff ,red ) bottom, /* use (red, #fff) here for the opposite effect */
#f2f2f2;
background-size:100% 10px;
background-origin:border-box;
background-repeat:no-repeat;
}
<div class="box"></div>
I have the following markup:
.hero{
padding: 100px;
background: lightgrey;
border: 1px solid black;
}
.gradient{
background: linear-gradient(195deg, transparent 31%, #FFFFFF 31.2%), linear-gradient(90deg, #79CAF0 0%, #79CAF0 100%);
}
<div class="hero gradient"></div>
Which renders fine on Chrome, Firefox etc. However, on Safari or devices running Mac OS, there's a thin (but noticeable) border being rendered. Like so:
Notice that line at the bottom of the gradient? Why is that occurring?
Change the last value from the first gradient from 31.2% to 31% and the line should disappear.
I don’t think you can avoid this with linear-gradient at certain angles and color combinations. I’ve run into this myself in the past and had to switch to using SVGs. Let me know if you would like an example of how to do that.
FYI, you can simply the CSS to use a single linear gradient:
.hero{
padding: 100px;
background: lightgrey;
border: 1px solid black;
}
.gradient{
background: linear-gradient(195deg, #79CAF0 31%, transparent 31%);
}
<div class="hero gradient"></div>
I am trying to create a 3 color background with colors going diagonally.
I found a great example with colors i like here: Responsive Diagonal Two-Tone Backgrounds with CSS (Corner to Corner)
.btn {
background:#212531;
background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
display:inline-block;
padding:0.75em 2.0em;
font-size:1.5em;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
text-transform:uppercase;
font-family:sans-serif;
}
.btn:hover, .btn:focus {
background:#2d3d64;
background: linear-gradient(to right bottom, #415382 50%, #2d3d64 50%);
}
body { text-align:center; background:#e6e9f6; padding-top:1.0em; }
a { text-decoration:none; }
<a class="btn" href="#">Check Out My Background</a>
I want to modify this example to have a third color, going from the bottom left corner, diagonally up to the middle of the screen and then stopping there.
How can i achieve this?
You can try like below. Simply consider an extra gradient with a diagonal direction.
.box {
width:200px;
height:100px;
background:
linear-gradient(to bottom left ,transparent 50%,yellow 50.5%),
linear-gradient(to bottom right,red 50%,blue 50.5%);
}
<div class="box">
</div>
According to this example:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
You can use something like that:
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
I think images speak louder than words in this case.
I want to get this effect:
But the best I can do with CSS3 is this:
And the code for this is absolutely terrible:
box-shadow: 1px 1px hsl(0, 0%, 27%),
2px 2px hsl(0, 0%, 27%),
3px 3px hsl(0, 0%, 27%),
4px 4px hsl(0, 0%, 27%),
5px 5px hsl(0, 0%, 27%),
6px 6px hsl(0, 0%, 27%),
7px 7px hsl(0, 0%, 27%),
8px 8px hsl(0, 0%, 27%),
...
Is there any way that I can create an effect like this with pure CSS3? I don't mind having it be 3D, but isometric would be preferred.
I don't need to place content onto the sides of the box, just onto the front face, so I'm working with just a single <div> element.
Here's what I have so far: http://jsfiddle.net/X7xSf/3/
Any help would be appreciated!
I'd use some skew transforms on some CSS generated elements... Take a look at this:
http://jsfiddle.net/X7xSf/12/
If I wanted to use this in production, I'd probably identify which browsers support before and after, but not transforms (only IE8), then use Paul Irish's method from 2008 (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) to turn this off for IE8.
Well... My idea was to use border hacks and some masking to get it to work in... IE 8 at least? But I can't figure out how to get the border to animate backwards Fixed it.
You can see my idea here: http://jsfiddle.net/k2AdU/1
and the code concept is to use :before and :after to create a mask for the corners
.cube
{
width:100px;
height:100px;
background:#454545;
position:relative;
border-right:20px solid #333;
border-bottom:20px solid #111;
border-right-width:0px;
border-bottom-width:0px;
left:20px;
top:20px;
}
.cube:after
{
content:"";
display:block;
position:absolute;
left:0px;
top:100%;
border:10px solid transparent;
border-left:10px solid white;
border-bottom:10px solid white;
}
.cube:before
{
content:"";
display:block;
position:absolute;
top:0px;
left:100%;
border:10px solid transparent;
border-top:10px solid white;
border-right:10px solid white;
}