The CSS3 Anthology — Take Your Sites to New Heights pptx

0 Responsive design: Smart layouts for all devices 0 Stylish layouts: With tabular data, text styling, and CSS positioning 0 Seamless navigation: Pretty rollovers and menus without JavaS

Thanks again for your interest in “ The CSS3 Anthology

— Take Your Sites to New Heights ” It’s great that you’ve

decided to download this sample PDF, as it’ll give you a

taste of the full 480 page version of the book

Just to recap, in this practical and fun-to-read book,

you’ll learn:

So … have a read through the sample chapters, and…

Reach out to us on Twitter or Facebook (with your comments)Contact us at support (with any questions)

100% Satisfaction Guarantee

We want you to feel as confident as we do that this book will deliver the goods, so

you have a full 30 days to play with it If in that time you feel the book falls short,

simply send it back and we’ll give you a prompt refund of the full purchase price,

minus shipping and handling.

Easily construct advanced layouts using

powerful CSS3 selectors and pseudo classes.

Complex layouts

Click here to order and download the Digital

Bundle to suit all your devices - from Kindles to

iPads and more!

0 Responsive design: Smart layouts for all devices

0 Stylish layouts: With tabular data, text styling, and CSS positioning

0 Seamless navigation: Pretty rollovers and menus without JavaScript

0 Cross-browser techniques: Compatibility troubleshooting and fixes

0 Usable forms: Design forms that work, and look good too

Summary of Contents

The CSS3 Anthology vii

1 Text Styling and Other Basics 1

2 Forms and User Interfaces 9

3 CSS for Layout 27

The CSS3 Anthology vii

What’s in This Excerpt vii

What’s in the Rest of the Book vii

Chapter 1 Text Styling and Other Basics 1

How do I add a background color to a heading? 1

How do I add a drop shadow to my text? 3

How do I use fonts other than those installed on most users’ computers? 5

Chapter 2 Forms and User Interfaces 9

How do I lay out a form with CSS? 10

Can I change the look and feel of form elements with CSS? 16

What additional elements and attributes are part of the HTML5 forms spec? 19

Chapter 3 CSS for Layout 27

How do I create a design that works well on mobile devices? 28

How can I use responsive-design techniques when my site is image-heavy? 28

The CSS3 Anthology

What’s in This Excerpt

This excerpt comprises large extracts from three chapters of The CSS3 Anthology:

Chapter 1: Text Styling and Other Basics

This chapter covers techniques for styling and formatting text in your documents;background colors, text effects and fonts are explained as the chapter progresses.Even if you’re already using CSS for text styling, you’ll find some useful tipshere

Chapter 2: Forms and User Interfaces

Whether you’re a designer or a developer, it’s likely that you’ll spend a fairamount of time creating forms for data entry CSS provides incredible support

in this area; this chapter shows how we can build accessible, usable forms withthat extra design oomph We’ll also take a look at some of the diverse HTML5tools that are simplifying form configuration

Chapter 3: CSS for Layout

In this chapter, we’ll delve into the emerging sphere of responsive design,looking at both text- and image-heavy layouts that will render effectively andsmoothly on a range of devices or screen sizes

What’s in the Rest of the Book

Making a Start With CSS

This chapter is simply a quick CSS tutorial for anyone who needs to brush up

on the basics of CSS If you’ve been using CSS in your own projects, you mightwant to skip this chapter and refer to it on a needs basis, when you want to lookinto basic concepts in more detail

Images and Other Design Elements

This chapter looks at the ways in which you can combine CSS and images tocreate powerful visual effects, such as placing background images on elements,applying gradients, making elements transparent, and positioning text withimages, among other topics

Every site requires usable navigation, and this chapter explains how to achieve

it, CSS-style We’ll investigate image-based navigation, tabbed navigation,combining background images with CSS text to create attractive and accessiblemenus, and using lists to structure navigation in an accessible way

Positioning Basics

Placing elements correctly on a web page can be tricky, but in this chapter we’lllearn to master the art of positioning Using floats effectively, nifty ways ofadding margins and padding, implementing text wrapping, and creatingthumbnail galleries—these are all great strategies for your CSS arsenal

Interested in finding out more?

This sample gives you a taste of what’s in the book, but remember: you’re onlyseeing a small piece of the action

The full version of The CSS3 Anthology is available now There’s a page at the

