Advanced CSS BIS1523 – Lecture 20

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:

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.

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.

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.

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.

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.

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:

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.

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:

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

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.

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

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.

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

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:

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.

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

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

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.

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

Background-Image example

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)

Linear Gradients

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

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