Why An Interface Design Process?

It's very easy to jump into detailed design that:

• Is founded on incorrect requirements.
• Has inappropriate dialogue flow.
• Is not easily used.
• Is never tested until it is too late.

It has been estimated that over 60% of large software projects go over cost, often because:

• Clients often do not understand their own requirements.
• As development progresses, overlooked tasks and requirements become obvious.
• As development progresses, clients request changes, unaware of the extra work required.
• There is insufficient client-developer-user communication and understanding.

When it comes to initial planning and design, "pay a little more now, or pay a lot more later" can come back to haunt both the client and the developer. If the developer is not careful, a loosely worded contract can turn what looked like a profitable venture into an ongoing loss-making saga.

Note that usability is vital in many areas, not just the web, and not just computer science!

Website Page Design

Each web page should be consistently designed across a website. Each page should:

• Have a header area with title and ideally a logo.
• Have easily accessible buttons for navigation.
• Contain an indication of which page the user is on.
• Contain a main area that houses all of the content.
• Have a footer which contains contact details, privacy & policy links.
• Contain data (can be meta-data) about the author, creation date and last revision date.

Having a webpage template and common external style sheets will help you achieve this.

Content Placement

Be aware that space at the top of a page, commonly referred to as above the line is far more valuable than space below the line, ie which can only be reached by scrolling.

• Your header and navigation should be larger than it needs to be.
• Make sure that the most important page content is near the top of the page.
• Users will only scroll down if you have captured their attention and they have a sense that there is useful information to be found.

Website Navigation

A navigation bar is a collection of links to major pages on the site. They should, in general, should look and behave the same way on every page.

• Navigation bars can be placed at the top, bottom, or side of each page, and should include links to the essential pages of the site.
• Larger websites often employ primary and secondary navigation bars to make navigation more managable.
• A user may come to your site on any page from a search engine result or bookmark. Make sure you have a link to the home page on every page.

Site Maps, Indexing Pages, and Search

To make content managable in larger websites, site maps, index pages and search facilities improve accessibility.

• Site maps act as a table of contents for your web site. Like a table of contents in a book, they need not list every page on the site, but should provide the visitor with an overview of the main areas and sub-areas within the site.
• Indexing pages are like a site map, but links are laid out in alphabetical order, not in a logical order. It can be helpful for users looking for a particular issue or concept, particularly useful in technical websites.
• Search facility allows users to locate information within your site. This website's search box allows you to search topics that you might be having trouble understanding or locate a specific slide. Every slide with your search phrase will appear in the order that they are presented in this course.

Use of Text

People read differently online, on the web, readers tend to skim. It's important to keep paragraphs short, make them easy to understand, but not so short that they say nothing.

Like this one.

Similarly, it's important to make your text as readable as possible:

