Posted by: Peter Andrease

Posted on: July 10, 2012 4:16 pm

-

Last week I talked you through the benefits of using Less.css in your next web project. If you missed part one click here to read it first. I’ll be rounding up the tutorial with info on “Nested Rules” and “Functions & Operations.”

Nested Rules
Nested rules allow you to specify child selectors to keep your stylesheet smaller and easy to navigate. It also forces you to keep your stylesheet much more organised. See below how it works:

Functions & Operations
With Functions and operations you can add and subtract numbers in your stylesheet. It’s complicated but can save you a lot of time and dramatically reduce the size of your less stylesheet. This just touches on what’s possible with functions and operations in the less css. See below:

As you can see less.css is a very useful css language and a lot of people are using it now. After a small learning curve you’ll find yourself using it often, it saves time and makes your css much more easy to go through when re-visiting.

Posted by: Peter Andrease

Posted on: July 6, 2012 2:00 pm

-

The benefits of Less are clear as soon as you understand it.

So what is it?

Less speeds up css development in several different ways. It can be used for the following:

  • Variables
  • Mixins
  • Operations
  • Functions

Variables

If you’re any kind of web designer you’ll know what a variable is. You specify something and then call it later somewhere else as many times as you like and once you’ve changed the variable all the calls will change too. So imagine having all your titles across a site in the colour black, the site is huge and you’ve used all the h’s and added special classes to target special circumstances. Imagine being able to change it one line of code! Well you can with less…

variables

Mixins

Mixins means you can put all of the properties of a class into a different one. This means instead of writing out the code or copying and pasting it again. You can use a mixin which works a lot like the variable. Mixins also allow you to add functions, see below….

mixins

Next week we’ll round up the tutorial with Nested Rules and Functions & Operations.

Posted by: Peter Andrease

Posted on: May 24, 2012 1:50 pm

-

There are 3 ways of showing fonts on your website. Javascript, css and cufon, all have their advantages and disadvantages. I’m going to write off cufon straightaway as it uses flash which has the lowest support out of all three. Flash is unsupported on both iphone and ipad – I’d avoid it.

CSS

The quickest and easiest way I think is to use google web fonts, it’s not the best but it is free. At the moment there are over 500 font families on there and 90% of them aren’t great. So you’re going to have to do a lot of sifting through to find the right font. Here’s 10 I like….

  • Open sans
  • Josefin sans
  • Abril fatface
  • Dosis
  • Pt sans
  • Droid
  • Arvo
  • Gravitas
  • Jura
  • Yanone Kaffeesatz

You’ll have to watch out for what they look like especially if you’re going to use it in body text, I would recommend only using them as display and captions for some of them.

Okay another css font resource is font-squirrel. You’ll find some good fonts on here too, font-squirrel also has a generator on the site. So you can upload the font and get all the type that you need to work across browser, they even give you the html and css and even the cufon file (if you’re really want it). If you’re generating your own font be careful what you use because even if you’ve brought the font doesn’t mean you can go spreading it around the net, once it’s there and there’s a link to it anyone can download it.

Another one worth checking out is “The league of moveable type”.

JavaScript

JavaScript is a nice way off using fonts on your site too. I find the give a much cleaner look rather than the sharp edges you get with css fonts on some browsers. The only problem I find is that you get the default font load up before you see the javascript loaded font – the font-size could be wildly different and could cause the site to look bad before the javascript loads. Saying that there are work arounds for this and the speed of most peoples internet these days I don’t think it’s a problem. Two really nice font resources are Typekit recently acquired by adobe and Fontdeck. They both cost a various amount but there are free versions. I found that with Typekit you get an allowance of 2 fonts for 1 site plus a typekit badge in the bottom corner of the screen. The pricing structure is slightly different for both resources but both rely on amount of view per month.

I find the fontdeck site much nicer to use but both have really high-quality fonts like Din, Adelle, Futura, Freight Sans, Proxima Nova.

Both are CSS and JavaScript fonts are really easy to implement and both should be in a web designer’s toolkit.

Posted by: Peter Andrease

Posted on: May 15, 2012 4:22 pm

-

Media queries have appeared in web development quite recently and are a brilliant way of making a site looks good across all devices. Whether the site is being viewed on a television, desktop, computer, tablet or telephone it will dynamically change to be best suited to the screen size.

The difference between a phone which can be only 320px wide and a large monitor which could be 2000 pixels wide is huge and paying attention to this will enhance the user experience.

Most of the big sites use responsive web design and media queries to specify the width across the different devices. Websites like Amazon are accessed on phones and tablets daily and thus it is essential for them to be able to provide a mobile friendly version.

Media queries will add development to your scope but for a little extra time, it can make a lot of difference.

So to add media queries to a site you’ll need to add them at the end of the stylesheet so it overrides all the other styles specifically for each device.

So what would you use it for?

  • Change a 3 column site into 1 column for a mobile screen.
  • Loading higher resolution images for bigger screens
  • Line-height and font sizes.

So if you’re ready to add it put this html in the head section of the site.

This will make the site be zoomed into 100% rather than it fitting the whole page to the screen.

The next code snippet is a good grounding to get started your different screen resolutions. Add it to the end of your css sheet and start coding!

@media screen and (min-width: 1200px) {}
@media screen and (max-width: 760px) {}
@media screen and (max-width: 550px) {}
@media screen and (max-width: 400px) {}

768px x 1024px is the resolution of an ipad
320px x 480px is the usual resolution of android and iphones (portrait and landscape)

A great place to check to see how the site looks is here.

Some examples I like, make sure you resize the window to see the media queries take effect:

