Results 1 to 3 of 3

Thread: CSS3 + HTML5: Troubleshooting 3D Text in different browsers

  1. #1
    Join Date
    May 2007
    Location
    Ontario
    Beans
    290
    Distro
    Ubuntu

    CSS3 + HTML5: Troubleshooting 3D Text in different browsers

    I’ve got a sample of some CSS and HTML rendered in 4 different browsers: Firefox 23, Konqueror 4.10.5, Epiphany 3.6.1 and Chromium 28.
    See here: http://i.imgur.com/gjUpazO.jpg
    The text rendered by h1 looks most attractive in Konqueror. The text rendered by h2 looks ugliest in Konqueror. The text rendered by h3 looks identical in all 4 browsers. The text rendered by h4 looks not quite as good in Konqueror.
    I suppose the reason why there is a discrepancy in how 3D text is rendering in Konqueror involves a nuanced technical explanation. It prolly has something to do with a variation of Webkit usage. My question is how do I make my 3D text render in Firefox, Chromium and Epiphany the way it does in h1 in Konqueror? Is that even possible?
    Gigabyte GA-P45T-ES3G LGA 775 Intel P45
    Intel Core 2 Quad Q9650 @3.0GHz
    16GB RAM DDR3 1333MHz
    EVGA nVidia GeForce GTX 560 Ti 2GB

  2. #2
    Join Date
    Sep 2005
    Location
    Rural Nevada, USA
    Beans
    293
    Distro
    Kubuntu 14.04 Trusty Tahr

    Re: CSS3 + HTML5: Troubleshooting 3D Text in different browsers

    Welcome to the world of web "standards". The only thing I can think of is to identify the client browser and present the best presentation for each based on trial and error. It's best if you're bald when you start out.

  3. #3
    Join Date
    May 2007
    Location
    Ontario
    Beans
    290
    Distro
    Ubuntu

    Re: CSS3 + HTML5: Troubleshooting 3D Text in different browsers

    Is this what you were referring to, llanitedave? It's w3c's documentation on tailoring your code for different web browsers.

    Here is the sample of the code I was troubleshooting in different browsers:

    Code:
    h1 {
    	font-family: Garamond, serif;
    	text-shadow: 0 1px 0 #ccc,
                   0 2px 0 #c9c9c9,
                   0 3px 0 #bbb,
                   0 4px 0 #b9b9b9,
                   0 5px 0 #aaa,
                   0 6px 1px rgba(0,0,0,.1),
                   0 0 5px rgba(0,0,0,.1),
                   0 1px 3px rgba(0,0,0,.3),
                   0 3px 5px rgba(0,0,0,.2),
                   0 5px 10px rgba(0,0,0,.25),
                   0 10px 10px rgba(0,0,0,.2),
                   0 20px 20px rgba(0,0,0,.15);
    	color: #CCC;
    }
    Every browser rendered it differently. For my site I went with this more basic code instead:

    Code:
    h1 {
     	text-shadow: 0px 2px 2px rgba(1, 2, 2, 1); 
    	color: #black
    }

    By the way, llanitedave: That jab at my balding hair wasn't very nice, you know? I was balding when I first picked up DOS-1.0. Beginning web-design today I'm menopausal ha ha ha
    Gigabyte GA-P45T-ES3G LGA 775 Intel P45
    Intel Core 2 Quad Q9650 @3.0GHz
    16GB RAM DDR3 1333MHz
    EVGA nVidia GeForce GTX 560 Ti 2GB

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •