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
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.
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;
- text shadows;
- box shadows;
- 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.
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:
- CSS Snippets – specifies the code needed to create effects and shows you what the result should look like.
- HTML Dog – includes beginner, intermediate, and advanced tutorial content about CSS.
- Google Code University – full of useful video guides.
- Cascading Style Sheets – an introductory video tutorial by Treehouse.
- CSS Inheritance: A Simple Step-by-Step Tutorial – terrific, easy-to-understand slide show in simple language. His slides on text shadow are great too.
- Intermediate CSS resources – reams of goodies from the Mozilla Developer Network.
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!