end of these sample chapters with a link to the download page

And once you’ve worked your way through the book, find out how much of aCSS star you are with the online SitePoint CSS quiz!

1

Text Styling and Other Basics

This chapter will explore the application of CSS for styling text It will cover a lot

of CSS basics, as well as answer some of the more frequently asked questions aboutthese techniques If you’re new to CSS, these examples will introduce a variety ofproperties and their usages, and provide a solid foundation from which to start yourown experiments For those already familiar with CSS, this chapter will serve as aquick refresher for those moments when you’re struggling to remember how toachieve a certain effect

How do I add a background color to

The result is shown in Figure 1.1.

Figure 1.1 The heading with a background color

Make Way for Color

When you add a background to a heading, you may also want to adjust the padding

so that there’s space between the heading text and the edge of the colored area,

as I’ve done in the example.

How do I add a drop shadow to my text?

A drop shadow can be used to add a tiny shadow, whether to gently highlight sometext, or allow a more dramatic shadow effect

of your guests no-one will complain about the smell! Once baked

the garlic becomes creamy and sweet making an ideal spread to

Figure 1.2 The drop shadow on a heading

—so you can easily see your changes—and then play around with the values Youcan also have a play around withtext-shadowand many other CSS3 properties atthe online CSS3 Generator1

Beyond a Shadow of Doubt

When adding shadows to text, make sure that your text is still legible I find

text-shadow most useful when adding effects to form buttons and big headings, but large quantities of body copy can be hard to read with a shadow applied Sadly, the text-shadow property is unsupported in Internet Explorer (including version 9).

How do I use fonts other than those

installed on most users’ computers?

You have to be careful about selecting fonts, as there are only a few fonts that youcan safely assume are on most users’ computers However, CSS provides a way touse other fonts, too, by loading a font file from the server

The second issue is licensing Many of the fonts that you might use in Photoshop

on your own computer aren’t licensed to be uploaded to a web server and served

in this way, as other users could download the font file itself—just as they can

download an image that you’re using on your website

The CSS3 Anthology: Take Your Sites to New Heights

5 Text Styling and Other Basics

Browser Compatibility for Fonts You Can Upload to Your Server

If you do have a font that’s licensed for use on the Web, your main issue is generating

a package of fonts that will cover all browsers and operating systems The simplestway to do this is to use one of the sites that can generate you a set of font files; I like

to use Font Squirrel.2In addition to having a library of fonts you may use on theWeb, the site has a@font-facegenerator that will create your set of fonts from onethat you upload Upload your font, and you can then download a package of variousfont types along with the CSS rules needed to include them in your site:

Figure 1.3 Using a custom font package generated by Font Squirrel

If Your Font is not Licensed for Web Use

If your font is without a license for such use, you can either search sites such asFont Squirrel for a similar font, or take up another option There are a number ofservices now available—some from the font foundries themselves—that offer served,licensed fonts for use on websites, such as:

■ Typekit3

■ Fontdeck4

■ Web Fonts from Fonts.com5

These services host the fonts in a secure way; you sign up for an account, and canthen use the fonts on your website by loading them in from the remote server

Typically, they have a tool that allows you to generate the code required for yoursite Each service works in a slightly different way, but getting up and running with

a font usually involves selecting it on the service and then pasting some code intoyour site You can then use the fonts as normal in your CSS.

Figure 1.4 My company site, edgeofmyseat.com, uses the Avenir font hosted by webfonts.fonts.com

Each service licenses different fonts, so generally you need to select a service based

on the font that you require I think we’ll see greater provision of web font services

by the font foundries in the future, as designers will be selecting fonts for projectsbased on the availability of the web font

2

Forms and User Interfaces

Forms are an inescapable part of web design and development We use them tocapture information from our users, to post information to message boards, to additems to shopping carts, and to update our blogs—to name but a few

CSS gives us plenty of options with which to style our forms; however, forms areunlike the other HTML elements that we’ve encountered so far Form elements—forexample, fields, buttons, and any other input element—are included as a “replacedelement” in the spec Replaced elements are those whose appearance is defined by

an external source In the case of form elements, this is the browser or operatingsystem UI Due to this, user agents can provide interface controls that best suit theenvironment they’re running in; for example, a browser on a phone may deal with

