steveostudios

From the Blog

Nov

Web Generators

Posted by Steve at 10:00 am

All design takes time and practice learning the metaphorical pallet and brush for the medium. In fine art, you have charcoal, pastels, paint, and canvas. With Photoshop you have the Brush Tool, Rubber Stamp, and your Canvas. In Web Design, you have images, CSS, HTML and a variety of other languages to play with on a browser canvas. While learning the art of web design, here are a few handy tricks to pull out when you need them.

CSS Button Generator

Easily creates CSS3 buttons. They are clean, completely customizable and very pretty.

CSS Gradient Generator

Easily creates CSS3 gradients. Straight to the point. Complete with code for most browsers.

Stripe Generator

This one is cool because it creates a striped pattern and saves it as an image file for you to download and use in whatever, be it CSS or a graphic in Photoshop.

Oct

Appcelerator Mobile Web SDK

Posted by Steve at 10:00 am

Appcelerator is working on an amazing new idea which is totally worth mentioning here. Currently Appcelerator provides SDKs for the desktop, supporting Windows, OSX, and Linux, and Mobile, supporting iOS, Android, and Blackberry. They have recently announced ‘one more thing’, and that is the Mobile Web SDK.
Essentially, it’s nothing more than their Mobile SDK, but in a smaller library that you can attach to a website, similar to jQuery or MooTools. However, it will allow you to build a mobile app, and then push it out as a mobile webpage, thus a person wouldn’t need to download the app, necessarily, to be able to use it.
Right now, we’re learning to use Appcelerator’s mobile SDK in for an iPhone app to help share the Gospel (more on that later). But what this new tool allows us to do is release the same interacting content as a mobile website, untethered to the Apple App Store (or Android Marketplace, etc.), ready to be used like any other website. Pretty cool, huh?
The official Appcelerator article and video can be found here.

Jun

CSS Custom fonts in Windows

Posted by Steve at 2:33 pm

Apparently either IE or something in Windows doesn’t like custom fonts in CSS. I discovered this while trying to place a custom font in a Titanium Desktop app using the (so I thought) standard:

@font-face {
font-family: 'MyFont';
src: url('myfont.ttf');
}

This works great in Firefox and Safari, as well as Titanium’s application, until I tried it in Windows. Apparently it doesn’t like .ttf’s. This website outlines a little about why Windows doesn’t like .ttf’s, which lead me to this handy site that you can use to convert your font to all standards and it outputs a CSS for you to use. Here is mine:

@font-face {
font-family: 'MyFont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#MyFont') format('svg');
font-weight: normal;
font-style: normal;
}

Wallah! Magically it works. I don’t understand why, though.