CSS Hat

Quality of CSS code: Photoshop vs CSS Hat

This is a continuation of the previous article (open in new tab) where we compared user experience between CSS Hat and Photoshop’s Copy CSS.

Quick elements comparison

We’re going to use free PSD (open in new tab) as in previous article on which we want to demonstrate the results of CSS codes.

Read More

Photoshop CS6 With Brand New “Copy CSS” Function

Adobe released an update of Photoshop CS6 a few weeks ago (version 13.1) for Creative Cloud subscribers. It is full of new functions including the “Copy CSS” feature in which we are interested the most. This function basically grabs layer styles, text properties & turns them into pure CSS. Just “like CSS Hat does” somebody said on Twitter. Let’s see the difference.

Copy CSS feature
Copy CSS function

Read More

CSS Hat has never been a better bargain!

TL;DR:LESS, SASS, Stylus, font propertiesand last three days of introductory price

Hello from CSS Hat,

We just added a load of features you asked about: LESS, SASS (Compass), Stylus, font properties and syntax highlighting are all looking forward to enhance your latest website!

CSS Hat v 1.1.0

It is a great package of improvements, and we love it (our devs wouldn’t code without CSS preprocessor, and we believe neither should you).

Also, as CSS Hat matures, the introductory price will only last three more days, after which we’ll put the Hat back to$19.99$29.99 — so today is the best time for purchase!

PS: We now sell through PayPal as well, just click ‘I don’t wanna pay with card’ on the website!

Nice, show me CSS Hat!

Would your friends or followers love CSS Hat?
Tell them with these pre-filled sharing buttons:

Tweet them mail them facebook them

They’ll be happy to save $10 too!

More about new features

We like to read long emails on a subway too :)

LESS

CSS Hat generates mixins for our brand new LESS Hat library.

At first, we wanted to use what’s already there, but we spent a long time looking and didn’t find a library whose mixins would be universal enough. To create a nice button with multiple gradient swatches or shadows and strokes, we still had to revert to plain old CSS with all vendor prefixes, and that sucked.

Therefore, our star devs came up with a LESS Hat mixin library. Just include it in your build process, to replace this:

Edit with JS Bin .gradient-button {
    width: 200px;
    height: 40px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* border radius */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; /* prevents bg color from leaking outside the border */
    background-color: #dfdfdf; /* layer fill content */
    -moz-box-shadow: 0 0 0 1px #007eff, 0 1px 3px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.43), inset 0 0 3px rgba(255,255,255,.44); /* outer stroke, drop shadow, inner shadow and inner glow */
    -webkit-box-shadow: 0 0 0 1px #007eff, 0 1px 3px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.43), inset 0 0 3px rgba(255,255,255,.44); /* outer stroke, drop shadow, inner shadow and inner glow */
    box-shadow: 0 0 0 1px #007eff, 0 1px 3px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.43), inset 0 0 3px rgba(255,255,255,.44); /* outer stroke, drop shadow, inner shadow and inner glow */
    background-image: /* pile of base64, ommited for brevity */; /* gradient overlay */
    background-image: -moz-linear-gradient(bottom, #0f63af -25%, #3faff3 125%); /* gradient overlay */
    background-image: -o-linear-gradient(bottom, #0f63af -25%, #3faff3 125%); /* gradient overlay */
    background-image: -webkit-linear-gradient(bottom, #0f63af -25%, #3faff3 125%); /* gradient overlay */
    background-image: linear-gradient(bottom, #0f63af -25%, #3faff3 125%); /* gradient overlay */
}

with this:

Edit with JS Bin .gradient-button {
    .size(200px, 40px);
    .border-radius(5px); // border radius
    background-color: #dfdfdf; // layer fill content
    .box-shadow(~”0 0 0 1px #007eff, 0 1px 3px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.43), inset 0 0 3px rgba(255,255,255,.44)); // outer stroke, drop shadow, inner shadow and inner glow
    .gradient(~”linear-gradient(bottom, #0f63af -25%, #3faff3 125%)); // gradient overlay
}

SASS/SCSS

How could we forget this sassy couple? Compass is a wonderful library and CSS Hat loves it. Just include Compass in your project and write:

Edit with Tinkerbin .gradient-button
    @include border-radius(5px) // border radius
    @include background-clip() // prevents bg color from leaking outside the border
    background-color: #dfdfdf // layer fill content
    @include box-shadow(0 0 0 1px #007eff, 0 1px 3px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.43), inset 0 0 3px rgba(255,255,255,.44)) // outer stroke, drop shadow, inner shadow and inner glow
    @include background-image(linear-gradient(bottom, #0f63af -25%, #3faff3 125%)) // gradient overlay

Stylus

Another great preprocessor, CSS Hat generates code for Stylus nib mixin library:

Ops, no nice tool for Stylus/nib yet .gradient-button
    border-radius 5px // border radius
    -moz-background-clip padding
    -webkit-background-clip padding-box
    background-clip padding-box // prevents bg color from leaking outside the border
    background-color #dfdfdf // layer fill content
    box-shadow 0 0 0 1px #007eff, 0 1px 3px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.43), inset 0 0 3px rgba(255,255,255,.44) // outer stroke, drop shadow, inner shadow and inner glow
    background linear-gradient(bottom, #0f63af -25%, #3faff3 125%) // gradient overlay

Font properties

You told us and we listen :). Click the text layer and get this:

Edit with JS Bin header h1 {
    color: #000;
    font-family: Arial;
    font-size: 87px;
    font-style: italic;
    text-decoration: underline;
}

Better stroke

Stroke is now always expressed as CSS border.
Hello, IE8, you can now show at least stroked box — woot!

Syntax highlighting

We always wanted to have syntax highlighting, but on the other side, we realize that Photoshop has a greyscale UI for a reason — to keep you focused on colors of your design.

We didn’t want to disturb that balance, so we chose a subtle, greyscale highlighting, that shows what’s important (properties and values), and dims what’s not (commas, quotes, parentheses).

How do you like it?

.my-paragraph {
    color: #000;
    font-family: Arial;
    font-size: 87px;
    font-style: italic;
    text-decoration: underline;
}

vs.

.my-paragraph {
    color: #000;
    font-family: Arial;
    font-size: 87px;
    font-style: italic;
    text-decoration: underline;
}

One more thing :)

Smart conversion of layer name to CSS selector.
Name your layer div#id:hover .class > li and it will be preserved,
name it my text layer :) and it will become my-text-layer.

Do you like the news?

Share and save everyone $10.

Tweet them mail them facebook them

Thank you!
Lukas Hurych (CSS Hat CEO) & CSS Hat team