Digital Inspiration Technology Blog: Microsoft’s New Logo Recreated in CSS

Digital Inspiration Technology Blog Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.

Microsoft's New Logo Recreated in CSS Aug 28th 2012, 11:55 → Microsoft recently unveiled a new corporate logo where four colored squares represent Windows, Office, Xbox and Windows Phone family of products. The PDF document suggests that designers used Adobe Illustrator CS5 to create the original logo but @mohamedmansour shows us how to recreate the same logo using few lines of HTML and CSS3. If the live demo doesn’t look right in your screen, the Segoe font is probably missing on your computer though some have suggested replacing Segoe with Open Sans, a Google Font. Here’s the full code courtesy Mansour. <logo>Microsoft</logo> <style> logo { font: bold 60px "Segoe UI"; color: #747273; line-height: 1.5em; padding-left: 1.7em; } logo:before { content: '\2006'; position: absolute; height: 0.095em; left: 0; box-shadow: 0.35em 0.35em 0 0.25em #f8510c, 1.05em 0.35em 0 0.25em #7eba00, 0.35em 0.97em 0 0.25em #00a3f4, 1.05em 0.97em 0 0.25em #ffba00; } </style> Also see: Windows 8 Logo in CSS This story, Microsoft’s New Logo Recreated in CSS, was originally published at Digital Inspiration on 28/08/2012 under Css, Logo, Microsoft, Internet.

You are receiving this email because you subscribed to this feed at blogtrottr.com. If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions