JasonCypret.com » CSS

Target IE with CSS Hacks

Jason Cypret — Wed, 19 Oct 2011 15:44:59 +0000

Note: these hacks should only be used as a last resort. You should always use conditional comments over hacks. But if you are limited in the codebase, and cannot add comments then these hacks will come in handy. These are pretty widely available, so this is more of a bookmark for me.

.selector {
	background: red; /* all browsers */
	background : green\9; /* IE8 and below */
	*background : yellow; /* IE7 and below */
	_background : orange; /* IE6 */
}

via: NetTuts

Vertical Rhythm: Setting A Baseline

Jason Cypret — Mon, 14 Mar 2011 17:01:00 +0000

Posted in Development Web Design

html, body {
	line-height: 1.5em;
}

Leading (which rhymes with “wedding”) is a typographical term from way back when typographers manually set type in letterpress machines and the like. The term refers to the act of placing lead between lines of type in order to add vertical space. In CSS, we call this line-height.

Line height should be around 140%. This isn’t a great number to work with, and it’s only a general rule, so we’ll use 150% (or 1.5 em). This way, we simply need to multiply the font size by one and a half to determine our leading.

Some general rules for leading:

with continuous copy, use large leading;
with light text on dark background, use large leading;
with long line lengths, use large leading;
with large x-height, use large leading;
with short burst of information, use small leading.
If you used a 16-pixel font size, then your line height will be 24 pixels (16 pixels × 1.5 em = 24 pixels). If you used a 12-pixel font size, then your line height will be 18 pixels (12 pixels × 1.5 em = 18 pixels).

Via Smashing

Think3r inc.

Jason Cypret — Fri, 19 Nov 2010 18:58:46 +0000

Posted in Development Portfolio Web Web Design

Think3r is an idea incubator that partners with entrepreneurs to create unique web experiences. Think3r’s projects span many industries including finance, photography, insurance, online dating, and events. Some of our released projects are TinyPress.org, and QuoteGoat.com. Think3r is a team of developers and designers based in Dallas, Texas. We can’t wait to partner with you!

jQuery MagicLine Navigation

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

Posted in Development Link

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

True Sign Up Onsite

Jason Cypret — Tue, 22 Sep 2009 16:15:07 +0000

Posted in Portfolio Web

I did this project at Metric Interactive for True.com. True wanted new sign up pages but they had to keep some of the site characteristics. I came up with several designs and actually one of these over took the best performer of all time. I was super excited about that.

OS and Browser Stats for JC.COM

Jason Cypret — Tue, 17 Feb 2009 23:45:41 +0000

Posted in Web Design

This is a quick little post. I was rooting around my cPanel and thought I’d check out the OS and Browser stats. I don’t usually care about this data, so I rarely check in on it. I typically just care about page views and refers. Anyway, I found it very interesting the when I viewed the results. I thought that there would be much more traffic from via Mac computers. However, since I work on a PC during work it is understandable that some of the numbers could be skewed. Still very interesting. Maybe I should do some windows tips now…HA HA, just kidding.

The next part, the browser stats, is what I really found the most interesting. Being a web designer, I have to design and code for the lowest common denominator. Usually this is the dreaded IE6. While I have respected people like Jason Schuller for totally dropping support for IE6 I found that it was best to support it for a bit longer. However With these numbers I find it very compelling to drop support for IE6 altogether. I mean when I think of the waisted development time spent making separate style-sheets and hacks for IE6, all for the low numbers I am receiving from IE6 users, it makes me want to stop once and for all. So moving forward I will no longer develop for IE6 on any personal sites nor on small website projects. Its just not worth my time.

What do you think?

Operating Systems (Top 10) for JasonCypret.com	Hits	Percent
Windows	152795	64.8 %
Macintosh	73483	31.2 %
Unknown	5609	2.3 %
Linux	3587	1.5 %
Sony PlayStation Portable	4	0 %

Browsers (Top 10) for JasonCypret.com

Hits

Percent

Firefox

111868

47.5 %

MS Internet Explorer

53698

22.8 %

VERSIONS	HITS	PERCENT
Msie 8.0	3188	1.3 %
Msie 7.0	38627	16.4 %
Msie 6.5	4	0 %
Msie 6.0	11691	4.9 %

Safari

50125

21.2 %

Google Chrome

10333

4.3 %

Unknown

3966

1.6 %

Opera

2916

1.2 %

Mozilla

1485

0.6 %

RSSOwl (RSS Reader)

384

0.1 %

Netscape

180

0 %

Camino

148

0 %

Others

375

0.1 %

Design Inspiration Coming at Ya!

Jason Cypret — Tue, 17 Feb 2009 20:29:10 +0000

Posted in Reviews Web Design

I’ve been digging on some great site designs that I wanted to share. These sites are so well done, they really make me want to start on a new design and feature set. Enjoy some design inspiration.

Alex Buga

Alex Buga has got a great sense of style, but what I like most about it is the layout and how it was completely re-imagined. Full of Ajax greatness too!

Nine Lion Design

Nine Lion Design is rocking a wood based design, but the wood has depth and a sense of motion. Love the colors and the overall idea.

Black Wave Creative

Black Wave Creative has got the grunge look down. Sometimes grunge sites can be overwhelming and depressing if not done right. Black Wave Creative is not one of those sites.

45royale

45royale has great colors, but its not only the colors that make it a great site. The site is great because of the way they are using different layouts throughout the site.

Old Loft

Old Loft is just well done design met with well done coding. Kudos.

Works4Sure

Works4Sure Has a great natural feel to it. I love the paper clip and note elements.

Geek Week – jQuery, PHP, WordPress, Design, CSS

Jason Cypret — Thu, 05 Feb 2009 18:44:26 +0000

Posted in Development Web Design

I’m coming off my long hiatus since, well Christmas. I’ve been crazy busy lately, but I have recently been able to catch my breath and check out some great tutorials, blogs, and design inspiration found all around the interwebs.

jQuery

I’ve got a lot of jQuery links for ya. I’ve been doing quite a bit of jQuery work lately.

CSS & XHTML

Here’s some fun and usefull CSS tuts, and tricks.

PHP

Roll your own MySQL and PHP powered CMS.

WordPress

More wordpress tidbits to improve yoru wordpress site.

Design

I’ve been doing a good amout of vector work lately. Check out these great tuts.

Misc

Since the economy is crap right now, unemployement is on the rise. Here’s a great list of jobs sites for web designers and developers.

Jobs for Designers and Developers

Vote for me please! I made the top 20!

Jason Cypret — Wed, 19 Nov 2008 23:40:24 +0000

Posted in Web Design

I really can’t believe it. There were 90+ websites selected for the initial competition. I was just lucky enough to I have been selected in the WP Freedom Blog coolest WordPress blog top 20! Thanks to all my subscribers, twitter followers, and friends who have wished me luck in this little contest. This just really gets me pumped to get this site completely where I want it, and to also start on a new design. JC-V4.

But wait, the contest is not over

I need your help to make it any further. You can vote for my site at the link below.

Vote for me here!

Right now I am loosing big time, so help me not look so bad will ya! The votes will continue to be tabulated until December 1st, so you have until then. So as they say, “Vote early, and vote often.”

Thanks again for this honor!

Geek Week – Web Design, CSS, jQuery, PHP

Jason Cypret — Tue, 04 Nov 2008 22:38:57 +0000

Posted in Web Design

I have been geekn’ out a lot lately reading some really great articles as well as learning some new techniques. There is a little bit of everything here and if you are a web developer it will come in handy. If you are not into jQuery skip this first section, as I have been really digging into what can be done in jQuery. If you like what you see check out my Delicious feed, as I am always running across great links.

jQuery & JavaScript

If you couldn’t tell, I love working with jQuery. Here is a brief list of some plug ins, some tutorials, and some techniques I found very interesting.

XHTML & CSS

CSS is still my first love, and I am always doing what I can to stay up on the latest trends and techniques. Check out these CSS tips and tuts below.

PHP

I started diving more into PHP due to the amount of websites I have deployed using WordPress. Since I typically use WordPress as a CMS, PHP is an integral part of making everything work. Check these out.

WordPress

I heart WordPress, and can’t wait till version 2.7 is released. Here are some great plug ins as well as some techniques to use when creating a WordPress theme for yourself and others.

Flash & Fireworks

Photoshop is a dominate force in design. I love it and use it for all my Photography work, but when it comes to web design, I find Fireworks to be better suited. Whenever I find a tutorial for Fireworks I always read it. Check out the firetut below, as well as some flash tuts I’ve check out lately.