Related
Is it possible to make the text color of an <input> a gradient? I found this solution for static text but it does not work for input:
h1 {
font-size: 72px;
background: -webkit-linear-gradient(to right, rgb(66, 251, 227), rgb(43, 43,
255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Yes it is possible please try this
background-image: linear-gradient(bottom, #f00 5%, #000 100%);
background-image: -o-linear-gradient(bottom, #f00 5%, #000 100%);
background-image: -moz-linear-gradient(bottom, #f00 5%, #000 100%);
background-image: -webkit-linear-gradient(bottom, #f00 5%, #000 100%);
background-image: -ms-linear-gradient(bottom, #f00 5%, #000 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, #f00),
color-stop(1, #000)
);
How can i color the navigation bar like this?
Black in the top left corner and blue in the bottom right corner and make a gradient in between them.
No. 1 this is not the right way you ask for,
I have the concept that's why I'm giving you, Next time you ask any question please check this,
Stack Overflow is not a free code writing service. You are expected to try to write the code yourself. After doing more research if you have a problem you can post what you've tried with a clear explanation of what isn't working and providing Minimal, Complete, and Verifiable example. I suggest you to read How to Ask a good question.
And for now try this,
.box{
width: 150px;
height: 50px;
border-radius: 0px 0px 0px 7px;
background: rgba(0,0,0,1);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(34%, rgba(0,0,0,1)), color-stop(100%, rgba(44,153,221,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2c99dd', GradientType=1 );
}
<div class="box"></div>
If you wish to learn how linear-gradients work i would go here: MDN linear-gradient
.link {
width: 100px;
height: 1.5em;
display: inline-block;
background: linear-gradient(135deg, black 30%, DeepSkyBlue 100%);
}
<nav>
<a class="link"></a>
<a class="link"></a>
<a class="link"></a>
<a class="link"></a>
</nav>
This might be what you are looking for.
.box {
background: rgba(0,0,0,1);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(18%, rgba(0,0,0,1)), color-stop(100%, rgba(3,152,252,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0398fc', GradientType=1 );
height: 80px;
width: 200px;
}
<div class='box'></div>
I have an image section with a gradient layer that was built into the stylesheet of the theme. What in this block of code do I need to change to reduce the gradient?
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
Any help with handling this block of code is appreciated.
To reduce the gradient you should change the background gradient values for example :
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
The previous style it start with opacity 0.2 at 0% of the height and end with opacity 0.9 at 100% of the height, you can change those opacity values as you need.
let say that you want to start with 0.2 and end with 0.5, the style should be like this :
background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%)
the style :
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
Demo : https://jsfiddle.net/IA7medd/rnjunkod/
I have a box that I'm trying to add some gradient to and it works in Chrome and other browsers except for IE10+ Below is my CSS code:
.box-gradient {
position:absolute;
width:100%;
height:100%;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:5px;
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
}
Thanks in advance!!
You have to include a line for IE10+
background: -ms-linear-gradient(to left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
I have had this issue before. Adding compatibility for gradients can be a very strenuous job. I think you'd prefer using gradient generator
You need an un-prefixed linear gradient for IE10 to read. Something like this:
background: linear-gradient(to left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
You need to add an unprefixed version as well:
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -o-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: linear-gradient(to right, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
There are plenty of tools available to help you handle various prefixes.
jsFiddle sample
I'm looking for the most hipster way to reduce the HTML semantics (css can be big as necessary) this 4 color logo without using pictures anything can change in the structure. Only requirement is that it works in IE8. I am using selectivr and modernizr so most selector classes and such should work. Additionally, I'm using less css so if you can write like that too.
<ul class="logo">
<li class="webBG"></li>
<li class="designBG"></li>
<li class="videoBG"></li>
<li class="audioBG"></li>
</ul>
CSS
ul.logo{margin: 0 0 0 10px;padding: 0;list-style-type: none;}
ul.logo li{display: inline-block; width:5px;height:5px; padding:0;margin:0; float:left;}
.designBG{background:#00c8e8}
.videoBG{background:#33cc77}
.webBG{background:#ec8544}
.audioBG{background:#E58}
UPDATE FINAL SOLUTION
#boilerplate > div{
margin-left:10px;
width:20px;
height:5px;
/*cross browser definitions follow..*/
background-image: -o-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -moz-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -webkit-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -ms-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
}
HTML
<div></div>
least html possible:
http://jsfiddle.net/VRXjc/7/
Create 1 div
Use CSS Gradients to make the colors
Set Margins, Height and Width to style
HTML:
<div id="logo"></div>
CSS:
#logo{
background: #ec8544; /* Old browsers */
background: -moz-linear-gradient(left, #ec8544 25%, #00c8e8 25%, #00c8e8 50%, #33cc77 50%, #33cc77 75%, #ee5588 75%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(25%,#ec8544), color-stop(25%,#00c8e8), color-stop(50%,#00c8e8), color-stop(50%,#33cc77), color-stop(75%,#33cc77), color-stop(75%,#ee5588)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ec8544 25%,#00c8e8 25%,#00c8e8 50%,#33cc77 50%,#33cc77 75%,#ee5588 75%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ec8544 25%,#00c8e8 25%,#00c8e8 50%,#33cc77 50%,#33cc77 75%,#ee5588 75%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ec8544 25%,#00c8e8 25%,#00c8e8 50%,#33cc77 50%,#33cc77 75%,#ee5588 75%); /* IE10+ */
background: linear-gradient(left, #ec8544 25%,#00c8e8 25%,#00c8e8 50%,#33cc77 50%,#33cc77 75%,#ee5588 75%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec8544', endColorstr='#ee5588',GradientType=1 ); /* IE6-9 */
margin: 0px 0px 0px 15px;
width:20px;
height:5px;
}
You can use background linear gradients..
html
<div class="logo"></div>
css
.logo{
margin-left:10px;
width:20px;
height:5px;
/*cross browser definitions follow..*/
background-image: -o-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -moz-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -webkit-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -ms-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
}
Demo at http://jsfiddle.net/gaby/yGkhQ/
HTML:
<div id="boilerplate">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS:
div#boilerplate{}
div#boilerplate ul{margin: 0 0 0 10px;padding: 0;list-style-type: none;}
div#boilerplate ul li{display: inline-block; width:5px;height:5px; padding:0;margin:0; float:left;}
div#boilerplate ul li:first-child {background:#00c8e8;}
div#boilerplate ul li:nth-child(2) {background:#33cc77;}
div#boilerplate ul li:nth-child(3) {background:#ec8544;}
div#boilerplate ul li:last-child {background:#E58;}