The optimal list of the most useful tools for CSS developers

May 6th, 2009

We all try to make our work as much easy, fast and productive as possible, thus here are some great tools that CSS developers might find useful. Most of these tools will be helpful both for beginners and for experienced developers.

CSS Frameworks
A CSS framework is a ready-made library packaging a number of useful pre-made options for designing a web page with CSS.

* Boks. This visual editor is a user-friendly Adobe AIR application that allows to build and fill your layout and export it to HTML and CSS. Works on Windows, Mac and Linux.
* YAML Builder. Online tool that allows you to visually create YAML-based CSS layouts.
* Blueprint CSS.
* CleverCSS.

Fonts
Fonts are powerful tool that can make your website extremely successful or a complete disaster. Thus choose fonts carefully.

* Typetester. This nice online tool allows you to compare the fonts on the screen.
* CSStxt. Generates CSS for web typography.
* 25 Best Quality License-Free Fonts.
* Font guide for webmasters.
* 100 Free Fonts.

Colors
Color along with fonts is extremely important in web design, it can easily attract or scare visitors off your website.
* CSS Color Editor.
This awesome tool allows you to replace the color scheme of your website without changing the entire CSS file. All you need to do is to choose your local file, pick new colors and download the new CSS file with new color codes automatically replaced.
* Color Palette Generator
Upload an image and have a color palette based on its main colors generated.
* CSS Color Chart.
* Web 2.0 Colour Palette.
* Colour Contrast Analyser.
* Web Color Visualizer.

Forms
* Accessible Form Builder.
Quickly and easily generates XHTML-compliant accessible forms.
* JotForm.
Very convenient WYSIWYG Form Builder

Text Wrappers
* CSS Text Wrapper
Allows to wrap your content to any shape generating HTML/CSS.
* The Box Office
Wrap, float or contour your  text around freeform images.

Accesability Checkers
Check your website for errors before launching it.

* Accessibility Valet Demonstrator.
* OCAWA Web Accessibility Expert.
* WAVE 3.5 Accessibility Tool.
* Web-based Site Usability Checker.

Optimization

* CSS Drive CSS Compressor.
Allows to choose a level of compression.

* MinifyMe – AIR Application.
Adobe AIR application that packs multiple files together

Galleries
Resources of inspiration.

* Design awards gallery
* CSSElite
* CSS-Mania
* CSS Zen Garden
* CSS Beauty

What CSS tools would you add to the list?

Top 7 green website templates

February 25th, 2009

Winter’s coming to the end, can you feel the breath of spring already?
Poets write odes to spring, musicians sing songs about the green season… Well, LayoutsPack would like to praise the spring as well.
This post today will be dedicated to the main color of spring – green. Here are top 7 green web templates from LayoutsPack collection for you to get inspired and prepared for the real green spring coming in a week.

#7 Floral Studio Web Template

This fresh and exquisite design made with CSS is created for the beautiful flower business.

css template

#6 Flowers Delivery Webpage Template

Another one flowers-related business web page design created in CSS.

css template

#5 Fruit Export Company CSS Template

Spring brings fruit and vegetables, website build with this CSS Template will bring them either.

css template

#4 Green Organizations Template

This CSS designed website template is aimed for the noble goal – environmental protection.

css template

#3 Green Organizations Website Template

Another one CSS website template created for nature saving organizations.

css template

#2 B2B flash animated template

Beautiful business Flash animated web template will make any business website fresher and more attractive.

company layout

#1 Photo Art Portfolio Flash Template

Finally the winner of the chart – the most creative and the most green among others, this art portfolio will bring spring to any photographer or artist website.

flash template

So, do you feel the breath of spring now?

Introduction to CSS3

February 9th, 2009

I already wrote about CSS here and not just once. But being a premium provider of CSS website Templates LayoutsPack can’t miss the chance to tell you even more about CSS.
Today I’m going to give you a brief description of some peculiar features of upcoming CSS3. This won’t be a tutorial, so do not expect to see any codes here.
As you remember, CSS (Cascading Style Sheets) is a language allowing to style HTML and XHTML pages. CSS3 taking over CSS2 offers a number of changes, giving you more ways to create incredible designs.
The main thing about CSS3 is that it’ll allow you to develop brilliant websites with new design features and with old ones being achieved in a much easier way. And while the browsers are being upgraded to adopt new CSS3 features you won’t need to change the existing designs, CSS2 will always be supported.
So, what are the said new features?
First of all borders. If you are using CSS you are familiar with the border property. It is a perfect way to create effects around images, structure your content and improve a page layout. Giving the ability to use rounded corners, shadows, border images and gradients CSS3 brings the borders to a new level. These additions in CSS3 will save a great deal of time to designers.
Rounded Borders
With CSS2 it is rather tricky to create rounded borders. There are few ways and you often need to create individual images for each border. With CSS3 creating a rounded border is much more easier, and it can be applied to individual corners or to each corner, width and color are also easily altered.
Gradient borders
If used properly this new feature can look really effective. The code will be a bit more complex as you’ll have to define each color of the gradient.
Box Shadows
You may know how hard it is to add a shadow to an element with CSS2. CSS3 will bring you convenience in creating this stylish way of distinguishing a certain area.
Border Images
Border images are among the most useful additions. They can be repeated and stretched as you choose.
Next come new text effects.
Typography is one of the most important aspects in designing a layout, text and font can give as a pleasant so a repugnant impression to the reader, used properly the text effects can provide impact that no other effect can give.
CSS2 is rather versatile in the ways of displaying text but there are still some limitations. CSS3 gives some indulgence to those limitations.
CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.
Text Shadow
As any other effect this should be executed cautiously. When used in headings and titles shadows can give a really attractive, subtle effect
Word Wrapping
CSS3 will give you an opportunity to wrap really long words that do not fit with a line in a particular area.
Web Fonts
This is not really a “text effect”, a Web Font is a way to use any font on a page being automatically downloaded by the browser. This feature will definitely become a revolution in web design.

CSS3 also brings few new great properties to resizing elements, outlining, box layout, cursors etc.
Resizing
CSS3 will allow you to easily resize any element, in the end becoming cross-browser compatible.
Box Sizing
This feature will allow you to
The box sizing aspect allows you to arrange certain elements to fit a certain area in some certain way. For instance, you need two bordered boxes side by side, you can achieve this by stating box-sizing to ‘border-box’. This will tell the browser to render the box with the told height and width and put the border with the padding inside the box.
Outline
You can set an element outline in CSS2, but CSS3 allows you to shift the outline from an element by a value you want it to be.

Among other new features CSS3 introduces a new module – a multi-column layout. It will give you an opportunity to specify into how many columns a text is to be split down and how are they to appear.
There are such properties related to multi-column layout in CSS3: setting the number of columns, width of columns, gap between the columns and a border between them.
This new upcoming feature will allow a better control over how a copy is displayed, saving designers some headache.

Well, these were some of the new great features of CSS3, there are a lot more of course. This post was merely meant to introduce you to the new generation of Style Sheets.

3 Ways of Applying Style Sheets to a Web Page

January 14th, 2009

I already gave you some basic CSS tutorial, but I’m pretty sure you’d like to know more. So, in this post I’m going to give you one more simple tutorial on CSS, specifically on applying style sheets to a web page.

Well, just to remind you – CSS or Cascading Style Sheets is a stylesheet language and the most common way to style HTML and XHTML pages.

There are a few ways to apply style sheets to a web page.

Inline styles:

To use inline styles you need to place a ’style’ attribute in a HTML tag. This attribute may assert any CSS information.

<p style=”color: white; font-sizer: 12pt”>
Web templates membership </p>

Remember: You need a ‘;’ to separate the properties.

Internal Style Sheets:

When a web master wants to give a  particular look to a particular web page that distinguishes from others in a web site he usually uses internal style sheets. Internal style sheets are usually placed between the head tags in a HTML document. CSS is applied with the use of <style> tags.

<head>
<style type=”text/css”>
body {background-color: #3e5e11;
text-family: arial;
text-size: 12pt}
</style>
</head>

External Style Sheets:

It’s probably the most popular way of applying style sheets to a web page. With external style sheets a separate document containing all the CSS information is created.
You need to place <link> tags in the HTML document so the browser can read the information from the style sheet document. The <link> tags are placed between the <head> tags.

<head>
<link rel= ”stylesheet” type=”text/css” href=”style.css” />
</head>

Insert the name of your style sheet file in the ‘href’ attribute and the browser will read the info in that file and format properly.
You have to save your style sheet file with the .css extension. As your style sheet document has already been saved as a CSS extension it doesn’t need any <style> tags.
Here’s an example of how a style sheet file can look like:

Quote:
body {background-image: url(“image/logo.jpg”);
font-family: arial;
font-size: 12pt}
p {color: green;
font-family: aria}
h1 {font-size: 14pt}

Well, these were 3 ways of applying style sheets to a web page. Now feel free to have a look on some of our CSS web templates.

Basic CSS Tutorial, part 2.

December 16th, 2008

In my previous post I gave you the brief tutorial on CSS and promissed to go on with it. Well, as promissed, here is some usefull info on Pseudo-classes and Pseudo-elements and Cascading Order.

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are specific “classes” and “elements” that are automatically recognized by CSS-compatible browsers. Pseudo-classes distinguish among different element types. Pseudo-elements refer to sub-parts of elements, for example the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form:

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

It’s better not specify Pseudo-classes and pseudo-elements with HTML’s CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes may be set to the A element to display links, visited links and active links differently. A visited link could be defined to render in a different color and even a different font size and style.

There can be an interesting effect – an “active” link displayed in a slightly larger font size with a different color. And when the page is re-selected the visited link can be displayed in a smaller font size with a different color. The sample style sheet looks like this:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

First Line Pseudo-element

The first line of text in a newspaper article is often displayed in bold lettering and all capitals. CSS1 has this capability as a pseudo-element.
You can use a first-line pseudo-element in any block-level element (such as P, H1, etc.).
An example of a first-line pseudo-element:

P:first-line {
font-variant: small-caps;
font-weight: bold }

First Letter Pseudo-element

To create drop caps and other effects use first-letter pseudo-element.
The first letter of text in an assigned selector will be reflected according to the value assigned. A first-letter pseudo-element can be used in any block-level element.
Example:

P:first-letter { font-size: 300%; float: left }

creates a drop cap three times the normal font size.
Read the rest of this entry »