With the arrival of ultra high definition screens (think Retina) new design challenges have arisen; you need to find ways to accommodate all devices. Take displaying icons for example. You could lean on serving images at 200%, or using SVG, but it’s also possible to build a surprising amount of graphics with CSS alone. Let’s build an elaborate icon with just one HTML element.
Along with the introduction of CSS3 comes many new features that are available for use in creating great effects; one of the most useful is the transition property. The transition property is an important new development in CSS. It can be used to create a dynamic change effect on a div or class using a simple structure. CSS3's transition is a great way to add a little animation to sites without the large overhead of a JavaScript library like jQuery.
Whatever you call them - blocks, boxes, areas, regions - you’ve been dividing your Web pages into visible sections for well over a decade. The problem is, you’ve never had the right tools to do so. While the interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements; an unbridled stream of content at odds with its own box-like appearance. Now that HTML5 has finally made sectioning elements available, many of you greet them with great reluctance.
The latest build of Photoshop has some great new features that are sure to catch the attention of web designers. You can now convert a layer’s shape and style to CSS with a single click. In this article, Joshua Johnson will explain how this works. Let’s take a look!
In the following tutorial you will learn how to create a set of toggle buttons in Adobe Illustrator. Andrei Marius will be using basic shapes and the Pathfinder panel to create this UI essential for anyone's tool kit. Further more, you won’t need the Pen Tool, so it’s easy to follow along for beginners!
In this article, David Bushell will be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that he believes are at the heart of the Web’s future.
Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not. As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex. In this short tutorial, Susan Smith will run through the basics of including custom fonts in your pages.
Designing websites for smartphones is easy compared to retrofitting those already in place. More than that, it’s embarrassing how, almost eight years after CSS gained practical acceptance, a lack of foresight haunts those of you who write HTML. Converting older websites to responsive design causes headaches not because small screens are difficult, but because most HTML documents were written under an assumption about screen size.
In late 2012, Microsoft introduced TypeScript, a typed superset for JavaScript that compiles into plain JavaScript. TypeScript focuses on providing useful tools for large scale applications by implementing features, such as classes, type annotations, inheritance, modules and much more! In this tutorial, Sayanee Basu will get started with TypeScript, using simple bite-sized code examples, compiling them into JavaScript, and viewing the instant results in a browser.