Posted by: Peter Andrease

Posted on: March 10, 2011 9:08 am

-

Using Photoshop and CSS this tutorial will show you how to create a simple line break that appears indented, like that shown below, or like the ones on this website:

First in your photoshop paste a screenshot of your website, or simply have the background that the line break will sit on viewable. Note: This will not work on a white background, you will need to simply create a grey line break for that.

Now create a new layer, select the pencil tool on 1px brush size and select a foreground colour that is slightly darker than your current background colour. In the example the background colour is #17a884 and the foreground colour is #096a4f.

While holding down Shift draw a horizontal line. Now press Alt + Down arrow to copy this layer, press CTRL + U and bring the lightness to +100 to make into solid white. Now you can simply bring the opacity of that new white line layer down to suit, the example is 55%, but this will vary depending on how dark the background is.

Tweak the opacity and possibly darken the first layer to suit and once happy you can then add the css for your line break, as shown below:

hr, .linebreak {
width: 100%;
clear: both;
border: none;
border-top: 1px solid #096a4f;
background: #7fb1a3;
height: 1px;
font-size: 1px;
margin: 15px 0 15px 0;
}

This is the ideal css to ensure the linebreak works correctly and this can then be used with either the hr tag or a div of class=”linebreak”. Simply flatten your photoshop image and colour pick the colours, change the background colour to the white line colour and the border-top colour to the first coloured layer.

Posted by: Peter Andrease

Posted on: March 8, 2011 8:53 am

-

Combining images into single files and pointing to them using CSS background positioning can speed up your site, stop the need to preload hover images and keeps files more compact. This short tutorial will show how this technique is done.

Firstly when saving your images, create a new document and place each one of your images onto this ensuring they all sit next to one another, as this makes it easier to point to its position in the css, like that shown below.

Now you need to point to the image in your CSS and then you can position the image to choose your desired one.


#my-image {
background: url("sprite.jpg") no-repeat;
background-position: 0 0;
width: 100px;
height: 100px;
}

This CSS will show only Image 1 in the sprite, as the background-position: 0 0, is pointing to the top left of the image and the size of each of the images are 100px x 100px.

If I wanted to show Image 5, it would be background-position: 100px -100px. So the backgound-position will basically go 100px horizontally along the image and then -100px vertically as image 5 is below image 1. If Image 4 was 20px in width than it would have been background-position: 20px -100px.

You need to find out the size of each of the images in the sprite to ensure the correct positioning, width and height is entered.

Posted by: Peter Andrease

Posted on: February 22, 2011 10:01 am

-

This tutorial will show how to make an image float in the corner of a website, for instance, to highlight a feature or button, like that shown below.

First create your corner image and it’s best to create the image as a transparent png so that it can float on top of the page on a low res screen without looking odd (unless it is a solid image anyway).

Now open your css file and you will need the following css for your image.

#float-image {
position: absolute;
top: 0;
right: 0;
width: 114px;
height: 118px;
background: url(images/misc/image-name.png) no-repeat;
display: block;
}

This code will make whatever you set as id=float-image to be position absolute on the page to the top right corner, you may also need a z-index of say 100 encase the image floats below any other divs.

If you want the image to constantly be fixed at the top right corner even when scrolling then simply change position: absolute to position: fixed.

Posted by: Peter Andrease

Posted on: February 17, 2011 9:14 am

-

This tutorial will show how to add curved corners to boxes using the curvycorners.src file, which you can download here.

Save the file to your root folder and point to the .src file in your html.

Now all you need to do is add a few simple lines of css to add curves to your div box.


-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;

You can now adjust the size of the curvature by amending the pixel amount, the bigger the amount the bigger the curve. You can even remove some of the corner curves so for instance only the top of your box has curves.

This css works fine in firefox, however as Internet Explorer is a different breed you may also require the following css to make sure it is cross-browser friendly:


-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

So your div would then be:

#curved-corners {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

Posted by: Peter Andrease

Posted on: February 3, 2011 3:17 pm

-

I have always found it a pain adding footers to the bottom of the page, either the footer wont push down with the page or it just wont sit where it is supposed to. This tutorial will show how to effectively add a centrally aligned footer that sticks to the bottom of the page and follows the content when it scrolls down.

Firstly, create a new HTML document and set up the page as follows:

Now in your stylesheet all you need is the following:

These styles basically give the whole page a forced width and height of 100%, then gives the wrapper of the content a minimum height of 100%, so that even when there is no content it will still force to 100%.

This would obviously push the footer below the 100%, so the margin of 0 auto (to align center) and -80px is there to bring the footer back up. So the 80px would be whatever the height of the footer is.

With this configuration the footer would then sit over the content so the push div was created as the same height as the footer to resolve that issue.

Finally, in order for the footer to push down with the content the height of the content has been set to auto, so it will adjust accordingly.

Posted by: Peter Andrease

Posted on: January 11, 2011 9:14 am

-

By default, elements in HTML are aligned left, but nearly all websites these days align centrally on the page. To do this effectively you need to make the width of the body tag 100%, make the text align center and add a margin of 0 auto (otherwise there will automatically be margins added), as below:

body {
width: 100%;
text-align: center;
}

Now create a wrapper div that the whole site will sit in. The max width for sites these days is 980px, so make a width of 980px, make the margin 0 auto again and align the text left now so that text within the wrapper will align left but still be contained within the centrally aligned div, see below:

#wrapper {
width: 980px;
margin: 0 auto;
text-align: left;
}

Finally, here is how your HTML should now look:

<div id=”wrapper”>
   
     Site content goes here
   
</div>

Authors
Categories
Archives
Blogroll