JasonCypret.com » Quick Bits

jQuery MagicLine Navigation

Jason Cypret — Tue, 09 Feb 2010 15:47:03 +0000

Chris Coyer “da css man” wrote a great post over the moving line navigation. Hey guess what? I use something very simulator on my site except I opted for a static width of the highlight. Anyway it’s a pretty sweet and very easy to understand.
$(function(){ var $el, leftPos, newWidth, $mainNav = $("#example-one"), pageOffset = $mainNav.offset().left;


    // Fixing the offset if the window changes size

    $(window).resize(function() {

        pageOffset = $mainNav.offset().left;

    });
    $mainNav.append("
");

    var $magicLine = $("#magic-line");
    $magicLine

        .width($(".current_page_item").width())

        .css("left", $(".current_page_item a").offset().left - pageOffset)

        .data("origLeft", $magicLine.offset().left - pageOffset)

        .data("origWidth", $magicLine.width());

$("#example-one li").find("a").hover(function() { $el = $(this); leftPos = $el.offset().left - pageOffset; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); });

Check the demo out at CSSTricks

47 Amazing CSS3 Animation Demos

Jason Cypret — Thu, 04 Feb 2010 18:27:38 +0000

Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!

Rock Solid HTML Emails

Jason Cypret — Fri, 22 Jan 2010 16:37:41 +0000

If you like me you have to churn out HTML emails from time to time. Every time I code of of these my hatred for tables and email clients start to flair up. The lack of css support in emails is ridiculous and really needs to make a change. But until any changes happens were stuck with what we got. Table design in email is king, If you want your email to look as close to the original design as possible. This is a great article with tips for coding your tables.

At some stage in your career, it’s likely you’ll be asked by a client to design a HTML email. Before you rush to explain that all the cool kids are using social media, keep in mind that when done correctly, email is still one of the best ways to promote you and your clients online. In fact, a recent survey showed that every dollar spent on email marketing this year generated more than $40 in return. That’s more than any other marketing channel, including the cool ones.

There are a whole host of ingredients that contribute to a good email marketing campaign. Permission, relevance, timeliness and engaging content are all important. Even so, the biggest challenge for designers still remains building an email that renders well across all the popular email clients.

Timed CSS Stylesheet Switch Using PHP Tutorial

Jason Cypret — Fri, 22 Jan 2010 16:07:00 +0000

Today I’m going to show you a pretty clever technique for changing the Cascading Style Sheet by time using PHP, this can be a quirky addon for region/country specific sites, and will allow you to experiment and perhaps alter the code to use for different purposes.

I have coded this so it uses 4 stylesheets and changes at 6am, 12pm, 7pm and 11pm.

The whole project is available to download and demo below, here I will break it down and explain its elements.

Read at webm.ag

jQuery Generates External Stylesheets From Your HTML

Jason Cypret — Thu, 21 Jan 2010 16:02:18 +0000

HTML to CSS Tool
My HTML to CSS tool will parse through your HTML structure, pull out IDs, classes and any inline CSS and create a basic stylesheet for you. To see this article in action, feel free to skip right to the live demo >>

Read at NealGrosskopf.com

Photography Inspiration : Lightone

Jason Cypret — Thu, 21 Jan 2010 08:30:13 +0000

Gorgeous light painting in a really surreal setting.

30 sec exposure – Tralee bay with Slieve Mish Mountains in background

Via Creattica.com

The Basics of Object-Oriented JavaScript

Jason Cypret — Wed, 20 Jan 2010 15:59:38 +0000

Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped the core language yet.

While in the past it was a common argument that JavaScript was a basic language and was very ’slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).

Read at Nettuts+

Web Design Inspiration : volll.com

Jason Cypret — Fri, 15 Jan 2010 22:46:12 +0000

This is probably my favorite one page design. Really makes use of space and colors. volll.com

Web Design Inspiration : seekandhit.com/en

Jason Cypret — Fri, 15 Jan 2010 22:43:54 +0000

I love the chart line going through the page. Great colors too. seekandhit.com/en

Web Design Inspiration : riotindustries.com

Jason Cypret — Fri, 15 Jan 2010 22:41:13 +0000

Slow clap for these guys. This site looks simple but really encourages interaction. Kudos.riotindustries.com