jQuery Cycle Plugin

April 20th, 2010

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

This slide show plugin is really simple to use, embed the image in the body tag, link to the jQuery library file and use the custom function like the following example, different effects can apply to your image less than a minute.

$(document).ready(function(){
   $(‘.slideshow’).cycle({
      fx:’fade’,
      timeout:2000
   });
});

jQuery: Different layouts for different widths

February 16th, 2010

Article by Jeffery Way on Net.tuts+

“It’s becoming more and more common for web sites and applications to provide different layouts dependent upon the user’s window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions. In this video quick tip, we’ll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.”

=============================================================
function checkWindowSize() {
    if ( $(window).width() > 1800 ) {
        $(‘body’).addClass(‘large’);
    } else {
        $(‘body’).removeClass(‘large’);
    }
}
$(window).resize(checkWindowSize);
=============================================================

Tips for Print Stylesheet

February 13th, 2010

Article on Web Designer Depot

Print style sheet is a nice feature for your user to print and read an article offline instead of reading it on the screen, which means you should have at least 2 stylesheets for your website or blog, each for screen and print. When you write the code to link the stylesheets it should look like something like the following:

<link rel=“stylesheet” href=“style_screen.css” type=“text/css” media=“screen” />
<link rel=“stylesheet” href=“style_print.css” type=“text/css” media=“print” />

Tips to get started on print style sheet
01. Remove navigation like buttons & sidebar
02. Enlarge content area
03. Reset background color ( mostly white )
04. Reset text color ( mostly dark color like black )
05. Display destination of links
06. Make links stand out from regular text
07. Fonts & font size
08. Let user choose to print comments
09. Show a Print-Only message

Cufón – The easiest way to use any font

January 7th, 2010

At times you may want to use fonts other than the likes of Arial, Verdana, Times New Roman, and other mainstream fonts installed on most computers. To implement special fonts on a web page, your choices are to either use images by JavaScript and sIFR (SWF files), or embed the fonts to your computer. Embedding fonts is getting more properly this day, but you have to understand if your user is viewing your website on supported browser.
Here’s a tutorial by Jeffery Way on net.Tuts+, it showcases how to use Cufón, a simple way to use any type of font for your website.

40 Creative Uses Of Cufón Font Replacement – Examples on Spyrestudios

Behavioral CSS

December 23rd, 2009

Article on Smashing Magazine

The Web is an extremely adaptive environment and is surrounded by a collaborative community with a wealth of knowledge to share. CSS 3 properties like border-radius, box-shadow, and text-shadow are starting to gain momentum in WebKit (Safari, Chrome, etc.) and Gecko (Firefox) browsers. They are already creating more lightweight pages and richer experiences for users, not to mention that they degrade pretty gracefully; but they are only the tip of the iceberg of what we can do with CSS 3. In this article, it talks about transformations, transitions and animations.

3D Transform

Animation

Transition

Build a site with keyboard navigation

November 30th, 2009

psd to html tutorial
This tutorial on Smashing Magazine shows how to add keyboard navigation to a website using a few simple lines of JavaScript.

document.onkeyup = KeyCheck;
function KeyCheck (e){
    var KeyID = ( window.event ) ? event.keyCode : e.keyCode;
    switch( KeyID ){
        case 49:
        window.location = “index.html”;
        break;
    }
}

CSS Awards

November 15th, 2009

css awards

5 simple useful CSS properties

November 15th, 2009

5 useful CSS properties that you should be very familiar with, but will most likely rarely use, such as clip, min-height, white-space, cursor and display that are widely supported by all browsers.
Check this post on Web Designer Wall.

Vertical centering with CSS

November 14th, 2009

Article on Theme Forest covers 5 different ways to center the content vertically. It includes the PRO and CON for each method along with complete instructions for implementing them. The methods range from using <div> that act like tables to using absolute positions.
vertical centering

Footer stays at the bottom

November 10th, 2009

