Create CSS Rounded Corners

admin    CSS     CSS, generator, online service, tool

The use of rounded corners on website has becoming very popular. Many websites are starting to kill the sharp edge and go with rounded corners in their buttons, navigation bar, header, banner, etc. Just how easy these rounded corners images can be created? I’m here to show you few which I think are few of the good ones.

1. Google Rounded Corners Generator

This google script generates a PNG format rounded corners for you on the fly. Simply copy the scripts below into a browser and hit enter.

http://groups-beta.google.com/groups/roundedcorners? c=999999&bc=white&w=4&h=4&a=tr

Tweak the following parameters to get the rounded corners of your choice. read more

Sponsor Flip Wall With jQuery & CSS

admin    CSS     CSS, howto, javascript, jQuery, tutorial

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

Step 1 – XHTML read more

How to create a grid-based layout with jQuery

admin    CSS     CSS, howto, jQuery

Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. You go to this site for details.

Less is more

admin    Inspire     CSS, minimal design, showcase, 设计潮流

喜欢清新简单的设计，可是这样的设计一点也不简单。从webdesignerwall上看到其收集的很多minimalist design sites，值得参考，很受启发，需要慢慢来实践。Less is more!

Hot Meteor

read more

致网站设计初学者：你该了解的CSS技巧

admin    CSS     beginner, CSS, tutorial

在我们初学网站设计的时候，会遇到很多关于显示的问题，然后，最终我们会发现很多都是由一些CSS暗含的小技巧来解决的。每个网站设计人员都会碰到这样的问题，花费了很多时间，我们查找原因、查找解决办法，找到答案的时候，我们就会希望：如果早知道~~

这篇文章就是关于这些你该掌握的CSS技巧：

Resets & Browser Inconsistencies
Box Model — Margin, Padding & Borders
Dimensions — Width, Height, Min & Max
Floats & Clearing
Conditional Comments
Overflow & Zoom

原文链接: http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html

Use WP template post-class() to style posts individually

admin    Wordpress     CSS, howto, tutorial

We have so many posts in different categories or tags. Sometimes we may need to provide some special CSS style layout to some named posts, categories or tags. If that’s what you want to achieve, the wordpress template function post-class() can help.

To use this function in a theme, you will simply add it to the Loop in a place that makes sense. Most themes encapsulate every post within a DIV of some sort. That DIV usually has a class=”post” or something similar. Instead of that class, just add a call to post_class instead. Like so:

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

The post_class() outputs the class=”whatever” piece for that div. This includes several different classes of value: post, hentry (for hAtom microformat pages), category-X (where X is the slug of every category the post is in), and tag-X (similar, but with tags). It also adds “sticky” for posts marked as sticky posts. These make it easy to style different parts of the theme in different ways. Read the Wordpress documents about post-class() here.

Wordpress 2.7 after versions provide the “stick post” feature, that is, for those posts you’ve published before , now you can place them at the top of your homepage without editing the timestamp, only by checking “stick this post to the front page” in WordPress post edit panel. Here this article explains in deep details on how to style a stick post.

In the same way, you can also give special styling to named categories or tags. Another tutorial talks more about it.

3 Easy and Fast CSS Techniques for Faux Image Cropping

admin    CSS, Photos     CSS, howto, image

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want. These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.

Click here to read the original article.

The death of the boring blog post?

admin    CSS, Inspire     blog, CSS

Let’s face it: the classic blog post is boring.
Barring the text and images, each one generally has the exact same layout. We see little originality from one post to the next. Of course, consistency and branding are extremely important to consider when designing a website or blog, but what about individuality? Does a blog post about kittens deserve the same layout as one about CSS hacks?

Let’s now look at three people who exhibit all four qualities.

Click here to read more details.

Minimalist Web Design: When Less is More

admin    Inspire     CSS, 设计潮流

As designers, we all know that a minimalist design can achieve beautiful results.
Still, many designers have trouble creating one; either they have a hard time making a page with so few elements look good or the final result just doesn’t look “complete.”
There are many articles on the Web about minimalism and this article aims to help you achieve a minimalist designthat is beautiful but not bare.
To top it off, we’ll present a small showcase of minimalist designs, so that you can analyze why some designs work and others don’t.

click here to read more details.