Category: Tutorials
Aug 18
Tagged in: CSS Comments:
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.
Delicious
Stumbleupon
Digg
Jun 30
Tagged in: CSS, Javascript Comments:
The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically.
View Demo Rounded Images
Delicious
Stumbleupon
Digg
Jun 21
Tagged in: Javascript Comments:
Inspired by the CargoCollective and David DeSandro’s site, I asked my Twitter followers (@nickla) on how to do the scrollto posts with jQuery. Within a day, Ben Bodien of Neutron Creations sent back a quick demo on how to replicate the similar result with the ScrollTo plugin. The script finds your current view position and scroll to the next or previous post accordingly. Check out the demo to see what I’m talking about.
View Demo Scrollto Posts
Delicious
Stumbleupon
Digg
May 12
Tagged in: CSS Comments:
Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.
View Demo Search Form
Delicious
Stumbleupon
Digg
May 07
Tagged in: event, freebies Comments:
New Riders’ Voices That Matter: Web Design Conference, now in its fourth consecutive year, will take place June 28-29 in San Francisco and the timing couldn’t be better! Web design is undergoing an historic transformation: while the basics of HTML, CSS, and JavaScript haven’t changed, the new and evolving functionality in the HTML5 and CSS3 specs, the number of new ways in which people access the Web, and the rise of social media mean that Web designers need to know more than ever. Post a comment in this post before May 21, 2010 for your chance to win a free ticket.
Update: the winner is #34.
Delicious
Stumbleupon
Digg
Apr 22
Tagged in: CSS Comments:
Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.
Delicious
Stumbleupon
Digg
Apr 14
Tagged in: CSS Comments:
The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient.
Delicious
Stumbleupon
Digg
Mar 29
Tagged in: CSS Comments:
Today I’m going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
Delicious
Stumbleupon
Digg
Page 1 of 712345»...Last »
Loading ...