5 Popular CSS Frameworks + Tutorials & Tools for Getting Started

5 Popular CSS Frameworks + Tutorials & Tools for Getting Started

CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love.

Main features of good CSS Framework is to 1) rapidly speed up our development time, 2) should have a very small size, 3) have good documentation and tutorials and 4) have clean grid structure. You will need a basic understanding of the CSS framework you are going to use to understand why and how things get solved.

In today’s post we present an overview of the 5 most popular CSS Frameworks; showcasing handpicked tutorials for using each of them among other useful tools and resources you will definitely find useful and time-saving.

1. 960 CSS Framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.

Demo can be found here

Tutorials Explaining how to use 960 CSS Framework

• A Detailed Look at the 960 CSS Framework

  

  “Jeffrey Way” takes a close look at the 960 CSS Framework, explaing the pros and cons of using it. He also takes us step by by step and create a simple “12 column” layout with a simple header and two column structure. Most important tip here is : you must assign a class to each div. Naming conventions require that that the class name begins with “grid_” and ends with the number of columns needed.

• 960 CSS Framework - Learn the Basics

  Stefan Vervoort takes the heavy work for you and explains the basics of this framework so you can start developing with 960 pretty fast. Basics principles explained here include: not to edit 960.css, Loading the grid, Containers, Grids / Columns, Margins and styling. Another post by Stefan where he solves some of the problem he faced while working with this framework.

• Fluid 960 Grid System

  

  The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library.

2. Blueprint CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

There are several Blueprint plugins available which can overwrite aspects of the framework or add new styles for you to use.

Check out the Live Demos

Tutorials Explaining how to use Blueprint CSS Framework and tools using it

• BlueprintCSS 101

  Jeff Croft explains Blueprint’s core feature, how we use it, how it has impacted our workflow, and what we like about it.

• A Closer Look At the Blueprint CSS Framework

  In this tutorial we will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to actually use the framework.

• Blueprint CSS Cheat Sheet

• Blueprint Grid CSS Generator

  This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png image file for use as a background image during development- very handy for making sure everything lines up properly. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

• PXtoEM

  

  PXtoEM.com is a website that makes converting PX values to EM values easier. The CSS file of the values you’ve choosen can be get based on the typography.css portion of Blueprint CSS to setup a default typography.

• Construct

  Construct, a visual layout editor based on Blueprint & jQuery, Construct, a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

3. The jQuery UI CSS Framework

jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

• Styling Buttons and Toolbars with the jQuery UI

  

  A real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content. Here are button examples that demonstrate how to incorporate the power of the CSS framework classes in a custom widget.

  Check out the Live Demos here

4. YAML

Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.

YAML comes with a a very nice Ajax builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.

Check out the Live Demos here

• Flexible Layouts with YAML

  

  Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article, providing an overview of what is possible with YAML and may deliver some ideas for your future layouts.

5. Yahoo YUI Grids CSS

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

The YUI Grids Builder — a simple interface for Grids customization.

Don’t forget to check the CSS Reset/Base/Fonts/Grids Cheat Sheet

Check out the Live Demos here

• Intricate Fluid Layouts in Three Easy Steps

  This tutorial explains how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids in three easy steps.

• YUI CSS Grids: awesome, but useless?

  Jeff Croft asks if YUI CSS Grids has a certain limitation for sites wider than 750px, Dustin Diaz comes in and explains some interesting features and usage we can do using YUI CSS Grids. “One cool thing I’ve done with it is made seven different templates with virtually the same html with the exception of one class name (yui-t (1-7)). It’s wonderful because it’s completely source order independent. If I wanted a style switcher on my site you could take the approach of swapping out a className rather than a whole new css file. Thus, no reason for the whole “Invasion of the Body Switchers””

Worth Checking CSS Frameworks

- typogridphy

A Typographical and Grid Layout CSS Framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking.

Download it here

- SenCSs

SenCSs stands for Sensible Standards CSS Framework, supplies sensible styling for all repetitive parts of your CSS, allowing you to focus on actually developing your website’s style.

View the example HTML file

- A CSS Framework

A CSS framework allowing rapid development of sites with pre-written and tested components, letting you get to the interesting stuff as quickly and efficiently as possible.

- Tripoli

Tripoli is a generic CSS standard for HTML rendering. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind. Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

- BlueTrip CSS Framework

A full featured and beautiful CSS framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons.

Check out the Live Demos

- Emastic

- WYMstyle

- Elements

- Malo

- LogicCSS

Articles Explaining what is CSS Frameworks and how/which to Use

- What’s not to love about CSS frameworks?

- CSS Frameworks + CSS Reset: Design From Scratch

- What Are The Benefits of Using a CSS Framework?

- Blueprint CSS Framework vs YUI Grids

- Battle of the CSS Frameworks

- The Lessons of CSS Frameworks

- When to use CSS framework?

ceoxi Read More!

Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc

Learn How to create Compatible CSS for Various Browsers like Internet Explorer 6 , IE7 , IE8 , Opera , Firefox , etc..

Web-designers create blogger template for Hours using one particular browser say Firefox , They don't know that the CSS code they use is compatible only for the browser they are working at present. Especially in IE6 , there are many Compatible issues.

for Example : the sidebar may appear below main content wrapper or there would be more gap between each widget , content wrapper and sidebar may overlap ,etc.

So in this Post I will tell you How to create CSS code which is compatible for almost all browsers. For this you need to have two browsers Internet Explorer 6 and Firefox .


I have chose IE6 because it is one of the most common browsers which windows have.

First let's check is our current Blogger template is compatible with all browsers or not.

For this visit this website : Browser Screen shots
Enter your Blog URL and check the images there to know How your blog looks in various Browsers.

step 2 : If you find any incompatibility issues then you need to modify your CSS code to suit browsers.

Let's us see an Example

Generally the css we use if of this form :

#example {
float : left;
width : 170px;
margin-left : 5px;
}

In this assume that this particular div is incompatible with Internet Explorer version x.

then we need to modify the above css code as

#example {
float : left;
width : 170px;
margin-left : 5px;
}
#example {
float : left;
width : 185px;
margin-left : 3px;
}

in this first css code is for all versions of Internet Explorer and the second css code is for other browsers like firefox , opera , dillo , sea monkey , etc

but it will be confusing for you to edit.. so now we are going to add different CSS rules to IE, we can use the child selector command which IE can't understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

After introducing Child selector command , the css code must look like this

#example {
float : left;
width : 170px;
margin-left : 5px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}

in this the green colored code is for IE versions and the red Colored code is for other browsers.

So with simple child selector command we can make our css code compatible for all browsers. Every time when I create a New template , I use to check whether it is compatible with other browsers or not. And I use to change the CSS code to suit that browser.

If you are unable to modify the CSS code then please mail me your template and explain the problem , I will rectify those errors and mail you back.

Read More!

10 Resources for When You Need Help with CSS

