CSS - Styling Font Awesome font icons - html
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%;
}
Related
How to make transparent text in all major browsers
I have a trouble with making transparent text in browsers. Here is a snippet
.title {
margin-bottom: 15px;
font-family: "Open Sans";
font-size: 87px;
font-weight: 800;
line-height: 1;
color: #fff;
text-transform: uppercase;
background: -moz-linear-gradient(to left,rgba(0,0,0,0) 0,rgba(255,255,255,0.8) 50%,#fff 100%);
background: -webkit-linear-gradient(to left,rgba(0,0,0,0) 0,rgba(255,255,255,0.8) 50%,#fff 100%);
background: linear-gradient(to left,rgba(0,0,0,0) 0,rgba(255,255,255,0.8) 50%,#fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
And result is:
But in IE 11 its not working how i can solve this ? Any advice ?
For IE10+ you can try with -ms-linear-gradient: background: rgba(0,0,0,1);/* Old Browsers */ background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,0.5) 100%); /* FF3.6+ */ background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(255,255,255,0.5)));/* Chrome, Safari4+ */ background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,0.5) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,0.5) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,0.5) 100%); /* IE 10+ */ background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(255,255,255,0.5) 100%);/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1 );/* IE6-9 */ If you like, can create this code in this tool: https://www.cssmatic.com/gradient-generator
Make 4 cells with divisor
How can I make these divisors of a simplest box. I have this simple box html and css.
HTML code is:
<div id="box"></div>
and CSS code of box is:
#box{
width: 350px;
height: 200px;
border-radius: 5px; /* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
}
OK. Let's go to divisor... how can i do them? Image linked is here:
Thanks
A couple of pseudo-elements overlaid on top might work:
body {
background: #c0ffee;
}
#box {
width: 350px;
height: 200px;
margin: 2em auto;
border-radius: 5px;
/* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
position: relative;
}
#box::before,
#box::after {
content: '';
position: absolute;
}
#box::before {
width: 100%;
top: 50%;
left: 0;
margin-top: -3px;
height: 4px;
background: linear-gradient(to bottom, white, lightgrey);
border-radius: 2px;
z-index: 1;
}
#box::after {
width: 4px;
top: 0%;
left: 50%;
margin-left: -3px;
height: 100%;
background: linear-gradient(to left, white, lightgrey);
border-radius: 3px;
z-index: 2;
}
<div id="box"></div>
You are either going to need to insert a background image with the lines on the image or create sections within the box and styling the box based on where it is located in the main box.
#box{
width: 350px;
height: 200px;
border-radius: 5px; /* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
font-size:0px;
}
.section{
width:49.25%;
height:49%;
margin:0px;
padding:0px;
display:inline-block;
}
#top-left{
border-bottom:5px solid white;
border-right:5px solid white;
}
#top-right{
border-bottom:5px solid white;
}
#bottom-left{
border-right:5px solid white;
}
<div id="box">
<div class="section" id="top-left"></div>
<div class="section" id="top-right"></div>
<div class="section" id="bottom-left"></div>
<div class="section" id="bottom-right"></div>
</div>
img on submit button - that is responsive
I want this
on a submit button so I gave it as a background.
I'm doing the page responsive so I gave it the next css :
#button1{
background: url('../images/button1.png') no-repeat;
margin-top:-270px;
padding-bottom: 10px;
padding-right: 2%;
width: 25%;
position:relative;
right:2.5%;
}
but when the page get smaller the image get cut.
How can I solve this problem?
If you have or can get/crop out the arrow and the barcode separately as transparent PNGs or GIFs, you can do this:
#button1 {
background: rgba(204,204,204,1);/* Old Browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6+ */
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,1)), color-stop(100%, rgba(102,102,102,1)));/* Chrome, Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* IE 10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%);/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#666666', GradientType=0 );/* IE6-9 */
position: relative;
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#button1:after,
#button1:before {
display: inline-block;
content: url('img/button-barcode.png');
margin: .5em;
vertical-align: middle;
}
#button1:before {
content: url('img/button-arrow.png');
}
The code employs pseudo elements ::before and ::after to put the arrow and the barcode into the <button> and the button will be responsive that way.
P.S. Works only on <button> tags, not on the button type of <input>!
JSF. Change buttons/commandButtons text style
I need change the jsf(now use jsf 2.2) button text style. I didn't find any default styles in the other forums(like .ui-buttons, .ui-buttons-text-only, it doesn't work). As example, I need a button with sizes(200, 200, blue), in the center of this rectangle new (20,20, white) and the simple text "blah". If try <h:button value="Logout" outcome="welcome" styleClass="button"> <h:outputLabel value="blah" styleClass="some_style"> </h:button> result will be next -> button, after it the text 'blah', but I need text inside button. Have anyone same problem? I need much same butons and commandButtons. Maybe some can give advice about reasons to create own jsf element with need parameters and styles? Thx
Because there is small space in comment section, I post it as answer.
For changing background, font size, style of button the following syntax and styles can be used:
html
<h:commandButton value="blah" action="welcome" styleClass="richButton" />
css
.richButton {
margin:0 5px 0 0;
padding:5px 10px 5px 10px;
height:29px;
font-size:12px;
color:#262626;
font-weight:bold;
border:1px #ccc solid;
border-radius:5px;
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #FFFFFF 0%, #E3E3E3 100%);
}
.richButton:hover:enabled {
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CCCCCC));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%);
}
.richButton:active:enabled {
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Opera */
background: -o-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0F0F0), color-stop(1, #CCCCCC));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #F0F0F0 0%, #CCCCCC 100%);
}
.richButton:disabled {
font-weight: normal;
color: #888888;
}
You need change size, border size, border radius, background.
How to create a tiled background button using CSS
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 */
}