Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Kick Your Creativity Into High Gear with Our CSS Editor

By Shelly Wilson on Tuesday 2nd of October 2012

Introducing DIY CSS in the browser! Paste any CSS, tweak your code, and add styles that we haven’t even built features for yet!

You folks are insatiable! We release a new feature, you send us a load of lovely ‘thanks’ and ‘that’s awesome’ emails, and then sneakily list three more features you’d like to see next! Of course I jest. We actually love hearing your ideas. You’ve made Typecast what it is today. But we also know that getting through your wish list takes time, and you’re itching to do even more with your projects.

So this week we’ve added the feature of all features. The one feature to rule them all. The tardis of typographic style and control: editable CSS!

All access CSS

The CSS editor pane
Now you can change your CSS from within your project! Just click ‘View CSS’ and start typing in the CSS pane. Your changes appear right there in the browser. No refreshes and no window hopping. And like always, any changes you make are synced to your style guide.

Paste your starting point

Like to begin every project with the same scale? Need to work with a client’s existing styles? Want to use a completed project as your jumping off point? Just paste the CSS from these sources into the editor and you’re off.

Fine-tune faster

Our visual controls are great for experimenting and finding direction, but for making tweaks and fine tuning, changing properties in the CSS can be even faster. And you don’t even need to be a programmer. Just delete and type and see your results in the browser. Give it a try. It’s a terrific way to get familiar with CSS if you’re new to code.

Bring the pretty with more styles

CSS + typography is like cookies + milk. It’s a delicious combination that brings joy and makes things better. CSS gives you ultimate control over your web typography and the power to take your Typecast projects to all new levels of beauty and precision. Here’s just a peek at what you could create in Typecast through the CSS editor:

Rotate Your Text

Pair Type with Background Images

Create Motion with Transitions

But that’s not all. With CSS, you can create design and formatting delights with just a few keystrokes. Things like:

  • font stacks;
  • gradients;
  • text shadows;
  • box shadows;
  • padding;
  • initial caps;
  • border-radius, and more!

Little assists to help you along

Within the editor we’ve included a few little helpers to keep you on the right track, particularly if you’re new to working with code. For example, if you accidentally key an incompatible value for a property, you’ll see a red box with an ‘X’ to let you know that’s a no-no. And when you type selectors like ‘border-radius’, we’ll add all the browser pre-fixes for that selector, like -moz-border-radius, -webkit-border-radius (and so on) so you don’t have to.

Current constraints

Nearly everything you can do in CSS, you can do in our CSS editor. But there are a few things that it doesn’t support just yet, including:

  • ID tags; and
  • @ rules (like keyframes, import and font-face).

New to CSS? Here’s some help.

Want to try some of the nifty typographic styles in the browser but aren’t much of a coder? Here are some links that will tell you what you need to know about lines of code are and where to paste them:

Typecast will always be dedicated to giving web designers like you visual controls that provide instant visual feedback. But sometimes, the best and fastest way to check an idea is to work on the CSS directly. With editable CSS under the hood, Typecast now has something for every designer, no matter how you prefer to work: visual controls AND code-based typographic design, all in the browser. Good times.

Sign in now and make something spectacular in minutes!

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus