mha.dk

Random thoughts of wisdom - the personal blog of Michael Holm Andersen

New (free) ebooks on Microsoft Virtual Academy

Interested in learning about Windows Server 2012, Building Cloud Apps using Microsoft Azure, Windows 8.1, creating applications using Xamarin.Forms, Programming Windows Store Apps … or more-or-less any other topic related to the Microsoft platform? – take a look at all the free books from Microsoft Press:

http://www.microsoftvirtualacademy.com/ebooks

Most titles are available in PDF, Kindle and ePub format – really nice when you own a Kindle Smiley

Lenovo Carbon X1 (2. generation) and PrtScn key

This may seem a bit “off topic”, but after having read numerous articles and blog posts about the Lenovo Carbon X1 (2. generation) and everyone is complaining about the missing PrtScn key on the keyboard .. I just wanted to let all my fellow Carbon X1 owners know, that if you press (and hold) the Fn key + T key this will trigger a “PrtScn” key press!  (and in my case launch the Greenshot screen capture utility).

2014-10-11 17_04_46-XnView - [_ 20141011_170119.jpg]

Other useful Fn shortcuts include:

  • Fn + I = Insert toogle
  • Fn + S = Capture entire screen
  • Fn + B = Break
  • Fn + P = Pause
  • Fn + S = SysRq
  • Fn + K = ScrLk
  • Fn + T = Prt Scrn
  • Fn + H = Home
  • Fn + E = End
  • Fn + 4 = Sleep
  •  

Anyway.. quick post – and if you’re from Denmark (and can live without the æøå keys on your keyboard!), you can find cheaper (not cheap!) Lenovo Carbon X1’s on ebay.co.uk

It’s pretty safe to use CSS3 on your website!

Today most browsers support CSS3 / HTML5 (..even though the biggest limiting factor of course still is – older – versions of Internet Explorer!)

And with the vast array of online CSS3 generators there really is no excuse for still using PNG and other old techniques to achieve dropshadows, rounded corners, gradients etc.

In part due to the CSS vendor prefixes (or CSS browser prefixes) it’s a bit of a hazzle to create the CSS for using many of the CSS3 features manually – If you’re not familiar with browser prefixes, they are used to add new features, that may not be part of a formal specification, and to implement features in a specification that hasn’t been finalized. The CSS browser prefixes are:

  • Android: -webkit-
  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

 

So in order to encourage the use of CSS3 – Here’s a list of my favorite CSS3 online tools:

2014-10-03 14_40_53-Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS

enjoycss.com is an advanced CSS3 generator which is capable of creating dropshadows, rounded corners, gradients, animations and much more – furthermore it contains a gallery which contains a variety of pre-defined buttons, text inputs etc.

 

2014-10-03 14_43_47-CSS3 Generator

css3generator.com was created by Randy Jensen and can also create dropshadows, rounded corners, gradients and animations – the interface is a bit more “rough” than e.g. EnjoyCSS, however it’s still pretty capable.

 

2014-10-03 14_48_36-CSS Animation _ CSS 3.0 Animation _ Animation _ Animation Generator

css3maker.com is pretty cool! – It supports most CSS3 features including simple animation. Furthermore it shows Browser Compatibility for each feature etc.

 

2014-10-03 14_47_13-Ultimate CSS Gradient Generator - ColorZilla.com

Do you need gradients? Take a look at colorzilla.com/gradient-editor which is “A powerful Photoshop-like CSS gradient editor” – it handles both radial and diagonal linear gradients, and the new version 4 even support multi-stop gradients for IE9 (using SVG). Awesome!

 

2014-10-03 14_50_16-Ceaser - CSS Easing Animation Tool - Matthew Lein

Ceaser is a CSS Easing Animation Tool and my favorite for creating “ease-in .. ease-out” animation, mostly due to the fact that it supports the classic Penner equations known from Flash and jQuery (which is waaay better than the standard “ease-in” / “ease-out”) – and the bezier editor is just awesome!

If you’re worried about which CSS3 properties are supported in which browser – take a look at the CSS3 Browser Support Reference – it’s updated and tested regularly with all major browsers.

 

2014-10-03 15_00_25-Modernizr_ the feature detection library for HTML5_CSS3 Talking about CSS3 support. A useful JavaScript tool for implementing CSS3 fallbacks is Modernizr. For anyone working with CSS3 on a production website it’s essential.
Modernizr enables you to use CSS3 for properties where it is supported, and to provide sensible alternatives where it is not! – really cool and worth using.

 

2014-10-03 15_01_15-CSS3 PIE_ CSS3 decorations for IE

As they write on the website: “PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.”

In orher words: It can save you the hassle of having to use JavaScript hacks to achieve certain effects in IE.

 

So there you have it! – some of my favorite online CSS3 tools .. now go tweak those gradients! Smiley

Peger op Do you have any tips or advice about CSS3 or some cool tool which should be on the list? Leave a comment and share your recommendations!