new css
7 new techniques every web developer should know
CSS3 media queries
With the rise of mobile devices, and on the other hand, of very wide displays, creating a website that looks great in both big and small devices is definitely a challenge for web designers and developers. Happily, the CSS3 specification have a new feature which allow web developers to define styles for a specific display size only.
For example, the code below show how to apply a specific style only if the client display is smaller than 767px.
@media screen and (max-width:767px){
#container{
width:320px;
}
header h1#logo a{
width:320px;
height:44px;
background:url(image-small.jpg) no-repeat 0 0;
}
}
Font resizing with REMs
CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.
The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
More info: Font resizing with REMs
Cache pages for offline usage
HTML5 introduces a great feature, offline caching. Basically, this feature allows you to tell the client browser to cache some pages so your visitor will be able to view it again, even if he’s not connected to the Internet.
Caching pages is pretty easy. The first thing to do is to add the following to your site .htaccess file:
AddType text/cache-manifest .manifest
Once done, you can create a file named, for example, offline.manifest, with the following directives:
CACHE MANIFEST CACHE index.html style.css image.jpg
And finally, link your .manifest file to your html document:
<html manifest="/offline.manifest">
That’s all, and your page will now be cached if the client browser supports this technology.
More info: How to create offline HTML5 web apps in 5 easy steps
Server-side JavaScript
Since the mid-90′s, JavaScript has been a very popular client-side language for web developers. But nowadays, JavaScript is becoming more and more used on the server side. Why? Because now we have powerful server-side JavaScript environments such as Jaxer, Node.js and Narwhal.
The code belows demonstrate how to create a simple Hello World using Node.js.
var sys = require("sys");
sys.puts("Hello World!");
More info: Learning Server-Side JavaScript with Node.js
HTML5 drag & drop
Thanks to new technologies such as HTML5, the web is becoming more and more user-friendly. Now, it is possible to easily implement drag and drop on your web pages. This is very useful, for example for a shopping basket.
In order to make an element draggable, you simply have to add it the draggable="true" attribute, as shown in the example below:
<div id="columns"> <div draggable="true"><header>A</header></div> <div draggable="true"><header>B</header></div> <div draggable="true"><header>C</header></div> </div>
Of course, after you made an element draggable, you have to use some JavaScript to control what it should do. I’m not going to explain how to do it (This may be a full article!) so you definitely have a look there if you’re interested in the topic.
Quick tip: If you want to prevent the text contents of draggable elements from being selectable, simply apply the following CSS rules:
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
More info: Cross Browser HTML5 Drag and Drop
Forms, the HTML5 way
The HTML5 specification introduces lots of new features regarding one of the most important element of a website: forms. For example, it is now possible to add date pickers, numeric spinners, as well as validating emails using regular expressions patterns.
The following code is pretty self-explanatory and shows most of the new forms-specific features introduced in the HTML5 specification.
<form> <label for="range-slider">Slider</label> <input type="range" name="range-slider" id="range-slider" min="0" max="20" step="1" value="0"> <label for="numeric-spinner">Numeric spinner</label> <input type="number" name="numeric-spinner" id="numeric-spinner" value="2"> <label for="date-picker">Date picker</label> <input type="date" name="date-picker" id="date-picker" value="2010-10-06"> <label for="color-picker">Color picker</label> <input type="color" name="color-picker" id="color-picker" value="ff0000"> <label for="text-field">Text field with placeholder</label> <input type="text" name="text-field" id="text-field" placeholder="Insert your text here"> <label for="url-field">Url field</label> <input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required> <label for="email-field">Email field</label> <input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required> <button type="submit" role="button" aria-disabled="false"> <span>Submit form</span> </button> </form>
More info: How to Build Cross-Browser HTML5 Forms
CSS animations
Most modern browsers are now supporting CSS animations. Yes, CSS are now allowing you to create some simple animations, without the help of a client-side programming language such as JavaScript.
The following example shows how to make a background color change. As you can see, we have (for now) to use some proprietary properties such as -moz-keyframes.
#logo {
margin: 15px 15px 0 15px;
background: red;
float: left;
/* Firefox 4+ */
-moz-animation-name: colour-change;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;
/* Webkit */
-webkit-animation-name: colour-change;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
}
@-moz-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}
@-webkit-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}
More info: Enhance Your Sites with CSS3 Animations
5 Online Tools Every Web Designer Should Know About
Every web designer has their own set of tools that they use with every site. This core set of tools maximizes efficiency and reduces the time spent performing mundane tasks. With the vast amount of web apps / plugins popping up every day, there are a lot of options web designers have to choose from to help them in their workflow. But these tools, I’ve listed below, are the 5 tools we think every web designer should know about.
Colour Lovers
Despite the fact that they spell the word “color” wrong (I kid!), Colour Lovers has a lot going for it. At it’s core, it is a tool that allows users to create and share colors, palettes and patterns. This site is marketed as a creative community but we tend to use strictly for its palette-building feature. The interface is extremely easy to use and for actual color lovers very fun. When a palette is created you can easily export it to illustrator or Photoshop with the click of a button.
Colour Lovers also doubles as a great source of palette inspiration and has many other tools that I haven’t explored yet. They have thousands of palettes, a pattern creator, color namer and the ability to connect with other Colour Lovers to discuss new trends, palettes, etc.
Dropmark
Recently we have decided to add mood boards to our process and the best tool we’ve found for collaboration is Dropmark. With Dropmark you can create a digital moodboard and share it with other members of your team.
The biggest draw to Dropmark was the ability to drag and drop multiple types of files (pictures, videos, audio, etc) from our desktop or web browser right to the moodboard. Also, the moodboard instantly turns into a full screen slideshow when viewing individually files. Sharing is super easy and you can make your collection private or share the shortlink with others.
Layer Styles
Layerstyles is an amazing way to generate css styles. This is great because it is designed to look like the layer styles menu from photoshop (hence the name). If you have any familiarity with Photoshop then this will be a breeze. With Layerstyles you can combine options or use individually like: drop shadow, inner shadow, background, border and border radius.
Layerstyles is one of the many time savers available when it comes to writing css. Instead of guessing, you can use a generator like Layerstyles and fine tune a visual object until the desired look is achieved.
CSS3 Generator
CSS3 Generator is another great generator that allows you to generate styles while previewing the end result. We find ourselves using this often for text-shadows and even simple CSS transitions.
In addition to text-shadows and transitions the CSS3 Generator can also generate box shadows, rgba, @font-face, multiple columns, box resize, box sizing, outline, transform, selectors and gradients.
WordPress Reference
Now to toot our own horn a little. One tool that we use often is the WordPress Reference created by the our crack team of web designers.
There are many wordpress functions that we use with every site we build and this is a place where we can document those for future use. This has saved me quite a bit of time and has allowed me to focus on other areas of development instead of searching the internet blindly.
A.C. Graphics 