Free Saeed Malekpour, Website Developer

Contact Me

@zoltandulac

Most Popular Posts

  • Cross Browser CSS Transforms – even in IE
  • @font-face in Depth
  • How to Detect Font-Smoothing Using JavaScript
  • Cross Browser HTML5 Drag and Drop
  • Installing Cygwin and FontForge for Windows
  • Cross Browser HTML5 Progress Bars In Depth
  • Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Widgets
  • Categories

    Entries Tagged as 'transform'

    The CSS3 matrix() Transform for the Mathematically Challenged

    January 7th, 2011 by zoltan · 23 Comments

    The CSS3 transform property can do some really cool things – with it, web designers can rotate, scale, skew and flip objects quite easily. However, in order for designers to have fine-grained, pixel level control over their transforms, the matrix() function is hard to beat. This post explains what it does and the math behind the code. It also includes a tool to help you create matrix() transforms easily using HTML5 Drag and Drop for the user interface and the Sylvester JavaScript library to do the mathematics needed to calculate the matrix values so you don’t have to (in case you have difficulties with math, or if you just are lazy and don’t want to be bothered).

    [Read more »]

    Tags: CSS · CSS3 · Drag and Drop · math · transform

    Using CSS3-Style Transforms in IE Without JavaScript

    September 12th, 2010 by zoltan · 6 Comments

    The IE Transforms Translator will allow you do Cross Browser CSS3-style Transformations without using a JavaScript library like cssSandpaper.

    [Read more »]

    Tags: CSS · CSS3 · transform

    Giving Challenged @font-face Fonts The Italics Makeover

    September 7th, 2010 by zoltan · 5 Comments

    Have a font that doesn’t have an italics variant? Does your browser try to attempt to “obliquify” it (badly) or not do anything at all? There is a simple solution to this problem using CSS3 Transforms.

    [Read more »]

    Tags: @font-face · CSS · CSS3 · Fonts · transform

    cssSandpaper Now Supports transform: translate() and rgba() Gradients

    May 6th, 2010 by zoltan · 1 Comment

    In the first in a planned series of posts, I update cssSandpaper with new features. This week I add IE support for translate() support to CSS transforms and alpha channel support to linear gradients.

    [Read more »]

    Tags: Color · CSS · CSS3 · IE Visual Filters · JavaScript · Polyfills · rgb/rgba · transform

    Cross-Browser Animated CSS Transforms — Even in IE.

    April 5th, 2010 by zoltan · 18 Comments

    This is a follow-up article to my original CSS3 Transform article where I extend cssSandpaper to support scripting. Now you can animate Css3 Transforms (as well as gradients, opacities and box-shadows) in all browsers, including IE, without a lot of issues. Includes lots of neat examples.

    [Read more »]

    Tags: CSS · CSS3 · gradients · IE Visual Filters · JavaScript · Polyfills · transform

    Cross Browser CSS Transforms – even in IE

    March 9th, 2010 by zoltan · 112 Comments

    The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. There are variants that work natively on all major browsers … except for IE. I created a new library, cssSandpaper, that implements CSS3 transforms (as well as gradients and box-shadows) in IE. It also allows developers to use one transform declaration, instead of three vendor-specific ones for Opera, Firefox and WebKit browsers.

    [Read more »]

    Tags: box-shadow · CSS · CSS3 · gradients · IE Visual Filters · JavaScript · Polyfills · transform