articles on

Water Drop Effect in HTML & CSS

Water Drop Effect in HTML & CSS

The best way to learn anything is by doing it, plain and simple, trial and error. With the explosion of mobile devices and the evolution of HTML5, CSS3 and browsers, knowing to code is almost a requirement to anyone willing to work with web. I have been playing more and more with CSS, trying to create simple things like basic typography styles to more complex ones, like water drop effects. In this post I will show you how to create a simple water drop effect using CSS. The process is quite simple but it will require some basic knowledge of CSS and a little bit of jQuery. Step 1 - Reference First thing to do is to look for references, in this case photos of water drops effects. Google Images is a super useful resource to create mood boards and find inspiration. Step 2 - CSS for the drops Create your simple HTML/CSS boilerplate or download it at http://html5boilerplate.com/. After that start putting together the CSS for the drop. Below you can see the basic code with no color effects. .drops li{ position: absolute; z-index: 100000; display: block; height: 25px; width:25px; margin: 20px auto; border-radius: 50%; background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.4), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); } Step 3 - Water Drop Effect To create the effect we will use "box-shadow" and "background". For the background you can see below that we are using a white at 30% and a radial gradient. With shadow we will create the 3D effect. To do that we will use 3 inset shadows and 1 normal shadow. Below you can see the code. background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.4), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); Step 4 - Basic Javascript with jQuery to create instances To fill the screen with // Number of drops in the screen ndrops = 1000; // Width and Height of the screen wW = $(window).width(); WH = $(window).height(); // Loop for(i=0; i<=ndrops; i++){ // drop dp = "<li class='d" + i + "'></li>" // Ramdon values for X, Y position dX = Math.floor((Math.random()*wW)+1) + "px"; dY = Math.floor((Math.random()*WH)+1) + "px"; // Ramdon values for scale dS = Math.floor((Math.random()*1)+1) * 0.3; // Ramdon values for Opacity, Width and Height dO = (Math.floor((Math.random()*2)+1) * 0.5); dW = "25px" //Math.floor((Math.random()*30)+30) + "px"; dH = Math.floor((Math.random()*20)+18) + "px"; // Append the drops $("ul").append(dp); // Apply the random values $(".d" + i).css("opacity",dO).css("width",dW).css("height",dH).css({x: dX, y:dY, scale: dS}); } CSS body{ background: #666; padding: 0; margin: 0; overflow: hidden; } .bg{ background: #000 url(../img/bg.JPG); background-size: cover; position: absolute; top: 0; left: 0; right: 0 bottom:0; width: 100%; height: 100%; z-index: 10; } .drops ul{ position: relative; z-index: 1000; } .drops li{ position: absolute; z-index: 100000; display: block; height: 25px; background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); margin: 20px auto; border-radius: 50%; box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.6), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); } Conclusion You can also animate some of the drops, it would be an extra step but it can be achieve quite easily using CSS animations. The whole idea was to explore the possibilies of CSS to create different effects and water drops effect was one that I had done before in Photoshop, so I thought it would be a good exercise. Now it's up to you not only to play with it but to make it better. Image Click on the image to see the demo HTML for Webkit and Chrome

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

