articles on

iOS7 Frosted Glass Effect with HTML 5 and Javascript

iOS7 Frosted Glass Effect with HTML 5 and Javascript

With iOS7 Apple introduced a completely new design for the 6 year old OS. Among all the changes, one that really caught everyone's attention was the blurred background effect. Basically some parts of the UI get a nice frosted glass effect. There are a couple of ways to achieve this effect using HTML and CSS. The easiest way is to use CSS filters, however the performance on phones is far from usable. With that in mind I decided to experiment with Canvas and the result was quite good. So in this post I want to share a little bit about the idea behind this prototype. Basic workflow What we want to accomplish here is a simple way to blur the content once it goes underneath a part of the UI. For this prototype we will use an action bar, or header. To do that in HTML we will have to use a little bit of Javascript. Basically what we want to do is: Render the HTML Duplicate the content area and convert it to canvas. Move the Canvas to the Header part Sync the scroll of the content with the canvas in the header Basic code   See the Pen eJlfj by Fabio Sasso (@abduzeedo) on CodePen Javascript To convert the content area from HTML to Canvas I used a library called html2canvas (http://html2canvas.hertzen.com/). It's pretty simple to use if you follow the steps in the documentation: html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered <canvas> element } }); After the Canvas is rendered I then move it to the Header. I also added an ID so I can play with it in CSS and apply the blur effect in the future. html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); } }); Blur Effect To apply the blur, I used another library for that, it's called Stackblur and it applies Gaussian Blur to a canvas element. html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); stackBlurCanvasRGB('canvas', 0, 0, $("canvas").width(), $("canvas").height(), 20); } }); Conclusion The end result works pretty well for a simple iOS7 prototype. I am still working on fixing the issues with the scrolling, iOS doesn't have "on scroll event" which complicates things a little bit. Below you can see a demo of the prototype. You can fork it on GitHub (https://github.com/abduzeedo/ios7-blur-html5) and make it better :)    

Web design inspiration: Lincoln

Web design inspiration: Lincoln

Technology changes so quickly that sometimes we forgot how things were. Not long ago most movies web sites were done in Flash but since the explosion of smartphones and tablets, and the lack of the Flash plugin for these devices, the industry had to adapt. Now we can see beautifully crafted websites done entirely using HTML/CSS and Javascript, like the one for the movie Lincoln designed and developed by Watson Fusing the site together is a seamlessly smooth interface, allowing visitors to move between pages without menu visitation and complementing the visual experience with effortless browsing. Leveraging new techniques within the framework of HTML5 and jQuery, users are also able to easily access the site across the gamut of mobile devices, exhibiting versatility across all platforms and contributing to the huge mobile accessibility percentage of 31%. Navigation includes fluid transitions and structured text display reminiscent of the time period; together, these integrated features create a widespread appeal for history buffs and casual movie-goers alike. A testament to the power of the American spirit and a sprawling epic of immense proportions, Steven Spielberg’s ‘Lincoln’ takes us straight to the heart of our nation’s sixteenth president and the trials faced during his term in office. Channeling the quiet passion evoked in the film, the Lincoln website immerses the visitor in the White House of the mid-19 th century utilizing emotive imagery, stately formatting and a poignant score. Watson Design Group Watson Design Group is an independent, digital creative boutique founded in 2005. We specialize in innovative creative and online development, driven by serious passion for what we do. Projects range from all-encompassing web campaigns to smaller, integrated viral elements and digital marketing initiatives. We are not afraid to challenge ourselves creatively and push the envelope of what's possible, always setting our goals high and reaching beyond the ordinary.

Tutorial: Case Study with Html5 + CSS3

Last month I did a talk at the Campus Party, one of the biggest technology events of the world, talking about Fireworks, HTML5 and CSS3. It was very nice, the receptivity of the audience was sensational, and thinking that many of you would also like to see the contents of the workshop, so decided to write a full case study and share here on the blog. Many people ask me about the real possibilities to start using HTML5 and CSS3 today, and I'm sure we must explore the best that the web provides us with the goal of always improving the user experience. Maybe we can not reach 100% of the users, because there are still some browsers that do not support most of these new features (we know what browser I'm talking about, right?). But I believe that working to enable the legitimacy of content and navigation to 100% of users, why not make it even easier and more enjoyable browsing for many users who use browsers that allow this? My main bibliography for this case study were two books: Html5 for Web Designers and CSS3 for Web Designers. Definetly worth the read! Preview Template - Download *This template will be best viewed at Webkit browsers, like Safari and Chrome. Layout To start our case study, I created a simple layout, but where it could apply different concepts of CSS3 and still assemble a structure using HTML5, using the major changes that have occurred on its semantic. The layout that we will build is below: From this layout we divide it into a base structure with the main areas that will make our HTML. HTML5 Having all the basic layout complete, the structure in the head and the images had already been exported, we will begin to assemble our HTML. Here we can notice some differences, even simplifications in relation to XHTML 1.0. See how easy it was to decorate the raw Html, or tell me that you knew by heart everything that should contain inside DOCTYPE for example? We have one more thing to get attention here, this script. Actually this makes that our new elements are rendered in browsers that do not yet support HTML5. <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head><body></body></html> Since the basis of Html got ready we start to insert our element. Starting at the header, the news here are quite clear, as the elements and . Not to be a long post I will not go into merits of all the new tags and serving each one, but there are very good documentation on the Internet, including the two books that I refered at the beginning of the post. <header id="main-header"> <section id="block-twitter"> <p class="tweet-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<span class="tweet-time">21 minutes ago via Twitter</span></p> </section> <section id="block-title"> <h1>Ferris Bueller</h1> </section> </header> With the header done, we should go to the content. In the left column we have a very important element to talk about here, are the forms. It has pretty cool thing about them in HTML5, using the attributes "placeholder", "type" and "autofocus". Play around with them and if you want to read a little more in this great article at 24ways.org. <div id="main-content"> <section id="content"> <section class="one-col"> <h3>Hey guys,</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section class="two-col"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p> <ul id="social-icons"> <li class="bt-twitter"><a href="#">Twitter</a></li> <li class="bt-facebook"><a href="#">Facebook</a></li> <li class="bt-linkedin"><a href="#">Linkedin</a></li> </ul> </section> <section class="one-col"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <aside id="form"> <form action="template_submit" method="get"> <input id="name" name="name" type="text" class="textfield nome" placeholder="Escreva seu nome" > <input id="email" name="email" type="text" class="textfield email" placeholder="Email"> <textarea id="message" name="message" type="textarea" placeholder="Mensagem"></textarea> <input type="submit" value="Enviar" class="submit"> </form> </aside> </section> In the right column, we have the portfolio. Here are the new items and . The videos and audios are now easily inserted on html without the need to make a Flash embed for an example. Each browser has (or will have) its own player, and with a single line of code we have running our video! Of course, for browsers that do not support yet, well, just insert the embed flash and it's ready, all users affected! <section id="portfolio"> <figure> <a href="#" class="link-thumbs"><img src="images/thumb-1.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-2.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-3.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-4.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-5.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-6.png" alt="Nome do projeto"></a> </figure> <video controls width="380" height="210" poster="images/placeholder.jpg"> <source src="video/video-1.mp4" type="video/mp4"> <object type="application/x-shockwave-flash" width="380" height="268" data="player.swf?file=video/video-1.mp4"> <param name="movie" value="player.swf?file=video/video-1.mp4"> </object> </video> </section> </div> And finally the new tag . Without much news here! <footer> <p>Design by Fabiano Meneghetti<br/> 2011 - Oficina Campus Party</p> </footer> Aqui da pra ver o que temos ate agora. CSS3 With the html ready we shall start our CSS. In this picture I show the key features of CSS3 that we will test here. To start our CSS I always like to use a reset.css, download the template and you can analyze it a little better. Moreover we need to include our new HTML5 elements as display:block, so we reach all browsers, even those that do not support html5. @import url("reset.css"); /* New HTML5 elements */ article, aside, figure, footer, header, hgroup, nav, section { display:block; } /* -------- */ Well, now it's time to put the hand in the CSS, here are only the main elements that form the basis for our site. body { margin: 0; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 20px; color: #5F5E59; background: url(images/bg_body.jpg) left top repeat; } a:link, a:active, a:visited { color: #305F9B; text-decoration: none; } a:hover { color: #000; text-decoration: underline; } /* ID's */ header { background: url(images/bg_header.jpg) left top repeat-x; margin-bottom: 25px; } #block-twitter { width: 700px; height: 60px; position: relative; margin: 0 auto; padding: 20px 200px 0 0; } #block-title { width: 900px; height: 80px; position: relative; margin: 0 auto; padding-top: 25px; } #main-content { width: 900px; position: relative; margin: 0 auto; } footer { width: 900px; position: relative; margin: 0 auto; clear: both; padding: 30px 0; background: url(images/img_star.png) left top repeat-x; } /* -------- */ The news on the CSS start here. Note that in the texts that we already use elements such as column-count and column-gap, for texts in multiple columns. Notice also the use of prefixes and -webkit and -moz, you can view this article a list of prefixes for all major browsers http://peter.sh/. /* Header */ #block-twitter p.tweet-text { color: #FFF; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 14px; text-shadow: 0 -1px 0 #000; } #block-twitter span.tweet-time { color: #E3BACA; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 12px; text-shadow: 0 -1px 0 #000; padding-left: 6px; } header h1 { width: 454px; height: 53px; background: url(images/img_ferris.png) left top no-repeat; text-indent: -9000px; margin: 0 auto; } /* -------- */ /* Text */ section#content { width: 400px; float: left; text-shadow: 0 1px 0 #FFF; padding-bottom: 40px; } section#content h3 { margin-bottom: 15px; color: #949691; font-size: 18px; font-weight: bold; } section#content p { margin-bottom: 15px; } section#content section.two-col { -moz-column-count: 2; -moz-column-gap: 40px; -webkit-column-count: 2; -webkit-column-gap: 40px; column-count: 2; column-gap: 40px; padding-bottom: 20px; } section#content section.two-col p { font-size: 20px; line-height: 28px; } ul#social-icons { border-top: 2px dashed #AAA19F; width: 180px; height: 55px; padding-top: 20px; } ul#social-icons li, ul#social-icons li a { width: 60px; height: 55px; float: left; display: block; text-indent: -9000px; } ul#social-icons li a:link, ul#social-icons li a:active, ul#social-icons li a:visited{ -webkit-transition: background 0.3s ease-out; } #social-icons li.bt-twitter a { background: url(images/social_icons.png) 2px top no-repeat; } #social-icons li.bt-twitter a:hover { background: url(images/social_icons.png) 2px -56px no-repeat; } #social-icons li.bt-facebook a { background: url(images/social_icons.png) -59px top no-repeat; } #social-icons li.bt-facebook a:hover { background: url(images/social_icons.png) -59px -58px no-repeat; } #social-icons li.bt-linkedin a { background: url(images/social_icons.png) -121px top no-repeat; } #social-icons li.bt-linkedin a:hover { background: url(images/social_icons.png) -121px -57px no-repeat; } /* -------- */ Here we begin working on our form. Note that here we use functions like box-shadow and transition, Transition I believe it is one of the main novelties of CSS3, using with care and in some places we can enrich the user experience too. It's the kind of feature that does not affect users who do not support CSS3, and using it properly can keep the loyalty of content reaching 100% of users correctly. /* Form */ aside#form input.textfield, aside#form textarea { width: 380px; padding-left: 8px; margin-bottom: 10px; border: 1px solid #CCC; padding: 10px; color: #6C595F; -webkit-box-shadow:inset 1px 1px 2px #999; -moz-box-shadow:inset 1px 1px 2px #999; -khtml-box-shadow:inset 1px 1px 2px #999; box-shadow:inset 1px 1px 2px #999; -webkit-transition: border 0.4s ease-out; -webkit-transition:-webkit-transform .2s ease-in; } aside#form textarea { height: 100px; } aside#form input.textfield:hover, aside#form textarea:hover { border: 1px solid #999; -webkit-transform:scale(1.1); -moz-transform:scale(1.1); } aside#form input.textfield:focus, aside#form textarea:focus { outline: none; border: 1px solid #6C595F; -webkit-transform:scale(1.1); -moz-transform:scale(1.1); } #form form input.submit { background: #6C595F; font-size: 13px; font-weight: bold; color: #FFF; padding: 5px 10px; border: none; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; float: right; -webkit-transition: background 0.4s ease-out; cursor: pointer; } #form form input.submit:hover { background: #333; } /* -------- */ In the portfolio we have a very nice effect, using the "transform" with CSS3. Its hard anyone believe that this was done without JS or even Flash. Another news is the "nth-child", with it we have control over all elements of a repeat, as the thumbs of the portfolio, removing only the margin-right of the right elements. To learn more give a read on this article css-tricks.com. /* Portfolio */ section#portfolio { width: 410px; float: right; padding-bottom: 40px; } #portfolio figure a.link-thumbs { width: 190px; height: 156px; display: block; float: left; -webkit-border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 1px 1px 2px #999; -box-box-shadow: 1px 1px 2px #999; -khtml-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; margin: 0 20px 20px 0; opacity: .6; -webkit-transition: opacity 0.4s ease-out; -webkit-transition: -webkit-transform 0.4s ease-out; } #portfolio figure a.link-thumbs:hover { opacity: 1; -webkit-transform:rotate(-15deg); } #portfolio figure a.link-thumbs:nth-child(2n) { margin-right: 0; } #portfolio video { background: #C9CEC8; padding: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 1px 1px 2px #999; -box-box-shadow: 1px 1px 2px #999; -khtml-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; clear: both; } /* -------- */ And finally our footer, no big news;) /* Footer */ footer p { font-size: 11px; line-height: 18px; background: url(images/logo_abduzeedo.png) right center no-repeat; text-shadow: 0 1px 0 #FFF; } /* -------- */ Preview Template - Download In general I can say that we have to start using HTML5 and CSS3 today, it is possible. There is much documentation showing tips and tricks for always reach every single user on the main principle of a website: content and navigation. Allowing access to this to 100% of users, then just work to improve the experience for those who use modern browsers!