• Avoid marketing terminology and advertising copy.
• Use objective language.
• Keep your audiences in mind (there's a theme here!).

Use of Images

Graphics can dramatically enhance the look of a web site, especially when they have a consistent "look and feel", or are developed as part of an integrated site theme.

Whilst images should always supplement text, a well composed picture can be more effective than a few paragraphs of sales and marketing text. Consider the picture to the right:

• How much information is communicated instantly to the user?
• How many words would it take you to describe everything that you see?
• How likely is it that a user would read all those words?

Contrast

Different elements should be very different.

• Differences in color, size, or shape can be used to distinguish one text (or images) from other text (or images).
• That is, if two elements are not intended to be treated as being "the same", then don't make them look similar.
• Examples for text include changing the formatting to bold, italic, or CAPS.
• But this only works if used sparingly...
• For a page overall, consider whether the difference between areas (e.g. content, ads, navigation areas, user comments, etc.) are easily distinguishable.

Repetition

Repeating visual elements of a page lends the content unity and cohesiveness, and makes it easier for a user to understand what is being presented.

• Content that appears on multiple pages (e.g. a navigation bar) should appear in the same place, and look the same, on each page.
• Improves readability, as the user can easily identify different types of content.
• Format text consistently.
• If sub-section headings are in bold and 14pt font, then all sub-section headings should look like this.
• While it's sometimes tempting to be creative, usually it's worth striving for consistency with conventions established by other websites.
• Jakob Nielsen's "Law" of the Web User Experience: "users spend most of their time on other websites".

Alignment

Aligning layout elements has a direct impact on the readability and comprehension of page content.

• Typically documents should have a small number of vertical baselines.
• For example, standard paragraphs, indentation levels of lists, etc.
• Alignment directly conveys notions of structure.
• Things that are related, or are of the same "importance", should have the same alignment.
• Alignment is also important for things such as forms. Having form inputs aligned correctly can make the form much easier to use.

Proximity

Things that are related, or logically belong together, should be located near each other.

• Also called the Gestalt Principle -- humans perceive relationships between things that are closer together.
• It it usually helpful to group related items together.
• Consider menus in software applications -- commands are not in one giant list, but rather grouped by related functionaliy.

Designing for Different Devices

When building a website, you can fall into the trap of developing a website that looks good and works well on your machine and just your machine! Users will be viewing your website on desktops, laptops, tablets and phones.

• Test your website to see how it adapts to different size screens.
• Resize your browser window to be wider and narrower to simulate different screen sizes and test your work in more than one browser.
• Users may be on the move, viewing your page on a mobile device with limited access to the internet.
• Make sure that your links and buttons are large enough to click and that images and multimedia resources are not larger than they need to be.

Most modern browsers have an inspector or developer area where different devices can be simulated. That said, the regular resizing of s browser window whilst developing, checking that content reflows and adapts nicely, goes a long way to solving layout issues!

Catering to Conflicting Audiences

Often a webpage will appeal to one type of audience, but will alienate another. Consider a functions venue that accept bookings from wedding parties and night-club promotors.

• Wedding parties might think that a nightclub venue would be trashy.
• Night club patrons might think that a weddings venue would be uncool.

A generally accepted design pattern is to have:

• General Landing Pages: pages that appeal to the widest possible audience which contain areas to more specialised "sub-areas" or "sub-pages".
• Sub Pages / Areas: pages that are customised to appeal to a particular audience.

This process can be repeated for sub-sub groups, particularly in large organisations. For example, Crown Casino has a diverse and complex business structure and its website channels customers through a series of general and specialised landing pages before directing them to a final suitable page.

Your Responsibility

The Disability Discrimination Act does not require that web pages be restricted only to plain black and white Arial text, however, you must supply an effective, accessible alternative unless this is not reasonably possible.

It is technically feasible to remove many barriers to equal access for people in a way which does not detract from the usefulness or attractiveness of web pages to others. For example:

• Provide a descriptive alt attribute in image tags.
  alt='cinema image' - Bad!
  alt='Young couple enjoying a 3D movie whilst eating popcorn' - Good!
• Use a sensible amount of padding and margin around elements: not too little, not too much.
• Color schemes should have good contrast. Do not create “rainbow” websites!
• Supply a transcript or description for audio and video files, eg ABC 7.30 Report.

Structure v/s Presentation

Mixing structure with presentation has long been considered bad programming practice and can create "spagetti" like code.

CSS makes it easy to organise all the presentation: positioning, white-space, padding, margin; font family, weight, size; colors used for text, background; hover states etc.

A single stylesheet (or a small number of stylesheets) can be applied to an entire website and create a uniform look and feel across all pages.

Designing a webpage to adapt to different devices (PC, tablet, phone etc) is made simpler using customised stylesheets for each type of device.

Client browsers, particularly those used by people with disabilities, can filter out irrelevant style if not included as HTML markup. For example, COLOR=RED is a deprecated style attribute that is not useful for a blind person's text reader or a search engine.

User-Agent v/s Author Styles

We will look at embeded stylesheets shortly, but for demonstration purposes, the following webpage contains an embedded stylesheet that removes the default user-agent styles in the browser you are using and replaces them with one uniform author style.

To view the plain user-agent styles, delete all of the author style contained between the <style> tags in the <head> element in the text area below before clicking the "Try it" button.

User Styles

Below is an example of what Google's home page looks like using a high contrast user stylesheet. User styles override all styles set down by the user-agent (the browser) and the author (the developer).

It is important to make sure that your website always caters for people with vision difficulties. Do not assume the visually impaired will have access to their own stylesheet! Even knowledgable users will have to use un-customised computers periodically.

Selector, Property and Value

A selector in a style sheet contains one or more CSS properties within a pair of curly braces:

selector { property: value; ... }

Example (styles all paragraphs in a document):

p {
  color: green;
  background-color: khaki;
  font-size: 110%;
  text-align: center;
  width: 80%;
  border: thick red dotted;
  padding: 2px 10px;
}

All paragraphs would be styled like this, but to demonstrate the concept, only this paragraph is styled using a class selector (more about that later).

Grouping

When several selectors share the same declarations, they may be grouped as a comma-separated list:

h1 {
  font-family: sans-serif;
}
h2 {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

Can be grouped like this:

h1, h2, h3 {
  font-family: sans-serif;
}

Each of the three largest heading elements will be styled with the plain "sans-serif" font.

Styling id and class Elements

Styling an element with a particular id is possible using the # character and the id value:

#eOOOOO {
  color: red;
}

<p id='eOOOOO'>"Your" paragraph will have red text.</p>

"Your" paragraph will have red text.

Styling elements with a particular class is possible using the . character and the class value:

.strike {
  text-decoration: line-through;
}

<p class='strike'>This paragraph will be struck out.</p>

This paragraph will be struck out.

<p id='eOOOOO' class='strike'>Both styles are applied: red and struck out!</p>

Both styles are applied: red and struck out!

Inherited & Initial Styles

Property values are normally inherited by child elements, but this is not true for all styles. More often than not, if it "makes sense", styles are inherited.

This paragraph text is green and a little larger, so to is this child <em> element as it has inherited these styles from its parent without any CSS declarations.

If you want to remove an unwanted inherited style. Use the initial declaration value to restore the style property to its initial unstyled value:

span { color: initial; font-size: initial; }

This paragraph text is green and a little larger, but this child <em> element has normal sized black text because these properties are set to initial.

If a property you want inherited is not inherited, you can force an element to inherit a style from the parent using the inherit declaration value. For example, to set <options> in a <select> box to the same color as the <div> that they are in, two sets of inheritance are required:

select, option { color: inherit; }

Comments

You can have multi-line comments inside a CSS by placing comments between /* and */ markers.

/* Code sourced and adapted from:
w3schools.com/css/css_syntax.asp */
p {
  color: red;
  text-align: center;
}

Unfortunately, commonly used single line comments found in other languages are not supported in CSS:

// This doesn't work and will generate an error in CSS.
 # Same is true for this attempt at a single line comment.

Browser Rendering Differences

Internet Explorer, Opera and Firefox were all guilty of ignoring the standard set out by the W3C and did things “their own way” before 2000.

But by 2010, adhering to W3C standards had made a comeback, thanks to competition from Safari and Chrome. Content today is being rendered more reliably in all browsers, but differences still exist.

Web browsers are constantly evolving and do not support all CSS3 styles, particularly the advanced CSS3 styles. To make sure advanced styles work effectively in the maximum number of browsers, a developer should add vendor-prefixed styles as a fall back, as not all users have access to the most up to date versions of the browser.

For example, when using the new flex layout style, it is advisable to include all vendor prefixes before the compliant version:

#element {
      -o-flex: 1; /* Opera */
     -ms-flex: 1; /* Microsoft */
    -moz-flex: 1; /* Firefox (Mozilla) */
 -webkit-flex: 1; /* Chrome and Safari */
         flex: 1; /* Fully compliant browsers! */

Even today, it is still important to check cross-browser compatibility of HTML and even simple CSS across a range of browsers before final deployment.

CSS: Inline

Style directives can be attached directly to a single HTML element using the style='...'attribute:

<p>The next paragraph will be styled using <strong>inline</strong> CSS:</p>
<p style='font-size: xx-large; font-weight: bold; color: red;'>
   Styled using inline style.
</p>

The next paragraph will be styled using inline CSS:

Styled using inline style.

CSS: Embedded

Style directives can be attached directly to a single page and apply to all HTML elements in that page.

The style sheet is embedded inside the <head> element of a document between <style> tags:

<head>
  ...
  <style>

  /* Style directives go here */

    p { color:red; }
    #eOOOOO { ... }
    ...
  /* End of stylesheet */

  </style>
  ...
</head>

CSS: External

The best way to include style into a web document is using external stylesheets in separate files. The recognised file extension for a stylesheet is .css.

The stylesheet is included inside the <head> element with a <link> element:

<head>
  ...
  <link rel='stylesheet' href='mystyle.css' type='text/css' />
  ...
</head>

This allows you to link common stylesheets to all of your pages and create a uniform look and feel across all webpages in your website.

For example, these slides include five external stylesheets:

• defs.css: to define resusable variables - new!
• colorborder.css: for color and border styles.
• layout.css: for styles that affect layout.
• widgets.css: to style demos / widgets in slides.
• print.css: for styles that are applied when using a printer (A4 size).
• testing.css: to test new styles, or debug problematic styles.

CSS: Common Pitfalls

When you create an external stylesheet, just write simple declarations inside that file. Do not embed them inside <style> tags:

<style> ← Don't put this tag in a .css file
  h1 { font-weight: bold; }
  p { font-size: 12pt; }
  span { color: red; }
</style> ← Don't put this tag in a .css file
      

Avoid embedded stylesheets when developing a consistant look and feel across multiple website pages. Embedded stylesheets are helpful for developing and page specific styling only.

Inline style is helpful when testing a single element's style during development, avoid using inline style on production servers as it is hard to maintain.

<p style='...'>Try not to use inline style ...</p>

Competing CSS Selectors

As a rule, the "winning" style is determined by how specific the selector is, ie the more precise the selector, the more likely the style will be applied, for example:

* { color: red; }
Very general: All text will be red as a starting point.

p { color: orange; }
Somewhat precise: All paragraph text will become orange, text outside paragraphs stays red.

.approved { color: green; }
Quite precise: Text in class='approved' elements will be rendered green.

#eOOOOO { color: blue; }
Precise: One element is specified, so the element's text will be rendered blue.

Specificity Calculation

Specifically, the specificity calculation works like this:

• 🥇 The declaration with the most ids wins.
• 🥈 If there's a tie, the declaration with the most classes, pseudo classes and attributes wins.
• 🥉 If there's another tie, the declaration with the most elements and pseudo elements wins.
• 🎽 If all declarations seem to be equal, the selector that was found last is applied.

In an absolute emergency (eg if it is 3.55am and you have a 4am deadline), there is a overriding delaration you can use: the !important declaration will give the style precedence over all other selectors, for example:

* { color: purple !important; }
Override: Ignore every other style, make all the text purple!

Links to a visually friendly calculator and the exact W3C rules for specificity are below:

https://www.w3.org/TR/css3-selectors/#specificity
https://specificity.keegan.st/

Direct Descendent Selectors

We can also select direct descendents, that is just the direct child elements using the > character instead of a single space:

p > em { color: red; }

Will style ...

<p><em>this element</em></p>

... but not ...

<p><strong><em>this element</em></strong></p>

... because it is a child of the <strong> element and a grandchild of the <p> element.

Sibling Selectors

We can select elements that come after a sibling element using the ~ character:

pre ~ p { color: saddlebrown; }

This paragraph, unlike the first paragraph, comes after a <pre> element and so the text is styled with saddlebrown color.

As does this paragraph and would any other paragraph that follows.

Adjacent Selectors

We can also select an element that directly follows another element using the + character:

p + p { color: purple; }
p + p + p { color: red; }

This paragraph won't be styled because it follows a <pre> element.

This paragraph will have purple text because it follows a paragraph.

This paragraph follows two paragraphs, so the "more specific" adjacent selector is applied and text will be red.

This paragraph also follows two paragraphs, so text will be red, unless a more specific adjacent selector is present.

Styling Hyperlinks

Arguably the most common example of pseudo class styling is to style hyperlinks to indicate whether the link has been visited before, and to respond to user & mouse events.

For example, both unvisited and visited links in the main part of these slides are styled with a darker green color:

a:link, a:visited {
  color: darkgreen;
}

And when a link has a mouse hovering over it, or when the link is active (ie being clicked), or when a link has the focus, it will be with a normal (lighter than dark) green color:

a:hover, a:active, a:focus {
  color: green;
}

Please Note: Most touch screens cannot detect a finger-based hover state.

Styling Position

Pseudo class selectors can also select elements depending on where they are located in the document. For example, a first, a last, an 'nth' or every ‘nth’, odd and even elements (useful for "striped" table rows).

li:first-child { ... }
li:last-child { ... }
li:nth-child(7) { ... } ← 7th list item
li:nth-child(2n) { ... } ← even numbered items
li:nth-child(2n+1) { ... } ← odd numbered items

Pseudo Elements

What we have seen are pseudo classes, that is where pseudo style is applied to an entire element based on its state.

There are times where we apply pseudo style to an element and in doing so we create a new sub-element. These sub-elements are called pseudo elements.

Developers should use two colons in CSS3 :: when designating a pseudo element selector, but this was unnecessary in previous versions of CSS:

selector::sub-element { property: value; }

Why the developers of CSS3 made a decision to create a distinction between pseudo classes and pseudo elements is a puzzling question, especially when it was not required before. Most browsers are smart enough and kind enough to render pseudo element styles when only one colon is used. Hopefully this decision will be reversed in a later version of CSS.

First line and First letter

To style the first line of a paragraph use ::first-line:

p::first-line {
  color: darkcyan;
  font-style: italic;
  font-size: 120%;
}

Why the developers of CSS3 made a decision to create a distinction between pseudo classes and pseudo elements is a puzzling question, especially when it was not required before. Most browsers are smart enough and kind enough to render pseudo element styles when only one colon is used. Hopefully this decision will be reversed in a later version of CSS.

To style the first letter of a paragraph use ::first-letter:

p::first-letter {
  color: darkcyan;
  font-size: 200%;
}

Why the developers of CSS3 made a decision to create a distinction between pseudo classes and pseudo elements is a puzzling question, especially when it was not required before. Most browsers are smart enough and kind enough to render pseudo element styles when only one colon is used. Hopefully this decision will be reversed in a later version of CSS.

Selection

To change the selected text color in a paragraph, use ::selection:

p::selection { 
  color: rgba(0,0,0,0);
}

Try selecting text in this paragraph. Can you see it disappearing? Do you think this style will stop people copying your work?

We will look at rgba(...) color later in the lecture.

Before and After, plus Content and Url

To insert content before and after a paragraph, use ::before, ::after and content: " ... ":

p::before, p::after { 
  content: " \" "; 
  color: darkcyan;
  font-weight: bold;
  font-size: 150%;
}

The opening and closing quotes are inserted using CSS.

If using meta characters such as quote characters in content, escape the character or unicode hex sequence with a \ character.

p::after { 
  content: " \2764 "; 
  color: darkred;
  font-weight: bold;
  font-size: 150%;
}

This paragraph uses CSS to end with a dark red heart ...

Finally, content such as an image can be imported using url(...):

p::before { 
  content: url('shapeRMIT.png');
}

HTML5 State Selectors

More pseudo states were introduced in HTML5 to make styling form elements easier, particularly form elements. For example:

input:invalid, select:invalid styles input and select elements that have invalid selections.

input:valid, select:valid ie the opposite of above, styles input and select elements that have valid selections.

input:checked styles radio buttons and checkboxes that have been selected. Will style future elements that implement the checked attribute too.

input [type='number']:out-of-range styles number inputs with values outside the min and max range. There is also a new :in-range pseudo selector you can use.

Fooling the Human Brain

It is easy to fool ourselves into thinking we are seeing a full color spectrum. Stadium screens, televisions, computer monitors and projectors, touch pads and smart phone screens can be built by putting down a close-knit grid of three repeating red, green and blue lights.

Each group of three lights, or channels, form a picture element, otherwise known as a pixel.

In the images left, we are looking at a white iPhone 4S screen through a microscope and we can see that there are no "white" pixels, just thin red green and blue LEDs that form square shaped pixels.

On the next slide we will look at a very simple Red Green Blue or RGB model that allows 16 different intensities in each channel, producing 4,096 different colors.

Values are hexadecimal (ie 0, 1, 2, ... 9, A, B, C, D, E, F).

Pixel Color Simulator

The following simulator modifies the background-color of various div elements to simulate changes to a single pixel and overall screen color:

div { background-color: #RGB; }

The 3 div / rectangles on the left represent the 3 channels that make up each pixel. The rounded div / rectangle on the bottom represents the unmagnified iPhone screen. Between the two are range inputs / sliders that increase the brightness of the LEDs using Javascript and jQuery.

Try to match the following ridiculously named colors with the iPhone screen and note their hex value.

AquamarineBurlywoodDarkgoldenrodDimgrayHotpinkThistle

If you have some form of color blindness, please work with some else and share your perception of color. All developers need to know what color combinations do not work for those with color blindess.

Using #RGBA notation, you can set the alpha channel which gives your element 16 levels of transparency:

• 0 = fully transparent (ie invisible)
• 1, 2, 3, ... C, D, E = 14 levels of translucency
• F = fully opaque (ie the default).

21st Century Color

In the inspector (image right), you can examine an element's color with great precision. Most browsers will also let you select colors on screen with an eyedropper tool. A color logo can be sampled to create a coherent color palette.

Notice that the colors are represented in a more modern #RRGGBB and #RRGGBBAA formats. This model offers 256 intensity levels in each channel, producing over 16.7 million colors and shades (not counting translucency of course):

• 7F₁₆ =  7 x16 + 16 = 127₁₀ (half power)
• FF₁₆ = 16 x16 + 16 = 255₁₀ (full power)
• D4₁₆ = 13 x16 +  4 = 212₁₀ (~83% power)

Most humans cannot detect such small incremental changes in each channel. Can you see any color differences below?

#80F0E0#70E0D0#71E1D1.............#7FEFDF#80F0E0#70E0D0

In CSS3, a more user friendly color system was introduced to allow decimal or percentage numbers:

color: rgb(255,255,0);creates yellow text.

color: rgb(100%,0%,100%);creates purple text.

The inspector lets you know how to generate a color in any of these models.

Hue Saturation Lightness Model

A more intuitive way of selecting colors is to first pick the color or hue. Hue is a number between 0 and 360 and represents the angle on the color wheel in degrees (below right). All of these colors are "on the rainbow", except for magenta (ie purple) and rose.

Once the hue is selected, we then select a percentage of how saturated it is (0% = grey, washed out; 100% = vibrant, strong color) and how light it is (0% = black, 50% = pure, 100% = white).

selector { color: hsl(270, 100%, 50%); )

The above produces a strong vibrant violet text color.

The following simulator modifies the background-colorof various div elements using the HSL color model:

Hue Saturation Lightness Model

This time the range inputs control hue, saturation and lightness.

div { background-color: hsl(hue, sat, light); }

Again, if you have some form of color blindness, please work with some else and share your perception of color.

Transparency, Opacity and Alpha

Transparency is a computer intensive operation and was introduced in CSS3. The browser must keep a record of what objects are laid out below a transparent element with transparency (eg the body and html elements) and perform a color calculation for each pixel.

The term alpha and opacity mean the same thing but have the opposite meaning of transparency. Alpha can be declared as part of the rgba() and hsla() color models.

For example, these slides have a slight transparency, allowing the background to show through.

section > header { background-color: hsla(0, 85%, 90%, 0.85); }

Light pink with 15% transparency.

section > section { background-color: rgba(255, 255, 255, 0.9); }

White with 10% transparency, ie less transparent than the slide header.

Opacity can be declared independently of color and can be applied to other elements such as the <img> element.

img.watermark { opacity: 0.05; }

Will make all images of class 'watermark' 95% transparent.

Supplying Fonts

In CSS3, we can provide the client with the actual font to avoid subtle layout changes with a @font-face declaration. We provide a name for the font we will be using in stylesheets and the location of the font.

@font-face {
  font-family: startrek;
  src: url("fonts/Star_Trek_future.ttf");
}
...
<p style='font-family: startrek;'>Now I can use the Star Trek font.</p>

Now I can use the Star Trek font.

This can cause copyright issues, so make sure that you have sufficient rights. There are many free fonts available for commerical and non-commercial use. For example, in these slides I have used dafont.com to source the Star Trek and Museo fonts used in headings.

Web Fonts

Google has created a resource of hosted free web fonts at fonts.google.com. Whenever you use these fonts, the client will request the font directly from google, ie you do not have to host these font files directly.

You can include the font using a <link> element in the <head> element

<link href='//fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

<span style='font-family: "Indie Flower";'>Now I can use this linked indie flower font.</span>

Now I can use the imported indie flower font.

NB: When you go to Google's quick use instructions, you will see 'https://' at the start of their links.

Servers and browsers often have security concerns when mixing 'http://' and 'https://' resources in one page, resulting in blocked content and no fonts. To solve this problem, use '//' as shown above which allow the server and browser to select the best transmission protocol.

Font Size

The size of a font can be set using the font-size property. Some units (pt, px, cm, mm) are absolute and do not change, others are relative and their final size is determined by the size of their ancestor elements (em, %, rem) or the size of the viewport / screen (vw, vh, vmin, vmax).

font-size: 20px;

There are also absolute and relative size words: small, medium, large, smaller, larger. If you love lazy clothing size labels, these are for you! ← NB: sarcasm

Below is a series of nested divs with fonts of equal unit size. To change the font-sizes, make a selection from this select box: Please Select 16px (pixels) 20px 16pt (points) 20pt 10mm (printer accurate, not screen) 2cm (printer accurate, not screen) 1em (initially 16pt) 0.8em 1.5em 100% (initially 16pt) 80% 150% 1rem (initially 16pt) 0.8rem 1.5rem 5vw (5% viewport width) 10vw (10% viewport width) 5vh (5% viewport height) 10vh (10% viewport height) 5vmin (5% viewport short side) 5vmax (5% viewport large side) XX-Small X-Small Small Medium (normal size) Large X-Large XX-Large Smaller Larger

These slides use relative font-size units as much as possible so that text can be resized in the navigation menu.

Font Style and Weight

Fonts can be given normal, italic, oblique styles using the font-style property.

p { font-style: italic; }

To change the font-style of just this span, make a selection from this select box: Normal Italic Oblique

Font weight can be "fine-tuned" using the font-weight property by providing words such as normal, bold, lighter, bolder or by providing a number between 100 and 900, but ending in '00' (ie it's just nine numbers and not all fonts will have 9 distinct weights).

p { font-weight: bold; }

To change the font-weight of just this span, make a selection from this select box: Normal Lighter Bold Bolder 100 200 300 400 500 600 700 800 900

Line Height, Letter and Word Spacing

p { line-height: normal; }

p { letter-spacing: normal; }

p { word-spacing: normal; }

Text Decoration

Text can be given none, underline, overline, line-through styles using the text-decoration property.

p { text-decoration: underline; }

Why do we call it text-decoration and not font-decoration? That's a really good question ...

To change the text-decoration of just this span, make a selection from this select box: None Overline Line-Through Underline

Vertical Alignment

Inline elements within a block (eg spans, small images) can be vertically aligned using the vertical-align property. It has many "fine-tuning" options to remove small spaces, but it is not as powerful as the block-level text-align property above. One practical application is to align images with inline text, eg logos.

img { vertical-align: middle; }

To align the image with the text below, make a selection from this select box: Initial Baseline Top Middle Bottom Text-top Text-bottom Super (superscript) Sub (subscript) 100% (one line up) -50% (half a line down) 55px -5px

School of Science at RMIT University

Text Indentation

The first line of a text-block (eg a paragraph) can be indented using the text-indent property.

p { text-indent: 1em; }

To indent or outdent the first line of text in this paragraph, make a selection from the select box that is located at the end of this paragraph, ie after all of these words which are only here to pad out this paragraph and make sure it flows onto two or more lines: 0 (no indentation) 2em (indent) -10px (outdent)

Floating Content

img.mug { float: left; }

Around 99% of page layout catastophies are caused by uncleared float styles on logos, navigation links etc. Use this style sparingly!

div, blockquote { clear: both };

div, blockquote { overflow: auto };

Box Dimensions Example

Below is a screenshot of RMIT's balloon and the inspector's graphical rendition of its box model dimensions. It has been placed inside a larger box with geen dotted outline so you can see the margin clearly.

Right-click on the image above and use the inspector to discover how wide or thick the following properties are. NB: width means actual content width:

Absolute v/s Relative Sizes

How absolute sizes (px, cm, etc) are applied to the box properties is clear, but how relative sizes (%, em etc) are applied is less clear and varies. The style properties of the paragraphs below can be adjusted:

Box Sizing Model

The box sizing model sets the content width to the width property. As padding and border are added, the box gets wider.

When using relative width, eg percentage sizes, the content is resized to be the same size as the parent's content. This makes layout design difficult when using relative sizes. For example:

#demoboxmodel2 {
  width: 100%;
  padding: 20px;
  border-width: 10px;
}

These properties will create a box 60px wider than the parent. This means 60px of the content is outside the parent's content area, more if margin is added.

In CSS3 a new property box-sizing was introduced which has content-box, border-box values. The content-box setting is still the default, but border-box sets the outside (ie border) to be the width and shrinks the content to fit.

div {
  ... same as above
  box-sizing: border-box;
}

Calc function

In CSS3, the need for developers to calculate relative widths was recognised. Please note: Spaces are required inside the calc() function.

In the next example, we will add a 30px margin to the child element. We will then need to reduce the child width by 2 x 30px = 60px.

#demoboxmodel4 {
  margin: 30px;
  width: calc(100% - 2 * 30px);
  padding: 20px;
  border-width: 10px;
  box-sizing: border-box;
}

The calc function has reduced the box width to compensate for its margin. It is centered neatly inside the parent element.

Min and Max Suffixes, auto margin

Many dimension styles also have a min- and a max- option that can be used in conjunction with proportionate dimensions, for example percentages.

#demoboxmodel5 {
  width: 50%;
  min-width: 300px;
  max-width: 600px;
}

