Remember back when @font-face and Google Fonts were first introduced? We only had the choice of a handful of custom fonts we could use. Nowadays it’s quite the opposite, we’re spoilt for choice with hundreds of cool fonts licensed for free @font-face embedding. This post rounds up a collection of 20 stylish sans-serif fonts, all of which can be downloaded and used freely to spice up your website design’s typography.
How To Build a Handwritten Letter Style Contact Form
Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS. We’ll use a mix of basic and intermediate CSS techinques to give the form the appearance of a letter, then use the @font-face CSS property to transform the digital text into handwriting.
30 Free UI Kits Featuring Detailed Web Elements
When working under time constraints or on a tight budget crafting every single UI element by hand in Photoshop just isn’t economical. Thankfully there’s a range of ready-made web elements available in UI kits that can be quickly copied over to your own website or web app design projects. This post rounds up a collection of 30 detailed user interface Photoshop kits that can all be downloaded absolutely free!
How To Create a Vibrant Cloud Icon in Photoshop
Follow this step by step Adobe Photoshop tutorial to create a colourful and vibrant cloud icon. We’ll be using plenty of gradients and lighting effects to produce a really cool icon perfect for a modern website design or mobile app.
How To Create a Stylish Drop Cap Effect with CSS3
Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.
Create a Typography Based Blog Layout in HTML5
Last week I posted part one of this tutorial series covering the process of creating a typography based blog design in HTML5 and CSS3. We finished off the Photoshop concept with the design based on a strict grid and text laid out in our desired typeface. Now let’s replicate the design in a static HTML5 and CSS3 prototype before finishing it all off as a fully working WordPress theme.
How To Create Repeating Texture & Pattern Images
Repeating background images are safest method of styling up your website background other than a plain old CSS background color. Websites are viewed in all types and sizes of browser these days, so a repeating background ensures the whole of the user’s screen will be filled with your design, unlike a static image that can often end up being cropped off or lost in a sea of flat colour. Let’s take a look at how seamless or repeating textures and patterns can be created in Photoshop.
You’re Doing it Wrong: Common HTML Tag Misuses
View the source code of a hand full of websites featured in CSS galleries today and you’ll often see the same errors appear time and time again. These mistakes are usually habits we picked up during our early days of coding that have stuck around due to lack of clarification. This post rounds up a collection of common HTML tag and element misuses and describes the best practice to correctly and semantically use them in your markup.
25 Web Designs with Full Page Background Photos
The use of full screen background images isn’t particularly new in the world of web design, but designers are continuously thinking up new and cool ways of implementing some kind of full size photo into the design of their sites. Sometimes the photo will set the scene and introduce the topic of the site, whereas other times an inspirational photo is used to set the mood and to draw the user in. This post rounds up 25 examples of great uses of full screen background photos in website designs across the web.
How To Create a Simple WordPress Blog Theme
So far in this WordPress theme tutorial series we’ve put together a visual concept in Photoshop and coded up a working prototype in HTML and CSS. Now let’s take our static web page files and create a fully working WordPress theme by splitting up the code over the various template files and injecting the relevant WordPress PHP tags.
