Now I know that anyone can go to freewebs (ahem, webs) and get a free website, but that requires no skill.
The Metro design style, which is Microsoft’s brand new user interface design language, is rapidly becoming popular among web designers.
The visual look of this design style is inspired by flat design that is currently a prominent trend in web design arena.
The Metro design style lets users interact directly with content, instead of chrome that most of desktop browsers have.
This design style keeps users away from interacting with the browser, so they could get immersed in what they actually care about. Inspired by Saul Bass, a great American graphic designer, who used motion in his designs, Metro promotes a wide range of compelling and meaningful responses, transitions and animations to delight users. According to this principle, everything from typography and colors to pixel perfect alignment must be complete and polished at every stage of UI development. Microsoft’s Metro design language suggests designers to incorporate balance, symmetry, and hierarchy in their designs, so that users could get into the rhythm of a web page quickly and comfortably.
Instead of being just Iconographic, Metro design adopts an Infographic approach for representing information in a dynamic and alive manner. Following the powerful design philosophy of the Bauhaus, an iconic design school, Metro believes in removal of any design element that’s superfluous. After understanding key principles of Metro design style, now let’s come to the main point: step-by-step process of developing a flipping metro-style menu with CSS3 and HTML5. The first and foremost thing you have to do is referencing all essential files in the head section of your HTML document. After creating the menu, now it’s time to style elements to make our menu more interesting. In the above code snippet, I’ve added some general styles to div, set the duration of transition, and disabled the backface visibility to hide the front element on flipping.


For the front class, which is the child class of the :hover pseudo-class, I’ve set up rotateY to 180 degrees.
If you want to better understand and play around with the code, please take a look at the live demo. ABOUT EGRAPPLEREGrappler is a free portal for open source tools, plugins, scripts and controls for web developers and engineers.
Originally it was created for Windows Phone 7, but now is being used in other Microsoft’s products such as Windows 8.
In this tutorial, firstly I’ll take you on a tour of key design principles of “Metro”, and after that I’ll show you how to create a metro-style menu with flip effect using CSS3 and HTML5. Even, it makes use of the content itself to build navigation elements and takes advantage of color, scale and font to reduce redundancy in UI. Taking advantage of alive, responsive and engaging Live Tiles, the Metro style brings the user interface to life. In essence, the Metro design style is a great effort of Microsoft to put everything from people to tasks before technology. This principle clarifies why designers are required to devote their passion, energy and time to small things that are mostly seen by users.
In short, it inspires an individual to distinguish himself as a professional designer by taking pride in his skills and workmanship. Using typography and colors beautifully, it delivers cleaner content and actionable information without any distraction like reflections, shadows, stitching and texture effects etc. In a few words, authentically digital means going beyond the limits of physical world to create a more effortless and efficient user experience.
Users are more comfortable with what they already know and they don’t adopt a new surface so easily.
Undoubtedly innovation is great, but it should have a limit and must not demonstrate a negative impact on user experience.


This includes links to the CSS, your favorite Google Fonts, and icon font that you’re using.
The ionicons icon tag will show an icon on the front side, while name of the menu will be displayed on the rear side of the menu. This will force the browser to rotate the element by 180 degrees on the Y-axis (vertical), only if there is a :hover pseudo-class on the list item. By removing the chrome (options, menus, toolbars and status bars etc), it leaves only the most relevant commands and functionality on screen.
Creating a sense of continuity, Live Tiles doesn’t only respond to a user’s actions quickly but also are ready for his next action.
Therefore, designers are required to build user interfaces on standard controls, interaction patterns, touch gestures, animations and even common authentication.
Succinctly, Metro design language gives you a golden opportunity to design for user scenarios that are impossible by building for a single platform. The front class is what you’ll see by default and the rear class is what you’ll get to see when hovering over a menu item.
On the other hand, setting up the rotateY to 0 degree for the rear class defines the position where the animation will start.
I’ve used the perspective property to make animations look better, as it defines how many pixels a 3D element is placed from where it’s being viewed.
It also defines where the animation will end when a user move the mouse away from the element.



Free events in los angeles december 2014
Free joomla blog website templates
Free website templates using wordpress




Comments to «Site em html5 free admin»

  1. DoDaqDan_QelBe writes:
    Why it is creating attraction with a man is counterintuitive and i was so stuck on acquiring him for their looks off.
  2. Samurai_0505 writes:
    Psychological patterns person is compared, consciously.


2015 Make video presentation adobe premiere pro | Powered by WordPress