One problem I run into pretty frequently when coding a site in to XHTML and CSS is making my footer dock to the bottom of the screen. It’s especially annoying if you have a page that’s short on content and the footer, which happens to be the footer doesn’t stay at the bottom of the browser window. Finally I find a blog that help me to fix the problem.

HTML code looks like the following
Make sure the footer <div> tag place outside the container and create a empty <div> tag right before the closing <div> tag of the container, we give the empty <div> tag a class called clearfooter.
coding on 091110
coding on 091110
Here’s the CSS code
If you want to make it work in Internet Explorer 6, make sure you set the height 100% to the container.
coding on 091110

Centering body background image

November 3rd, 2009

Last night I was working on the DD Blog, spend a couple hours and still couldn’t figure out how to center a background image in the body. Finally I decided to Google search and found this little trick on someone’s blog. It’s pretty straight forward and all you have to do is structure your CSS code like the following:

html { background-color: #000; }
body {
     background: url(images.png) top center no-repeat;
     min-width: 1000px;
}

Basically you have to set the background color to the <html> tag instead of the tag and place the background image to the <body> tag, also you have to set minimum width to the <body>.

How does this work
Basically it is standards behavior, when you do not declare a background property on <html>, anything you declare on <body> will be rendered on <html>. Once you declare something on <html> as well, anything declared on <body> will be rendered on <body>.

You may also try the following code.
body {
     width: 100%;
     display: table;
}

Add More Sparkle with CSS3

October 6th, 2009

Article on SitePoint

“Over the last few years, best-practice CSS development has shifted from graceful degradation to progressive enhancement. And buoyed by the progress of modern browsers and the demise of older browsers, the excitement about what is possible right now is increasing. More and more designers are considering how to provide the best user experience possible for each browser without risking compatibility.”
With all the new features on CSS3 like rounded corners, custom fonts and RGBA colors, it’s more fun to style your webpage. Think about making a button without creating an actual image, how handy it will be. The only concern is most of the features only work in the latest browser.

Object-Oriented CSS

October 4th, 2009

Object-Oriented programming (OOP is the short term), I first heard about it in the Flash class. Breaking one massive file into several small files so we can have better organization, the code would run more efficiently, and most importantly is make life easier for ourselves if we want to make changes in the future. Indeed Object-Oriented is getting more popular on different programming languages.

OOP is a computer programming style that uses “objects” – data structures consisting of datafields and methods together with their interactions for designing applications and computer programs, according to the definition on Wikipedia. On Net.Tutsplus, there’s an article talks about this concept.

30 CSS Best Practices for Beginners

September 24th, 2009

Article by Glen Stansberry on Net.Tutsplus

Blogging is always fun. Keep yourself update on the materials you’ve been working or other interesting things like technology and design. Read this article online and think about it’s the time for me to recap my CSS. Realize I’m coding in a similar fashion like the professional, which makes me more comfortable.

While I’m reading it, notice there’s something I should be awared.
“Don’t use Negative Margins to Hide Your h1 – Oftentimes people will use an image for their header text, and then either use display:none or a negative margin to float the h1 off the page. Matt Cutts, the head of Google’s Webspam team, has officially said that this is a bad idea, as Google might think it’s spam. As Mr. Cutts explicitly says, avoid hiding your logo’s text with CSS. Just use the alt tag. While many claim that you can still use CSS to hide a h1 tag as long as the h1 is the same as the logo text, I prefer to err on the safe side.”

Speed up your website

September 12th, 2009

Aritcle on Web Developer Plus

Reduce Number of Files
• Use CSS Sprites
• Combine multiple CSS/JS Files

Reduce File Sizes
• Minimize size of HTML file & CSS/JS files
• Use JavaScript Compressor
• Optimize Images For Web

Server Side Optimization
• Cache Dynamic Pages
• GZip Components
• Use Expires header for static content
• Add Trailing Slash to URLs
• Resolve 404 Not Found Errors
• Always use favicon.ico

HTML Optimization
• Load Stylesheets At Top
• Put JavaScript files at bottom
• Avoid Using @import
• Avoid CSS Expressions
• Specify Image height width
• Avoid scaling images in browser
• Put JavaScript/CSS into external files

Other Optimizations
• Reduce DNS lookups
• Serve Static Content From Multiple Hostnames
• Serve Static Content From Cookieless domain
• Using a Content Delivery Network
• Use Optimization Tools to test web page

CSS sprites – image slicing

August 14th, 2009

CSS (Cascading Style Sheets) is the most common application to style web pages written in XHTML. Find this article by Dave Shea on A List Apart, even though it’s written 5 years ago and I think it’s good to know how’s web developers handle image for web when high-speed internet wasn’t popular.

Image sprite example
image sprite
I still remember a decade ago when I slice and dice a huge image in Adobe Image Ready and use table in HTML to put the images into places, since CSS is introduced, we don’t have to slice images into pieces, instead we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states.

CSS2 techniques

August 2nd, 2009

Cascading Style Sheets(CSS) is one of the building blocks of modern web design. With time, the quality of CSS tutorials out there on the web has increased considerably.

Here’s the lists of examples with tutorials:
01. Slide show – cross browser
02. Lightbox without JavaScript
03. Animated rollover menu
04. Tree like navigation menu
05. Gradient text effect
06. Menu list
07. Footer stay at bottom
08. Pullquotes
09. Stacked bar graphs
10. Hover effect for list of links
11. Multi-column lists
12. Date display technique with sprites
13. Date badges & comments
14. Image viewer
15. Image preloader

Using negative margins

July 29th, 2009

Article by John Imbong on Smashing Magazine

negative margins
Great article talks about how to set negative margin to an element in CSS. John shows some interesting techniques and quite a few resources on this post. More internet users use more updated browser like IE 8 or Firefox 3.5, this technique becomes more popular because it has the ability to position elements without changing the markup like adding tags onto the HTML file.

CSS3 compatibility

June 15th, 2009

Cascading Style Sheets has been introduced for more than 10 years, it brings efficiency for web designers to build a web-based presentation. It’s time to start making your design with CSS3, new version browser like IE9, Firefox 3.5 and Safari 4 more support CSS3 but there’s a bunch of browser don’t fully support CSS3, so make sure you use the proper style sheet to create a website or build an online application. New functions and features are being brought up for CSS3, check out the examples @ css3.info

text shadow

Check out the following links for related articles
Introduction to CSS3 @ W3C
CSS3 compatibility @ css3.info
Take Your Design To The Next Level With CSS3 @ Smashing Magazine
Text shadow @ Kremalicious

HTML Best Practices for Beginners

May 14th, 2009

Article by Jeffery Way on Net Tuts+

HTML (Hypertext Mark-up Language) describe the structure of text-based information in a document by denoting certain text as links, headings, paragraphs, lists, etc. and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of “tags” that are surrounded by angle brackets.

=============================================================
01. Always Close Your Tags
02. Declare the Correct DocType
03. Never Use Inline Styles
04. Place all External CSS Files Within the Head Tag
05. Consider Placing Javascript Files at the Bottom
06. Never Use Inline Javascript
07. Validate Continuously
08. Download Firebug
09. Use Firebug
10. Keep Your Tag Names Lowercase
11. Use H1 – H6 Tags
12. Save the H1 for the Article Title of a Blog
13. Download ySlow – an extension for Firebug
14. Wrap Navigation with an Unordered List
15. Learn How to Target IE
16. Choose a Great Code Editor
17. Once the Website is Complete…Compress
18. Cut…Cut…Cut
19. All Images Require “Alt” Attributes
20. Stay up Late
21. View Source
22. Style all Elements
23. Use Twitter
24. Learn Photoshop
25. Learn Each HTML Tag
26. Participate in the Community
27. Use a CSS Reset
28. Line up your elements
29. Slice your Mockup
30. Don’t Use a Framework…Yet
=============================================================
Read full article