AVINASH 2.0

Construct — A Brilliant Online Visual Layout Editor

Developed by Christian Montoya, Construct 0.4 (BETA) is a cool visual layout editor based on Blueprint CSS Framework.

You can use Construct to:

• Create a layout with containers and columns.
• Expand/contract those columns and toggle �class=�last��.
• Give an ID to any container or column.
• Generate the clean, final markup for your layout.
• Generate corresponding CSS for that layout which is compact, only has the classes you used, and also generates perfect, clean rulesets for the ID�s you created.

For more info, head over to Christian’s blog and read the post titled: Construct 0.4 BETA is something I am seriously proud of.

Image credit@Christian

CSSVista – Edit CSS Live in Both Internet Explorer and Firefox Simultaneously

The makers of Litmus – a compatibility testing service, which lets you see your site in different web browsers, have released CSSVista for Web developers.

CSSVista is a free Windows application which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously. According to the official CSSVista page, the application is currently in a very early stage so expect a few minor bugs.

CSSVista is available for download.

12 FREE CSS Templates | Bookmarks

I’ve been too busy this month. I’m hardly getting the time to write new posts. I’ve realized a slight drop in my traffic.

I’ve also realized that my subscriber count is going down.. Well, I can’t help it because I’ve to do too many other things. I’m sorry guys, if you subscribed to my RSS feed without reading my About Me section!

People who are still subscribed to this blog, enjoy these 12 awesome CSS templates:

[tags]FREE CSS Templates, CSS Templates, CSS, Bookmarks, Web Design[/tags]

CSS Tips and Techniques

In my previous post, I wrote that I’ll be posting a list of 100 CSS tips. But, when I started compiling the list, I found that a lot of techniques that I was going to write were already discussed somewhere in the blogosphere.

So, instead of writing a pretty long post about 100 CSS techniques, I decided to create a page where I can add more links and discuss them as I come to know about them.

Visit ‘Powerful CSS Techniques‘ page to find the list. If you know about other CSS techniques, please feel free to let me know in your comments! I’ll discuss the techniques on my CSS tips and techniques page with a link back to your blog/website.

Please note that currently, the list is pretty small but I suggest to bookmark it because the ‘Powerful CSS Techniques’ page will be updated every day with lots of high quality CSS resource links.

[tags]CSS, CSS Tips, CSS Techniques, CSS Links, CSS Inspirations, CSS Articles[/tags]

56 CSS Layouts, 100% Pure! [Bookmarks]

You’ll find these 56 ready-made pure CSS layouts pretty useful if you are a Web designer.

Today Tomorrow. Soon, I’ll post 100 cool CSS techniques so stay tuned.

Update: Instead of writing a pretty long article on CSS techniques, I thought to compile a list of high quality CSS tutorials/articles/links. I’ve created a page specially for CSS tips and techniques. Check this out.

And sorry about the delay in the posts! I’ve been a bit too busy in the past couple of weeks.

[tags]CSS, CSS Layouts, Pure CSS, Web Design, CSS Tips[/tags]

CSS, Column Collapse Problem in Internet Explorer and its Solution

Are you a Web designer? Have you ever faced a weird situation when you design a lovely layout and the evil Internet Explorer breaks it? Do the columns look fine in Firefox, Opera, Safari but they suddenly become wider and break your layout when you are viewing the same Web page layout in Internet Explorer?

Well, if you already know the solution of this problem, that’s great. I’m writing this post for the people who are yet to find the solution of this problem.

Q. Why columns become wider in Internet Explorer?
A. Because IE honors the width of the content rather than the column.

Solution: Though you can apply negative margins to solve this problem, the simplest option is to apply “overflow: hidden” to the entire column.

Example:

#column  { overflow: hidden; }

If you use this method, remember to check if the column elements are looking fine or getting cut off. Try this and let me know if it worked for you.

[tags]CSS, XHTML, Internet Explorer, Column Collapse Problem, Web Design[/tags]

Rounded Corners (Anti-Aliased) in Seconds – Pure CSS, No JavaScript!

Spiffy Corners is a really simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript. An easy to use online tool that generates clean CSS and XHTML code. Use this tool to generate your desired code and later, if you need any modification, you can easily alter the code.

I find this tool a good time-saver. Using this tool, you can create rounded corners in seconds.

[tags] CSS, Rounded Corners, Web 2.0, Spiffy Corners, Anti-Aliased Corners, Web Design[/tags]

FEED Styler Plugin for WordPress: Give Your Feeds A Style!

Developed by the awesome people @ Devlounge, FEED Styler is a really really great plugin for WordPress users who want to stylize their RSS feeds!

What is Feed Styler?

Feed Styler is a WordPress plugin for WordPress users who are comfortable with CSS and would like to be able to style their feeds. Feed Styler enables you to keep your existing class and ID style declarations in your content, but allows a different style to be applied to the feed of that same content. No longer do feeds have to be stripped of style and color.

Who is Feed Styler For?

Feed Styler is for those that use WordPress, are comfortable with CSS, and would like to be able to use their existing markup to style their feeds. Feed Styler is very effective at styling images, blockquotes, and much more. If you are a hand coder and familiar with CSS, Feed Styler will be very intuitive.

This plugin is not for CSS beginners, and not for those that rely on WordPress�s WYSIWYG for content appearance. This plugin is also not for those who have the opinion that feeds should be void of style.

Download link: Here we go!
[tags]WordPress, RSS, Feed, Syndication, Style, CSS, Plugins, WordPress Plugins[/tags]

CSS, Accessibility and Standards Links (Bookmarks)

Today’s bookmark has too much for anybody who loves CSS and standards. Created by Andrew Fernandez aka Dez, it’s a highly useful CSS link resource that will CSSify your mind, nerves and all that!

Link: CSS, Accessibility and Standards

[tags]CSS, Accessibility, Standards, Web Design, Design, CSS resources, CSS link directory[/tags]

Evil Internet Explorer 7 – Doesn’t Resize Text Sized in Pixels

So Internet Explorer is still creating problems for Web designers. Roger Johansson over at 456 Berea Street writes about this new IE problem in details.

IE 7 does not, repeat not, resize pixel-sized text. It partly compensates for that by allowing the user to scale/zoom the entire page, including images (which quickly leads to massive horizontal scrolling because of its bad implementation). But if you choose �Page/Text Size� from the menu to change the text size, nothing happens if it has been sized in pixels or an absolute unit (points, millimeters, centimeters, inches, or picas).

Link: IE 7 does not resize text sized in pixels

Make sure you don’t miss reading the comments.

[tags]IE 7, Internet Explore 7, CSS, CSS support in IE7, Microsoft browser[/tags]

curvyCorners – Ultimate Rounded Corners (Bookmarks)

curvyCorners is a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners. You can add rounded corners to your DIVs in seconds. No image editing required.

Features:
* Free
* Easy to use JavaScript object
* Requires no images or image editing
* Full Anti-Aliasing support
* Anti-Aliasing over graphical backgrounds
* Background-image support (round corners of images)
* Fluid height/width support
* Solid border support, any colour/width with Anti-Aliasing
* User defined per corner radiuses

License:
curvyCorners is licensed under the LGPL license agreement.

Examples:

Demo1 & Demo2

[tags]Web Design, JavaScript, CSS, curvyCorners, Bookmarks[/tags]