Archive for the ‘CSS’ Tag

Scribbler

example

Scribbler is a WordPress plugin that allows you to show an animation of handwritten text on your site. See an example on deschrijfcoacharuba.com

Why use Scribbler?

Handwriting is very personal, this can give a personal touch to your logo, your site, product, app or videos.

How to use Scribbler

  1. Download the plugin  (we’re not on the WordPress directory yet).
  2. Go to your admin section in WordPress and choose Plugins.
  3. Choose ‘upload plugin’
  4. Press ‘choose file’ and then install
    • Alternatively, unzip the plugin. Use FTP to go to your WordPress/wp-content/plugins folder and upload the directory there. Activate the Scribbler plugin
  5. Go to Settings > Scribbler
  6. Enter the text you’d like to see animated on your home page

Options

There is currently only one option: text. This defines what text to show on the page.

Customization

You will probably want to customize the CSS file, which is in the same folder as the plugin. By default the text appears in div#pen, which will be placed right below the content of the post.

Limitations

  • The plugin is programmed to only work on a home page (using is_frontpage), because having a handwriting animation on every page gives bad usability.
  • The speed is fixed to 400 ms per character
  • As already said, it has only one font: ‘Tangerine’ (a Google Font).

Caveats

The plugin hasn’t been tested on every website known to man, and it relies heavily on javascript, in particular the Raphael, jQuery and Cufon libraries.

There is only one font (Tangerine). If you want to use another font, you’ll have to do the preparations yourself: create a cufonized font and modify the default in Scribbler.php.

Known Problems

There are no known problems as of yet.

Contribute

If you want to help me, I’d appreciate to be sent cufonized fonts. I will then implement the use of that font in the plugin.

I want this too on my site!