10 Resources for When You Need Help with CSS

From time-to-time there will probably be situations where you could use some help or guidance with CSS during your web design and development work. While there are plenty of great CSS resources available, I would like to point out 10 that can be very helpful resources in these situations.

Stack Overflow

Stack Overflow is sort of a combination of social media and a forum. It is a niche specific site focused on programming and development (CSS is just one of the topics being discussed). The purpose of Stack Overflow is to ask and provide answers to questions for programmers. Anyone can post a question (you don’t even have to create an account) and then other members will be able to provide answers to your questions. Other users can then vote up or down on the various answers so it’s easy for everyone to identify the best ones.

CSS-Discuss.org

CSS-Discuss is a large and very active mailing list for CSS-related issues. You can either join the list to post and answer questions, you can browse through the archives in search of a particular issue, or you can browse through the wiki and get involved there if you have something to contribute.

CSS Cheat Sheet

The CSS Cheat Sheet is a great reference to have on hand in anticipation of those times when a little extra help might be needed. It is a one-page PDF document that includes all selectors and properties.

CSS Shorthand Cheat Sheet

If you’re looking for help in reducing the size and optimizing your css files, the CSS Shorthand Cheat Sheet is an excellent resource. With this one-page PDF document you’ll be able to create more efficient CSS code with shorthand techniques.

Web Developer Add-On

Chris Pedrick’s Web Developer add-on provides a great deal of functionality for your development in general, and CSS is just one of the specific aspects. Using the toolbar, you can do such things as identify all the styles that affect an element, view the CSS source code, see the sizes of block elements, and disable CSS to see how your pages degrade.

Firebug

Firebug is another add-on that puts a great deal of CSS information and resources at your fingertips. With firebug you can edit, debug and monitor CSS, in addition to HTML and JavaScript in any webpage. For anyone working with CSS, Firebug is a great tool to quickly edit and test your code, particularly when you’re experimenting and you need to see how your changes will impact the site.

CSS-Tricks

CSS-Tricks is a popular blog, which many Vandelay Design readers probably subscribe to. At CSS-Tricks Chris Coyier publishes articles and tutorials that cover all kinds of aspects of CSS. The archives contain plenty of posts that will be helpful to anyone looking to learn more about CSS. In addition to Chris’s articles, CSS-Tricks also includes a forum that is pretty active where you can get help.

Using CSS to Do Anything: 50+ Creative Examples and Tutorials

Noupe published a post earlier this year with 50 examples of things you can do with CSS. If you’re looking for some new ideas this is a great resource, and if you’re looking for help on a specific issue, there may be a resource here that is just what you need. Included in the post is help for styling lists, working with forms, footers, image replacement, image sprites, other image techniques, text and link effects, navigation, galleries, drop caps, rounded corners, blockquotes, and more.

CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices

This is another helpful post from Noupe that focuses on one of the most common problem areas for working with CSS, layouts. If you’re experiencing issues getting a layout to work the way you want it to, most likely there is something here that is just what you need.

Top Reasons Your CSS Columns are Messed Up

Warspire provides help for common issues in dealing with columns and layouts. The post covers the most likely problems and provides the necessary fix, including the code to be used.

Other helpful resources:

• CSS-Styled Lists: 20+ Demos, Tutorials, and Best Practices
• 53 CSS Techniques You Couldn’t Live Without
• Solving 5 Common CSS Headaches

Read More!

Creating a fading header

Since I’ve gotten lots of emails asking me how I created the fading header graphic for Bits and Pixels I’m going to write a tutorial explaining how created the effect. I’ll be creating the effect using some basic XHTML and CSS and some unobtrusive Javascript, using the jQuery library, for the effect itself.

I’ve chosen jQuery because I like the way it’s built, find the elements you wish and do something with them. If you prefer another library, or just don’t want to use any library at all, that’s fine too (but you’ll need to write your own fade-function). The code shouldn’t differ too much, and since I’ll be explaining all the steps you shouldn’t have any problems translating it to the toolkit of your choice.

The image

This is the image that I’ll be using. It’s a fast mock-up of a header with a little bit of grunge. I’ve included the regular header and the hover effect in the same image. This lowers our HTTP requests, avoids flickering when we hover the image and makes our CSS more straight forward.

The HTML and CSS

The HTML is very straight forward. We have a h1 element with a link inside of it. We’re going to hook our Javascript onto our header (or whichever element we want to add this effect to) and add some custom markup.

<h1 id="header"><a href="#">Awesome header</a></h1>

Now we’ll add some CSS to style our header and give it some imagery

#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}
#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}

The reason to why we’re setting the h1 to position: relative; is to make it easier to position the imagery for the hover when we add it.

Here’s an example showing what we’ve got so far.

When we load the page we’re going to add some custom markup, so this is what we’ll have to work with in our DOM. The reason we’re adding the span before the anchor is to avoid some issues with Internet Explorer 6 and the z-index property.

<h1 id="header">
<span class="fake-hover"></span>
<a href="#">Awesome header</a>
</h1>

So, let’s start out by adding this markup manually into our document so we can see what it will look like when we apply the effect. Then we’ll adding the following CSS:

#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px;
}

It’s important to make sure that the text doesn’t shift a pixel or two since it will be very obvious when the effect kicks in. You may want to try this a couple of times by removing and adding the span to make sure it’s properly aligned.

Here’s an example of what we’ve got so far.

The Javascript

Now that we’re all set markup and CSS-wise it’s time to start adding some Javascript goodness! First of all, remove the fake span from your document.

As I wrote earlier, I’ll be using jQuery, but feel free to follow along no matter what library you may or may not be using. I’m going to write this using JSON to make the script more modular. I’ll also write it as a more general function so it’s easier to add the effect to any element you want to on your site.

First load the jQuery library

<script type="text/javascript" src="jquery-1.2.3.min.js">
</script>

Now let’s add some code. I’ll be adding it directly into the document but you may want to use an external file for a live site.

var Header = {
addFade : function(selector){
$("").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
}
};

Okay. This function takes a CSS-selector as argument, adds our fake hover and hides it. Simple stuff. Now let’s expand our Header object adding some Javascript events for hovering and removing the mouse, and finally making it load when the page loads. When the mouse is hovered over the header, we fade in the other header graphics, and when the mouse is moved off we fade it out, using jQuery’s built in effects.

var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+" a").bind("mouseenter",function(){
$(selector+" .fake-hover").fadeIn("slow");
});
$(selector+" a").bind("mouseleave",function(){
$(selector+" .fake-hover").fadeOut("slow");
});
}
};
$(function(){
Header.addFade("#header");

// This makes sure our function executes when the pages load
// It will add a fake hove to the #header element

});

Ok, that’s it! Check out this page for a live demo of the effect in action. Hope you learned something

Read More!

Pure CSS Tooltips

Today I’ll teach you how top create tooltips purely using Cascading Style Sheets(CSS). Tooltips are basically little blocks of information that are used to inform users about certain attributes of your website elements. This is a tooltip example!Click on this link to see how a tooltip looks like.

Most tooltips are created with the help of javascript or some other programming languages. This can be cumbersome because not everyone wants to learn Javascript. But CSS tooltips are easy to create and can be loaded quickly without any delay.

Here is what you have to do:-

1. Make a blank HTML file and paste the following text in the BODY part :

<a href="#" class="tooltip"><span>This is a pure CSS tooltip!</span>Tooltip 1</a>

This is the HTML part where we create a hyperlink with the text Tooltip1. In the next step, we are going to hide the text within the span tags which will serve as the tooltip text.

2. Now post this CSS information in your HEAD part of the HTML file :-

.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

If you look at the above code carefully, we have given the property display:none to the span tag inside the hyperlink. This will make the text inside the span tag invisible. Now when you hover your mouse, we make it appear again by giving the property display:block to the span tag on hover. The positioning of the .tooltip span class is relative because we will place the tooltip text relative to the hyperlink area and make the span tag absolute by defining its fixed position. The z-index is used so that tooltips are in the front of the hyperlink and do not overlap. The more the value of z-index, the farther in the front goes the element.

These tooltips can also be integrated into a wordpress theme easily. Just copy the CSS into your style.css file and when creating your posts, just take help of the HTML code and create your own tooltips. Rest is all styling which can be altered according to your own choice. You may also use images inside the tooltip boxes.

So, just learn this trick and you will be making nifty CSS tooltips in no time. And yes, don’t forget to leave a comment!

Download an example file

Read More!

Links of Interest

Google Docs: Forms
This isn’t exactly breaking news, but I only just heard about it so I thought I’d share. The free service Google Docs allows you to build web forms from within it. It has a pretty limited feature set. Basically you just provide the question, answer type, help text, and whether it’s required or not. Add as many questions as you’d like and save it and you get the ability to embed the form as an iFrame. The form then turns into a Spreadsheet in your Google Docs, and submitted answers are appended to the spreadsheet. Kinda neat, but like I said, very limited feature set compared to something like Wufoo. The big advantage here is you can build as many and as big of forms as you want for free.

DevSnippets
Noura Yehia (from Noupe) has launched a new site called DevSnippets. It’s a really neat browseable and searchable “Online Code Snippet Gallery“. There is already some great stuff in there, and I’m sure as the site grows it will become a go-to spot when looking for specific code examples to add to your site.

Top Ten Web Typography Sins
I’m sure most of you read Smashing Magazine already and they hardly need my link love, but I still feel compelled to mention the recent great article on Web Typography Sins. Things like “not using CSS for capitalization effects” will surely come back to bite ya! And you gotta love seeing (C), classic. Read More!

Fix wordpress smilies problem when styling images

Fix wordpress smilies problem when styling images

Pictures say a 1000 words. Adding images and style your images are important in your articles in two ways, first they add up in a good look and feel of your article and second it make you gain credibility as an author. But you should be aware of the problem with smileys …

Problem

You might use these CSS code to style images in your entries :

.entry img {
margin:10px;
padding:10px;
border:1px solid silver;
}

Yeah, it is fine. Those code make your images more beautiful, but wait … This would affect your smiley images too! Look at the image below

Wordpress smileys">

Your smiley images is added 10px margin, 10px padding, 1px silver border. And therefore it is not good looking

How to fix

The smiley images in WordPress are automatically given a CSS class of wp-smiley when they are displayed in a post. You can use this class to style your smileys differently from other post images.

You could add these code to your CSS :

img.wp-smiley {
margin:0px;
padding:0px;
border:0px;
}

That’s all

Read More!

CSS ve SEO

CSS'in ne olduğunu web ile uğraşıp da bilmeyen yoktur. CSS ile tüm sitemizdeki değişiklikleri merkezi bir dosyadan yapabilir, CSS'in gelişmiş özellikleri ile gayet hoş ve düzenli sayfalar oluşturabiliriz.
Fakat css'in daha farklı şeylerde de işe yarayabileceğini hiç düşünmüş müydünüz? Örneğin; SEO!
Evet CSS ile sitenizin SEOsuna katkıda bulunabilirsiniz. Bu yazıda CSS'i nasıl SEO için kulanabileceğimize kısaca göz atacağız.

Şık Kodlanmış XHTML

SEO dünyasında boyut ve konum önemlidir. Eğer sayfanız önemli derecede uzunsa ve içerik bölümü sitenin alt kısımlarındaysa içeriğiniz, arama motorları tarafından "üst kısımlardan daha önemsiz" olarak kabul edilecektir. Ayrıca arama motorları için önemli olan içeriğinizin uzunluğu değil, tüm kodunuzun uzunluğudur. Çünkü Google sitenizi tararken iç içe yuvalanmış birçok tablodan oluşan bir navigasyon bölümü ile karşılaştığında, sitenizin tam bir özetini çıkaramayacak ve yine sitenizin içerik bölümünü önemsiz olarak alacaktır.

Düzenlenmiş Kod

Tablolu tasarımınız ekranda gayet düzenli ve şık görünebilir, fakat iş SEO'ya geldiğinde olay tamamen farklıdır. Arama motorları hiçbir zaman sitenizi görsel olarak taramazlar. Onlar için her zaman sitenizin kodları önemlidir. Ve bilmelisiniz ki tablolu tasarımları taramak kolay değildir, çünkü tamamen bir kod kalabalığıdır.

Ayrıca şöyle bir konu vardır ki, arama motorları sitenizi sol üst köşeden başlayıp sağ alt köşeye kadar tararlar. Bu esnada sayfadaki herşeyi okurlar; header, menü, içerik, footer... Ve eğer her sayfada header'ınız ve menünüz aynıysa buradan eksi bir puan yiyeceksiniz. Çünkü arama motorları çoğaltılmış içeriği sevmez.

Eğer CSS ile çalışıyorsanız sitenizin kodları hem daha kısa hem de daha anlaşılır olacaktır. XHTML ile CSS bir araya geldiğinde sonuç gayet mükemmel olacaktır. Arama motorları bu sayfaları daha kolay tarayabilmektedir. Çünkü kod kalabalığı yoktur ve sayfa olabildiğince açıktır.

Başlıklar Farklılık Yaratabilir

Daha önce de söylediğimiz gibi eğer SEO hakkında endişeleniyorsanız, ilk düşünmeniz gereken sitenizin kodlarıdır. Çünkü bunlar arama motorlarının sitenizle ilgili aldığı ilk ve en önemli bilgilerden biridir. Sitenizin görselliği onlar için önemli değildir ayrıca..
Eski moda HTML başlık etiketleri(

...

) bu konuda gerçekten işe yaramaktadır. Başlıklar için değişik CSS paragraf biçimlendirmeleri ve font etiketleri kullanmayın.
Belki eski moda bu etiketlerin sitenizde güzel görünmediğini düşünüyorsunuz... Fakat bunlar Google için gayet güzel görünüyor. Bu şekilde biçimlendirilmiş bir yazının önemli olduğunu anlıyor.

Vurgulayacağınız Noktayı Seçin

Başlıklar sitenizin SEO'suna etki eden tek şey değildir. Arama motorları bunlar dışında pek çok etikete de önem verirler. Örneğin ve etiketleri de arama motorları için önemlidir.Bu, bazı sitelerde neden rastgele kalınlaşıtırılmış, italikleştirilmiş ve altı çizilmiş kelimeler gördüğünüzü açıklıyor sanırım. Bu şekilde Google tarafından önemli olarak görünecek anahtar kelimeler oluşturuyorlar ve sitelerinin SEO'suna katkıda bulunuyorlar.

Bunlar gibi daha birçok özellik bulunabilir. CSS ve SEO birbirinden ayrılamayacak çok önemli parçalardır.
kaynak : http://www.brkcan.com/blog-css-ve-seo-arama-motoru-optimizasyonu

Read More!

7 Principles Of Clean And Optimized CSS Code

7 Principles Of Clean And Optimized CSS Code

Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it’s not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it’s not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling.

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.

1. Use Shorthand

If you’re not already writing in shorthand, you’re late to the party. But fortunately, this party never ends. Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time). There’s no better time than the present to start this efficient coding practice, or to review it.

Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!).

CSS Shorthand means that instead of using different declarations for related properties…

	margin-top: { 10px; }

	margin-right: { 20px; }

	margin-bottom: { 30px; }

	margin-left: { 40px; }

… you may use shorthand properties to combine those values like so:

	margin: { 10px 20px 30px 40px; }

By specifying a different number of values, browsers would interpret the rules in a specified manner, illustrated in the diagram below.

Illustration of how shorthand declarations are interpreted depending on how many values are specified for a property. This order also applies to padding and border-width among other properties.

Font is another helpful shorthand property that helps save some room and keystrokes.

Examples of the font shorthand property. Note: leaving some values unspecified will mean that those properties will reset to thier initial values.

Those are just two examples of shorthand, but by no means should be considered a comprehensive guide. Even if you are familiar with the rules above, be sure to look at the articles mentioned below for more helpful reminders of those powerful properties that help keep your code succinct. Because of the number of lines and characters saved, going from a previous version of a CSS file which used no shorthand properties to one that makes full use of shorthand can have dramatic effect on file size.

See CSS Shorthand Guide (dustindiaz.com) and Efficient CSS with shorthand properties (456bereastreet.com) for more information about shorthand properties.

2. Axe the Hacks

Jon Hick’s blog hicksdesign.co.uk/journal makes use of conditional comments

Hacks against dead browsers are safe, but hacks against the living aren’t. None of them. Ever.

Keep CSS Simple - Peter-Paul Koch (digitial-web.com)

If you’re like me, those words from Peter-Paul Koch’s nearly 5-year-old article may make you feel a little embarrased. After all, who hasn’t served hacks to Internet Explorer 6 and even Internet Explorer 7? As bad as we may want IE6 to lay six pixels under, the truth is it’s far from dead.

But now we know that using conditional comments to serve hacks correctional declarations for IE6 and IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner, and therefore smaller, default CSS file to more standards-compliant browsers, while only those browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.

Here’s how to use conditional comments to serve styles only to Internet Explorer 6:

	<@!--[if IE 6]@>

		<@link rel="stylesheet" type="text/css" href="ie6.css"@>

	<@!endif]--@>

Remove "@"

For IE7, you can use the above and substitute “6″ for “7″.

Alternatively, if there is hack-less way of getting the desired result using CSS, with all other things being equal, go for it! The less hacks you have to write, the simpler and lighter the code.

3. Use whitespace wisely

Whitespace, including spaces, tabs, and extra line breaks, is important for readability for CSS code. However, whitespace does add, however miniscule it may be, to page weight. Every space, line-break, and tab you can eliminate is like having one less character.

But this is one area where I would not encourage you to skimp just to get a smaller file. It’s still important that you write in a way that is readable to you (and hopefully to others), and if that includes using whitespace for formatting, so be it. After all, if you can’t read it, you’re going to have a hard time applying the other principles mentioned in this article. Just be aware of the fact that whitespace is like air - you might not be able to see it, but it does weigh something.

The figure below shows two different extremes in formatting style, with much whitespace, and the other with very little. I happen to favor the single-line formatting option without tabs, as I can scan the selectors a little easier, and I develop using the full width of my wide-screen monitor. But that’s just me. You may like your selectors to appear nested, and your declarations on each line.

Illustration of two extremes in CSS formatting: lots of whitespace vs. very little whitespace

Using whitespace effectively is great, and a recommended practice for easy-to-manage code, but be aware that the less whitespace you have, the smaller the file. Even if you choose work with whitespace with your working file, you can choose to remove it for the production version of your CSS file, so your files stay skinny where it really counts.

4. Prune frameworks and resets

Nathan Smith’s 960 Grid System CSS framework uses a reset rule.

If you’ve chosen to use a CSS framework (including ones you’ve written yourself), take the time to review the documentation as well as every line of the CSS file. You may find that the framework includes some rules that you don’t care to use for your current project, and they can be weeded out. Also, you may find that the framework includes a more elegant and concise way of achieving a presentational detail than what you normally use, and knowing about them can help prevent you duplicating rule sets unintentionally.

This goes for resets as well. YUI Grid CSS uses a reset, and Eric Meyer’s Reset is also very popular. Resets are great to use because they help to neutralize a browser’s default style. But if you know the nature of the site you are building, you may find some declarations that you know you’ll never need.

 and  will likely go unused on my Aunt Martha’s recipe blog.  A design portfolio probably won’t ever use , , , etc.  So ditch what you don’t need.  It’s not only ok, it’s encouraged, even by Eric Meyer:
 
As I say on the reset page, those styles aren’t supposed to be left alone by anyone. They’re a starting point. 
Crafting Ourselves - Eric Meyer (meyerweb.com)
 
 
Using a framework and/or a reset set of rules can help keep your work optimized, but they should not be accepted in their default state. Considering each declaration and cutting back on unneccessary ones can further help you keep your CSS files lean and readable.
 
5. Future-proof your CSS
 


Doug Bowman’s stopdesign.com CSS reveals specially crafted selectors used for layout.
 
Another way to optimize your code is to separate layout-specific declarations from the rest of your rules. I’ve heard options of separating typography and colors from layout-specific rules in the CSS file. I’ve never been fond of this practice, as I don’t care to repeat selectors just because I have different types of declarations to associate with them.
 
However, I’m warming up to the idea of separating layout styles from the rest of the styles, and giving layout it’s own file, or at least it’s own section. This is also advocated in Andy Clarke’s Transcending CSS. Within the book, Clarke reminds us of the following:
 
Full CSS layouts have always been a compromise. The current CSS specifications were never designed to create the visually rich and complex interface layouts that modern Web demands. The current mehtods - floats and positioning - were never intended as layout tools. 
Transcending CSS - Andy Clarke.
 
 
One way of interpreting this is that floats and positions to establish sidebars and columns are, well, layout hacks. And though we really don’t have an alternative, we hopefully will once a layout standard is agreed upon and browsers start supporting them. When that happens, it should be easy to swap out those hacked up box-model properties for ones intended for layout. Though it will be a while before new layout modules are here, using the right properties to handle layout instead of compensating for the quirks of our current limited set of properties will most certainly help condense page weight.
 
6. Document your work
 


David Shea’s markup guide illustrates the proper usage for HTML tags and how those are represented on his site, mezzoblue.com. Even sites without dynamic HTML can have this simple and effective guide (using its own CSS file, of course!) as a starting point of documentation.
 
For a team of designers, it is extremely important to communicate regularly so that markup and style rules are created in a consistent way, and also to create site standards. For example, if someone comes up with way to markup a tab interface for the site, documentation will keep others from duplicating that effort, preventing code bloat in the HTML and CSS.
 
Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Your future self might appreciate reminder of how your CSS grid framework is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS.
 
The choice to use documentation has a bonus side effect of being a great place to park explanations that otherwise must be included as CSS comments. CSS comments are great for sectioning off chunks of long CSS files, but verbose comments that are used to explain design choices can add to file size, and might be better suited to a markup and style guide. Documenting your code using CSS comments within your working file is most definitely better than nothing at all, but housing that material in separate documentation is a great way to keep the code focus and free from bloat.
 
7. Make use of compression
 
Some great applications have been created to compress and optimize CSS for you, allowing you to serve a human-unreadable but still browser-friendly files that are a fraction of the origional working copies. Applications like CSSTidy and the YUI Compressor can compress whitespace, detect and correct for CSS properties that are overwrite each other, and look for opportunites to use CSS shorthand that you may have missed. (These types of applications are excellent sources to read about, if for no other reason, to learn what things you can further do by hand). 
 
Even popular text editors like BBEdit, TextMate, and TopStyle, can help format your CSS files to your liking. There are also options serve zip versions of your CSS files using PHP. You can find more CSS compressors and optimizers in the post List of CSS Tools.
 
It is important to note that these applications do their best to minimize errors, but they aren’t always perfect. Also, they work best when browser hacks are not included in the file set (which is yet another reason to keep those hacks external).
 
There is one last type of application that can help prune CSS file size I’d like to mention. It can crawl a web site and log which CSS rules and declarations are not being applied, then bring these to your attention. Unfortunately, this tool hasn’t been inventend yet, but I would gladly pay for such a application. 
 
I can recall times when I’ve been afraid to delete certain rules because there is no documentation that explains to me that those selectors are leftover from previous iterations of development. If an app can bring those rules to my attention, that will help with maintenance and keeping CSS files lean.
 
Conclusion
 
Clean and optimized code is important not just for file size, but for maintenance and readability as well. The principles mentioned above are good considerations not just for CSS, but can be applied to HTML, JavaScript, and other programming languages. CSS files are not as prominent as the rendering of your web site to an end-user, but consideration of the above principles can help with both the user experience (in the form of smaller file sizes) and the developer experience (cleaner code). Apply these principles to your current and future projects, and and you will surely appreciate the efforts.
 
About the author
 
Tony White runs the one-man show Ask the CSS Guy, an after-hours blog devoted to peaking under the hood of CSS and JavaScript web-design techniques, as well as troubleshooting CSS-related problems. He resides in Memphis, Tennessee.
Read More!

Form Elements: 50+ CSS/JS Styling and Functionality Techniques