Finally, a box can be aligned left, right and centered if left and right margin dimensions are set to auto.

.boxcenter {
  margin-left: auto;
  margin-right: auto;
}

Which sides of the demo box above would you like to apply auto margin to? No left or right margin Left margin only Right margin only Both left and right margin

Setting Multiple Dimensions (2)

Sometimes we want our vertical margin to be different to our horizontal margin. For example:

element {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

Two values will set the vertical sides, then the horizontal sides:

element {
  margin: 10px 20px;
}

The same rule applies to the element's padding and border-width. Replace the word margin with the word padding or border-width.

Setting Multiple Dimensions (3 & 4)

Three values set the top, then the sides, then the bottom

element {
  border-top-width: 10px;
  border-right-width: 20px;
  border-bottom-width: 30px;
  border-left-width: 20px;
}

Becomes:

element {
  border-width: 10px 20px 30px;
}

Four values set the dimensions in clockwise order: top, right, bottom, left:

element {
  border-width: 12px 3px 6px 9px;
}

Setting Border Color, Style and Width

Individual dimension rules apply to the border-color, and the border-style properties. Border-style has solid, dotted, dashed; groove, ridge; inset, outset; none, hidden values. For example:

element {
  border-top-color: orange;
  border-right-style: dotted;
}

But it is also possible to combine color, border & style if combining a single style of each. For example:

element {
  border: dotted orange 1px;
}

The above declaration will style all 4 sides with the same style, color and thickness, instead of making 12 individual declarations.

Top, Bottom, Left, Right

In order to move non-static elements, we need to specify how far to move them. These attributes are distances, so the usual px, %, em etc units can be used.

top: 5px;
bottom: 5em;
left: 5%;
right: 5vw;

Note that you just need to pick one or two of these: top and bottom control vertical placement (ie don't chose both); left and right control horizontal placement (ie don't chose both).

Adjust this span element's position static (default) relative absolute fixed original placement top: 15px bottom: 15px left: 15px right: 15px top 30px & left: 30px bottom: 30px & right: 30px

Add position: relative; to this slide.

Sticky positioning

Sticky positioning, position: sticky is a recent addition that combines static and fixed position styles, a feature previously possible only with javascript programming. It is fully supported in most modern browsers.

The images in the div element below are "sticky", they scroll with the page but stay onscreen within its parent's boundaries when top, bottom, left and right styles are introduced.

Modify top and bottom styles: No top or bottom styles Set top to 0px Set bottom to 0px Set top and bottom to 0px

Scroll down ...

to ...

see ...

more ...

Dont stop!

Keep going ...

the example isn't ...

finished yet ...





Ok, we are done!

Z-Index

To arrange non-static positioned elements in 3D, elements need to have a z-index integer value. The higher the number, the more "on top" it is, with 0 being the default value. Values can also be negative if you want elements to be hidden behind static elements.

div.card {
  z-index: 0;
}

Each of the following draggable cards has a z-index (printed on the card).

Can you find the z-index: -1 card?

Block v/s Inline

Block elements and Inline elements can have their display setting changed using the display style:

nav li {
  display: inline;
}

Turns list elements inside a nav element into inline elements.

aside a {
  display: block;
}

Turns hyperlinks inside an aside element into block elements.

Inline Block

Content inside inline elements can split onto two lines, and block elements are put on their own line. Inline-Blocks allow an element to keep its internal layout fixed as a block but leaves it free to "float" along with content in its parent element as if it is inline "on the outside". For example, in this paragraph, there are a few <spans> that can be changed into block and inline-block elements.

span {
  display: inline-block;
}

Change spans in the top paragraph to Inline Block Inline-Block

Handy Tip: Hyperlinks styled as inline-blocks in a horizontal navigation bar makes sure that the link text does not break across lines:

nav a {
  display: inline-block;
}

Display v/s Visibility

There is a difference between display: none; where the element is removed from the layout and visibility: hidden; where the element is made invisible but space for the element is not removed.

span { display: none; }

span { visibility: hidden; }

The display style of the text inside this span can be changed here InlineNone and the visibility style of the text inside this span can be changed here VisibleHidden

Flex wrap

The child elements of a flex element can retain their widths and flow onto multiple lines. Set the parent flex element's flex-wrap: wrap; style will shrink and grow to fit the height and width of the parent container

<div style='... flex-wrap: wrap;'> ... child elements go here ... </div>

In this case, the cell heights on each line will be kept the same (ie some rows may have taller and shorter child elements)

Change CSS style to flex-wrap: nowrap (default) wrap

Flex horizontal alignment and spacing

When child elements of a no-wrap flex element do not fit neatly on a line, the alignment and spacing of elements can be adjusted. Set the parent's justify-content style.

<div style='... flex-wrap: nowrap; justify-content: flex-start;'>
  <div style='width: 30%'>The width of this child element has been set to 30%, height is unset.</div>
  ...
  <div style='width: 34%'>The width of this child element has been set to 34%, height is unset.</div>
</div>

Change CSS style to justify-content: flex-start flex-end center space-between space-around space-evenly

Flex vertical alignment and spacing

Child elements of a flex element are stretched to fit the vertical space by default, but this can be changed. Set the parent's align-items to a different style than the default and the child elements natural heights are restored.

<div style='... align-items: stretch;'> ... child elements go here ... </div>

When child elements are of different sizes, the vertical spacing and alignment styling that you are looking for can be catered for.

Change CSS styles to align-items: stretch (default) center baseline (text) flex-start flex-end and flex-wrap: nowrap (default) wrap

Flex vertical alignment and spacing: align-content

When child elements span multiple lines and you want to retain a common height , a similar set of alignment and spacing options are available. Set the parent's align-content to a different style than the default and the child elements natural heights are restored.

<div style='... align-content: content;'> ... child elements go here ... </div>

Change CSS style to align-content: stretch (default) center flex-start flex-end space-between space-evenly space-around

Flex growth

The width of flexible child elements, ie elements with no fixed width, can be set in proportion to one another. This space is calculated after any non-flexible child elements have been accomodated.

Set each of the child element's flex style with one number, the higher the number the larger the share of the parent's remaining width will be assigned.

<div style='display: flex;'>
  <div style='width: 150px;'>My width is 150px ... </div>
  <div style='flex: 0;'>My width is 0 share of 6 ... </div>
  <div style='flex: 1;'>My width is 1 share of 6 ... </div>
  <div style='flex: 2;'>My width is 2 shares of 6 ... </div>
  <div style='flex: 3;'>My width is 3 shares of 6 ... </div>
</div>

A minimum width is usually intelligently calculated to accommodate content.

Flex control

There is more to the child flex style, you can supply up to 3 numbers to control:

• the way in which the child element grows and shrinks
• minimum and maximum sizing
• resizing with a box-size or content-size focus

flex: flex-grow flex-shrink flex-basis;

The differences are quite subtle and difficult to demonstrate here, the "right" combination of flex parameters for an application will vary considerably.

Flex order

By default, the order in which the child elements correspond to where they appear in the code. Flex allows us to change the layout order so that child elements can be placed differently to suit a screen layout without adjusting the HTML code.

order: ##;

In the example below, the <aside> has a fixed width and appears before the <main> and <nav> in the HTML code, but it is placed after these elements on the screen.

As long as there is sufficient room for the child elements, the <main> element will be 5 times wider than the <nav> element.

<div> <header> </div>
<div style='display:flex; >
  <div style='order: 3; width: 150px;'>
    <aside>
  </div>
  <div style='order: 2; flex: 5;'>
    <main>
  </div>
  <div style='order: 1; flex: 1;'>
    <nav>
  </div>
</div>
<div> <footer> </div>

The content of these flex themed slides owe much to these more comprehensive tutorials.
They are highly recommended if you want to be fully familiar with all flexbox styles, tricks and tips.
https://css-tricks.com/snippets/css/a-guide-to-flexbox
https://www.w3schools.com/css/css3_flexbox.asp

Grid columns and rows

The number and width of columns can be set in the parent element with the grid-template-columns style. Widths can be fixed, proportional or fractionally calculated. The code below gives us four differently sized columns:

grid-template-columns: 200px 1fr 2fr 15vw;

The number and height of rows can be set in the parent element with the grid-template-rows style. Heights can be fixed, proportional or fractionally calculated. The code below gives us four differently sized rows:

grid-template-rows: 100px 3fr 4fr 15vh;

Display above grid as a grid (ie full width) an inline grid .

Grid alignment

The content inside child elements or "cells" can be aligned horizontally with justify-self and vertically with align-self styles.

Set the justify-self: stretch (default) start center end and align-self: stretch (default) start center end styles.

Display above grid as a grid (ie full width) an inline grid .

Cell Spanning

Child elements or "cells" can be made to span rows and columns with grid-column, grid-row and grid-area styles.

The first value(s) is (are) needed to specify where the cells are to be placed, the second value(s) is (are) needed to specify where to end OR how many cells to span.

Cells 1, 2 and 3 have been made to span multiple rows, columns and areas below, other cells reflow onto newly created rows.

<div style='grid-row: 1 / span 4;'>1</div>
<div style='grid-column: 2 / span 3;'>2</div>;
<div style='grid-area: 2 / 2 / 6 / 4 ;'>3</div>;

Display above grid as a grid (ie full width) an inline grid .

Grid template

There is another type of grid styling which moves more of the structuring out of the HTML and into the CSS. First we assign the page elements we want to arrange in a grid grid-area names. In this example, we are looking at a body element's contents.

body > header { grid-area: hd; }
body > nav    { grid-area: nv; }
body > main   { grid-area: mn; }
body > aside  { grid-area: ad; }
body > footer { grid-area: ft; }

Next we assign the element names places inside a container's grid-template-areas. In the example below we place the named elements into a 3 x 3 grid inside the body element.

body {
  display: grid;
  grid-template-areas:
    'hd hd hd'
    'nv mn ad'
    'nv ft ft';
}

A very helpful and inspiring grid tutorial from Morten Rand-Hendriksen demonstrating how this approach can make your code clean and free from unecessary containers can be found here: https://www.youtube.com/watch?v=txZq7Laz7_4

The content of these grid themed slides owe much to these more comprehensive tutorials.
They are highly recommended if you want to be fully familiar with all flexbox styles, tricks and tips.
https://css-tricks.com/snippets/css/complete-guide-grid
https://www.w3schools.com/css/css_grid_item.asp

Printer styling

Another useful feature is to restyle a page so that it is "printer friendly" when a user prints the page. Things to consider are:

• Should some elements be removed, eg navigation, footer
• Should some elements avoid page breaks inside, eg images, paragraphs
• Should some elements be re-sized to fit onto A4, eg articles

@media print {
  header, footer {
    display: none;
  }
  p, img {
    page-break-inside: avoid;
  }
}
@media print and (orientation: portrait) {
  main article {
    min-height: 277mm;
  }
}

Background Repeating and Position

Background repeating can be turned off by using the background-repeat style which takes values initial, repeat-x, repeat-y, no-repeat:

div {
  background-repeat: no-repeat;
}

Background images can be fixed using the background-position style which takes values left, right, center, top, bottom or numeric values.

div {
  background-position: center;
}

• If using 1 word: The image will be placed there and centered in the other direction.
• If using 2 words: The image will be placed in the desired vertical and horizontal placement. Make sure you specify a vertical and a horizontal position!

Change the repeating style of the demo below:
Inital Repeat-X Repeat-Y No Repeat

Change the background position in the demo below:
Initial Left Right Center Top Bottom Bottom Left Bottom Right 20px 20px calc(100% - 20px) calc(100% - 20px)

Background Size and Origin

The size of a background image can be controlled with the background-size style which takes values cover, contain, inital or numeric values such as percentages, pixels etc. If only one numeric value is provided, the width is set and the height is resized in the correct proportion.

div {
  background-size: cover;
}

Change the background size in the demo below:
initial Contain Cover 50% 50% 50% 150px 150px 150px

When background-size is combined with background-position, we can change the resize focus point of an image. For example, if you would like the background to focus on the word "IS" in the "CSS is Awesome" box on the mug, it is located 55% to the right and 60% down from the top left corner.

Change the background focus point (ie background-position) in the demo below:
Initial Left Right Center Top Bottom 55% right & 60% down

Background Compact Declaration

If declaring many background styles in one compact declaration, the order is advisable and a / must be used to separate position from size. This compact declaration combines color, url, position and size into one:

div {
  background: #393 url('css-is-awesome.png') 55% 60% / cover no-repeat;
}

Below is a very tiny mug for you to resize:

Multiple Background Images

Why stop at one? Multiple background images can be placed in a single element, for example in these slides ...

+ + =

html {
  background-image:
    url('app/img/orb-cres.png'),
    url('app/img/orb-step.png'),
    url('app/img/abstract.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-position: left, right, center;
  background-size: 17vw, 17vw, cover;
}

Note that images declared later (eg abstract image) are placed under images declared earlier (eg orb fragment images).

Tilted Color Gradients

Instead of specifying the incoming side, we can replace it with an angle. The angle is a little counter-intuitive: 180deg and top are equivalent.

ul { background: linear-gradient( 23deg, ...); }

Change the angle here: 0 degrees45 degrees90 degrees135 degrees180 degrees225 degrees270 degrees315 degrees360 degrees

• 0deg: Bottom
• 45deg: Bottom Left
• 90deg: Left
• 135deg: Top Left
• 180deg: Top
• 225deg: Top Right
• 270deg: Right
• 315deg: Bottom Right
• 360deg: Bottom (again!)

NB: Only the compliant browser style is being updated. Non-compliant browsers will see a static vendor gradient instead.

Repeating Color Gradients

Gradients can be used to set up using the repeating-linear-gradient style. It is very similar to the previous style, except that colors after the first color have stop point numbers, ie the point where the color stops. These numbers can take be relative sizes (eg percentages) or absolute sizes (eg pixels) depending on what overall effect you want. In this example, a horizontal curtain effect is created with 10 folds, independent of the element width:

div {
  background: repeating-linear-gradient(270deg, #A00, #F00 5%, #A00 10%);
}

To get "hard" stripes, put in extra copies of the colors with zero width. This removes the color blending effect between different colors. Note fixed size option used below.

div {
  background: repeating-linear-gradient(315deg, #A00 0px, #A00 10px, #F00 10px, #F00 20px);
}

Radial Color Gradients

Radial gradients start at the center of an element and spread outwards to the edges. It takes a list of colors.

p {
  background: radial-gradient(red, white);
}

If you want the gradient to stop at the sides rather than the corners, add the word closest-side:

p {
  background: radial-gradient(closest-side, red, white);
}

If you want the gradient to have a cropped circular shape, add the word 'circle':

p {
  background: radial-gradient(circle, red, white);
}

Repeating Color Radial Gradients

Radial gradients can also repeat using the repeating-radial-gradient style. In this example, a cloud like effect is created with 5 rings, independent of the element width:

div {
  background: repeating-radial-gradient( red, white 10%, red 20%);
}

To get "hard" stripes, put in extra copies of the colors with zero width. This removes the color blending effect between different colors. Note circle and fixed size options used below.

div {
  background: repeating-radial-gradient( circle, red, red 20px, white 20px, white 40px);
}

Round and Oval Elements

Values can be static (eg pixels) or relative (eg percentages).

div { border-radius: 50% }

Inset and Image Shadow (or Glow)

The box-shadow property has one final option. Insert the word inset and the shadow appears inside the box.

#demoinsetshadow { box-shadow: inset 1px 1px 3px 2px #333; }

To give images with transparency a shadow or glow, use the filter: drop-shadow() style:

 img {  filter: drop-shadow( 1px 1px 4px #fff ); }

Like the text-shadow style, the first two numbers control the direction of the shadow, the third number controls the blur, and the final number controls the color.

For advanced users: The filter style can also modify opacity, color and contrast; invert, blur and enhance images. You don't need Photoshop to make simple modifications anymore!

Inset and Image Shadow (or Glow) Example

Shadow Settings { blank inset -10px -5px -1px 0px 1px 5px 10px -10px -5px -1px 0px 1px 5px 10px 0px 1px 2px 5px 10px blank 0px 1px 2px 5px 10px }

box-shadow: 0px 0px 0px 0px #000000;
text-shadow: 0px 0px 0px #000000;
filter: drop-shadow(0px 0px 0px #000000);

Combined Highlight and Shadow

By combining two text-shadows, a highlight and a shadow, text can be made to look very 3 dimensional. Multiple shadows are separated by a comma.

#demoshadow3 p {
  text-shadow:
    -1px -1px  2px rgba(255, 255, 255,  1 ),
     6px  3px  3px rgba( 0 ,  0 ,  0 , 0.7);
}

• The highlight is a white "glow" shadow coming from the bottom right corner.
• The shadow is a translucent black shadow which allows the background color to come through.

Transition selection and delay

To add different visual transitions to different properties, we can specify which style is to transit and how long the transition should take; each style and timing should be separated by commas. In this example, we speed up the background-color change.

nav a {
  ...
  transition: background-color 0.5s, color 1s;
}

Sample Nav Link 2

We can also introduce a delay to the transition using the transition-delay delaration. In the next example all transitions last 0.5s and are delayed by 0.5s.

nav a:hover {
  ...
  transition: 0.5s;
  transition-delay: 0.5s;
}

Sample Nav Link 3

3D Transforms

Elements can also be rotated and translated in three dimensions using the transform CSS delaration. Translations need an extra z coordinate and rotations require an axis as well as an angle.

In order to have an effective 3D effect, a perspective declaration should be supplied, ie how far an imaginary viewer is away from the screen, and a perspective-origin, ie the position where the viewer is in front of the element being transformed.

#screen {
  ...
  perspective: 200px; /* Viewer 200px away from screen */
  perspective-origin: 50% 0%; /* Viewer centered at base looking up */
}
#story {
  transform: rotateX(15deg); /* Left / right axis of rotation */
  transform-origin: bottom;; /* Base is fixed, top falls back */
}

Animated card-flip example (1)

One useful application of 3D transforms is to generate a double sided card that flips when hovered over. Let's start with a simple nested structure: a parent element containing 2 child elements, ie a front side and a back side.

<div class='card3D'>
  <div>FRONT</div>
  <div>BACK</div>
</div>

Let's apply some basic styling so that all three elements are visually distinct.

div.card3D {
  border: dotted black thin;
  background-color: #ddd;
  box-sizing: border-box;
}
div.card3D > div:nth-child(1) {
  border: 4px red groove;
}
div.card3D > div:nth-child(2) {
  border: 4px blue groove;
}

Animated card-flip example (2)

Next let's add padding and set dimensions for all three elements, make sure that overflowing content stays in the parent element.

div.card3D {
  height: 300px;
  width: 200px;
  padding: 5px;
  overflow: auto;
}
div.card3D > div {
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  box-sizing: border-box;
  padding: 5px 10px;
}

Animated card-flip example (3)

Next step is to place both sides in the same place and on top of each other. Let's put some relative positioning on the parent and absolute positioning on the children.

div.card3D {
  position: relative;
}
div.card3D > div {
  position: absolute;
}

The FRONT and BACK are now the right size and on top of each other, removing the unwanted scroll bar from the parent element in the process.

Animated card-flip example (4)

Let's put 3D rotations on each child with transformY() (ie we are rotating around the top / bottom axis). Whilst we are doing this, let's add some deliberately overflowing content to the back side and set its overflow style to auto.

div.card3D > div:nth-child(1){
  transform: rotateY(0deg);
}
div.card3D > div:nth-child(2){
  transform: rotateY(180deg);
  overflow: auto;
}

Note that a scroll bar appears on the back side element.

Animated card-flip example (5)

Some :hover state styles would be helpful with transition delay too. The hover state will apply to the parent but the children will be styled, ie rotated by a further 180 degrees.

Another 3D transform style that will help us is backface-visibility, we can hide the child that faces away from us, the BACK side will be drawn on top of the FRONT side if not used.

NB: At time of writing, -webkit-backface-visibility is also needed in some browsers.

div.card3D > div {
  transition: 4s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}
div.card3D:hover > div:nth-child(1) {
  transform: rotateY(180deg);
}
div.card3D:hover > div:nth-child(2) {
  transform: rotateY(360deg);
}

And our preparation work is done! These cards are now ready to have content placed on each side and be styled.

Styling tips: 1) the parent element does not need to have a border or background, that is just scaffolding to help us see better; 2) a transition time of 4 seconds may be a little large (hint hint).