I like to use a typography.css in my projects; a separate file which houses all the basic structural typographic styles I’ll need. A lot of what’s found within it is obvious stuff (heading sizes, for example) but it also contains less obvious things which I don’t want to forget. Let’s work our way through the… Continue reading A Web Designer’s Typographic Boilerplate
Tag: top
How to Customize the Foundation 4 Top Bar
Zurb’s Foundation 4 features a brilliant top bar which has become almost symbolic of a Foundation site build. Today we’re going to look at how you can implement it in a different way, placing it elsewhere on the page, giving you a custom and responsive horizontal navigation menu. Getting Started First up, we’ll need… Continue reading How to Customize the Foundation 4 Top Bar
Create Pure CSS 3D Model With Tridiv
We all know about WebGL, it’s an open standard browser implementation of OpenGL, and you can create 3D games, effect with Javascript. Now, we have a new way to create 3D graphic – by using CSS. I found this very impressive tool called Tridiv, a web-based editor for creating 3D shapes in CSS. If you… Continue reading Create Pure CSS 3D Model With Tridiv
Sliding Horizontal Layout
Today we’d like to share an interesting layout with you. You might have seen it already on Skybox or on the website of Lotta Nieminen. It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing… Continue reading Sliding Horizontal Layout
Code a Single-Page Sliding Website Layout With Fixed Navigation
When constructing a simple webpage, it can often make sense to fit the content into a single layout rather than multiple pages. These single-page websites are beneficial when you have a small project or portfolio which needs some online presence. If you split up content into neat sections, then visitors might use a small sliding… Continue reading Code a Single-Page Sliding Website Layout With Fixed Navigation
Learn AngularJS With These 5 Practical Examples
By now you’ve probably heard of AngularJS – the exciting open source framework, developed by Google, that changes the way you think about web apps. There has been much written about it, but I have yet to find something that is written for developers who prefer quick and practical examples. This changes today. Below you will… Continue reading Learn AngularJS With These 5 Practical Examples
Using Alignment to Improve Your Designs
Alignment is one of those things that comes hand-in-hand when working with grid systems. The subject of alignment isn’t simply a matter of choosing whether or not you want to align text or images to the left or right of a design (though those decisions obviously still matter), instead, we employ alignment to improve our… Continue reading Using Alignment to Improve Your Designs
Free Premium Files For September 2013
Each month the Envato marketplace brings you free premium standard files. Envato is a web marketplace where you can get premium files for different areas of your website. My favourite marketplaces is the script marketplace CodeCanyon and the theme marketplace ThemeForest. Here are the files which you can get for free for September 2013. Showcase… Continue reading Free Premium Files For September 2013
25+ must-have Photoshop actions for your toolkit
No matter your area of expertise, chances are you’ve worked with photographs. Web and print designers alike are no strangers to the magnificence that can be captured in photos. It’s what we build our designs on top of and with, whether they’re the focus or just a background piece. And as the time passes and… Continue reading 25+ must-have Photoshop actions for your toolkit
Creating the New Google Play’s Multi-Level Navigation from Scratch
Google have recently released a new Google Play website complete with a new redesign and what caught my attention was the way they implemented their navigation bar. With the smooth animation and how they let users peek at the root-level menu by simply hovering a back button, I decided to build a similar navigation menu from scratch… Continue reading Creating the New Google Play’s Multi-Level Navigation from Scratch
Recreate Google Nexus Menu
Recently I stumbled upon Codrops’ tutorial regarding the recreation of Google Nexus navigation menu. That was inspiring and such a creative navigation system from Google. So, I decided to create a jQuery version to challenge to myself. I have been playing with the original Google Nexus Menu for a while. Based on my observation, I summarised its… Continue reading Recreate Google Nexus Menu
How To Create Stylish Pictogram Inspired Illustrations
Illustrating with basic linework not only results in some really cool artwork, it also makes the job a lot easier! Instead of painstakingly drawing every detail, simplifying the object into its basic form and using just a single stroke weight produces a stylised pictogram effect. In this tutorial I’ll take you through the process of… Continue reading How To Create Stylish Pictogram Inspired Illustrations
Create a slide-out footer with this neat z-index trick
In this short tutorial, we are going to create an interesting slide-out footer with a bit of CSS. Grab the zip from the download button above, open it in your favorite code editor and read on! The Idea The effect we are after, is to give the impression that the page lifts up to reveal… Continue reading Create a slide-out footer with this neat z-index trick
My Top Links of the Week for August 2nd 2013
I regularly post links to interesting design tutorials and articles over on my Twitter and Facebook accounts, but in case you missed them here’s a roundup of my top pickings from my recent browsing of the web. This week we have some great content from Vectips, PSDFan, Vectortuts+ and Codrops. The Fundamentals of Shape… Continue reading My Top Links of the Week for August 2nd 2013
Create a Geometric Kermit the Frog Illustration in Adobe Illustrator
Final Product What You’ll Be Creating In this tutorial, I am going to draw Kermit (known in Mexico as “La Rana René”) by using simple shapes and basic tools in Adobe Illustrator. I’ll also show you how to modify your colors in the blink of an eye! So let’s get started… 1. Create a New Document… Continue reading Create a Geometric Kermit the Frog Illustration in Adobe Illustrator
Free Website Template with jQuery Slider for Internet Cafe
What do you wait from this spring besides the bright mood? Of course, the inspiration that will bring you the desired ideas of how to create the stunning designs. We are ready to bring you this inspiration with the top-notch freebie from our professional designers – Free Website Template with jQuery Slider for Internet Café.… Continue reading Free Website Template with jQuery Slider for Internet Cafe
Build a Dynamic Dashboard with ChartJS
Final Product What You’ll Be Creating DownloadSOURCE FILES DemoVIEW IT ONLINE Today we will be creating a dynamic dashboard with live charts, through the power of ChartJS. ChartJS is a powerful, dependency free JavaScript library which builds graphs via the canvas element. Best of all, it’s easy for designers to get up and running. We’ll be focusing… Continue reading Build a Dynamic Dashboard with ChartJS
Building a Circular Navigation with CSS Transforms
VIEW DEMO DOWNLOAD SOURCE In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I… Continue reading Building a Circular Navigation with CSS Transforms
Create an Awesome Single-Page Website
Not every website needs to be complex or include multiple pages of content and information. Sometimes one page is enough. But just because you are creating a website with only one page, does not mean that it will be easy. Developing a single-page layout can require just as much thought and planning as some more complex… Continue reading Create an Awesome Single-Page Website
14 print inspired websites
For years, I’ve continuously read how print is a dying industry and how print designers are in danger. It’s hard to argue, when many big name newspapers and magazines of the past see more readership online than in print. It’s even harder when many of these magazines and newspapers cease printing altogether to go full-blown… Continue reading 14 print inspired websites
CSS3 Menu Tutorial : Cool Bouncing Effects
In this tutorial I will show you how to create CSS3 menu with bouncing effect. In thisCSS3 menu tutorial we will use keyframes to apply bouncing effect on menu. With thekeyframes rule, you can create animation. During animation you can change the style as much as you want. As you know how important is menu navigation on… Continue reading CSS3 Menu Tutorial : Cool Bouncing Effects
CSS 3D Image Flip Gallery With Dynamic Shadows
My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3Dworks, such as the Origami UI: we live in a world of increasingly diversified… Continue reading CSS 3D Image Flip Gallery With Dynamic Shadows
How To Create a Set of Vector Weather Line Icons
Stroked line icons really complement a flat interface style with their minimal and basic appearance. Let’s take a look at building a set of stylised vector icons of our own. We’ll base them on the weather to allow us to create a set of consistently styled icons that would be a perfect match for a… Continue reading How To Create a Set of Vector Weather Line Icons
Icon mouse hover effect using CSS3
This tutorial will show how simple it is to achieve simple animation mouse hover using CSS3. We use transitions and animations css properties to achieve some of the interactive animation. 1. Simple image popup effect using pure CSS3 *{margin:0;padding:0;} body{margin-top:80px;font-size:12px;font-family:arial,sans-serif;color:#9C9C91;background:#fff;} a {color:#333;text-decoration: none;} a:hover {color:#f00;} .wrap {width:720px;background:#f2f2f2;margin:0 auto;} ul.works {list-style:none;margin:0;padding:0;} ul.works li {float:left;display: inline;margin:0 20px… Continue reading Icon mouse hover effect using CSS3