Grow your CSS skills. Land your dream job.

Webfont Colophon – feedback

  • # April 10, 2013 at 4:23 pm

    Hey, everyone. I’ve been busy trying to get my design completed on my about page and wanted some constructive feedback on this specific layout/idea regarding the webfonts-in-use.

    I designed a simple “webfonts-in-use” colophon to showcase what webfonts I’m using across the site. I wanted to spice it up a tad by making it actually do something without it just sitting on the page, which is kind of boring.

    I figured I could make the letters fade in and out with jQuery while switching to the next set of characters so one could see the letterforms.

    Thoughts? Additional or other ideas?

    Note: The animation will only work on the page when you hover inside the borders. Otherwise it’s a distraction. Also, the characters will cycle all the way through “Aa” to “Zz” and not just “Aa” to “Cc” as shown in the image above

    # April 10, 2013 at 6:06 pm

    I think it’s a neat idea, really cool to be informed as you’re reading. I’m not sure I like the fading part of it, but I guess that might change if I could actually see it in practice (not just a gif).

    # April 10, 2013 at 7:19 pm

    @TheDoc Appreciate the feedback, thank you!

    Can you elaborate on what you mean by not liking the fading part? Should I have them cycle without a fade? Also, I’m not sure if I explained this well. The cycling will only happen when the mouse is hovered inside the perimeter. I think if I were to have it cycling in general, it would be a distraction to the user when reading the rest of the content on my about page.

    # April 10, 2013 at 7:35 pm

    It’s just that the gif doesn’t really do justice to how it will look on the page. So as it looks in this thread, I don’t really like the appeal. It’s not as smooth as I’d like.

    # April 10, 2013 at 8:03 pm

    That’s true, it doesn’t. I’m going to give a few people access when I feel it’s complete for last minute feedback, error-spotting, typos, etc., if you’re interested?

    I was also thinking about showing specific features of the webfont. Such as showing ligatures and whatnot instead of just cycling through the alphabet.

    # April 10, 2013 at 8:04 pm

    Hmmmm… You got my creative juices flowing. I’m off to build a cool CSS3 animation example of your idea. I’ll post back when I am finished building it. :D

    # April 10, 2013 at 8:05 pm

    @ElijahFowler Hey, please do!

    # April 23, 2013 at 8:50 pm

    So, sorry it took me this long to get back with the finished product, I had a lot of work come up these past two weeks.

    I got it working with just HTML and CSS Animations, but I wasn’t able to get it to work like I wanted do it originally. The way I wanted to do it was to have one element with before and after psuedo element with the text in them, and to change the text and text style with a keyframe, but unfortunately that’s not possible with keyframes. So I wound up setting up 26 elements to place the content in.

    Here’s the finished product at CodePen

    Enjoy~!
    -Elijah

    # April 23, 2013 at 8:55 pm

    One could conceivably use this to change up the animations a bit too: [Animte.css](http://daneden.me/animate/ “Animate.css”)

    # April 23, 2013 at 9:20 pm

    Nice work @ElijahFowler. I think I’m going to stick to jQuery to keep the markup minimal. I also might not be showcasing all 52 glyphs. Instead, I might focus on the appearance features (ligatures, italics, etc).

    # April 24, 2013 at 12:03 pm

    If you’re already calling jQuery then using it would be a LOT less markup. All in all, it was just a fun side project for me. If things had worked out as I wanted initially then it would have been really light but seeing as how they didn’t… lol

    Good luck with your project. :)

    # April 24, 2013 at 12:39 pm

    i LOVE the fading part, but I think it should be slower.

    # April 24, 2013 at 1:31 pm

    Thanks for the feedback

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".