TransformJS

Transforming elements via Javascript in all browsers at once can be a real pain in the ass (think vendor prefixes). Enter TranformJS:

2D and 3D transforms as regular CSS properties you can set using .css() and animate using .animate()

In code that basically means you can now use this:


    $('#test').animate({
      translateY:'+=150',
      scale:'+=2',
      rotateY: '+='+(2*Math.PI),
      rotateX: '+='+Math.PI,
      rotateZ: '+='+Math.PI
    },1500);

In the back, TransformJS will translate that to the correct CSS3 properties, for all browsers.

TransformJS →

Positioning Firefox’ Tab Close Buttons on the left

Firefox Tab Close Button on the Left“I can’t stand how the close button for tabs is on the right. On the Mac, close goes on the left.”
— John Gruber (#)

Last night I whipped up a tad of CSS to position the tab close buttons in Firefox 4 (currently in Beta) on the left hand side of the tab. The CSS needs to be placed into your userChrome.css to make it work (the code was tested with Firefox 4.0b7).

/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/* move favicon, throbber and text to the right so that the close button appears on the left */
.tabbrowser-tab .tab-icon-image {
  -moz-box-ordinal-group: 2 !important;
}

.tabbrowser-tab .tab-throbber {
  -moz-box-ordinal-group: 2 !important;
}

.tabbrowser-tab .tab-label {
  -moz-box-ordinal-group: 3 !important;
}

/* hide close button initially */
.tabbrowser-tab .tab-close-button {
  display: none !important;
}

/* show close + hide throbber & favicon on hover */
.tabbrowser-tab:hover .tab-close-button {
  display: block !important;
}

.tabbrowser-tab:hover .tab-icon-image {
  display: none !important;
}

.tabbrowser-tab:hover .tab-throbber {
  display: none !important;
}

/* app tabs should not behave like regular tabs, so let them stay normal (viz. don't show close on hover) */
.tabbrowser-tab[pinned]:hover .tab-close-button {
  display: none !important;
}

.tabbrowser-tab[pinned]:hover .tab-icon-image {
  display: block !important;
}

The CSS initially hides the close button of all tabs. When hovering over a tab, the favicon is replaced by the close tab button. The code also plays nice with Firefox’ App Tabs.


Normal Tab


Hovered Tab


Hovered App Tab

As the code is placed on GitHub, feel free to fork off! 😉

RE: Rounded corners on images, CSS-only

Rounded corners are hot. They have been for a long time and still are. Recently things got a whole lot easier due to the fact that lots of browsers started supporting (their vendor specific prefixed version of) border-radius. One of the problems with it is that border-radius cannot be used on images. Tim Van Damme recently went over the possibilities to using rounded corners with images and developed a nice CSS solution for it. Javascript geek as I am, I took the liberty of making a tad bit more dynamic by creating a javascript enhanced version of his solution.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

How to style your lists properly

ListsWorking with nested lists is not an uncommon practice, yet I’ve noticed that some (and I before) had troubles when working with nested lists of different types (viz. an ol inside an ul or vice versa). However, it shouldn’t be a burden at all, here’s a hat tip, saving you some headaches.

Continue reading “How to style your lists properly”

Native CSS selector system to look up DOM nodes hits Webkit/Safari

Many javascript libraries have implemented functions to use the powerful CSS selector system to look up DOM nodes. Continuing the trend of standardizing and speeding up commonly used functionality from these libraries, WebKit now has support for the new W3C Selectors API, which consists of the querySelector and querySelectorAll methods.

Sweet! 🙂

Native CSS selector system to look up DOM nodes hits Webkit/Safari →

TinyMCE CSS Classes and IDs Plugin : bramus_cssextras 0.5.0 hits the net!

TinyMCE LogoHuzzah! bramus_cssextras 0.5.0 has been released! No new features have been added, yet this version differs a lot from the previously released versions of bramus_cssextras: Under the hood bramus_cssextras has been totally rewritten to make it TinyMCE 3.0 compatible.

Continue reading “TinyMCE CSS Classes and IDs Plugin : bramus_cssextras 0.5.0 hits the net!”