ADVANCED CSS BIS 1523 Lecture 20 1 Making

ADVANCED CSS BIS 1523 – Lecture 20 1

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: 2

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. 3

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. 4

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. 5

Pro’s and Cons Absolute Positioning Layout: • Pros: • 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. 6

Pro’s and Cons Float Layout: • Pros • 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. 7

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: 8

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. 9

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: 10

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 11

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. 12

Effects – Border Radius • You can give elements rounded corners by using the borderradius 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 13

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. 14

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

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: 16

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, blurradius, and color. 17

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 18

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

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. 20

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 21

Background-Image example 22

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) • 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 45 deg) 23