written by: ryan coughlin
As I was working this afternoon, Rogie King posted a tweet about a Bookmarklet that allows you to reload your CSS on your page without reloading the page.
So far I have been loving this, it is the perfect tool for your workspace. I highly recommend this to others. Thanks to the creator of this, can grab this bookmarklet and start using it.
- Drag it to your bookmark toolbar
- Open a site your are designing
- To view your new CSS changes, just click the bookmark in the toolbar, and wa la
Quick and really easy. Thought i’d share this tool with everyone. Give it a try.
written by: ryan coughlin
There are various CSS opacity properties out there that allow us to adjust the transparency of an element on our websites, but the thing is amongst the various available properties, which ones apply for which browsers? There are several ways to adjust opacity for an element but each are browser specific.
The below are all of the same but, each work for a certain browser. Besides the last one which is the standard CSS opacity property.
/* Applies to IE5-7 */
filter:alpha(opacity=85);
/* Applies to IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* Applies to Mozilla and Firefox */
-moz-opacity:0.85;
/* Applies to Safari 1.1-1.3 */
-khtml-opacity: 0.85;
/* Standard CSS property */
opacity: 0.85;
Since current browsers do not adopt to the same standards, developers will use the numerous CSS properties to create an equal cross-browser opacity experience, by placing each of those properties within there CSS.
The opacity property is supported by Netscape 7.2+, Firefox, Safari 2+, Opera 9+. The values that this property can accept are: 0.0 – 1.0. The lower the value the more transparent the element is.
The filter:alpha(opacity) property can range anywhere from 0-100. And like the the property above, the lower the value the more transparent.
The -khtml-opacity property was built with Webkit and it is based on the KHTML engine and associated the -khtml prefix to the -opacity
The -moz-opacity property applies for older versions of Mozilla browsers.