If you are a designer in this day and age you are probably designing for handheld devices like smartphones and tablets. We live in a polarizing world where on one side we have native apps and on the other the web, with responsive sites and web apps. Designing in this environment requires understanding of the context you will be designing for, therefore, testing on devices. There are several ways to create prototypes, from paper to motion in After Effects. For me, basic HTML, CSS3 and JavaScript do the best job because they allow me to test on the phone with an incredible level of accuracy. In this post I will start sharing some tips on how to create basic HTML/CSS3/JS prototypes. The idea is to enable you to test your designs on phones, tablets or web. I will also assume that you know a little bit of HTML and CSS, but of course you can learn that online or doing the reverse engineer. So in this first post I will show you how to create a simple prototype with a few icons and basic transitions. You can then apply to your own designs. The coolest thing is that you can create a super smooth prototype with this simple technique. Introduction The first thing is to start an HTML document and make sure you have the structure done. For prototypes, the simplest way to create them is by having all screens you want to test in the same file, that way there won't be any lagging between screens. Remember, we are creating a prototype, not a web app. The way I organized my HTML is that every screen will use a "DIV" tag with an "ID" and a "CLASS='SC". That way I can use CSS to make them work the same way. For each screen I used the "HEADER" tag to create the header of the screen. Below is the full HTML file of the prototype. Prototype Back Screen 1 Back Screen 2 Back Screen 3 Back Screen 4 Back Screen 5 Back Screen 6 Back Screen 7 Step 2 For the icons, notice that I created a list using "UL" and "LI". Also notice that there are other classes like "LINK", "NONE", "slideup", "slideleft" and more. I will cover those in a few, but for now let's focus on the design of the screens and the icons. The first line you can see that I am reseting the CSS, that's an easy way to clear all properties and styles that browsers have. I am using the Eric Meyer's CSS Reset. You can find it at http://meyerweb.com/eric/tools/css/reset/ For the screens, this is the CSS: @import "reset.css"; html, body{ width: 100%; height: 100%; } body{ padding: 0; margin: 0; width: 100%; height: 100%; position: relative; } .sc{ width: 100%; height: 100%; position: absolute; display: none; z-index: 10; } .sc.selected{ display: block; z-index: 11; } Icons For the icons, we will use a basic "display:inline-block". We could have used the new and fancy flex model, however it doesn't work in Safari, so for now let's wait till iOS7. #home ul{ width: 100%; height: 100%; text-align: left; } #home ul li{ height: 72px; width: 72px; background: #fff; display: inline-block; margin: 22px 0 0 22px; border-radius: 6px;; } Screens Each screen will have a different color background. Below you can see the CSS. #home{ background: #333; } #screen1{ background: #2C3E50; } #screen2{ background: #E74C3C; } #screen3{ background: #3498DB; } #screen4{ background: #ECF0F1; } #screen5{ background: #2C3E50; } #screen6{ background: #E74C3C; } #screen7{ background: #3498DB; } jQuery Now it's time for the most important part, how to make things work. How to make the links open a different screen. To do that we will use Javascript with jQuery. We will use jQuery because it's easier for beginners to understand how Javascript work. To use jQuery we will have to make sure we are loading it in our HTML. To do that, use this code withing your "HEAD" tag. We are basically loading jQuery from its servers. Removing the 300ms lag Every time you click/tap something using a mobile phone, there will be a 300ms second if you use regular Javascript events like "onclick". To get rid of that there are some plugins online. The one we will use is based on Google Fast Button, but it's a jQuery version. You can read more about it at https://github.com/alexblack/google-fastbutton Download the ZIP file and copy the .js files to the folder of your HTML file. Then add these lines right after the previous "script" tags that you used load jQuery. Animations CSS animations are the best way to create silk smooth animations for mobile prototypes. You can create animations using the keyframe technique, however there's an amazing jQuery plugin that helps. The plugin is the jQuery Transit - CSS3 transitions and transformations by Ricard Cruz http://ricostacruz.com/. Same thing as before, let's load the plugin. Just add the code like the example below. Basic transition For the basic transition, that's hiding the current screen and showing the new one we will use CSS classes. Notice that theres a ".sc" and a ".sc.selected". For the basic ".sc" we have a "display:none", that means all screens will be hidden. Then for the one selected ".sc.selected" there's a "display:block". So basically, the idea is, the screen that's visible, it will have a class "selected". By removing the class and adding to another screen, we make a simple transition. Below you can see the code. $(document).ready(function() { $(".link").fastClick(function () { screen = "#" + $(this).attr("page-load"); if($(this).hasClass("none")){ $(".sc").removeClass("selected"); $(screen).addClass("selected"); } }) }) The code above is basically, when the user clicks on a tag with the class ".link" it will get the screen to show, that is in the "page-load" from the link. We will create a variable called "screen" to have this value, but we will add the "#" symbol, that is the one used to represent the "ID". If the link has a class "none" that is for different animations, we will basically remove the class "selected" to all ".sc" tags. Then we will add the class "selected" to the one we want to show. Slide from Right to Left To create a simple slide transition, we will pretty much follow the same idea, the only difference is that we will position the screen to load off the current viewport and then animate it in. Below you can see the code. if($(this).hasClass("slideleft")){ $(".selected").addClass("previous"); $(screen).css({x:$(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } So the code below will first add a class "previous" to the current screen, that's already selected. Then it will position the screen to show off the screen using "$(screen).css({x:$(window).width() + "px"})" that means, the screen will be position in the width of the window "$(window).width()" to get the value and move it in the X axis to that point. Example, if your screen is an iPhone, it will move the new screen at 640px. Then the class "selected" will be added in order to make it visible. At this point you will have 2 screens with the class "selected". The second part is the animation using jQuery Transit. So we will basically animate the screen that was on the right to the 0 position using "$(screen).transition({x:"0px"},300,"ease",function ()". The time of the animation will be 300ms and it will use "ease" to make the speed not linear. Once the animation ends, we call a function to remove the "selected" class from the "previous" tag. Then we remove the "previous" class too. At last we remove any "style" attribute to make sure that there won't be any issue in the other animations. More Animations Below you can see different transtions type. We have SlideUp, SlideDown, SlideLeft, SlideRight, BackDown, Backup. if($(this).hasClass("slideup")){ $(".selected").addClass("previous"); $(screen).css({y:$(window).height() + "px"}).addClass("selected"); $(screen).transition({y:"0px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slidedown")){ $(".selected").addClass("previous"); $(screen).addClass("selected"); $(screen).css({y:"-" + $(window).height() + "px"}); $(screen).transition({y:"0px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slideleft")){ $(".selected").addClass("previous"); $(screen).css({x:$(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slideright")){ $(".selected").addClass("previous"); $(screen).css({x:"-" + $(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:$(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("backdown")){ $(".selected").addClass("previous"); $(screen).show(); $(".previous").css("z-index","24").transition({y:$(window).height() + "px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(screen).addClass("selected"); $(".sc").removeAttr("style") }); } if($(this).hasClass("backup")){ $(".selected").addClass("previous"); $(screen).show(); $(".previous").css("z-index","24").transition({y: "-" + $(window).height() + "px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(screen).addClass("selected"); $(".sc").removeAttr("style"); }); } Using the animations With this basic code you can simply add a class "link" to any tag to make it clickable. Once it's clickable you can choose the transition by using another tag. In our case you can use: slideup - eg. slidedown - eg. slideleft - eg. slideright - eg. backdown - eg. backup - eg. Conclusion It might look confusing, but as any new thing we want to know there's a learning curve. The secret is to go little by little, with small little achievements in order to get easy and quick rewards, that way we keep ourselves motivated. Below you can see the code working on an iframe. You can also download the files and check on your phone (recommended) Download Files Demo on Phone Prototyping tools and Frameworks http://www.framerjs.com/ http://twitter.github.io/bootstrap/index.html https://github.com/donnfelker/android-bootstrap

