Design Shack — Web Design Gallery, Articles & Community

Developer Tools in Safari

Open the safari preferences window, click on the ‘advanced’ option and then select the box entitled ‘Show develop menu in menu bar’. Straight forward! The result is a new field in the top menu which looks like the following:

10 CSS Form Examples

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you’ll be creating stunning CSS forms in no time at all.

Cross Browser Testing (PC)

A sure sign of a rock solid, well coded CSS layout is that it displays consistently across browsers and platforms. A look at recent global browser stats shows that, while Internet Explorer continues to be the most popular web browser in general use, its user base is fairly evenly split between versions 6 and 7.

And although other browsers such as Firefox, Opera and Safari have a relatively small share of the browser market, it would be unwise for any web designer or developer to ignore them when testing their work.

One Thousand Designs

We today passed the mark of 1000 CSS designs featured in our gallery. Thank you to all those who keep submitting their websites and to our loyal readers looking for inspiration. Here’s to hitting the 2000 mark next year!

Happy Valentines!

In the spirit of love, we have a gift for all our readers in the form of a 10% discount on any purchase from Markup4U. Simply enter ‘Design Shack’ in the notes section of your order to receive the discount, which will run until the end of February.

Happy Valentines from Design Shack!

CSSEdit Tutorial: The Basics

CSSEdit is, as the name implies, a CSS editor for the Mac. It has come on leaps and bounds in the latest version and is now one of the best apps available on the Mac for designers. CSSEdit is created by the great delopers over at MacRabbit, who are also responsible for DeskShade.

One of the strongest features of CSSEdit is the simple, easy to navigate and beautiful interface. Even people who have no experience in styling web pages can find their way around this amazing app and create some stunning web pages. In this tutorial we’re going to be looking at the interface and how to get the most out of it.

The Main Window

The main window has three main sections, the first section (on the left) is the styles section. Here you can see all the styles you have applied to your site. The middle section is the actual editor of the app, here you do all the coding of your css file all with the ever-helpful code completion feature. The right hand section is a way of styling your page without coding anything whatsoever. You can type in or select with drop down boxes how you wish to style a certain element and the code is inserted for you. This is a great feature for anyone new to CSS or anyone who isn’t sure how to code a certain technique.

The Toolbar

The toolbar of CSSEdit has some of the best features in the app and is therefore used quite a bit, especially in more advanced use, we’ll go through each toolbar icon one-by-one and I’ll explain what each one does.

Along the left hand side of the toolbar there are 5 tools, the first is the new style feature, this allows you to add a new style to your stylesheet quite easily. The second allows you to group certain styles together into a folder to make them easier to navigate through. The third is a simple of way of adding a comment into your stylesheet without having to code it in by hand. The fourth is a more advanced way of styling elements, it allows you to style a certain element wherever it appears in your stylesheet. With these four features there is no coding needed, CSSEdit does it all for you. The fifth feature is a simple search function, useful if you have a very large stylesheet.

The right hand side of the toolbar contains some of the more advanced features of CSSEdit. The first allows you to insert a link to the stylesheet into a HTML file, this assigns the HTML file the CSS file to style it. The second is a way of previewing your web page without having to open an external web browser. The third is called Milestones, it is a way of saving your current progress in the stylesheet, allowing you to revert if a mistake is made. The fourth is a way of validating your CSS and the final icon allows you to change which three columns of the main interface you can see, meaning that if you can’t code you can just edit your CSS with no coding needed.

If you don’t have this app, as a web developer I seriously suggest reading more at MacRabbit. It really is the ultimate in stylesheet creation.

Creating an iPhone Website Icon

With the latest software update to the iPhone, it is now possible to add ‘WebClips’ to your home screen. This is essentially a quick bookmark to a website, complete with an icon. By default, the iPhone will take a tiny screenshot of the site to use as an icon – with a little work however, you can customize the icon used to make it look just as you’d like.

There are two simple steps to create an icon:

• Create a 57x57px PNG file to use as the icon – pick something bold that well respresents your site
• Name it ‘apple-touch-icon.png’ and place it in the root HTML folder of your site

The great thing is that the iPhone will automatically alter the WebClip icon to fit the style of the other icons, adding rounded corners and the glossy effect.

To apply the icon a different way, you can insert a <link> element similar to <link rel=”apple-touch-icon” href=”/customIcon.png”/> within the <head> element of the page.

If you notice a slight delay after clicking the ‘Add to Home Screen’ button on your iPhone it is simply that the icon is being downloaded. Give it a few seconds!

For the official guide, you can have a look at the Apple iPhone Dev Site.

Featured in .Net Magazine

We would just like to thank .net Magazine in the UK for featuring us this month in their Readers Sites section. You can read more about the mag and buy a copy here.

Search Forms in Safari

It is remarkably simple to put this design feature in place on your site, and it can improve functionality greatly for those using a Mac. Whether Firefox and Internet Explorer will integrate this feature into their browsers in the future is unknown – although it is fairly unlikely.

How to turn the feature on

Using the following code for a form will cause the enhanced search field to display in Safari:

The type="search" tells safari to use the field as a search box, and the autosave="mysite-autosave" results="10" sets additional features about the recent search information.

The downsides

The negative aspect of adding this feature is that your code won’t validate. It’s up to you to decide whether it is a acceptable down-side of improving the browsing experience for those using Safari. We think it is – and you’ll see the enhanced search field on Design Shack!

GenoPal 3.0 for Mac Review

You start by selecting a colour. This can be done either through a colour palette, or through an eyedropper tool which allows you to sample a colour from anywhere on the screen – really useful. The software then generates a whole selection of colours based on the one you chose. Two sliders allow you to alter the colour diversity and lightness diversity, so you can select complementary or contrasting colour comparisons.

From a designer’s point of view, another useful feature is that it is remarkably simple to copy the Hex code of any given colour on the chart for easy use in Photoshop or your CSS file. You can save a load colour palettes for different projects.

There is also a Pro version offering additional features such as the ability to drop and drop colours to create small swatches on screen and the ability to automatically import colours from a picture or a screenshot. This hasn’t yet been released for Mac so we couldn’t review it at this time, but we’ll let you know when it becomes available.

Take a look for yourself and decide whether it’s a piece of software which would enhance your design workflow. There’s also an online version so you can get a feel for how the software works.