Replace image buttons with css

[DionDesigns]

I did this for a client. Here's a sample using the default Prosilver background for the buttons. The button on the right is the current image, the one on the left is text-based:



This is the (Firefox-based) CSS which created the button:

Code: Select all

margin-top: 3px;
padding: 0 6px;
height: 13px;
line-height: 13px;
background-image: -moz-linear-gradient(#fff, #ddd);
color: #c54;
border: 1px solid #888;
font-family: "Droid Sans";
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
border-radius: 3px;

[Danielx64]

I did this for a client. Here's a sample using the default Prosilver background for the buttons. The button on the right is the current image, the one on the left is text-based:



This is the (Firefox-based) CSS which created the button:

Code: Select all

margin-top: 3px;
padding: 0 6px;
height: 13px;
line-height: 13px;
background-image: -moz-linear-gradient(#fff, #ddd);
color: #c54;
border: 1px solid #888;
font-family: "Droid Sans";
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
border-radius: 3px;

Nice work, I'm impressed.

Only question is, will that look good everywhere else (IE 8/9/10, Google Crome, opera etc)?

[DionDesigns]

Only question is, will that look good everywhere else (IE 8/9/10, Google Crome, opera etc)?

If the linear-gradient CSS used in the current text buttons was used in my example, then it would have the same compatibility as the current text buttons.

The lone issue is the font. These buttons require a narrow font (as do the larger buttons, but we won't go there). Fonts such as Verdana or Open Sans would look ridiculous with these small buttons. I chose Droid Sans, but Ubuntu would have worked just as well. Arial would also work but it doesn't look as good as Ubuntu or Droid Sans at small point sizes.

In the long run, though, Arial will probably win out (in all cases). It's the only font being discussed that supports languages such as Hebrew, Arabic, Gujarati, and Kanji (meaning, 2/3 of the world's population). Open Sans, Droid Sans, and Ubuntu are limited to Latin/Cyrillic/Greek characters.

[Arty]

Gradient is not the issue at all. All modern browsers support it, except Safari that requires -webkit prefix and IE 8/9 that supports filter instead. Font is.

Please check your code in different browsers on multiple operating systems.

[DionDesigns]

Please check your code in different browsers on multiple operating systems.

Why?

phpBB has shown no interest in platform-consistent fonts. The current product has platform-consistent font issues that are orders of magnitude worse than the miniscule issues of a few buttons. The product in development has platform-consistent font issues that are orders of magnitude worse than the miniscule issues of a few buttons.

It's interesting how you ignored my comment that Open Sans as a webfont has no support for languages used by 2/3 of the world's population. This is an issue with all webfonts. I said it to you in another topic recently, and it applies here as well:

This very much comes across as a straw-man argument to justify something you want for your yourself as opposed to being for the benefit of the end-user.

If international support is important to the phpBB product, I'll go one step further and say that the use of webfonts in the core product is detrimental to the end-user. The solution is one I see mentioned a LOT around here...leave webfonts in the hands of style developers and out of the core...

On that note, I'm done with this topic.

[Arty]

What do you mean "why"? Are you so incompetent that you can't understand that people use more than one browser and multiple operating systems? This is default software, it must work for everyone, not just selected few.

This isn't 1999 when designers only worried about making their website work in one browser. These days users use many operating systems: Windows, OSX, iOS, Android, all of them deal with fonts differently and when proposing a solution that deals with fonts you must make sure it works for all of them.

Yet you seem to live in last century, insisting on solutions that work only in selected 1-2 browsers. Do you even know anything about design? Doesn't seem so. Your own website looks like it was designed 10-15 years ago, still using tables for layout, images designed in MS Paint and fonts that seem to be selected randomly. You have released exactly 0 styles, you have no experience whatsoever working with mobile designs.

If you want to constructively prove that your solution works, please provide proof instead of posting more gibberish. Why are you refusing to do so? In last topic I've provided proof that your solution is crap (just like almost everything you say) and in response you tried to derail thread into completely different issues, just like you are trying now.

P.S. -moz-linear-gradient is NOT valid CSS3 unless you are stuck with ancient Firefox 3.6

phpBB has shown no interest in platform-consistent fonts. The current product has platform-consistent font issues that are orders of magnitude worse than the miniscule issues of a few buttons. The product in development has platform-consistent font issues that are orders of magnitude worse than the miniscule issues of a few buttons.

Those are completely different issues. Just because some other part of style has problems, doesn't mean you can add more invalid code. Please stop trying to derail topics into unrelated issues (again).

[MattF]

Please check your code in different browsers on multiple operating systems.

Why?

Its simply a "Best Practice"

If you're gonna use gradients, as well as text shadows, rounded corners and any other CSS3 effects, its quite simple to simply include -moz -webkit prefixed lines of css as fallbacks. Then you don't even really need to test (except in old IE). Heck, there are numerous sites out there that will generate all the fallback code for you as well!
for example, gradients: http://www.colorzilla.com/gradient-editor/

Your Gradient CSS should really be this:

Code: Select all

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */

[Arty]

That page is out of date.

-ms-linear-gradient - doesn't exist
-o-linear-gradient - Opera supports unprefixed version
-moz-linear-gradient - no longer needed because recent versions support unprefixed version and its one of browsers that is being updated automatically, so nobody is using old version
-webkit-gradient - no longer needed because Chrome supports unprefixed version and Safari supports -webkit-linear-gradient syntax

Also it is better to use background-image instead of background for gradient. Then you can use rgba values without having to add background color on each line.

[Pony99CA]

I did this for a client. Here's a sample using the default Prosilver background for the buttons. The button on the right is the current image, the one on the left is text-based:

Cool, but can't you use either a backgroound imatge or text-based CSS (floating a bold “ over the button, perhaps) to get the "open quote" in the button, too?

That way, even people who don't speak the board's language could figure out what the button did.

Steve

[Arty]

That can be done by adding ether background or text via :before pseudo element.

Code: Select all

ul.profile-icons li.quote-icon { position: relative; }
ul.profile-icons li.quote-icon:before { content: ''; display: block; position: absolute; top: 0; left: 0; add background image here and set width/height }

or

Code: Select all

ul.profile-icons li.quote-icon { position: relative; }
ul.profile-icons li.quote-icon:before { content: "\'\'"; display: block; position: absolute; top: 0; left: 0; add font here }