articles on
ABDZ CSS box-shadow rollover effect
A couple of months ago we shipped the new version of Abduzeedo to our readers - a new post detailing the impetus and features of the new site is forthcoming. In a nutshell, our main goal was to simplify and reduce as much as we could. One of the areas we decided to invest our time was in subtle little effects like night mode with a dark theme and CSS rollover effects over images. The latter one has been praised by a number of our readers and we have received quite a few requests asking how we did it, so I will try to lay it all out here in this post. The image shadow rollover effect is quite straightforward. It was inspired by the new Apple TV visual language in which they use long and colorful shadows for selected items as well as a lot of Dribbble references. The visual design community has embraced that and I love the effect so I decided to recreate it. The outcome is pretty much CSS box-shadow and Javascript to extract colors of the images. Design When I was designing the site in Sketch I started playing with some ideas of using dramatic shadows that I used when I was designing my personal site. Here’s an example (http://fabiosasso.com/labs/newsite/) of long shadows for text. The cool thing about Sketch is that the shadow property is pretty much the same as in CSS. That gives us the opportunity to try several variations until we got the result wanted. I played with tons of shadows, different opacities like you can see in the image above. My final CSS was something as simple as: box-shadow: 0 4px 4px rgba(0, 0, 0, .1), 0 8px 8px rgba(0, 0, 0, .1), 0 16px 16px rgba(0, 0, 0, .1), 0 32px 32px rgba(0, 0, 0, .15), 0 64px 64px rgba(0, 0, 0, .15); That CSS creates the shadow effect, now I just needed to put it on the “hover” state and that’s it. But in order to make it smooth I also used the CSS transition just for the box-shadow. transition: box-shadow .3s ease-out; For a regular black shadow that was enough, but I wanted to use some color extracted from the image to use as the CSS box color. To do that I used Javascript and a library called Vibrant.js. “Vibrant.js is a javascript port of the awesome Palette class in the Android support library.” The library extract up to 6 colors: Vibrant Muted DarkVibrant DarkMuted LightVibrant LightMuted The final thing to do was to select all images and extract the colors, then replace the RGBA() from the css to the one from the image. If the process is done in the client it might take a little longer depending on the image size, because of that we render a small image to use for the color extraction. Also, the fact that the effect only shows during rollover helped us to have a bit more time to do everything in the background. Of course nothing is perfect. We are still trying to fix some bugs. The script returns 'undefined' when the image doesn’t provide the specific color. That becomes quite difficult to predict because we never know the outcome, so sometimes you might see some weird colors. We are also fine-tuning the best configuration to improve the speed, one of the goals is to move from client to server so the colors are extracted and stored in the DB. That would significantly reduce the time of the extraction. We just need to learn how to do that :)
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
Basic Animations in CSS and Javascript for Prototypes
Motion design is getting more important everyday when it comes to design interfaces that engage with the user both functionally and emotionally. Because of this, I started practicing with Javascript and jQuery to create basic animations for my prototypes. One of the most common animations comes into play when you want to build a list or animate items in a chain. To illustrate that today I share a simple technique I use for my prototypes. For this little tutorial we will play with some HTML, CSS and Javascript. The whole process won't take more than 30 minutes. Step 1 Start a new HTML document and add some elements, one "Section" and then a list "UL" with a few objects "LI" <!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html> Step 2 Now lets import jQuery and jQuery Transit plugin to help us animate the list. <!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" ></script> <style> body{ padding: 0; margin: 0; background: #000; } section{ max-width: 1024px; min-height: 960px; background: url(http://wpuploads.appadvice.com/wp-content/uploads/2013/10/24.png) center center; background-size: cover; margin: 0 auto; } ul, ul li{ margin:0; padding: 0; list-style-type: none; } ul { padding-top: 40px; } ul li{ background: #fff; margin: 0 11px 1px 11px; padding: 15px; } </style> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html> Step 3 - Animating the list To animate the list is pretty simple, the first and most important thing to do is to have a little script of what you want to animate. In this first case we will animate one LI at the time fading in and sliding down from the top. <script> $(function(){ $("ul li").each(function(i){ $(this).css({y:"-30px", opacity:0}).transition({y:"0", opacity:1, delay:200 * i},600,"ease"); }) }) </script> So what we are doing in that function is to find each "LI"strong> and then for each one we will set with CSS to move them "-30px"strong> in the Y axis (top) and change the opacity to 0. After that with jQuery Transition we will move it back to the original position. To make sure each one move at different time we will set a delay to 200 and multiply that by "i" (each element have their unique "i"). Step 4 - some 3D rotations <script> $(function(){ $("ul li").css({opacity:0}).each(function(i){ $(this).css({y:"150px", rotateX: "90deg", transformOrigin: 'center top'}).transition({perspective: '400px',y:"0", opacity:1, rotateX:"0deg", delay:200 * i},300, "ease"); }) }) </script> The only thing we added here was the rotateX and transformOrigin for the CSS and perspective and rotateX for the transition. You can play with these values to change the animation as well. Conclusion Below you can see a basic example of what you can do with simple Javascript. The best thing about these animations is that they use the GPU, that means they run very smooth in mobile devices and are perfect for mobile prototypes. See the Pen uqnjH by Fabio Sasso (@abduzeedo) on CodePen
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
Star Wars in CSS
One of the most memorable opening credits of all time has to be the Star Wars text scrolling in a 30-45deg perspective towards the horizon. It's a classic and it has been subject to all sorts of exercises and tutorials. I have never done anything related to this but last Friday while playing with CSS I was inspired to create the same effect for my personal site. The result is what I want to share with you today. The only thing missing is the theme music so feel free to add that to your own personal effort. So in this little tutorial, I will walk you through the process of creating the Star Wars opening credits effect using CSS and CSS animations only. I used Javascript for other details, but the rolling text effect is just CSS. Step 1 The first thing to do is to get the content of your HTML page. I used the content of my personal site. Basically the site contains a Header and a Section for the text. Below you an see the final HTML. Fabio Sasso 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 Let's start adding some style to the design. We need to make sure that the background is black, the font is San-Serif and that we will use 100% of the height and width. Let's also set the perspective of our design. To do that let's add "-webkit-perspective:300" to the "section" tag. */ Step 3 Now let's add the text. I enclosed the text in a "article" tag and used "P" tag for each paragraph. To make the text fly in that perspective we will rotate the "article" tag. Then we can move the paragraphs in the Y position via "translate". Here's the CSS. article{ height: 100%; overflow: scroll; font-size: 32px; height: 100%; -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); transform: rotateX(45deg); } Step 4 To move the text off the screen we will use "TranslateY" for the paragraphs. article p{ -webkit-transform: translateY(800px); -moz-transform: translateY(800px); transform: translateY(800px); padding: 0 20%; } Step 5 Now let's create the animation. Below you can see the code, it's basically moving the paragraphs in the Y axis from the bottom to the top of the screen. @-webkit-keyframes txtmove { 0% { -webkit-transform: translateY(800px); } 100% { -webkit-transform: translateY(-1400px); } } Step 6 With the Keyframe animation creaed, we will have just to assign it to the element we want to animate. In our case, the "article p" or the paragraphs inside the "article" tag. The animation will last 70 seconds, and it will have a 3s delay. The timing function will be linear so it animates at the same speed from the start to end. article p{ -webkit-transform: translateY(800px); -moz-transform: translateY(800px); transform: translateY(800px); -webkit-animation: txtdmove 70s linear 3s 1; -moz-animation: txtdmove 70s linear 3s 1; animation: txtdmove 70s linear 3s 1; padding: 0 20%; } Conclusion The animation is done, now you can add more elements in your composition, like stars or your logo. Below you can see the final result and you can also download the files if you want to tweak it. Demo - Save from the browser to download it
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
Responsive Nav - Useful Responsive navigation plugin
What I love the most about the open source community and living in today's ever-evolving world is the abundance of great work being shared. It's pretty hard to not find what you're looking for, particularly within the world of programming, if you are just starting out. I draw a lot of my learnings and inspiration for prototypes and fully baked products within this resourceful community. Today I want to share with you a plugin for responsive navigation called Responsive Nav Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window. Features Responsive Nav is a tiny JavaScript plugin which weighs only 1.6 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions. For more information visit http://responsive-nav.com/
Flipping Book in CSS and jQuery
The tutorial of this week is about HTML, CSS and a little bit of Javascript with jQuery. As the rule of trend now is mobile first and any designer who wants to really understand the media will have to be able to create quick prototypes of his/her work, we decide d to write a few basic prototyping tutorials. The first one will be about create a simple flipping book, like a 3 fold brochure, using HTML, CSS and JS for the events. For this tutorial you will have to have some knowledge of HTML and CSS. You can also just copy and paste and change the values to see how it works. I am still learning and improving my CSS and jQuery skills but I think it's good to share and will try to do that in this post. Feel free to leave comments with suggestions on how to improve our coding skills. Step 1 The first step is to create the design. My idea was to create a simple 3 fold brochure, so I put together a basic mock in Illustrator Step 2 Now let's create the basic HTML for the document. Basically what we have to create is 5 squares to use as each one of the folds. To do that I will create a basic container using the tag "section" and the 5 squares with the tag "article" Flipping cards Step 3 Let's start add some visuals with CSS. First thing is to create the different parts of the brochure and also the position of each one of them, not worrying too much about the vertical positions. Flipping cards */ Step 4 Now let's start flipping the cards and putting in the right position. It's important to understand how CSS transform works so we can write the css. Here's the summary of what we need to do: #cover: This card will flip from right to left, so the origin (-webkit-transform-origin) will have to be left horizontally. #backcover: This card will be flipped, so you will have to move it to the 0 position left, but flipped 180 to the right. Use -webkit-backface-visibility:hidden to hide it when its rotated. #centerflip will behave like the #cover but the origin will be right instead of left. #centerback will behave like the #backcover but flipping to the other side, also you will have to position it to the right. Here's the full CSS code article{ position: absolute; display: block; width: 600px; height: 600px; left: 600px; top: 200px; } section{ -webkit-perspective: 2000; width: 1800px; background: #f5f5f5; overflow: visible; position: relative; -webkit-transform:scale(.5); } #cover{ background: #fff url(logo.png) center no-repeat; background-size: 250px auto; z-index: 1000000000000000000; -webkit-transform: rotateY(-0deg); -webkit-transform-origin: left bottom; } #backcover{ left: 0; background: #000; color: #fff; -webkit-transform: rotateY(180deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: right bottom; z-index: 10000000000000000; } #centerflip{ background: #ff0; z-index: 10000000; -webkit-transform: rotateY(0deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: right bottom; } #centerback{ background: #fff; -webkit-transform: rotateY(-180deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: left bottom; left: 1200px !important; z-index: 10000000000000000; } #center{ background: #000; } Step 5 Now that you have the cards and the layout positioned, let's use Javascript to make the behaviors. We will use jQuery and jQuery Transit for that. jQuery Transit is an amazing plugin that allows us to make simple CSS animations with jQuery. The easiest way to write the script is understand exactly the logic/behavior we want to have User clicks on the #cover and the #cover flips 180deg. The #backcover that is flipped 180deg will flip to 0deg The #centerflip when clicked will flip 180deg. The #centerback that is flipped -180deg will flip to 0deg. Once the brochure is open we will set a variable saying that it's open so we can close the brochure by clicking on it again. Here's the code for that Conclusion This is a basic demo of CSS transformations, it will only run on Webkit browsers for this demo. You can make it work for other browsers by adding their prefixes in the code. The idea is trying to motivate you that is starting out your web design career, to prototype more, to play with code to see how things will behave. That will definitely give you a different and better understanding about design in general. View Demo
Typographic Web Design: How to Think Like a Typographer in HTML and CSS - Book Suggestion
The book suggestion of this week is about typography but for the web. The book title is Typographic Web Design: How to Think Like a Typographer in HTML and CSS and the author is Laura Franz. The cool thing about this book is that it Applies decades of typographic theory and practice directly to web design. Typography has long been an invaluable tool for communicating ideas and information. Words and characters once impressed in clay, written on papyrus, and printed with ink are now manifest in pixels of light. Today's web typographers can help their readers find, understand, and connect with the words, ideas, and information they seek. Thus, legibility and readability are the foundations for the typographic theories and practice covered in Typographic Web Design. You'll learn how to choose fonts, organize information, create a system of hierarchy, work with tabular information, create a grid, apply a typographic system across multiple pages, and build a font library. Each chapter provides time-tested typography rules to follow (modified for the web), explains why they work, when to break them, and offers the opportunity to test the rules with hands-on exercises in HTML and CSS. If you don't know HTML and CSS, Typographic Web Design provides a walk-through for each lesson, showing you how to plan and write syntax. Readers are sure to come away with an understanding of typographic principles, as well as the HTML and CSS skills needed to implement them on the web. Buy Book Now
Book Suggestion - HTML and CSS: Design and Build Websites
The book suggestion of this week is about web design, to be more precise, it's about HTML & CSS. The book is called HTML and CSS: Design and Build Websites and besides being super useful it's a beautifully designed book. A book about code that doesn't read like a 1980s VCR manual... It's not just for programmers, it's written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages... About the Book Computer books often look rather like manuals. They can be dense and intimidating (they may even send you to sleep), but this book proves that they do not need to look like that. Each page of this book introdues a new topic in a simple, visual way with straightforward explanations accompanied by bite-sized code samples. At the end of each chapter there is an in-depth example that puts together the techniques it has covered. No previous experience is necessary. One of the key things that makes this book different from other titles that teach the same subject is its completely new design approach. The full-color pages are packed with diagrams and photos that make the code easier to learn. Buy Now
Playing with CSS 3 - Animations, Rotate and Scale
I have been working on the new Abduzeedo design and have had the chance to play more with CSS 3, even though it's not fully supported on all browsers we can start using some really cool features such as round corners, text-shadow, box-shadow, transitions and transformations. The major downside still is Internet Explorer, however it seems that the IE 9 will have a much better CSS 3 support and support those features. I believe that HTML 5 and CSS 3 will replace Flash eventually, and we can notice that the web design community has been talking a lot about it, Smashingmagazine, one of the largest web design sites out there has been publishing great articles and even launched a CSS 3 contest to incetinve designer to play more with CSS 3. So in this post I will show you some experiments I've been doing with CSS 3, especially with animations using transitions and transformations like scale and rotate. *The demo and code will only work with Webkit browsers like Safari and Chrome. CSS Buttons and Thumbs In this example I will show you how to create a really cool navigation bar using CSS only. I used gradients, transitions and shadows. I also used a Flickr Javascript badge to load some images from Flickr and then use CSS transitions to scale up them when the user hovers an image. HTML Code CSS for the Navigation Bar For the navigation bar I used CSS to create the gradient, the syntax for the gradient in CSS is -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*). For more information about CSS Gradients I recommend that you check out the http://webkit.org website and this article in special http://webkit.org/blog/175/introducing-css-gradients/. One site that is very useful to generate the CSS 3 codes is http://css3generator.com/ especially because of the extra code we have to add to support Mozilla and Opera. #menu{ position: relative; display: block; margin: 20px auto; width: 600px; height: 60px; padding: 0 20px; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(82,82,82)), color-stop(1, rgb(125,124,125))); -webkit-box-shadow:#000 0 1px 2px; -webkit-border-radius:2px; } CSS for the Navigation Buttons For the buttons once again I used CSS gradients once again and also Text-shadow, and CSS transition so when the user hovers the button the background color will change with an animation. ul li{ list-style-type: none; margin: 15px 0; float: left; height: 30px; line-height: 30px; } ul li a{ background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(40,40,40)), color-stop(0.5, rgb(80,80,80)) ); display: block; padding: 0; text-decoration: none; color: #fff; font-size: 12px; font-weight: bolder; text-shadow: #000 0 -1px 1px; width: 90px; text-align: center; border-bottom: 1px solid #666; border-top: 1px solid #222; border-left: 1px solid #666; border-right: 1px solid #222; -webkit-transition:text-shadow .7s ease-out, background .7s ease-out; } ul li:first-child a{ -webkit-border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; } ul li:last-child a{ -webkit-border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; } ul li a:hover{ text-shadow: #f5fc39 0 0 10px; background: #222; } Animated Flickr Images Here I used the same hover effect I applied on the images of my new personal site http://fabiosasso.com. So when the user hovers the thumbs the image scales up using the -webkit-transition and -webkit-transform:scale(). Below you can see the code, the transition is applied to the image code, while the transform goes on the hover state only. #flickr_badge_uber_wrapper{ width: 550px; position: relative; display: block; margin: 0 auto; margin-top: 100px; } .flickr_badge_image{ float: left; } .flickr_badge_image img{ margin: 10px; border: 3px solid #fff; display: block; position: relative; -webkit-border-radius:5px; -webkit-box-shadow: #000 0 0 2px; -webkit-transition: -webkit-transform .2s ease-in-out, -webkit-box-shadow .2s ease-in; } .flickr_badge_image img:hover{ -webkit-transform:scale(1.2); z-index: 10; -webkit-box-shadow: #666 0 5px 10px; } Click on the image to see the demo. 90s design with CSS The possibility of rotating and scaling HTML elements allows us to create different compositions that before would be possible only using images or Flash. So, I had this idea of playing only with CSS and basic typography to create a design inspired by David Carson. Basically I just added some rectangles and messed the typography reducing line-heights and rotated some texts, then with transitions I animated the whole composition to rotate and scale when the user clicks on the "Who am I" text. Below you can see the final result of this experiment. It is still a working process but you can have an idea of what you can accomplish now with CSS3. Click on the image to see the Demo CSS Scale and Rotate - Click on the image to see the Demo Recommended Articles Start Using CSS3 Today: Techniques and Tutorials CSS Gradients, Transforms, Animations, and Masks Cleaner Code with CSS3 Selectors CSS Animations Going Nuts with CSS Transitions CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY Download Click here to download the CSS and Html file used for this tutorial
Playing with CSS3
When I was working on the new version of Abduzeedo, the current one, I decided to learn and use CSS 3 to enhance the visual of some elements. Instad of using images to create shadows and round corners I used CSS 3. Of course I knew that it would not be compatible to all browsers, more precisely, the Internet Explorer. From the statistics of the site, the majority uses Firefox (51.05%), followed by Safari (25.38) and then Internet Explorer with only 11.73, I thought it would work alright, and for those readers that use other browsers they would be able to access the site but would not be able to see these little details. So for this tutorial I will show you how I created some of the effects you see on the Abduzeedo UI. We will play with Box-Shadow, Round-Corners, Tex-Shadow and CSS gradients. The idea is to practice, in my opinion the best way to learn. Final Result This is the final result we will have by the end of this quick tutorial. The idea is to play a little bit with CSS3 even though this might not work perfectly on IE an Opera. Click on the Image to see the DEMO - It works only in Safari, Firefox and Chrome Step 1 The first thing to do is to create the HTML file with our data. Also let's create the link to our CSS file (<link rel="stylesheet" href="tut.css" type="text/css" media="all">). There's great places to learn more about HTML and CSS, I recommend CSS Tricks, Nettuts, Smashingmagazine, W3C, 24ways, Woork and others. Below you can se the page without any style. Step 2 Here's the HTML file, as you can see we're using HTML 5, once again to practice. That's the best thing of personal projects, we can practice and learn. Basically we have a Section called "Box" where the content will be inside. Then we have the navigation (Nav), another section with the content (content) and then inside the content section we have the messages. We use the tag article to them. Step 4 Let's start it by changing the "body" style. So let's define the font, the font weight, margins, paddings and the background color. It's really important that you have some CSS knowledge already, especially about the CSS Box Model to understand how Padding, Margins, Border, and sizes work. I highly recommend that you read this great article by Chris Coyer: The CSS Box Model body{ font: 14px/140% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-weight: lighter; margin: 0; padding: 0; background: #ddd; } Now for the box we will play with a new CSS 3 property, Box Shadow. Basically we can add shadows to elements without using any image. It's pretty simple to use, you set the Horizonal Lenght, Vertical Lenght, Blur and Color. Example: box-shadow: horizontal lenght vertical legnth blur color = box-shadow: 0px 0px 10px #666. For more information about Box-Shadow check out this article: Box-shadow: shadow effect on elements in css3. #box{ display: block; position: relative; width: 500px; margin: 20px auto; border: 1px solid #666; -webkit-box-shadow: 0 0px 10px #666; -moz-box-shadow:0 0px 10px #666; box-shadow: 0 0px 10px #666; } Step 5 For the navigation I created a PNG image with alpha transparency to use to create bevel effect to the navigation bar. nav{ position: relative; display: block; clear: both; background: #444 url(imgs/bg-gradient.png) repeat-x left -25px; height: 25px; padding: 10px 20px 10px 20px; } I highly recommend that you use a RESET.CSS for your projects, but here I'm not using, so I will just reset the UL and LI behaviors in order to create my navigation buttons. To understand why we reset our CSS, read this article by Eric Meyer: CSS Tools: Reset CSS. nav ul, nav ul li{ list-style-type: none; padding: 0; margin: 0; } The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. Step 6 For the buttons we will use round corners, box-shadow and text shadow to create a very nice effect. Take a look at the code below. Text-shadow is pretty much the same as box-shadow but for text, it's the same syntax. Now the round corners is different and it's one of the most wanted effects, we won't need to add a lot of markup and images to create this effect anymore. I recommend 2 articles about Round Corners: Border-radius: create rounded corners with CSS! and Have a Field Day with HTML5 Forms. The last one will cover another HTML 5 and CSS 3 new features. nav ul li{ float: left; background: #555 url(imgs/bg-gradient.png) repeat-x left -35px; padding: 0 10px; margin: 0 10px 0 0 ; color: #fff; font-weight: bold; height: 25px; line-height: 25px; font-size: 13px; cursor: pointer; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 -1px 1px #333; -moz-box-shadow:0 -1px 1px #333; box-shadow:0 1px -1px #333; text-shadow: #000000 0 -1px 1px; } Step 7 When the user hovers the button we will change the color of the background, font and effects. nav ul li:hover{ background-color: #ccc; box-shadow: 0 -1px 1px #fff; -webkit-box-shadow: 0 -1px 1px #fff; -moz-box-shadow: 0 -1px 1px #fff; color: #333; text-shadow: #fff 0 1px 1px; } Step 8 For the search field it's going to be pretty much the same, however we will use another image for the background, the magnifying glass icon, and position it on the right . input{ background: #ddd url(imgs/mglass.png) no-repeat 135px 2px ; outline: none !important; position: absolute; right: 20px; display: block; padding: 5px 10px; top: 9px; border: none; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; box-shadow: 0 -1px 1px #333; -moz-box-shadow: 0 -1px 1px #333; -webkit-box-shadow: 0 -1px 1px #333; } For the focus state let's just change the color of the backgroun. input:focus{ background: #fff; } Step 9 For the content let's play with gradients via CSS3. This will work only on Webkit based browsers. (Safari, Chrome, Webkit). Basically we set 2 or more colors that will create the gradient. I highly recommend that you take a look at this article: Introducing to CSS Gradients. Because only Webkit browsers will show the gradient I added 2 backrounds, the first one is set to grey (#ddd) and it will work on other browsers that will ignore the gradient. section#content{ display: block; position: relative; background: #ddd; background: #ddd -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(100, 100, 100, .5)), to(rgba(90, 90, 90, .1))); padding: 20px 20px 10px 20px; } .clear{ clear: both; } Step 10 For the thumbnails lets once again use Round Corners and Box Shadow. Besides that, use FLOAT:LEFT to align them to the left and a 3px solid white border. #thumb img{ float: left; border: 3px solid #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0px 3px #333; -moz-box-shadow:0 0px 3px #333; box-shadow:0 0px 3px #333; } Step 11 The idea for the messages is to create a dialog box. Apply the Round-corners to all sides but the top left. Also I added the Box Shadow, and the CSS Gradient. div.msg{ float: right; width: 320px; padding: 20px; background: #f0f0f0 -webkit-gradient(linear, 0% 0%, 0 90%, from(rgba(100, 100, 100, 0)), to(rgba(90, 90, 90, .2))); -webkit-box-shadow: 0 0px 5px #333; -moz-box-shadow:0 0px 5px #333; box-shadow:0 0px 5px #333; margin-top: 40px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:0; -moz-border-radius-topright:10px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; } As I didn't reset my CSS, the H3 was using the browser default style for it. So I had to change the margin to 0 and for the padding I changed the top, right and left to 0 just adding 10 pixels for the padding bottom. h3{ padding: 0 0 10px; margin: 0; } Step 12 One of the coolest things about CSS 3 is that we can play with shadows and also create glows by just changing the color of the box-shadow. div.msg:hover, #thumb img:hover{ -webkit-box-shadow: 0 0px 5px #0cf; -moz-box-shadow:0 0px 5px #0cf; box-shadow:0 0px 5px #0cf; } Conclusion Once again the idea of this quick tutorial is to show you the possibilities, there's much more to learn and of course everything has to be tested to make sure that it will work fine on different browsers. It is all about practicing. Click on the Image to see the DEMO - It works only in Safari, Firefox and Chrome Download the Files used for this Tutorial Click here to download the files used for this tutorial
350+ Great CSS Tools and Techniques
One of the most enjoyable moments for a web designer is coding CSS. It's such a nice language that it actually gets fun to work with it... style your pages and actually watching your designs gain life and forms. But sometimes, a little help is welcome. Even being a fun thing to do, sometimes you run into some problems, trying to find the right way to get a certain look. But for our sake, there are many many great sites out there that help us during these times, such as the great CSS Play, Smashing Magazine, and others. Taking a quick ride thru my Delicious, I took a look at some of my CSS tag favorites, and I'd like to share them with you. These are really resourceful articles, worth the visit. From tools to simple techniques that will help you at some point. Hope you all enjoy these!! Cheers. ;) 50 Extremely Useful And Powerful CSS Tools 12 CSS Tools and Tutorials for Beautiful Web Typography 101 CSS Techniques Of All Time- Part 1 53 CSS-Techniques You Couldn’t Live Without Powerful CSS-Techniques For Effective Coding 25 Code Snippets for Web Designers (Part1) 25 Code Snippets for Web Designers (Part2) 25 Code Snippets for Web Designers (Part3) CSS Dock Menu Most used CSS tricks
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!
Mini-layout inspired on 9rules design - CSS Part
Previously we've shown how to make a small layout on fireworks based on the 9rules desing. Now we're going to show you how to set this to code up. We're gonna explain everything, from slicing in Fireworks to setting the css in the code. Enjoy and let's get started! STEP 1 - SECTIONS First of all, we need to open the file at the the Tutorial Part 1. After that, we're going to set the regions of this page, this will help us to make the code. STEP 2 - THE CODE Now we can start to code. We will make the basic structure and then see how the page will look only with some plain text. To do the code, we use Smultron, a free and powerfull text editor, but you can use whatever you want. Let's code it region by region: HEADER: Abduzeedo by design MAIN: The idea behind this blog is mainly to be a channel to design. New Posts Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Currently on Page 1 of 24 PreviousNext 2008 abduzeedo.com CONTENT: New Posts Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Currently on Page 1 of 24 PreviousNext FULL CODE <body> Abduzeedo by design The idea behind this blog is mainly to be a channel to design. New Posts Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Inspiration: Amy Stein Photography Posted by Aloa - 06/30/2008 Currently on Page 1 of 24 PreviousNext 2008 abduzeedo.com </body> You may save this file and call it index.html. Here you can see how your browser will render it with no styles right now. STEP 3 - SLICING THE PNG At this step, we're gonna hide some layers and use the Slice Tool to export the images that we'll use in the CSS. Select the tool and make the slices as shown. STEP 4 - EXPORTING IMAGES After making the slices we'll export the images. Click with the right button over each slice and select Export Select Slice, save the images inside a folder in the root, and call this folder "images". Check the names of each image we've exported. STEP 5 - CSS Now we must link the CSS file in the HTML. Insert the following line inside the <head> tag. To build the CSS we'l use CSSEdit. Open a new CSS file and save it on the root folder as style.css. To begin the styles we will create the main ID's. body { font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 16px; margin: 0; padding: 0; background: #000; } #total { width: 600px; height: 600px; border: 5px solid #FFF; position: relative; margin: 20px auto; } #header { height: 105px; background: url(images/bg_header.jpg); position: relative; } #main { background: url(images/bg_body.png) left top repeat-x #DBE8C4; height: 477px; width: 500px; padding: 18px 50px 0 50px; } #slogan { width: 195px; height: 82px; background: url(images/bg_slogan.jpg) no-repeat; color: #325D6A; padding: 18px 20px 0 285px; line-height: 1.3em; } #content { background: url(images/bg_roundWhite_top.png) left top no-repeat #FFF; margin-top: 15px; } #footer { background: url(images/bg_roundGreen_top.png) left top no-repeat #81AC40; margin-top: 15px; } Now, let's make the style for the contents inside the ID #content. We must create the #content_inner, to make the round corners at the bottom and at the top. #content_inner { background: url(images/bg_roundWhite_bottom.png) left bottom no-repeat; height: 240px; padding: 10px 15px; } #content_inner h2 { margin: 0; color: #666; font-size: .9em; font-weight: normal; border-bottom: 1px dotted #CCC; padding-bottom: 10px; height: 15px; } #content_inner ul { margin: 0; padding: 0; } #content_inner ul li{ margin: 0; padding: 0; list-style: none; height: 50px; padding-top: 10px; padding-left: 15px; border-bottom: 1px dotted #CCC; } #content_inner ul li.gray { background: #f5f5f5; } #content_inner ul li h3 { margin: 0; font-size: .95em; line-height: 20px; } #content_inner ul li .submitted { color: #666; font-size: .8em; height: 20px; line-height: 20px; } #content_inner ul li .submitted a{ color: #325D6A; font-weight: bold; text-decoration: none; } #content_inner ul li .submitted a:hover { color: #000; text-decoration: underline; } #content_inner .pager { position: relative; height: 30px; } #content_inner .pager .pages { position: absolute; left: 0; top: 0; color: #666; font-size: .7em; line-height: 30px; } #content_inner .pager .pages strong { color: #000; } #content_inner .pager .links { position: absolute; right: 0; top: 10px; height: 18px; line-height: 18px; font-size: .6em; font-weight: bold; text-transform: uppercase; } #content_inner .pager .links a{ text-decoration: none; background: #325D6A; color: #FFF; line-height: 18px; height: 18px; padding: 3px 5px; margin-left: 5px; } #content_inner .pager .links a:hover { background: #000; } For the footer, we're gonna do the same thing, create the #footer_inner for the round corners. #footer_inner { background: url(images/bg_roundGreen_bottom.png) left bottom no-repeat; height: 70px; line-height: 70px; text-indent: 15px; color: #2A3D15; font-size: 1.2em; font-weight: bold; } For our final step, we're gonna place the logo. We're gonna name our logo 'logo.png'. Take a look how we'll make this style. #header h1 { width: 292px; height: 130px; background: url(images/logo.png); margin: 0; text-indent: -2000px; position: absolute; left: 50px; top: 20px; } #header h1 a { display: block; width: 292px; height: 130px; outline: none; text-decoration: none; } FINAL RESULT You can see that all process is very easy, but you must exercise the CSS part, this is the heart of web design. A beatiful code is nothing without a good CSS to show the hard work we had to design. Practice and share with us your results!
Tutorial: Obama's Background in CSS - Part 2
In this tutorial we're going to show how you may use the background we've created in the Obama's Background 1st part. But we're not only gonna show you how to put it inside a site body, but also how to create and structure the site main regions like the menu, main content, support column and footer. Our objective is not only to assemble the whole site, but also show some CSS basic concepts and Fireworks intregration with Web. STEP 1 The first thing we must do is to export our images. Since we're creating only the basic structure, we're only gonna need two images: background and logo. STEP 2 Now let's create the html file. The structure will have 4 regions: #header, #main, #sidebar and #footer. Notice that we're gonna insert the #main and #sidebar inside a #content, this way we're gonna have a greater possibility to modify things in the future. <body><div id="total"> <div id="header"> <a href="#"> <img src="logo_obama.jpg" alt="Home Obama"/> </a> </div> <div id="menu">MENU </div> <div id="content"> <div id="main">HERE IS THE MAIN CONTENT </div> <div id="sidebar">SIDEBAR </div> <div> <div id="footer">FOOTER </div></div></body> STEP 3 Now let's create the CSS. You may use the text/CSS editor of your choice. We're using here CSSEdit, and we're going to open Live Preview. With that, we'll be able to view in real time the things we are modifying. Notice that the structure is really simple. We're inserting a body #total with "margin: 0 auto" and all the other elements inside it. body { margin: 0; color: #999; font-weight: bold; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 2em; background: #01245c url(bg_obama.jpg) no-repeat center top; } // AQUI ESTÁ NOSSO BG! // Repare também que usamos a cor #01245C. #total { width: 960px; margin: 0 auto; } #header { height: 160px; } #header img{ border: 0; } #menu { height: 60px; background: #FFF; text-align: center; line-height: 60px; } #main { float: left; width: 650px; background: #f0f0f0; height: 400px; text-align: center; padding-top: 100px; } #sidebar { float: right; width: 310px; background: #dadada; height: 400px; text-align: center; padding-top: 100px; } #footer { height: 150px; text-align: center; padding-top: 50px; clear: both; color: #15539c; } STEP 4 Check the final result... really simple, huh? You only have to structure well the code and practice!
Testing sites in different browsers
I've been working on several projects for the web lately and I have always had to test them in several browsers. That could be very frustrating most of the times, mainly because as a Mac user I must test them every time on Windows and Internet Explorer 6 and 7.With virtualization tools like VMWare, Parallels, Virtualbox and others I thought my problems would have ended. Of course that big concern of testing in a PC ended, now I’m able to open Windows and test my sites in IE 6 and 7. However my machine gets really slow, some times freezes, what makes the user experience a bit disappointing.Fortunately, after some searches I came across with this really useful website called IE NetRender, where allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5,This web rendering tool is ideally suited for web designers working on Apple iMac and Linux workstations. It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose.It’s definitely worth checking that out. An essential tool for those who work as web designers. I captured some screens of my site rendered by IE 7 and 5.5 via IE NetRender, you can check the photos below.Abduzeedo blog rendered in IE 7 via IE NetRender Abduzeedo blog rendered in IE 55 via IE NetRender