Skip to main content
natelawrence
natelawrence
Participating Frequently
December 31, 2020
Question

Are distortion effects, such as Illustrator's 'Envelope Distort: Bulge' able to be applied to HTML?

  • December 31, 2020
  • 2 replies
  • 774 views

I'm currently building a fansite for a series of web videos. 
The title for the series uses Georgia Bold with a fisheye effect applied. 
I've approximated the fisheye effect on the text in Illustrator but had to convert the text to paths to import it into my XD mockup. 

Assuming that I license the typeface for my fansite, is it possible to apply the fisheye effect to HTML text in realtime via CSS or other web standards technology?

If this should be posted somewhere other than the Dreamweaver community, please let me know if there is another Adobe community board where it would be appropriate to ask web-specific questions such as mine. 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 31, 2020

    Hi @natelawrence.

    Welcome to the Dreamweaver community.

     

    There are a bevy of text distortion effects (static and interactive) that you can use on the web. See link below.

    https://speckyboy.com/text-distortion-effects/

     

    That said, you need a font which is specifically licensed for use on the web.  And Georgia Bold doesn't appear to be one that's OK'd for web use.  So CSS is out.

    https://fonts.adobe.com/

     

    For your purposes, I think SVG is the best option. And Illustrator is the right tool to create your logo/brand and export to SVG.

     

    Good luck with your project!

     

    Nancy O'Shea— Product User & Community Expert
      natelawrence
      natelawrenceAuthor
      Participating Frequently
      December 31, 2020

      Hi, Nancy, 

       

      Thank you for the welcome and the link to practical demonstrations of text effects on the web. 

       

      As to the topic of Georgia Pro Bold being licensed for web use, Linotype offers it here: https://www.linotype.com/907695/georgia-pro-bold-product.html?site=webfonts&format=ot-ttf&branding=pro

       

      Thank you again for your encouragement. 

      O
      osgood_
      Legend
      December 31, 2020

      Is it possible to apply the fisheye effect to HTML text in realtime via CSS or other web standards technology?

       

      Not that I know of. Your 'fisheye' text is more like a logo, so use either a svg or gif image.

       

      Personally I don't think there is any point in jumping through hoops unless it can be acheived easily using some simple css. Theres many css text effects which can be applied but I haven't come across a 'fisheye' text effect. I don't really concentrate much on css text effects myself because most are usually quite gimmicky and not necessary. Someone may have come across a similar effect achieved using css, let's hope they respond to your post.

        natelawrence
        natelawrenceAuthor
        Participating Frequently
        December 31, 2020

        Thank you for taking the time to reply. 

        I do agree that the text is used as a logo. 

         

        I fear that our philosophies diverge after that point, however.

        To my mind, all text on a page ought to be be searchable via the browser's Ctrl+F | Cmd+F functionality.

        If the current state of web technology is capable of offering:

        - vector shape purity

        - faithful geometry

        - editability | indexability | searchability

        then I will happily accept.

        A little extra time to perfect a CSS effect to perfect a logo is worth it to me. 

         

        The concept of the series is to cover all of the games in a particular console's library in order of first release of the games. In other words, the games are sorted by time - chronologically. 

         

        I plan on offering an interface based on Microsoft Live Labs' Pivot control to filter and sort the chapters of the episodes. The content will remain the same, however the order may no longer be by chronology, hence it might be fun to be able name different filterings (e.g. sorting by genre could become "Gentendo", sorting by duration of game coverage [longest first] could become "Longtendo") and present them dynamically to the user who has created a particular sorting method in the logo styling. 

         

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        December 31, 2020

        "To my mind, all text on a page ought to be be searchable..."

        ===========

        I agree with you. And in case you didn't already know, SVG is merely XML code which if put together correctly is searchable.  If I'm not mistaken, <text> wrapped in SVG tags can be translated by robots and indexed by search engines, too.

         

        SVG is self-contained which is important for design aesthetics.  Ordinary CSS styled HTML text can be a bit unruly to work with.

         

        But the real beauty of SVG is that it's math-based, not pixel based.  So you can rescale SVG with CSS to ANY size needed without any loss in quality. 

         

         

        Have a happy new year!

         

        Nancy O'Shea— Product User & Community Expert
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices