Posts tagged CSS

Less Framework 2

1 year ago

by Antonio Ramirez in CSS, Design, On The Web, Tools

All of us know how hard is to get a proper CSS layout for our pages. Thanks to 960 grid system we developers were able to solve some of the issues that we face when we design for different browsers. Now, new devices coming aboard such as Android, iPhones, Blackberry’s and their browsers and the nightmare continues. Nevertheless, nice people like those of 960 grid system give away their approaches and solutions in order to make our life’s easier. Less Framework 2 comes to help us:

A CSS framework for cross-device layouts

Everyone writes CSS differently. Less Framework takes this into account by having a minimal set of features, and does away with things like predefined classes.

No more 960 px

Less Framework uses inline CSS3 media-queries to switch between three layouts:

a two-column layout at 320 px, for smartphones
a five-column layout at 768 px, for iPads and netbooks
and an eight-column layout at 1280 px, for desktops and laptops.

No hacks, unless you want them

Less Framework works beautifully in Firefox, Chrome, Safari, Opera, IE9 (hopefully), Android phones, and all iOS devices (that’s all iPhones, iPads, and iPod Touches). It even behaves nicely in landscape mode.

Tweet this!

CSS Design On The Web Tools

Stripe Generator 2.0

2 years ago

by Antonio Ramirez in CSS, Design, On The Web, Tools

The Web 2.0 Stripe Generator is one of those great utilities that some good fellows program for us to use freely. This fantastic tool allow us to create, guess what… yeah, stripes!

If you are new to Web 2.0 nowadays design you may wonder why do you need such tool. Well, sometimes we wish to provide our borring form objects some nice background.

Its interface is self explanatory and very easy to use. What I like the most from this tool is its simplicity.

How to use stripes in our CSS Objects

This is even easier, let’s imagine whe are on Stripe Generator:

Play with sliders and color pickers, untill you obtain a super-cool stripe tile
Press “Download” to save your creation
Edit your css adding this line to the element you want to stripe:
```
background-image: url("path-to-stripe.png");
```
If you want to only repeat horizontally your tile (as in the case of tiles with gradient), you must add this line too:
```
background-repeat: repeat-x;
```

Example

The following is a picture taken from the contact section of www.antcut.com. I used the above instructions to set the input fields of my document.