Do you know that you are missing a lot with your current browser? Take a loot at this screenshot taken from this game review:
Follow up:
The screenshot above was produced by a browser, it wasn’t done by any image editing tool like GIMP. It is natural. Can’t believe that it is possible?
Well, you should, and you are going to miss more and more such new features as we move closer to CSS Level 3 (aka CSS3). Currently, the browser with the most implementation of CSS3 is Apple’s Browser – Safari 3.x line. That’s correct, the screenshot above was from Safari 3.
I am not telling you to make the switch, as long as you are not using Internet Explorer, you’ll be fine. Firefox 3’s next upgrade v3.1 is already testing the features out. Opera is said to be experimenting with it already for Opera 10. IE8? No news and I’m not counting an early implementation from that browser (until they’re forced to because they’re losing users to their competitors – so make that switch! You don’t know how hard it is for us web designers to make the site appear fine in IE!!).
Btw, I do not know of any WYSIWYG that offers CSS3 support yet, CSS3 is still in development and only a few of its modules are near finalization. So for now, we’ll get down to the codes itself.
Gimme a Curve!
Many web designers have been dreaming of this feature, some used JavaScript to achieve the curved border corners, while some did it the old-fashioned way – lots of images.
With CSS3, a new property was/or will be introduced: “border-radius“. In my example above, I have it as
Code:
'border-radius: 5px;' |
but that doesn’t work yet since it isn’t finalized, you have to add/use:
Code:
-moz-border-radius: 5px; |
|
-webkit-border-radius: 5px; |
-moz for Gecko based browsers like Firefox; and -webkit for Webkit based browsers like Safari
Be sure to include the base form border-radius in case Opera and IE implements it, especially that the two mentioned browsers do not have their own CSS prefix (Opera used to be -o, then -opera; while for IE, I remember reading about -ie or -ie8, but I can not find that article anymore).
Known to work with: Firefox 3.x; Safari 3.x
CSS3 (via Firefox 3.0.1)
Gimme a Shadow!
“box-shadow” and just like the previous property, you have to use -moz-box-shadow and -webkit-box-shadow. My setup in my example:
Code:
box-shadow: 7px 7px 7px #888; |
|
-moz-box-shadow: 7px 7px 7px #888; |
|
-webkit-box-shadow: 7px 7px 7px #888; |
However, for Mozilla, it will only work for Firefox 3.1 where it is currently being tested.
Known to work with: Firefox 3.1+; Safari 3.x
CSS3 (via Firefox 3.1a2)
Gimme text-shadow too!!
You got it already! The CSS3 Property is “text-shadow“! My setup:
Code:
text-shadow: 0.35em 0.35em 0.35em #000; |
For this property, you do not need the -moz and -webkit prefixes, it will work as it is in it’s correct format. This one works with Opera 9.51 as well.
Known to work with: Firefox 3.1+; Opera 9.51+; Safari 3.x
CSS3 (via Opera 9.51)
I also have another secret. If you are using Safari 3.x and Firefox 3.1.x, you may have noticed how your browser can display my Headline font which you know that you do not have. The secret is the ‘@font-face‘ CSS property which was actually introduced in CSS Level 2 (aka CSS2). The @font-face property was reported to be working on Opera 9.5x but I can’t get it to work (so probably it was in Opera 10).
Other browsers than IE only recently supported this ‘at’ property, Apple started the revival with the release of Safari 3. @font-face was proposed by the MSIE team and was accepted by the W3C (World Wide Web Consortium). However, for IE, they only support the EOT format and not TTF (TrueType Format) or OTF (OpenType Font), but details of this is for another discussion.
My code is simple:
Code:
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ |
|
@font-face { |
|
src: local("Fertigo Pro"), |
|
url("/wp-content/uploads/2023/12/rsc/fonts/Fertigo_PRO.otf") format("opentype"); |
|
font-family: "Fertigo Pro"; /* serif */ |
|
} |
|
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ |
The ‘local’ parameter is used in case the font is installed in the visitor’s machine, if not, it will fetch the font from the ‘URL’ as defined by the author. The ‘format’ is used to make it easy for the user’s browser to determine the type of the font. As simple as that. @font-face is an advance property, there are more uses to it than I presented above (and I am actually enjoying it in my test server). I will present some test cases of it sometime 
Or you can Google it..
A fair warning to you, be careful when “embedding” fonts into your webpages (it is not literally ‘embedding’ but that is the term used since). There are licenses to be followed and respected. To check, just right click then choose properties of the font file you want to upload. Under the Emdedding tab, it should say “Installable….” That is the only time you can upload a font and link it as shown in my example.
There are some exeptions to this depending on the Font License offered. Some do not have “Installable…” in the Font Properties Embedding tab, but somewhere on the Font’s official website is a clause that states you can use it for “@font-face” or “Web-fonts” or “Web Embedding”. Be also mindful of the other clauses like giving credits back, as what I did for the font I am using for this blog (see above code).
That’s it for now – CSS3, things to come and things you can already use.
Have fun and enjoy!!
References:
CSS3 from W3C – World Wide Web Consortium
CSS3 Previews from CSS3.info – Keep up-to-date with anything CSS3
exljbris Font Foundry – creator of the font Fertigo Pro
Live Sample (test in order = Firefox 3.0.1 -> Opera 9.51 -> Firefox 3.1a2 -> Safari 3.1.2):
Secret Maryo Chronicles – from Libre Game World
Except where otherwise noted, this content is
licensed under a Creative Commons License.