Vertical Centering
Coming soon...
Photo/image galleries
Download images from here:
In spring 2019, we will unlikely get back to image galleries during class time. Instead, you should work through the example on page 271; and the second example on page 495. One of the basic tools used is unordered list, which is used in order to configure the layout and action of the pictures. You can also open the index.html file at chapte11 in the 11.8 folder to see it immediately.
There are a number of image gallery generators on line. One of the onces I've used is WOW Slider, which is free for non-commercial use. It requires downloading. The free version places a small credit stamp at the bottom right of the slideshow.
Simple Dropdown Menu
This is covered in Chapter 11. Download the PowerPoint that gets us started with the code. We will finish the code during class, and you'll find that the main "trick" to dropdowns is to: 1) Set up embedded <ul> and 2) Set dropdown menus to only display when the user hovers.
Gradients
As you know, gradients allow for colors to smoothly transition from one to another. CSS handles gradients with the background-image property. There are two kinds of gradients: linear and radial. You can achieve a gradient with a shortcut as simple as:
background: linear-gradient(#ccddee, pink);
However, you can add other parameters to be more specific. The following code will change direction from the default (top/bottom) to to left/right:
background-image: linear-gradient(to left, #aa00ee, #dd0000);
To apply a background to the entire body of a webpage, use this code to assure that it goes all the way to the bottom:
html {height: 100%;}
From a stylistic point of view, gradients can be from very subtle to artfully embellished. Here are two examples.
CofC website
heading & navigation:
Diagonal gradients can be made by specifying both vertical and horizontal starting positions.
div {
background-image: linear-gradient(to bottom right, purple, orange);
}
You can create fading effects with transparency. Use rgba to do so. For example:
div {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
To learn more about functionality, go to w3schools. However, remember that this site is not trying to teach taste.
Typing on a Picture
When we did the technique of typing on a picture in Chapter 7 website, it was done by using the image as a background. Then simply using margins and padding to position the textbox. It’s OK to do it that way. However, it’s not a good idea to go overboard with using images as backgrounds because they are not printed by default.
The most effective way of typing on a picture is to use CSS positioning. Download the Word File that contains the code.
Favicons
Short for “Favorite Icon”, a favicon is a tiny graphic that you see in the tabs in your browser and in your bookmarks of webpages. Among other things, it helps to give your brand a face. It displays as a square around the size o 24x24px.
For the experience, I want you to use a graphic editor to create a logo using the initials of your name. Start with any square size such as 200x200. Then it's good to resize it because it will be reduced to about 24px on the tab anyway. Examples of famous favicons are shown below:
Facts about favicons
- A square image often seen on tabs of a web page.
- Extension usually is .ico. However, it can be .png.
- Displays in the browser address bar, tab, or favorites/bookmarks list.
- Configure with a link tag as shown:
<link rel="icon" href="favicon.ico" type="image/x-icon">
Description Meta Tag
A meta tag is a self-contained tag that is placed in the head section of a web page. You’ve been using a meta tag to indicate character encoding. There are a number of other uses for meta tags, such as providing a description of a website for use by search engines. The description meta tag content is displayed on the Search Engine Response Page by search engines such as Google. The name attribute indicates the use of the meta tag. The content attribute indicates the values needed for that specific use. The description value should be a carefully written paragraph or sentence to describe the website.
For example, a description meta tag for a website about a web development consulting firm called Acme Design could be configured as follows:
<meta name="description" content="Acme Design, a premier web consulting group that specializes in e-commerce, web design, web development, and website redesign.">
Animation
A few quick topics will be covered, including animation and, transformation
- Instructions on PowerPoint
- main file: anim.html
- animateONE.txt file
- animateTWO.txt file
- animateTHREE.txt file
- animateFOUR.txt as time permits
- png download1
- png download 2
Full Width Nav Bar
This site was given during a presentation presentation in Fall'18. It involves some code that we have already covered, and you might like to experiment with it. It's a nice way to add variation to your layout. CSS Newbie quick tutorial
You may also be interested in equal-width horizontal nav buttons. Simply open folder 6.5, and navbuttons.html and you will see it. The single line secret is:
nav a { display: inline-block;}
Multimedia (movies)
coming...soon...soon...soon
Flexbox
We did not get to this topic in Spring '19, but will in the fall! Pages 341-345 provide a nice short intro.