Experimenting with Swiss Style in CSS

Experimenting with Swiss Style in CSS

Last week I started playing in CSS for my new personal site. I decided to skip the Photoshop/Fireworks/Illustrator part and go from sketches to HTML/CSS. This process helps me to improve my coding skills, especially for rapid prototyping. The first experiment I decided to create was a simple page with just text and texts rotated 45 degrees, heavily inspired in the Swiss Graphic Design Style. For this post I want to show you a little bit of the creative process behind this experiment. The whole design uses only regular fonts, if you use a MAC you will see the text in Helvetica, while other platforms might render in Arial or Roboto (android). Also feel free to give feedback or suggestions on how to improve the code. Step 1 To start, let me show you the basic HTML file. You can see the structure of the document. It might look that there's too many nested DIVs but I did that because I will use that to extend the content of the site in the future. Right now, let's focus on the rotated text. Portfolio fabio sasso founder of abduzeedo follow me on Twitter, Behance & Dribble designer at google I’m a Brazilian graphic and web designer based in San Francisco, California. Currently working for Google, I am also the founder of Abduzeedo, a personal project that has become the biggest promoter of my work. Abduzeedo is now one of the design world’s most sought after blogs for design inspiration and tutorials. Over the years I have had the amazing honor to work on projects for web and print media as well for clients such as MSNBC, Wired UK, Adobe, Digital Arts Magazine and Abril among others. In 2011 I joined Google as senior designer at the Mountain View headquarters. For over 2 years I have had the opportunity to work on incredible projects, from Doodles and icons to major products like Google Wallet, Offers, Shopping, Currents, Ventures and others. Currently I am part of the Search/Knowledge team working with amazing people. Step 2 Now let's focus on the part of the text that rotates. I used H1 and H2 for the text and put them inside a DIV with a class called "roatedtext" fabio sasso founder of abduzeedo follow me on Twitter, Behance & Dribble designer at google Step 3 First thing to do is to adjust the font sizes using CSS h1{ font-size: 150px; line-height: 75%; margin: 0; font-weight: bold; } .rotatedtext h2{ font-size: 36px; clear: both; margin: 0; padding: 0; line-height: 130%; } Step 4 To rotate the text we will use CSS transformation (transform:rotate(deg)). The first thing to do is to rotate one block 90 degrees. Use transform:rotate(-90deg);. Use negative to change the direction you rotate. .name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; } Step 5 Now just rotate the container DIV with the texts. Use 45 degrees to create the perfect Swiss style text. .name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; } Conclusion Here's the final CSS I had when I finished this experiment. */ DEMO

