Archive for June, 2010

Gradients through Pure CSS (CSS3 Gradient Techniques)

Monday, June 28th, 2010

How do we achieve gradients through CSS? well, right now – the syntax is different for each browser . . . so why go through the hassle, if we can just specify a background image . . . right? Well, if the gradient isn’t all that essential and you can accept a solid background color as a fallback (for older browsers) – then you can save an http request and faster page load minus the extra background image.

So how is it done?


div {
background-color: #1a82f7; /* fallback color */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7); /* for mozilla browsers */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* for webkit browsers */
background-image:filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
/* for IE */
}

Mozilla

Here’s the official documentation.
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
or
-moz-linear-gradient (-45deg,red,blue);
For radial gradients, it’s -moz-radial-gradient

WebKit (Safari,Chrome)

Documentation

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
or

background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

IE

Documentation

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Posted in Uncategorized | No Comments »

Want to be an Entrepreneur?

Monday, June 21st, 2010

This was done by Grasshopper.com and very inspiring.

Posted in Blog | No Comments »

Drupal Page Theme According to Content Type

Thursday, June 17th, 2010

I have used this a lot in the past for most of my Drupal projects – To theme a page in Drupal (v. 6) according to its content-type (ie page-news.tpl.php) . . . you will need this piece of code in template.php – it also makes a lot of other suggestions including getting the page url alias . . .


function themename_preprocess_page(&$variables) {
global $user;
if ($node = menu_get_object()) {
$variables['node'] = $node;
$suggestions = array();
$template_filename = 'page';
$template_filename = $template_filename . '-' . $variables['node']->type;
$suggestions[] = $template_filename;
$variables['template_files'] = $suggestions;
// Add a single suggestion.
if (module_invoke('throttle', 'status') && isset($user->roles[1])) {
$variables['template_file'] = 'page-busy';
}
// Add multiple suggestions.
if ($variables['node']->type == "page") {
$alias = drupal_get_path_alias($_GET['q']);
if ($alias != $_GET['q']) {
$template_filename = 'page';
foreach (explode('/', $alias) as $path_part) {
$template_filename = $template_filename . '-' . $path_part;
$variables['template_files'][] = $template_filename;
}
}
}
if (!empty($user->roles)) {
foreach ($user->roles as $role) {
$filter = '![^abcdefghijklmnopqrstuvwxyz0-9-_]+!s';
$string_clean = preg_replace($filter, '-', drupal_strtolower($role));
$variables['template_files'][] = 'page-'. $string_clean;
}
if (drupal_is_front_page()) {
$variables['template_file'] = 'page-front';
}
}
}
}

Tags: , ,
Posted in Blog | No Comments »

Dynamic Font Replacement on the Web

Friday, June 11th, 2010
How Cufon works

How Cufon works

I’m currently reading about the Web Typography chapter in the Smashing Book and discovered a new font replacement technique . . . I’ve used most of them in one project or another but haven’t heard of Cufon. Cufon behaves similar to sIFR but instead of using Flash to generate the fonts, it uses a font generator and a renderer (javascript) – it works better than sIFR because it doesn’t use Flash at all and believe me, I’ve used sIFR before and have run into a lot of problems . . . it’s good for small projects but there are just a lot of restrictions and because Flash resizes the fonts accordingly, it’s unpredictable what sizes the replaced fonts will be on any given browser. I like Cufon for the simple fact that I do not have to deal with any of that. Cufon is also speedier than sIFR and is less of a hassle to set up. I’m cutting up a project now and will try it out. Will let you guys know how this one goes.

The other font generation techniques include static image replacement (via CSS) or dynamic image replacement using server based script. Both of these have accessibility issues and should be used with it’s limitations in mind. Another interesting technique is by using @font-face. This is probably the easiest and the only one that is a web standard. The reason why it isn’t widely used is because it’s a fairly new standard (CSS 3) and old browsers do not support it. But it’s probably the best one since the only rendering engine it relies on is the browser itself. Here is how it works:

In your CSS, you include 


@font-face { font-family: NewHelvetica; src: url('fonts/NewHelvetica.otf') format("opentype"); }

and to use it, just declare it in your styling – such as 


h1 { font-family:NewHelvetica, Arial, Sans-serif;}

So there you go – Web typography still has a long way to go but it finally seems to be getting there.

[Added 11:41AM PST]
By the way, there is a talk about this on this year’s SXSW’s Interactive – a podcast of this talk is available now thru SXSW.com – Listen to it.
There are also other resources which I will include here:

[Added June 28, 2010 02:41PM PST]
I just also discovered that you can use Google Webfonts as an alternative as well . . . right now, they only have a few fonts that you can use but I’m guesssing that if they gain enough traction with this initiative, they will add more.

Tags: , , , , , , ,
Posted in Blog | No Comments »

The Ketchup Conundrum

Friday, June 4th, 2010

As a guy who loves ketchup, this article I read recently through the book – What the Dog Saw by Malcolm Gladwell is a good read . . . It was first published in the New Yorker on Sept. 2004 – so it is a bit late that I just read about it now . . . to all ketchup lovers, who haven’t read it – you should. I will never look at ketchup the same way again . . . Read the Ketchup Conundrum article in PDF.

Posted in Blog | No Comments »