I would like to put a gradient border at the top of a div.
So the start color should be #c4268c and ends with #9a0b72
<div class="bordertest"></div>
For easing here is the fiddle :http://jsfiddle.net/aKhjk/
I searched but could not find a suitable way.
you could use an image http://border-image.com/ or use a pseudo element over your border :
.bordertest {
height:300px;
width:300px;
border-top:30px solid #c4268c;
background:#000;
position:relative;
margin:1em;
}
.bordertest:first-child:before {
content:'';
position:absolute;
width:100%;
height:30px;
background:linear-gradient(to left, #c4268c, #9a0b72);
top:-30px;
left:0;
}
http://jsfiddle.net/aKhjk/1/ - jsfiddle.net/aKhjk/3
Try this, its also cross browser ready. So not so much work for you to do.
http://jsfiddle.net/cornelas/aKhjk/6/
.bordertest {
height:300px;
width:300px;
border-top:30px solid #c4268c;
/** Created at http://www.colorzilla.com/gradient-editor/ **/
background: rgb(196,38,140); /* Old browsers */
background: -moz-linear-gradient(top, rgba(196,38,140,1) 0%, rgba(154,11,114,1) 5%, rgba(0,0,0,1) 10%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(196,38,140,1)), color-stop(5%,rgba(154,11,114,1)), color-stop(10%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(196,38,140,1) 0%,rgba(154,11,114,1) 5%,rgba(0,0,0,1) 10%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(196,38,140,1) 0%,rgba(154,11,114,1) 5%,rgba(0,0,0,1) 10%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(196,38,140,1) 0%,rgba(154,11,114,1) 5%,rgba(0,0,0,1) 10%); /* IE10+ */
background: linear-gradient(to bottom, rgba(196,38,140,1) 0%,rgba(154,11,114,1) 5%,rgba(0,0,0,1) 10%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4268c', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
Now, you can use linear gradients with the border-image attribute in all modern browsers.
.bordertest {
color: pink;
border: 10px solid pink;
border-image: repeating-linear-gradient( 45deg, pink, pink 1%, purple 1%, purple 8%) 10;
}
See: https://css-tricks.com/almanac/properties/b/border-image/
Related
Here is my attempt
.string{
background: #b38f72; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzOGY3MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2QwYjI3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2QzYjg4OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzhlNjU0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzQwMjExNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjI4MjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-repeating-linear-gradient(-45deg, #b38f72 0%, #d0b27e 0.5%, #d3b888 1%, #8e6547 1.5%, #402116 2%, #3f2824 2.5%); /* FF3.6+ */
background: -webkit-repeating-gradient(linear, left top, right top, color-stop(0%,#b38f72), color-stop(20%,#d0b27e), color-stop(40%,#d3b888), color-stop(60%,#8e6547), color-stop(80%,#402116), color-stop(100%,#3f2824)); /* Chrome,Safari4+ */
background: -webkit-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* Chrome10+,Safari5.1+ */
background: -o-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* Opera 11.10+ */
background: -ms-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* IE10+ */
background: repeating-linear-gradient(to right, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b38f72', endColorstr='#3f2824',GradientType=1 ); /* IE6-8 */
height:6px;
width:100%;
margin-top:20px
}
http://jsfiddle.net/HmPkJ/
This is the kind of effect that I'm after.
https://forrst-live.s3.amazonaws.com/posts/snaps/94811/mega.jpg?1310500628
Any help would be appreciated...
You just need 2 gradients, one repeating in horizontal, and another one with semitransparent parts in vertical
.test {
position: absolute;
height: 40px;
width: 100%;
background-image:
linear-gradient(0deg, black 0%, rgba(100, 100, 100, 0.2) 10% , white 50% , rgba(100, 100, 100, 0.2) 90% , gray 100% ),
repeating-linear-gradient(to right, black 0px, white 15px)
;
}
fiddle
Why not just use an 5x5 image and just repeat the pattern ?
Use
background-image: url('data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7');
height: 8px;
Demo
I have below code to set the background image to button.
CSS:
input.hButton{
background-image: url('images/hbutton.png');
height: 21px;
width: 110px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
display:block;
}
HTML:
<input type="button" class="hButton" id="customize" value="Customize Table"></input>
Output:
Here when the button text is too long, button is split. How can I get it fixed?
Add
background-size: 100% 100%;
or find your perfect setting here:
http://www.css3.info/preview/background-size/
Btw in your case should be better:
use a gradient
use border-radius for the upper corners
use a thin border
replace your css code background-image property with this one :
background-image: url('images/hbutton.png') top repeat-y;
Hi please use the pure css code.. and remove your older method..
Fiddle:http:http://jsfiddle.net/nikhilvkd/RZ4vV/1/
What's Here?
1-Gradient
2-Border radius
3.border top,right and left
.hButton{
border:solid 1px #0e4f85;
border-bottom:none;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
padding:3px;
color:#696969;
background: #f7f5f5; /* Old browsers */
background: -moz-linear-gradient(top, #f7f5f5 0%, #e0dede 50%, #e0dede 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5f5), color-stop(50%,#e0dede), color-stop(99%,#e0dede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* IE10+ */
background: linear-gradient(to bottom, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f5f5', endColorstr='#e0dede',GradientType=0 ); /* IE6-9 */
}
<div class="border"></div>
.border {
width: 100%;
height: 6px;
background: -webkit-linear-gradient(left, #2F2727 20%, #1a82f7 80%);
}
The above code produces the line but its fading out the first color than fading in the other one. But i want line like the above one. So help me
.border {
background: -webkit-linear-gradient(left, #2F2727 20%, #1a82f7 20%);
}
Trick is to start the second color right where first color ends. In this example #2F2727 color is ending at 20% and #1a82f7 color is starting from 20%.
You will need to create two separate DOM elements in order to have achieve the multi coloured line. Please see below:
HTML:
<div class="border">
<div></div>
<div></div>
</div>
CSS:
.border {
height:6px
width:100%;
display:block;
overflow:hidden;
}
.border div {
height:6px;
}
.border div:first-child {
width:30%;
background-color:orange;
float:left;
}
.border div:last-child {
width:70%;
background-color:black;
float:left
}
See it in action: http://jsfiddle.net/NvQ7B/2/
could you not just do something like this:
.border {
height:3px;
border-left:200px solid #2F2727;
background-color:#1a82f7;
}
http://www.colorzilla.com/gradient-editor/#ff0000+0,ff0000+30,0a0e0a+30,0a0809+100;Custom
background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 30%, #0a0e0a 30%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(30%,#ff0000), color-stop(30%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 30%,#0a0e0a 30%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff0000 0%,#ff0000 30%,#0a0e0a 30%,#0a0809 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 30%,#0a0e0a 30%,#0a0809 100%); /* IE10+ */
background: linear-gradient(to right, #ff0000 0%,#ff0000 30%,#0a0e0a 30%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0a0809',GradientType=1 ); /* IE6-9 */
Hi friends is there any possible to get a double color background like this as 100% width and height like this
Here is the sample image:
Sample Image http://www.mediaserveit.com/demo/vivek/resources/question.png
(sample)white in left hand side rest of them are other color.
if i did with div's means
.left{
float:left;
width:30%;
background-color:#fff;
}
.right{
float:right;
width:70%;
background-color:#B97A57;
}
which made height problem.it increases depends upon the contents on the div's.if i use min-height means it also changed on different screens.if there any hack to set like this background in html body!because i need it in full screen
Use a gradient as background.
body{
background: #fcfcfc; /* Old browsers */
background: -moz-linear-gradient(left, #fcfcfc 30%, #6b1717 30%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(30%,#fcfcfc), color-stop(30%,#6b1717)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* IE10+ */
background: linear-gradient(to right, #fcfcfc 30%,#6b1717 30%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#6b1717',GradientType=1 ); /* IE6-9 */
}
Gradient generated using: http://www.colorzilla.com/gradient-editor/
Demo: http://jsfiddle.net/guE5L/
I have a text box which I want to apply a background colour to. Whilst I understand how to apply one background colour, I want to know what css I could apply one colour to 75% of the box and 25% of the box to another.
The best way to do it would be to use gradients.
http://www.colorzilla.com/gradient-editor/
if you not want use css3 multiple bg,
you can insert a new div in your container, who go under the content with the good bg color
on the container :
position:relative;
background:purple; /* primary color */
on the second background div :
position:absolute;
/* pos and size into the container */
left:20%;
top:20%;
width:60%;
height:60%;
background:yellow; /* secondary color */
and your initial content must be wrapped, the wrap get :
position:relative;
http://jsfiddle.net/r043v/T7gyx/
Or you can use box-shadow for that:
check this fiddle
For vertical:
.text{
-webkit-box-shadow: 0 5px #000 inset, 0 -5px #000 inset;
background: transparent;
border: 0;
}
For horizontal:
.text2{
width: 100px;
-webkit-box-shadow: 25px 0 #999 inset, -75px 0 #444 inset;
background: transparent;
border: 0;
}
Note that you can't use percentage for box shadow, so this method only works with fixed width/height if you need percentage like values.
Here is the Solution.
The HTML:
<div class="dualColor"> </div>
<div> </div>
<input class="dualColor" type="text" />
The CSS:
.dualColor{background: #1dff00; /* Old browsers */
background: -moz-linear-gradient(left, #1dff00 0%, #1dff00 75%, #ff0004 75%, #ff0004 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1dff00), color-stop(75%,#1dff00), color-stop(75%,#ff0004), color-stop(100%,#ff0004)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1dff00 0%,#1dff00 75%,#ff0004 75%,#ff0004 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1dff00 0%,#1dff00 75%,#ff0004 75%,#ff0004 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1dff00 0%,#1dff00 75%,#ff0004 75%,#ff0004 100%); /* IE10+ */
background: linear-gradient(to right, #1dff00 0%,#1dff00 75%,#ff0004 75%,#ff0004 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dff00', endColorstr='#ff0004',GradientType=1 ); /* IE6-9 */
height:20px; width:200px; border:none;
}
EDIT
You can apply dual colors to both the Div and the Text boxes.
Hope this helps.