a select list in a different way from a desktop browser This is helpful in terms ofusability, in that a user grows used to the control offered by the device they’re using;however, it can be frustrating to web designers who feel they should have morecontrol over these interface elements

How do I lay out a form with CSS?

While you may still sometimes see a form laid out using a table, it’s straightforward

to lay out your forms using CSS, as the following example shows

<title>Chapter 6: Styling a form</title>

<link rel="stylesheet" href="form.css" />

<label for="fEmail">Email address</label>

<input type="text" name="fEmail" id="fEmail" />

</div>

<div>

<label for="fQuestion">Question / Comments</label>

<textarea name="fQuestion" id="fQuestion" rows="10"

font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode",

"Lucida Sans", Verdana, Tahoma, sans-serif;

Figure 2.1 A simple form laid out using CSS

Figure 2.2 The unstyled form

First, I give theformawidthand then float thelabelelement left:

Immediately the form starts to look better, as you can see in Figure 2.3

The CSS3 Anthology: Take Your Sites to New Heights

13 Forms and User Interfaces

Figure 2.3 After styling the div and label elements

I now want to give my textinputelements andtextareaa width, which I can dowith the following rule:

form textarea, form input {

float: right;

width: 260px;

}

Unfortunately, this has an unwanted effect, as you can see in Figure 2.4

The CSS changes theSubmitbutton, because we’re targeting theinputelement andtheSubmitbutton is also aninputelement with atypeofsubmit

Figure 2.4 The CSS affects the Submit button in addition to the test input element

To sort this out, we can use an attribute selector to address theSubmitbutton andoverwrite the CSS used forinput I have also used the class applied to thediv

surrounding theSubmitbutton to right-align the button This gives us our completedform:

Rather than overwriting the CSS using an attribute selector, we could also choose

to use the :not pseudo-class The following code would target input elements

as long as they weren’t a type of submit:

The CSS3 Anthology: Take Your Sites to New Heights

15 Forms and User Interfaces

form textarea, form input:not([type="submit"]) {

border-left: 1px solid #cfcfcf;

-webkit-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1);

-moz-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1);

box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1);

The new styles can be seen in Figure 2.5

Figure 2.5 The form, now with added style

The CSS3 Anthology: Take Your Sites to New Heights

17 Forms and User Interfaces

I’ve used CSS to add a border to theinputelements in my form By using differentshades for the borders, I can create a beveled effect I’ve added to this effect by usingbox-shadowas an inset shadow; this creates the shadow inside the element ratherthan outside:

You can set many properties that affect the look and feel of form fields, but it willdepend on the browser and operating system as to what can actually be applied.

As replaced elements, form fields don’t have to take on the CSS provided by the

author This means that you do need to test form elements very carefully across

browsers and devices Personally, I feel that less is more when it comes to stylingforms, so I tend to leave the elements alone as much as I can Instead, I concentrate

on providing good help text and error messaging to make the forms as usable as

possible

What additional elements and attributes

are part of the HTML5 forms spec?

We’ve so far looked at some fairly basic form elements These elements have been

in the HTML specification for a long time without much changing about them

HTML5 has brought with it some new form elements and attributes, and

con-sequently a much richer interface to form-based web applications

Many of the new elements react poorly to attempts at styling them with CSS; theyrely heavily on the UI provided by the operating system or browser The new attrib-utes are interesting, though, for the front-end developer or designer as they offer

some additional aspects we can target using CSS

Solution

A practical example of HTML5 in forms can be seen by making a small change toour existing contact form markup: changing the email field fromtype="text"to

the HTML5type—type="email", adding aplaceholderattribute with some

placeholder text, and setting arequiredflag, indicating that the field is a requiredfield:

<label for="fEmail">Email address</label>

<input type="email" name="fEmail" id="fEmail"

required="required"

placeholder="name@example.com" />

</div>

<div>

<label for="fQuestion">Question / Comments</label>

<textarea name="fQuestion" id="fQuestion" rows="10" cols="30"> </textarea>

Figure 2.6 The form after adding an input field with a type of email

In a supporting browser, however, if you try and submit the form without completingthe fields, or if you enter something other than an email address in the email field,you’ll receive a validation error message, as shown in Figure 2.7 below This all

happens through the browser with no JavaScript required

The CSS3 Anthology: Take Your Sites to New Heights

21 Forms and User Interfaces