1. Advanced CSS
BIS1523 – Lecture 20

2. Making Elements Float
You can make elements float within text or other elements with the float CSS property.
This causes the text to wrap around the images.
Without floating, an image and paragraph looks like:

3. Floating
By adding the “float” property, we can have the text wrap around it.
CSS:
Float: right would put the image on the right side of the text.

4. Floating for Columns
You can use floating elements to create columns effects, similarly to the way we have used absolute positioning so far.
In this kells example, we have the nav element positioned in the left 30% of the screen, and the main article is on the right 70% of the screen.

5. Float for Columns
Instead of absolute, we can use float left and right:
Notice the image is still floating inside the text in the article. Floats are relative to the container they are in.

6. Pro’s and Cons Absolute Positioning Layout: Pros: Cons:
Precise positioning of elements in relation to their nearest positioned ancestor.
Allows you to create a page where the order of the information in the HTML is completely different than the order things appear on the page, i.e. navigation columns can be pushed down to the end of the HTML code but still appear as the left column of the page.
Cons:
Because absolutely positioned elements are no longer in the document flow, it is harder to line them up with other page sections. There is no way to instruct other parts of the page to start or end with respect to the absolutely positioned element, instead you must allow enough room in the design for both the maximum and minimum size that the element could ever have.
Possibility of overlaps.
If you don't know which column will be longest, you can't have a footer that spans all the columns.

7. Pro’s and Cons Float Layout: Pros Cons
Easier to achieve simple layouts.
Avoids the footer problem. See Footer Beneath Sidebar .
Cons
Tied to the document flow. Allows less flexibility.
Lots of browser bugs, that, although possible to get around, add significantly to browser testing and tweaking time.

8. Hovering
You can use the hover CSS selector to have effects happen when the mouse hovers over an object.
The above CSS would apply an effect to a link, only when it was being hovered over. For example, we could use an effect to make a link turn red when we hovered over it:

9. Kells Example
We could make our navigation area a bit more colorful by styling the links and their hover.
First, we make them inline-block, so we can adjust the width to 100% (normally inline objects are the width of their contents). So now each link object takes up the entire width of our nav box.
We center the text, and apply a hover effect.

10. Text Decoration
The text-decoration property can be used to specify underlining, overlining, or line-through for text.
To remove all of the above, set text-decoration to none
We could use this to remove the underlines from our links:

11. Styling Links
Applying CSS to every <a> affects every link. If we want visited and unvisited links to have different appearances, we can use the :link and :visited selectors

12. Another Example
An example with a horizontal nav menu that changes cover with Hover
We still use inline-block so we can set the width.
Choose some background and foreground colors
Turn off the underlines
And add the hover effect
Borders, padding, font size, or any other attribute could be adjusted as well.

13. Effects – Border Radius
You can give elements rounded corners by using the border-radius property.
In order to be visible, the element should have a visible border, or a visible background color.
The radius value can be in pixels, or percentages

14. Effects – Border Radius
The larger the value, the greater the curve. A value of 50% would create a complete circle (or elipse).
Notice the text margins still stay fairly rectangular within the border.

15. Effects – Border Radius
Images can also be styled this way, though some clilpping may occur.

16. Effects – Border Radius
You can set each corner of an element’s radius separately by using
If, for example, we give a header a grey background, white text, and round 2 corners, we get:

17. Effects - Shadows
We can add drop shadows to text by using the text-shadow property. For elements, the property is box-shadow.
Text shadow has several parameters: x-offset, y-offset, blur-radius, and color.

18. Effects - Shadows Shadow down and to the left, no blur
Shadow up and to the right, some blur
White text, to give an outline type appearance
The “blur” parameter is optional

19. Efects – Element Shadows
Box-shadow has an additional parameter you can specify, “inset” makes the shadow on the interior of the object.

20. Effects - Backgrounds
Individual objects can all have background images associated with them
This image would appear behind the content. Images should be primarily light colors to not interfere with text, though there are some advanced techniques for stacking elements
Background-image sets the file name to use for the picture.

21. Backgrounds – Size & Repeat
Background size can have the following values:
Any specific size as a % or in pixels
Cover: scale the image to be as large as possible
Contain: scale the image so that it fits in the area
Background-repeat can be used to tile the background. It can be:
Repeat: tiled vertically and horizontally
Repeat-x: repeated only horizontally
Repeat-y: repeated only vertically
No-repeat: not repeated at all

22. Background-Image example

23. Effects – Gradient Backgrounds
You can also use colored backgrounds by specifying the background-color: property.
These colors can also transition from one color to another using gradient.
The syntax is:
Background: linear-gradient(direction, color, color)
Direction can be: to top, to right, to left, to bottom, to top right, to bottom left, to bottom right, to top left, or an angle (like 45deg)

24. Linear Gradients

25. Radial Gradients To create a radial gradient, use the parameters:
You can also use a location other than center for the gradient:

26. Radial Gradient Examples
You can also include a size for the gradient, both horizontally and vertically
Multiple colors are also allowed