All that we need to do now is to incorporate some of the important <script> tags within the head and this would make the text shadow built in CSS3 work in Internet Explorer very smoothly. Assuming that we are seeing the web page in Internet Explorer, below are the attributes that would need to be followed in order to make the page visible properly and clearly in Internet Explorer.
Below lists the attribute of different sort of text shadow build in CSS and to be executed in internet Explorer:
|Simple 2px 0 #E51919|
|Blurred 3px #B24C4C|
|Etched 1px white|
|Flaming 0px white, -5px #FFFF33,-10px #FFDD33, -15px #FF8800, -25px #FF2200|
|Neon 1px #ffffff, 2px #ffffff,3px #ffffff, 4px #ff00de,7px#ff00de,8px #ff00de,10px #ff00de,15px #ff00de;|
|Unfocused 3px #fff|
|Glowing 60px yellow|
|Embossed -1px white, #333333|
|Pillow 1px white, -1px #444|
|Fake 3D 1px rgba(255,128,0,.7), 2px rgba(255,128,0,.7), 3px rgba(255,128,0,.7), 4px rgba(255,128,0,.7),5px rgba(255,128,0,.7)|
The point to note there is that the blur example that we have shown above will not be able to display properly or correctly in some version of Internet Explorer that includes IE7 and Ie8. The reason behind the same is the inability of the transparent colour support.
Let us go through some of the excellent examples that back the examples that we have displayed above.
Some of these examples include text shadowing, CSS3 making use of Photoshop etc.
Below lists the code that needs to be included as part of the document header for which you need to do a shadow on the text.
Listing 1: Code included as a part of document header
<script type=”text/css”src=”/path/to/EventAssist.js”> </script> <script type="text/css" src="/path/to/shadow-text.js"> </script> <script type="text/css" src="/path/to/jQuery.js"> </script> <script type="text/css" src="/path/to/cssQuery.js"> </script>
Now with the above code, it should definitely work properly in internet Explorer. With the help of the HTML5, the type="text/css" attributes can be removed.
Let us see the limitations or rather the points that we need to take care of while making use of the text-shadow in internet Explorer.
As we have seen in the above examples, there is a slight difference in the appearance of the shadowed text that is blurred. This is due to the reason that we have different sort of logical performed in Internet Explorer Filters when we compare the same with the CSS3 shadowed texts.This becomes very obvious in the shadowed texts that are more blurred in the same text. We may find these being accepted by majority of the applications. For developers that would like to make use of the pixel-bitch, we should be aware of the difference.
If we go ahead and create a shadowed text that is larger than 90px, this can lead to Internet Explorer engine performance to slow down to a good extent at the time of scrolling the text down.
At times you will see the Internet Explorer truncating the shadows at the time when height of the line is too much small.
Few alphabets that you are using and the alphabets that are descending may also get truncated in case the height of the line is not set to be larger. This needs to be set to a larger font than the actual size of the font.
Talking about the Internet Explorer 7version, the elements that are being displayed over the shadowed text and having a height of the line property that is measured in em units, this may affect the shadow of the text in Internet Explorer version 7 as well as 8. In case we see any issue around this, then the shadow of the text might get displace a pixel away from its normal position where it was expected to be.
As it can be clearly point out from the above discussion that the issue is much larger than we see. The biggest issue is that when we don’t have any sort of blur radius in the shadowed text, it will appear displaced from its normal or rather the regular position. We need to get the workaround for this problem and one such way is to do with the rounding errors at the time when we have Internet Explorer converting the em units into the required pixels.
At times you will see the when you are making the shadows of the text to appear in a proper manner making use of ClearType, you may need to take the help of override property of CSS3. This needs to be done on the HTML that is being applied on the text-shadow.The property is normally made use of by the Internet Explorer however it is required for this property to set the value of the text background and also there will be times when you would need to make the outline of the text. Also the need would be to make the shadows as solid as possible.Let us take the example of the below figure with the style text attributes shown in the below cod where in we have used the CSS. This is done so as to come up with a shadow on the CSS3 text:
Figure 1: CSS text-shadow
Listing 2: text-shadow
-cssQuery-override: #77777; text-shadow: -4px 0px #0f1128, -8px 4px rgb(50, 250), -10px 4px rgba(50,250, 0.5), -8px 4px rgba(50, 250, 0.7), -8px 4px rgba(50, 250, 0.5);
The reason why we have used here#77777 is that it gives us with a greyscale colour. This colour usually falls in between the sharpness of the white text and the blue one. If we would have set the black colour then the text’s dark shadow of the text would seem to be blocked. This is shown below with the help of the code.
Listing 3: Using Greyscale Colour
-cssQuery-override: #000000 -cssQuery-override: #77777 Scale 200% Scale 500%
The value that you will set for the above text will have a dependency on the shadow of the text you are making use of. This all depend on the interest of the developer and how much shadow you want to elongate on, accordingly the value of the text can be set on.
The script that we have displayed above gives a good amount of opportunity in order to style the text in different patterns and work them in Internet Explorer browser. Though we need to do a good amount of work so that the script can be made better and with maximum amount of defects resolved, but still this opens the gate for Internet Explorer compatibility.
There are some more changes that can be done, one of them comprises of the selection of the library for the css selector. We need to re-factor the css in order to make it use by the other selectors rather than just cssQuery. This is at present bundles with it and will jQuery as well. This will help the developers so as to minimise the amount of libraries in the documents. Also this will help in bringing down the load time to a good number.
The other modification that needs to be done is the css modularity. The very first thing that is required is the availability of own plug-ins. This is required so as to support the properties of CSS that are not currently supported by Internet Explorer browser.
The advantage of this modularity will be that the framework will let the developers to incorporate the properties of the CSS that is required to be used. Example includes the assumption that in case a developer that is not in a habit to make use of CSS transforms, this means that the code has not been included.
The article focussed on the working of CSS3 in Internet Explorer. We also saw how shadows can be included as a part of text in a web page. Hope this was useful.