Learn the latest tips, techniques, and approaches for laying out your websites with CSS and stylesheets.
How do you begin building a website?
The majority of developers probably start from scratch or pull in a few resources from previous sites. The more organized among us have developed a custom toolbox from which to begin a site that proves to be an essential part of their workflow.
Today we’ll discuss why you should consider building your own front end package to serve as a starting point for every single site you create.
CSS3 has brought about a number of aesthetically impressive new features. Perhaps the most fun of these to play with is CSS animation, which allows you to perform many motion-based functions normally delegated to JavaScript. Join me on my epic quest to discover the coolest, most innovative, and more importantly, nerdiest use of CSS animation on the web. Begin!
Today we’ll be looking at how to add keyboard navigation to a website using a few simple lines of JavaScript. First we’ll create a simple site theme in Photoshop and then transform it into a working website that uses keyboard functions to switch pages.
A prefab CSS framework can be a great help or serious hindrance. This article will give proper coverage to both sides of the fence by looking at common arguments for and against using a CSS framework.
Several options have cropped up recently for adding custom fonts to your website by utilizing the @font-face selector. TypeKit is an exciting new player in this game because it stands out in two key areas: ease of use and richness of fonts available. This tutorial will take you through several small, super simple steps to get TypeKit up and running on your site. You won’t find any advanced techniques or scripting here, so even if you’re a novice web designer this should be a cinch!
CSS Galleries are an amazingly rich source of web design inspiration, and a fantastic way to promote your design skills to the world. Although you shouldn’t worry too much about where you are (or are not) featured, it’s good to know where to look.
We’ve scoured the web and compiled a comprehensive list of 70 great CSS galleries. Some are incredibly popular, others represent smaller niches in the web design industry.
Every site has a logo, and whether it’s a page filling feature or a small design element, it often forms the primary title feature of your page. This article will show you how to implement a logo using correct semantic markup and simple HTML code, with all the presentation done via CSS.
It’ll ensure that those browsing your site without images will see a decent alternative, and provide search engines with a correct representation of your page title.
For the last part of our introductory series to CSS3, we will be taking a look at the new background properties. These include background size, using more than one background for an element, and background origin (which effects the position of a background).
Multiple columns are a major facet of laying out text – newspapers have used them for decades. So important are they that it is amazing that the current way to achieve a multi column layout is one of the most complex techniques for a new designer to grasp.
This tutorial will be taking a look at some of the new ways you can manipulate user interface features in CSS3. But what do we mean by “user interface”?
CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.
The third part in this series on CSS3 will be delving into the new text effects. Typography is, without any doubt, one of the most important aspects to get right when designing a layout. Type can draw the reader through a page, give a certain impression, provide impact, be subtle, or aid in separating content.
CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.
For the second part of our series on CSS3, we’ll be taking a look at borders. Everyone who uses CSS is familiar with the border property – it’s a great way to structure content, create effects around images and improve page layout.
CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. We are going to look at each of these in a bit more detail, using examples where possible.