CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript? Update: July 13, 2011 You may want to read my subsequent article, which covers using my cssSandpaper JavaScript library to produce multiple blurred and un-blurred text-shadows in IE7+. When IE9 was released, I was really happy to see all the great CSS3 features it supported. 2D Transforms, advanced selectors, border-radius, rgba/hsla colors, WOFF fonts … the list goes on. And no polyfills required! I was, however, disappointed that IE9 doesn’t support two of my favorite CSS3 effects: border-image and text-shadow. I’m sure that I will notice other CSS3 effects missing over time, but these are two features that I currently find incredibly useful. This article will deal with text-shadow: how it works in browsers that support it, and strategies we can use today to emulate some of its functionality in IE.
How does CSS3 text-shadow Work? Before we go on about IE, let’s have a quick overview of how the CSS3 specification works. Here are some examples: You are not restricted to just one shadow. WRAP : Chérie, ça va couper ! | La tête dans le Flux ! Les spécifications CSS3 apportent leur lot de propriétés et techniques pour gérer les césures et coupures des mots longs. Certaines de ces propriétés sont déjà reconnues par les navigateurs actuels et par conséquent tout à fait utilisables en production. Intéressons-nous à deux d’entre-elles : word-wrap et hyphens Word-wrap : la césure “barbare” Word-wrap est une propriétés très ancienne, inventée par Microsoft puis introduite dans la norme CSS3. Son principe est de couper simplement et sans fioritures les textes qui débordent de leur conteneur.
Son seul inconvénient est qu’il n’est pas possible d’intervenir dans les choix de coupe et que le résultat, par conséquent, n’est pas toujours très satisfaisant. Hyphens : la césure “propre” La propriétés hyphens n’est supportée que par quelques rares navigateurs actuellement (Firefox 6 ou 8 selon les langues, IE10, Safari 5.1) Elle est donc bien pratique, mais encore assez peu supportée (elle nécessite d’ailleurs des préfixes vendeurs). A JavaScript and Web Design/Programming Resource By Matt Snider | CSS String Truncation with Ellipsis. Today’s article is brought to us by guest writer, Justin Maxwell. Justin will explain the technique he fine tuned for Mint.com to ellipsis text using just CSS. For more information about Justin see the end of this article. Article updated on Aug. 21, 2013 Mozilla added support for CSS ellipsis in version 7.0, see the latest CSS.
In contemporary web application interfaces, areas for single-line, user-defined labels (strings) are common. For example, Mint.com allows customers to edit transaction descriptions and account names. Truncation on the server-side is unnecessary, complicated, and usually confusing to the user. Example 1. With no width restrictions, and no ellipsis, this paragraph (<p> tag) displays as one would expect…a big block of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. But that’s not what we want. Example 2. And if it were as simple as that, this article wouldn’t be necessary. Example 4.
The Essential Guide to @font-face. Fonts on the Web The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them. Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography. There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use. Further, even the most popular browsers support each of these technologies in widely varying degrees.
However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs. Licensing and Free Fonts The Basic Syntax. My fonts - Online Font Converter.
Bulletproof @font-face syntax. Let me introduce you to the best way to do your @font-face definitions: This is the Fontspring @font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf. May 12th, 2010. If you’re looking to just put @font-face to use today, just head to FontSquirrel’s generator.
Okay, let’s see what we got here… Conditional comments (via) Ugh. Double declarations (via) The problem here is that, as Andrea points out, IE will actually download the .otf file. Because after all, IE doesn’t understand the format hint, right? GraublauWeb.otf’)%20format(‘opentype Oops, looks like someone forgot a ? Mo’ Bulletproofer (via) Richard Fink proposed this alternate syntax actually as a response to this post, but I’ve included it back here. The local reference Much more concise and clean. Bulletproof @font-face Demo Android :/ CSS Vertical Text | ScottGale.com. Many people have written about the potential for vertical text in CSS so I wanted to try it out for myself. By using the technique described below I was able to achieve this effect: *Disclaimer: This doesn’t work in old Opera versions, but does work in Opera 10.5. This also works in IE6+, FF, and Webkit based browsers, so that is pretty encompassing. Here is the basic markup: <p>CSS Vertical Text</p> I wanted to try to do my best to exclude IE browser checks and conditional checks.
Also, if I can stay away from IE filters I like too, but it’s worth mentioning that if you have an specific rotation, you have to use the IE filter: filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); Where 0, 1, 2, 3 correlate to 0, 90, 180, and 270 respectively. So I tried to keep this one simple, but lining everything up in different browsers can be a pain because of the way each browser interprets the spacing. Information for this post was pulled from the following places: CSS outline property - outline: none and outline: 0.