Form Elements: 40+ CSS/JS Styling and Functionality Techniques Designing effective web forms isn’t easy, as we need to figure out more practical styling and functionality techniques to provide a great user experience. Recently there have been a number of noteworthy techniques such as styling different form fields, live validation, Context highlighting, trading options from field to another, slider controls and more - using CSS and different Javascript libraries. Below we present findings of search to more than 40 tutorials and demos to showcase the capabilities and robustness of CSS and Javascript. You might be interested to check other CSS related posts: 47+ Excellent Ajax CSS Forms Using CSS to Do Anything: 50+ Creative Examples and Tutorials 1-Styling dropdown select boxes- To style a dropdown select box is heavy work. This is an experiement on how you can style select box options items. 2- Something New, Part 1-With a little DOM scripting and some creative CSS, you too can make your s beautiful… and you won’t have to sacrifice accessibility, usability or graceful degradation. 3-Styling even more form controls-There are a lot of controls that can be used in an HTML form. Roger Johansson offers an extensive report on the ways you can use CSS to style web form controls. 4-Check it, don’t select it-The biggest problem with multiple-select boxes is that selecting multiple options is a pain, especially if there are enough to create a scrollbar within the box. Here is a good technique for replacing the cumbersome select box with a scrollable checklist. You can check the demo here. 5-DropDown - xHTML/CSS/Javascript replacement of classic selectbox-While there is no problem with styling input fields, styling selectbox is more complicated and solution isn’t perfect. This tutorial brought visualy better solution based on xHTML/CSS/Javascript called dropdowns. 6-Masked Input Plugin- A masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera. 7-Custom Checkbox with jQuery- Provides the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package. 8-LiveValidation- LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete. 9-FancyForm- FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers. 10-Styling disabled text inputs- A disabled text input usually has a grayed-out look, and the value is not able to be modified by user input. Here is how you can style them. You can also check this demo page for different examples Styling disabled form controls with CSS 11-PrettyCheckboxes- A simple jQuery plugin to customize the checkboxes and radio buttons. 12- Building a better web forms: Context highlighting using jQuery- Due to complexity of web appications, sometimes you often need to find a way to focus a user on a current context. Here is a nice way of achieving this effect. Check out the demo here 13-Control.SelectMultiple This control uses a combination of a standard select input, and a collection of checkbox inputs to create an alternative to the standard select multiple control. It’s primary benefit besides a vastly improved experience for selecting multiple items is that for single item selection, it behaves like a normal select input. 14- Justify elements using jQuery and CSS- When creating a web form you have to make a functional and visually aligned layout. You can do so by justifing all labels to have the same width. And the simplest way to do this is to use jQuery. 15-jQuery Form Input Example Plugin- A jQuery plugin to specify examples within form inputs (i.e. text fields and text areas) that disappear on user focus. Check out the demo here. 16-Jquery-Autotab- Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form 17-jquery-asmselect- A progressive enhancement to “select multiple” form elements. Check out a demo here and here. 18-jQuery.AddToList- A very customisable plugin that hooks into select lists. An ‘open-form’ event or trigger value display a form (any dom element you specific, that contains a ). AddToList will then ajax submit the form, and if it’s successful, and a new item to your list. Check out a demo here. 19-Easy Multi Select Transfer with jQuery- A perfect example to demonstrate the simple and compact nature of jQuery coding allowing options to be traded from one multi select to another. 20-fValidator- fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. Check out the examples here. 21-Grow a textarea-Just make a form, and this script will add the ability to resize each textarea. 22-jQuery selectbox replacement- This is an unobtrusive jQuery plugin that allows you to replace the HTML select box with a styled dropdown menu. Check out the demo here. 23-Unobtrusive Slider Control V2- Sliders can be associated with both text input and select list form elements. All of the slider’s configuration parameters should be defined within the associated form element’s className Check out the demo here. 24- jQuery Field Plug-in- This plugin greatly expands the ability to retrieve and set values in forms beyond jQuery's standard val() method (and Mike Alsup's Form Plug-in's fieldArray() method) by allowing you to interact with all types of form field elements (except input[@type="file"], which is a read-only element.) It works the same way for text elements as it does for radio, checkbox and select elements. 25-jquery.combobox- jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s). A combobox is technically a ‘Select’ HTML element. Check out the demo here. 26-Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements- This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists. 27-ToggleFormText plug-in example- ToggleFormText is a jQuery plugin to enable help text for input fields. 28-Password field with strength meter- Password strength meter extension class for the extjs library. 29-STYLING FILE INPUTS WITH CSS AND THE DOM- File inputs are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. 30-Pin plugin for Prototype, Remember Field’s Values- Pin plugin for prototype which aims to remember some field’s values. Check out the demo here. 31-accessible, javascript-enhanced, css-able form elements for mootools- A javascript-class (based on mootools) customFormElements, which gives you the opportunity to style your own checkboxes and radiobuttons via css. 32-Resizeable Textboxes- What we are going to create today is a textbox with resize handles on the bottom, right, and bottom-right corner. The resize handles do what you might expect - grabbing the right edge will let you resize the width, grabbing the bottom will let you resize the height, and grabbing the corner will let you resize either. 33-Resizeable Textboxes- Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery. Check out the demo here. 34-jQuery AlphaNumeric- jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas. 35-Mootools Form Hints- Mootools/Javascript Form Helper Allows inline help in form input fields. 36-MultiSelect- MutliSelect is a clean way to display a drop down and allow multiple options to be selected with just the mouse and without taking up more room that you need. With just a single line of code, MultiSelect styles up any select with a new and simple drop down. Check out the example here. 37- Watermark Input Plugin- This is a watermark input plugin for jQuery. Currently this is a beta release. This simple plugin allows forms with limited space to display additional information about the contents of a field. 38-Select box manipulation 39-Spinner Control How to integrate Spinner control on your form inputs. 40-Autohelp Sometimes it’s important to tell the user what’s expected of him. Especially when filling out a complicated form. This plugin uses the title attribute to display help in a separate DOM element.
	Yıldız eklePaylaşE-postaOkunmadı olarak saklaEtiket ekle

	13.Ağu.2008 (5 gün önce) DevSnippets has Officially Launched with a $4600 Contest Prizes Noupe bağlantısından yazan Noupe This week brings two big announcements for the site. First, we’re super excited to launch our new site at Devsnippets.com. As the name suggests Devsnippets.com serves as a public gallery about everything has to do with design and development stages, from HTML/CSS to javascript and ajax to things like WordPress hacks. And secondly, I’m also pleased to tell you that we are announcing Our First Launch Contest here at NOUPE. DevSnippets Launch Finally i was able to put the last brick in the new code snippet gallery site, Devsnippets.com. As the name suggests, Devsnippets.com serves as a public gallery about everything has to do with design and development stages, from HTML/CSS to javascript and ajax to things like WordPress hacks. Anybody can submit his favorite and most valuable code, design snippets and tutorials using the snippet and news submission form. Each entry will be moderated and checked for quality so each link that goes through is surely of interest and spam-free. The site is still empty at the moment, and this week I’ll start filling it up with some amazing code snippets and then sit back and watch what you guys can do to get the ball rolling. I’m going to be creating a little sidebar-widget here on NOUPE, where i will pull recent entries from Devsnippets.com. For the moment, feel free to head over, bookmark the URL, add the RSS to your feed, and submit a snippet. About the Contest Before I tell you about the rules and guidelines I’m sure you’d like to know what prizes we got for you. Prizes First Place Prizes: 2 Techinline Remote Desktop Yearly unlimited access licenses (Value of $600) from Techinline One year Gold SitePal Product, Worth ($399.50). A corporate license from Active Collab.(License is worth $399) A developer License for Content Premium WordPress theme (Valued at $249). A 512MB ram vps from IBT hosting Service for three months (Valued at $135) 3D Wall Component from Flashloaded. 3D Wall is a Flash CS3 component that lets you create an interactive wall that looks 3D! (Valued at $99.95) One FlippingBook Flash Component PRO License from Page Flip, Worth ($147) Second Place Prizes: 2 Techinline Remote Desktop Semi-Annual unlimited access licenses (Value of $320) from Techinline One year Gold SitePal Product, Worth ($399.50). A corporate license from Active Collab.(License is worth $399) A developer License for Music WordPress theme 3D Wall Component from Flashloaded. 3D Wall is a Flash CS3 component that lets you create an interactive wall that looks 3D! (Valued at $99.95) One FlippingBook Flash Component PRO License from Page Flip, Worth ($147) Third Place Prizes: A developer License for WordPress Elegant Premium WordPress theme (Valued at $197). 3D Wall Component from Flashloaded. 3D Wall is a Flash CS3 component that lets you create an interactive wall that looks 3D! (Valued at $99.95) One FlippingBook HTML Edition PRO License from Page Flip, Worth ($147) Forth Place Prizes: One year SilverSitePal Product, Worth ($199.50). A developer License for Celebrity WordPress theme One FlippingBook HTML Edition PRO License from Page Flip, Worth ($147) Fifth Place Prizes: One year SilverSitePal Product, Worth ($199.50). A 384MB ram vps from IBT hosting Service for three months (Valued at $75) Who Wins? It’s really simple to get involved in the Contest and have a chance at a great list of interesting prizes. Prizes go to the top 10 submitters who will be honored here at NOUPE as well by showcasing their websites. How to Enter To enter this competition, submit in your favorite snippets between August 13th, 2008 until September 13th, 2008. Use our DevSnippets Snippet and news Submission form and submit your own or your favorite CSS, Ajax and Javascript code snippets and tutorials. Each entry will be moderated and checked for quality so each link that goes through is surely of interest and spam-free. Just don’t forget to register so our counter can count your submitted snippets, we have added a small registration widget at the top to ease your work. Deadline Entries must be received before midnight Saturday, September 13, 2008. You have until midnight Pacific Time. Terms & Conditions Please make sure you enter a valid email address when you register at DevSnippets. We want to be able to contact you if you win so please check your email address twice just in case. We will also link to the top 10 submitters here on NOUPE, please provide a direct link to your entry in your DevSnippets account Profile.Winners will receive their prizes at their registered emails, so please make sure that is the one that you are currently using. Judging of the winners will be done by the NOUPE staff, it will be based on 2 scales: highest number of submissions and quality of submitted items. Everyone is eligible to enter. Big Thanks to our Generous Sponsors If you would like to sponsor this contest then let us know. We’ll consider adding you to the list and in our contest updates posts. Let us know what you have to offer as a prize to members of NOUPE. Think of things that developers or designers could utilize. Use our email to let us know [infoatnoupedotcom].
	Yıldız eklePaylaşE-postaOkunmadı olarak saklaEtiket ekle

	11.Ağu.2008 09:16 Adobe Photoshop: 50+ High Quality .PSD Files and Tutorials Noupe bağlantısından yazan Noupe It’s always fun to experiment different techniques and learn how to work with various aspects of Adobe Photoshop to spice up boring text or pictures and make them into works of arts and masterpieces. Today we’ve got you a marvelous set of more than 50 high quality Photoshop .PSD files to offer an assortment of techniques for making your next photoshop effect. You might be interested to check other Photoshop related posts: 53 Killer Photoshop Illustrator Effects and Tutorials High Quality Photoshop Brushes, Resources and Tutorials 40+ Killer Typographic Posters, Photoshop Effects and Tutorials 1-dvd Plastic Case - PSD file - by manicho 2-Cassette PSD File- by manicho 3-DVD Case+Art - PSD file - by manicho 4-Saturday PSD file- by manicho 5-iPhone PSD- by kol 6-‘Terra Nova’ Planet Resource- by *Burning-Liquid 7-Wednesday PSD file- by `manicho 8-Illustration Frames- by gimei 9-Peter’s DeivantART ID Ver1.3 - by *petercui 10-Apple .PSD - by Flahorn 11-Free Film Frame - by bobbyperux 12-Wing - by Jorsart2006 13-Web 2.0 peeling sticker - by distrus 14-Old Paper Art - by Villa-arts 15-High Res PSD Planets- by edubz02 16-openPhone - by Walrick 17-Afterglow. psd- by Phyzer 18-Buttons PSD- by el3ment4l 19-psd autumn butterfly wings set - by adaae 20-Winged by Lyastricity - by Lyastricity 21-deviantART Mascot Fella- by mick-mick 22-UNDER CONSTRUCTION - by Creamania 23-Aero Avatar and SIG - by FastNFurious 24-FREE RENDERS- by *Bobbyperux 25-53 PSD files in one month- by Grafon 26-Customizable Folders- by Bobbyperux 27-Stalker Pass II- by Chaos-kaizer 28-Vista Back-Forward Buttons- by Flahorn 29-Coversutra snapshot sleeve - by Turnpaper 30-Star Sticker- by Matu666 31-Credit Card Icon - by Sniffels 32-Watercolor Text 33-Battery .PSD - by Flahorn 34-PSD-Stock-Fear-Not- by Passionsinsanity 35-Item Coffee- by Auroradesign 36-Magnifa Pro- by Jean31 37-Render3- by Thetrance 38-FLOATING ISLAND - by Ronnyyax 39-Tech - by Ebrehestock 40-Glossy Icon Pack - 4 pieces Free PSD 41-digital flower - by Tikiglow 42-Recreate the ‘Bee Movie’ Text Effect You can download the PSD file here. 43-Easy Photo to Sketch! 44-Water Droplets 45-Nice ‘n’ Simple Subscribe Badges- A nice tutorial for creating badges, you will also find the .psd file at the end of this tutorial. 46- Stunning 3D effects in 30 minutes- A nice tutorial for creating 3D text effects, you will also find the .psd file at the end of this tutorial. 47- Login-Panel by Sundox 48-Calculations And Colorization- A nice photo effect tutorial, you will also find the .psd file at the end of this tutorial. 49-Free Fading Corner Images 50-Free Glass Number Icons
	Yıldız eklePaylaşE-postaOkunmadı olarak saklaEtiket ekle

	04.Ağu.2008 12:53 Websites you Shouldn´t have missed in JULY 2008 Noupe bağlantısından yazan Noupe July was a busy month, we have been watching great news, articles, tutorials, scripts, tips and lot of inspiration for web designers popping up everyday so we thought it would be a great idea to wrap all those resources in one package where you can check to fuel your energy for creativity. Today we have a round up of useful CSS, Ajax, Tutorials, tools, Graphics, WordPress and articles we’ve found in July that is worth your time. Photoshop and Illustrator Tutorials 1- 15 Photoshop Tutorials for Creating Product Advertisements A list of 15 tutorials that will help you to create more attractive and eye-catching advertisements with Photoshop. Check out his tutorials. 2- How to create the Sony-Ericsson logo - Photoshop tutorial This Photoshop tutorial will show you step by step how to create the Sony-Ericsson logo. Check out this post 3- Illustrator Make with Mesh 4- Hell of tutorial in Photoshop An awesome tutorial teaching us how to create a 3D text with fire coming from the inside of the document like a hole. Check out this tutorial. 5- BOLT - Walt Disney Pictures How to make a very interesting Walt Disney wallpaper. Check out this tutorial 6- Text Effect Quickie: Vibrant Pop Text Effect In just a few moments, you can add a vibrant splash to your text that will really add some pop-culture flavor to your designs! Check out this post. 7- 3D Transform a Colorful Cube Design In this tutorial, you’ll learn one way to create a design using repeating elements in a style inspired by Sean Hodge. Check out this tutorial Ajax and Javascript 8- Fantastic News Ticker Newsvine-like using Mootools This tutorial explains how to implement a News Ticker, with news vertical scrolling, using mootools. Check out this tutorial. 9- Wordpress Sidebar Turned Apple-Flashy Using jQuery UI If you love the sidebar on the Apple Startpage, this tutorial will teach you how to create one in your WordPress theme using jQuery. Check out this tutorial. 10- Garage Door Style Menu (using Animated Background Images with jQuery) Build a “Garage Door” style menu, where an image “slides up” to reveal another image behind it. Check out the demo 11- Create an apple style menu and improve it via jQuery Learn how to create a leopard style menu from scratch using Photoshop, HTML, CSS and then improve it via jQuery. Check out the demo 12- Check All/None Checkboxes Using MooTools There’s nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here’s how to do just that with MooTools 1.2. Check out the demo CSS and XHTML 13- Unit PNG Fix Here’s another solution for PNG fix for IE6 from Unit Interactive Labs. 14- Navigation bar with tabs using CSS and sliding doors effect A simple navigation bar with tabs using CSS and sliding doors effect. Check out this post. 15- Getting Started With CSS: 20 Awesome Introductory Tuts Don’t stress out with overly-complicated tutorials - here are 20 awesome introductory tuts to CSS. Check out this post. 16- Web-Based Tools for Optimizing, Formatting and Checking CSS Stylesheets can get large real quickly, both in terms of length and file size. To ensure that your web pages render correctly and quickly, here’s a compilation of some of the best free, web-based CSS optimizers/compressors, code formatters, and validation services. Check out this post. 17- How to make a list with rounded corners, auto width and hover effect This tutorial will teach you how to create a list with rounded corners. Check out the demo here. 18- Mega Awesome CSS Resource List! CSS Articles are posted every day on the web but the trouble is finding the quality ones. A well written article linking to CSS basics articles, writing good code, css frameworks, css layouts, navigation, forms, and of course cross browser tips Check out this amazing post Design 19- How To Display Feedburner Subscriber Count In Text I believe you’ve seen websites and blogs that uses the text-based Feedburner subscriber count instead of the chicklet. I hope you are not getting the idea the these guys update their feed count manually. Instead, it can be done easily with scripts, and the reason why you want to do is - it gives you total flexibility in terms of design, styling and display. Check out the Tutorial 20- 10 Great Eco Print Companies Great article and resources about 10 great eco print companies. Check out this post 21- Improve Your Creative Process, Better Design, Quicker Approvals Discussing ways that could improve your approval process and improve your designs significantly. Check out this post 22- The Best Time Of The Day To Do Things As A Designer This article will go through the best time of the day to do things in relation to your mental state of mind which in turn will make you more productive as a designer. Check out this post 23- The Emergence of Gradient Grunge Design Let’s take a look at some of the characteristics that make up Gradient Grunge design trend today. Check out the post Freebies 24- Free High-Res Texture Pack: Grungy Watercolor 25- Free High-Res Texture Pack: The Anatomy of a *Really* Old Book 26- Free vector african animals set 27- Web Design Resource - 25 Sites to download Free Web Templates Check out these 25 websites that offer quality website templates for free download (under creative-commons) - some of these sites give some stylish web designs that’s worth to download and have a look Check it out 28- Texture Brushes Set 2 29- Brush Stroke Freelance 30- How To Cope With Rejection As A Freelancer A well written article about positive thinking and coping with rejection as a freelance writer. Check out this post 31- Putting Twitter to Work For Your Freelance Writing Business Twitter is some kind a strange marriage between a blogging platform and an instant messaging client. This posts highlights different ways you can use to put twitter for Your Freelance Writing Business. Check out this post 32- The creative brief: improve your project workflow A creative brief is a questionnaire for your client, that covers all the information you are going to require to be able to go ahead and begin site architecture, mood boards & wire-framing (if necessary). One tool we use to capture this data is a creative briefing document. Check out this post 33- How to Make Your Design Project Successful Every Time Tips for getting to the root of the your client’s business objective, so your design work can actively solve it. Check out this post Free WordPress Themes 34- Free Theme: Outdoorsy Theme Now Available to Download . The theme is called “outdoorsy” and it’s perfect for the individual who wants something “slightly” different from your usual standard free theme. This theme is very unique, and quite graphics heavy, which we are aware of. Check out the online demo 35- Tigerpress: A Free Wordpress Theme Tigerpress Wordpress theme has 2 columns and provides a simple and very user-friendly Mac-alike interface (design based on Apple’s Tiger Mac OS X). Check it out 36- Free WordPress Theme: Old News Now Avaliable To Download The design is simple 3 column layout with inspirations from scrap paper. This theme would be perfect for someone looking to make an easy to simple and easy to read blog. Check it out WordPress 37- Amazing WordPress hacks part 2 Order Allow,Deny Deny from all Allow from all The second part of Amazing WordPress hacks article, you will see how to set Post Expiration time and date in another way, Secure your wp-includes folder and how to make Wordpress Static HTML Template. Check out this article 38- 15 Awesome WordPress Resource Sites There are tons of tutorial sites out there that provide tips, tricks, and resources to teach both beginner and advanced users more about WordPress. Here are 15 of the best WordPress resource sites on the ‘net. Check out this post. 39- How To Create WordPress Themes From Scratch Part 1 How to create a wordpress theme from scratch in these 3 parts of tutorial series. Covering Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation. Check out this Tutorial 40- How To Make Your Own Default Avatar in 5 Minutes The avatars are a great way to make things more personal and create some variety between the different comments.This tutorial will teach you how to create your default avatar image for people who don’t have an avatar. Check out this Tutorial Inspiration 41- 24 Design and Inspiration Websites Collection of design and inspiration websites. Check out the post 42- Mixed Media Abstract Art 43- July’s Best : 15 CSS Design on CssLeak New Launches 44- DesignMag Steven Snell of VandelayDesign has launched another great website, DesignM.ag. A useful and resourceful site for the web design community. Starting with amazing posts offering great resources and tips for the design community. Check out the community news section and the design gallery. 45- Script & Style Script & Style is going to be a user-driven stream of links, which anybody can submit to using the article submission form. There will also be exclusive tutorials from time to time. Check out this new site Resources 46- 200+ Free Grunge Photoshop Brushes Photoshop brushes are one of the most useful and often under-rated aspects of the program. Here is a collection of some of the hottest and newest free grunge Photoshop brushes from a variety of brush sites. Check out the Tutorial 47- 11 of the Highest User Ranked Free Fonts There are an infinite amount of resources and lists for great free fonts. Here is a great list of 11 quality free fonts. Check out this post 48- 13 Most Unusual Search Engines You Should Remember Every search engine listed here has some different way of searching or unusual presentation. Check out this post 49- 50 Absolutely Killer Flash Templates Sit back and scroll through this amazing post, 50 Killer Flash templates. Check out this post 50- 42 Resources of Inspiration for Graphic Designers and Lovers of Design Resources of Inspiration for Graphic Artists and Designers and Lovers of Design. Check out this post Textures and Brushes 51- Oriental Photoshop Brushes And Vector Images For Mysterious Designs This is a collection of oriental Photoshop brushes & vector images for more mysterious designs. The collection includes Chinese dragons, Japanese, Chinese & Arabic texts, people, houses, mosques & various figures. Check out this post 52- 350+ Brushes, Textures, and Fonts: Massive Hand Drawn Roundup Interviews 53- Favorite Design-Related Sites of 21 Designers DesignM.ag is a new site that aims to meet the needs of the web design community. Here is a collection of design-related sites that are visited frequently by other designers. Check out this post 54- An Interview With Paul Boag An interesting interview with Paul Boag of Boagworld. Check out this interview 55- An Interview With Morgan Porter They Don’t Teach Business in Design School: An Interview With Morgan Porter. Check out this interview 56- An interview with James White SEO and Web Traffic 57- 17 fast and easy steps to more web traffic Anyone who has ever looked at a successful blog, or website will tell you that the reason it is probably successful, is because of the content. You need to set your goals to improve your traffic. Check out this post

Read More!