If you’re not technically inclined I can customize it for you on your site. Just leave a comment or contact me (http://about.me/michiel) and we can agree on a price.

float:center

Unfortunately float:center is not valid CSS, no matter how much we would like it to be. And God knows I tried. The thing with floats is that the left and right property really make them go to the left of their (floating) container. The problem you can get in to is with a series of boxes that you want to have floating alongside, and then centered in the middle of the site.

Let’s say for example you want to have three buttons next to each other, spread out over the full width of your site, and they all link to some section of your site, say:

  • My Portfolio
  • About CSS
  • Blog

In addition, you want it to be viewable on a really small screen, as a PDA or phone browser, and the easiest way you think would be to put them floating, so they would automatically wrap. This is usually a good idea, however, in this case you also want the buttons to be smack left aligned when viewed on a small screen.

There just is no solution for that. The only thing that comes close is giving all these buttons a fixed width (don’t get me started on percentages, it just won’t work). Make sure the sum of the widths equals the width of the container. So if I have a site of 660px, I would give every box a width of 200px and add 10px padding on every side of each box.

So

  • Box A: 10+200+10 = 220px
  • Box B: 10+200+10 = 220px
  • Box C: 10+200+10 = 220px

The only problem is that when you make the window smaller the boxes all have a little indentation on the left.

This is the CSS you would use

.container {
  width: 660px;
  margin:0 auto;
  display:block; }
.button {
  width:200px;
  padding:10px;
  background-color: gray;
  border:1px solid black; }

Of course you could do the same thing with ems.

Update: this problem was recently solved by Firefox 3.0. As of this version all major browsers, including IE6 have support for inline-block. When you use inline-block, you don’t need floats. Put it on the boxes (as in the above example Box a,b and c). You don’t have to specify a width, and by putting text-align:center on the container the boxes will automatically be centered, no matter how many boxes you have.

floating forms

demo page and complete report

I learned several advanced and quick methods of styling layout without tables, mainly used for forms, where fields should always be aligned:

inline block

label {display:-moz-inline-box; _display: inline-block}

This effectively pushes the fields to a fixed position on the right of the label, and works in almost all browsers

absolute positioning

Absolute positioning of the forms gives you the possibility to shift the fields to the right using relative positioning, as follows

form {position:relative}
input {position:absolute;left:10em}

float

Last but not least there is floating. This is usually complex because

  1. the height of labels and fields needs to be equal for correct floating/alignment, and
  2. the width of label+height should (almost) equal the form width. There should be room for margin/padding/rounding errors/font-size setting (in case of pixel widths)
  3. form {width: 20em}
    label {float:left; line-height:1.5em; margin-bottom:.2em; width: 9.5em}
    input {float:left; line-height:1.5em; width: 9.5em}
    

    This can however be fixed by adding a little border or padding to the label, assuming both have the same font size, like this:

    form {width: 20em}
    label {float:left; margin-bottom:1em; width: 10em; padding-right:1px}
    input {float:left}
    

    In this solution you can play around with margins as much as you like without messing up the display. If anybody can explain to me why this works please let me know.

    update: Ingo Chao explained why it works. The width of the label is exactly half of the form’s width. By adding that 1 pixel, two labels cannot go side by side and thus the next label in row will drop. In the original scenario (no widths, or no extra pixel) the first label moves up, but leaves space on the left, where the next label doesn’t fit, and so it moves down. That doesn’t sound very clear, but I’ll see if I can put an image here soon.

    update2: using label {clear:left} fixes the problems too.

Using cross browser transparant PNG’s

In this new series I will write a new CSS trick every day. Oops I don’t know if that is such a good idea… where am I going to find the time? All right I’ll try to post every day.

Here is a tip for all you guys who thought that crazy PhotoShopped design couldn’t be made to display in the browser window: use transparant PNG’s.

Here’s the recipe:

  1. Just design your page in PhotoShop using layers, lots of layers
  2. Export all layers as png’s, with full transparency, 24-bit’s, nice quality
  3. Use the fine pngquant tool to compress the images even more.
  4. Now place all images in an html page, and give each tag a unique ID. You don’t need to use a width and height, but if you do it would be more cross browser compatible with older browsers.
  5. Use the following css for the images
  6. img { position:absolute; border:none; margin:0; padding:0; }
    
  7. Now give each image an exact position
    img#fruit { top:25px; left:40px; }
    img#meat { top:50px; left:100px; }
    
  8. I always prefer to use only top and left, since I read horror stories about right and bottom. If you prefer to use percentages that’s fine, but not all browsers can calculate percentages that well, resulting in small pixel offsets.
  9. add the layering, using z-index. Z-index only works on elements with relative or absolute positioning. The higher the z-index, the more it is ‘on top’.
    img#fruit { top:25px; left:40px; z-index:1; }
    img#meat { top:50px; left:100px; z-index:2; }
    
  10. Add the page’s text content. You could have done that first, but since we are practicing PhotoShop-design-to-html-conversion we don’t really need text content. Normally you would add a div to the page without any positioning.
  11. update: really cross browser

    I realize I forgot to mention some of the cross-browser tips that make your PNG’s work wonders in the crap browser Internet Explorer.

    For solid color (or no) background

    There are several tools that can patch up a png pretty decent so that it
    shows up ok in IE. I now only use apha filters when the image has no
    solid color background. For solid colors I use the technique described
    here

    I know I mentioned pngquant but I later found some more interesting tools. How about pngoptimize? I know that Photoshop saves gamma information in the image, which would distort the final output in IE. You can remove that information using this program.

    For real flexibility

    For real flexibility you can use the IE proprietary filter css rule. This has the huge advantage that your png transparent images can be placed anywhere.

    Here’s an example:

    #logo a {
    position: absolute;
    top:40px;
    background: url(images/logo.png) no-repeat top left;
    width: 152px;
    height: 272px;
    }
    * html #logo a {
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/logo.png', sizingMethod='image');}
    }
    

    Unfortunately, there’s a catch. The path you use in the filter is not starting at the same directory as you would in the style sheet. Instead of using the css file path, it starts from the path of the source (aka your HTML file). The other catch is that there is no positioning of the background possible, so you’ll have to position the container instead.

    Static images

    Wait, it gets better! You can use javascript to automatically have all png images on the page use the filter property. See the following small script that you can include in every page of your site. No thinking required.

    fixPNGs = function ()
    {
    // go through each image in the page and fix them
    for ( var i = 0; i < document.images.length; i++ ) { // only if the image is a png var img = document.images[ i ]; if ( img.src.test(/\.png$/i) ) { img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', enabled=true)"; img.src="/images/blank.gif"; } } }; window.attachEvent("onload", fixPNGs); [/sourcecode]