I have a problem, I can't set gradient as a background of my website(gradient from http://www.colorzilla.com/gradient-editor/), and when run it in browser, background is just white. Even if I just set background: #171717; there is black background, but when i add gradient code it just white.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XXXXXXXXXXXXXX</title>
<style type="text/css">
asdasd
body {
background: #171717;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTMzNzYxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#000000), color-stop(100%,#133761)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #000000 0%,#133761 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #000000 0%,#133761 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #000000 0%,#133761 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #000000 0%,#133761 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#133761',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
margin: 0;
font-family: 'Arial';
}
#menu{
font-size: 24px;
color: #BEABD6;
height: 28px;
}
a{
padding: 12px 24px;
text-decoration: none;
text-align: center;
}
div {
width: 598px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="menu">
XXXXXXX
XXXXXXX
XXXXXXXXX
</div>
</body>
</html>
The solution is very simple: remove the asdasd in front of your body {.
Side-note: The solution provided by Paulie_D is not necessary to solve your problem.
The code works fine....except you have to remove the zero margin from the body
body {
background: #171717;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTMzNzYxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #000000), color-stop(100%, #133761));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, #000000 0%, #133761 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#133761', GradientType=1);
/* IE6-8 fallback on horizontal gradient */
background: radial-gradient(ellipse at center, #000000 0%, #133761 100%);
}
#menu {
font-size: 24px;
color: #BEABD6;
height: 28px;
}
a {
padding: 12px 24px;
text-decoration: none;
text-align: center;
}
div {
width: 598px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div id="menu">
XXXXXXX
XXXXXXX
XXXXXXXXX
</div>
I have made a fiddle for my problem.
This is it
http://jsfiddle.net/8Kx8c/
This is the result of my code:
I need to do two things:
First, center all the content inside the div with the border. I mean this div <div id="agentsLegend">
Second, center the text to be in the center of the circle. the text exist in this code:
<span class="oneLegend">
<div class="breakLegend oneAgentLegent"></div>
Break
</span>
I tried:
text-align:center;
vertical-align:middle;
but the content is not centered.
you need to set vertical-align to .oneAgentLegent as well.
And eventually set a line-height to #agentsLegend.
DEMO
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
height:38px;
line-height:30px;/* tune baseline height here */
padding-left:5px;
padding-right:5px;
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle;
}
.oneAgentLegent {
border-radius:50%;
width:20px;
height: 20px;
display:inline-block;
vertical-align:middle;/* make this to vertical-align:middle to text aside */
}
To center your inline-boxe: use text-align:center on parent.
DEMO 2
body {
text-align:center;/* parent of your box in fiddle demo */
}
edit , if you want to use display:table instead, add display:table-cell to span , so it easily vertical center content : http://jsfiddle.net/8Kx8c/9/
I've done a few changes to the css. These should help you fix your issue.
Reduced the height and added padding top to #agentsLegend element.
height:28px; padding-top:9px;
Changed vertical-align:middle; to vertical-align:top; in .oneLegend element.
Added line-height: 20px; to .oneLeged element.
FIDDLE
You can accomplish this by using a combination of vertical-align on the children with line-height set on the parent for the vertical aligning, and setting display:table; and margin:0 auto on the parent to center horizontally.
Demo Fiddle
CSS
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
line-height:38px;/* <-- vertical alignment */
padding-left:5px;
padding-right:5px;
display:table; /* <-- horizontal alignment */
margin:0 auto; /* <-- horizontal alignment */
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle;/* <-- vertical alignment */
}
.oneAgentLegent {
border-radius:50%;
width:20px;
height: 20px;
vertical-align:-10%;/* <-- vertical alignment */
display:inline-block;
}
.agent-table-wrap td.breakAgentClass, .breakLegend {
background: #6b4e30;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiNGUzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTg5NzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6b4e30), color-stop(100%, #998972));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6b4e30 0%, #998972 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b4e30', endColorstr='#998972', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.idelAgentClass, .idelLegent {
background: #fcda19;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZGExOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcda19), color-stop(100%, #ffffff));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* IE10+ */
background: linear-gradient(to bottom, #fcda19 0%, #ffffff 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcda19', endColorstr='#ffffff', GradientType=0);
/* IE6-8 */
color: #333;
}
.agent-table-wrap td.pauseAgentClass, .pauseLegend {
background: #1283b7;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEyODNiNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYWQxZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1283b7), color-stop(100%, #bad1e2));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* IE10+ */
background: linear-gradient(to bottom, #1283b7 0%, #bad1e2 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1283b7', endColorstr='#bad1e2', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.talkingAgentClass, .talkingLegend {
background: #4ea51c;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYTUxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWU1NzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4ea51c), color-stop(100%, #aae579));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* IE10+ */
background: linear-gradient(to bottom, #4ea51c 0%, #aae579 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4ea51c', endColorstr='#aae579', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.voicemailAgentClass, .voiceMailLegend {
background: #8a38aa;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iIzhhMzhhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYjk1ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%, #8a38aa), color-stop(100%, #db95f4));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* IE10+ */
background: linear-gradient(to bottom, #8a38aa 4%, #db95f4 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a38aa', endColorstr='#db95f4', GradientType=0);
/* IE6-8 */
color: #fff;
}
You can change some properties like :
#agentsLegend {
display: table;
}
.oneLegend {
display:table-cell;
}
http://jsfiddle.net/8Kx8c/1
You need to add only line-height:38px; on #agentsLegend and vertical-align:middle; on class oneLegend
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
height:38px;
line-height:38px; /*Addded line*/
padding-left:5px;
padding-right:5px;
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle; /*Addded line*/
}
Here is the Fiddle link.
http://jsfiddle.net/DUgKb/19/
You cannot have a span wrapping a div. It was not working since a span is not a block element.
Add a wrapping div to center everything.
.center {
text-align: center;
}
vertical align the icons
#agentsLegend {
display: inline-block;
padding: 5px;
}
.oneAgentLegent, .oneLegend {
display: inline-block;
vertical-align: middle;
}
I want to stylize one of the font icon provided with Font Awesome called
fa fa-user and render color in a similar way with the below sample.
Circular border is not a problem but I cannot think of ways to render this kind of
glassy looking color combinations without using background-image property.
As far as I'm concerned, color is the only usable property because it's a font.
Is anything near to the sample image achievable with CSS?
This is Demo
EDITED
I should have mentioned that I am not looking to get the glassy look on the background.
Only on the icon itself.
You can certainly get close with some neat CSS3 effects (text-shadow and gradients)
http://jsbin.com/UCokedat/1/edit
.fa-user {
color: white;
background-color: lightgrey;
padding: 40px 45px;
font-size: 50pt;
border-radius: 50%;
text-shadow: 1px 1px 1px silver;
text-shadow: inset 1px 1px 1px #eee;
background: rgb(226,226,226);
background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1)));
background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: -o-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: linear-gradient(135deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
}
Not sure it can be totally duplicated, but I went after a somewhat similar idea as SpliFF
http://jsbin.com/OGIKIQa/6/edit
.fa-user {
color: white;
padding: 40px 45px;
font-size: 50pt;
}
.fa-user:before {
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: white;
background-color: lightgrey;
padding: 40px 45px;
font-size: 50pt;
border-radius: 50%;
}
I am trying to create a button like this (input type="submit"):
using an image that needs to be tiled to achieve the above effect.
I have tried doing this so far:
border: none;
background: url(myImage.png) no-repeat;
background-size: 80px 40px;
padding-left: 40px;
padding-right: 40px;
padding-top: 5px;
padding-bottom: 5px;
But looks like it is a lot of playing around with pixels numbers to achieve the desired effect. Is there an easier way of tiling to achieve this effect.
If you don't want to mess with gradients, here is a simpler way, as I see there isn't actually a gradient in your image, but a two-tone button.
You can achieve this two-tone effect without altering the HTML by using the pseudo-element :before to add a 50% tall, transparent white div.
If you this method you actually have a reflection on your button, so text and icons inside it will also have that "shine" (example).
#login{
background:#444;
display:inline-block;
color:white;
padding:10px 60px;
border-radius:8px;
position:relative;
}
#login:before{
content:'';
width:100%;
height:50%;
background:rgba(255,255,255,0.2);
position:absolute;
top:0px;
left:0px;
}
DEMO: http://jsfiddle.net/ySTbB/
Use CSS3 and border radius
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
SRC: http://www.colorzilla.com/gradient-editor/
If this is the actual image you want to use as background, it would probably be a better idea to just use CSS:
input[type="submit"]
{
border: none;
border-radius: 5px;
background: linear-gradient(to bottom, #AAA 49%, #555 50%);
}
This will work, if button-slice.jpg is a 40px tall, 1px wide jpg "slice" of the background tile pattern.
.button {
display: inline-block;
width: 170px;
height: 40px;
line-height: 40px;
text-align: center;
background: url(button-slice.jpg) repeat-x;
border: 0;
border-radius: 8px;
text-decoration: none;
}
You could also forego images completely and use CSS3 gradients to create that background effect instead, which is probably a better solution if it's only intended for iOS.
Since you can use CSS3 I strongly suggest using it as such:
input[type="submit"] {
background: #3e3e3e;
background: -moz-linear-gradient(top, #616161 0%, #777777 50%, #3b3b3b 51%, #393939 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#616161), color-stop(50%,#777777), color-stop(51%,#3b3b3b), color-stop(100%,#393939));
background: -webkit-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: -o-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: -ms-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: linear-gradient(to bottom, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#393939',GradientType=0 );
border-radius: 6px;
color: white;
min-width: 100px;
padding: 10px 15px;
text-align: center;
text-decoration: none;
}
It'll load a lot faster and render nicer on different DPI devices.
I would use a gradient background with an image as a backup for browsers that do not support gradient. The image bg will tile automatically and the border radius will ensure rounded corners.
DEMO http://jsfiddle.net/kevinPHPkevin/hSwJN/16/
#submit {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
display: inline-block;
color: #000;
font-family:'Oswald';
font-size: 20px;
padding: 12px 24px;
border:none;
background:url('http://www.islandpoolnspa.com/More_info_button_background_rot_180.jpg');
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}