CSS Quick Tricks #1 - Where to put your CSS

Apart from the awesome design you get fed with here, it is time to start a new series! CSS Quick Tricks! To be honest, I didn't really know where to start, so I thought I'd start at something simple, and then, as we move on, we get in to more advanced topics on CSS. For this quick trick, I'm going to teach you where you can place your CSS, the most efficient way. Where to place your CSS In CSS, there are different ways to put it in function; Inline, Internal (or "Embedded") and External. You've probably used them all, at least one time. What's the difference? How can this question better be answered than with some pieces of code? With an external stylesheet, you create a link to a stylesheet. This is by far the most efficient way when you have multiple pages, running on 1 CSS file. To do this, in the head section of your html document, place this line of code: <link rel="stylesheet" type="text/css" link="directory/file.css" /> As you can see, we've literally created a link to a stylesheet, that is not located in the HTML, or in other words; Is external. With an internal stylesheet, you place the whole stylesheet inside the HTML. This is again done inside the head tag, but in a different way. The reason you might want to put styles inside your HTML, may be, because one page in particular may need some seperate styling, which can cause problems on other pages, or if you just don't want to increase the file size of your CSS document. The right way to place a style(sheet) internally is: <style rel="stylesheet"> * { margin: 0px; padding: 0px; } </style> Left over is the inline way, the reason you use this may be, that just a certain element needs f.e. a red color. However, take my advice; When styling a page, do NOT use this to style your whole page, but just for the little pieces that you couldn't be bothered about in your stylesheet. The way you use this way of CSS styling (some may not even call it CSS) is as follows: <div style="background-color: #fff;"> NOTE: This is just an example. Every CSS selector in here, and you can use it with every HTML element. But what way, is the best way? Well, there's no real answer to this question, because it depends on the way you are going to use it. But when you want to use CSS most efficiently, I suggest using the followng guidelines: If you are going to style multiple pages with one stylesheet, use the external way, and you may even want to use this way on a single page. This may prevent having issues, when the website needs a style update, or some little tweaking. If you just need to style a few elements that were left out on the original stylesheet, for whatever reason, use the embedded way. Like this, you won't increase the total file size of other pages not needing the additional styling, and thus decrease loading time for other pages. If you just need to style a single paragraph tag (or something similar), that neither external nor embedded stylesheets are worth mentioning, use the inline way. And again, take my advice, do NOT use this to style whole pages, it will give a lot of unnecessary code, and when updating/tweaking a page, you will be busy for ages. Conclusion I hope you liked this first one in the new series, so I can do many more! Also, suggestions or questions are always welcome, so I have some inspiration to write about. Thanks!