CSS Background CSS background properties are used to define the background • effects of an element . background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be • repeated background-attachment sets whether a background image is • fixed or scrolls with the rest of the page CSCI 2133
CSS Background CSS background properties are used to define the background • effects of an element . background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be • repeated background-attachment sets whether a background image is • fixed or scrolls with the rest of the page background-position sets the starting position of a background • image CSCI 2133
CSS Background CSS background properties are used to define the background • effects of an element . background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be • repeated background-attachment sets whether a background image is • fixed or scrolls with the rest of the page background-position sets the starting position of a background • image background sets all the background properties in one declaration • CSCI 2133
CSS Background CSS background properties are used to define the background • effects of an element . background-color sets the background color of an element • background-image sets the background image for an element • background-repeat sets how a background image will be • repeated background-attachment sets whether a background image is • fixed or scrolls with the rest of the page background-position sets the starting position of a background • image background sets all the background properties in one declaration • CSCI 2133
CSS Positioning CSCI 2133
CSS Positioning The CSS positioning properties allow you to position an • element. CSCI 2133
CSS Positioning The CSS positioning properties allow you to position an • element. Elements can be positioned using the top , bottom , left , and • right properties. CSCI 2133
CSS Positioning The CSS positioning properties allow you to position an • element. Elements can be positioned using the top , bottom , left , and • right properties. position:static is the default position of an element • CSCI 2133
CSS Positioning The CSS positioning properties allow you to position an • element. Elements can be positioned using the top , bottom , left , and • right properties. position:static is the default position of an element • position:fixed tells an element to be positioned relative to the • browser window . It will not move even if the window is scrolled CSCI 2133
CSS Positioning The CSS positioning properties allow you to position an • element. Elements can be positioned using the top , bottom , left , and • right properties. position:static is the default position of an element • position:fixed tells an element to be positioned relative to the • browser window . It will not move even if the window is scrolled position:relative tells an element to be positioned relative to • its normal position . CSCI 2133
CSS Positioning The CSS positioning properties allow you to position an • element. Elements can be positioned using the top , bottom , left , and • right properties. position:static is the default position of an element • position:fixed tells an element to be positioned relative to the • browser window . It will not move even if the window is scrolled position:relative tells an element to be positioned relative to • its normal position . position:absolute tells an element where to be positioned • relative to its parent element . CSCI 2133
{position:static;} {position:static;} CSCI 2133
{position:static;} {position:static;} CSCI 2133
{position:static;} {position:static;} {position:static;} {position:fixed;} CSCI 2133
{position:static;} {position:static;} {position:static;} {position:fixed;} CSCI 2133
{position:static;} {position:static;} {position:static;} {position:fixed;} {position:relative;} {position:absolute;} CSCI 2133
{position:static;} {position:static;} {position:static;} {position:fixed;} {position:relative;} {position:absolute;} CSCI 2133
CSS Float CSCI 2133
CSS Float With CSS float, an element can be pushed to the • left or right , allowing other elements to wrap around it. CSCI 2133
CSS Float With CSS float, an element can be pushed to the • left or right , allowing other elements to wrap around it. clear Specifies which sides of an element where • other floating elements are notallowed . CSCI 2133
CSS Float With CSS float, an element can be pushed to the • left or right , allowing other elements to wrap around it. clear Specifies which sides of an element where • other floating elements are notallowed . float Specifies whether or not a box should float • to the left or right . CSCI 2133
CSS Float img {float:none;} CSCI 2133
CSS Float img {float:none;} img {float:left;} CSCI 2133
CSS Float img {float:none;} img {float:left;} img {float:right;} CSCI 2133
CSS Float img {float:none;} • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“ Donec et molestie img {float:left;} img {float:right;} CSCI 2133
CSS Float img {float:none;} • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“ Donec et molestie • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis img {float:left;} at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“ Donec et molestie • purus ”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. img {float:right;} CSCI 2133
CSS Float img {float:none;} • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“ Donec et molestie • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis img {float:left;} at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“ Donec et molestie • purus ”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. • Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis img {float:right;} at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.“ Donec et molestie • purus ”. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. CSCI 2133
CSS Display and Visibility CSCI 2133
CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. CSCI 2133
CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. visibility:hidden hides an element, but it will still take up • the same space asbefore. CSCI 2133
CSS Display and Visibility • The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. visibility:hidden hides an element, but it will still take up • the same space asbefore. display:none hides an element, and it will not take up any • space. CSCI 2133
CSS3 Quick Views Box shadow, text shadow Media Types Font face _____________________ Opacity -- demo Border radius -- demo Gradients -- demo CSCI 2133
C S S Image Opacity / Transparency CSCI 2133
C S S Image Opacity / Transparency • The CSS3 property for transparency is opacity . CSCI 2133
C S S Image Opacity / Transparency • The CSS3 property for transparency is • opacity . The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent . {opacity:0.1;} {opacity:0.5;} {opacity:1.0;} CSCI 2133
C S S Media Types • By using the @media rule, a website can have a different layout for screen , print , mobile phone , tablet , etc. CSCI 2133
C S S Media Types By using the @media rule, a website can have a • different layout for screen , print , mobile phone , tablet , etc. all Used for all media type devices • CSCI 2133
C S S Media Types By using the @media rule, a website can have a • different layout for screen , print , mobile phone , tablet , etc. all Used for all media type devices • print Used for printers • • CSCI 2133
C S S Media Types By using the @media rule, a website can have a • different layout for screen , print , mobile phone , tablet , etc. all Used for all media type devices • print Used for printers • screen Used for computer screens • • CSCI 2133
C S S Media Types By using the @media rule, a website can have a • different layout for screen , print , mobile phone , tablet , etc. all Used for all media type devices • print Used for printers • screen Used for computer screens • tv Used for television-type devices • • CSCI 2133
Good Example credit t to w3 w3school • Change the background color of the <body> element to "lightblue" when the browser window is 600px wide or less: @media only screen and (max-width: 600px) { body { background-color: lightblue; } } • You can also have different stylesheets for different media, like this: <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css"> 92 CSCI 2133
Box Shadow with Inside/Outside 93 CSCI 2133
Blend Mode There is also: screen , overlay , darken , lighten , color-dodge , color- burn , hard-light , soft-light , difference , exclusion , hue , saturation , color , and luminosity . And also normal which reset it. 94 CSCI 2133
Open Font face • “The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.” • - Quoted from “css-tricks.com” 95 CSCI 2133
Font Face Usage • Definition: @font-face { font-family: 'MyWebFont’; src: url('myfont.woff2') format('woff2’), url('myfont.woff') format('woff’); } • How to use: @import url(//fonts.googleapis.com/css?family=Open+Sans); body { font-family: 'Open Sans', sans-serif; } 96 CSCI 2133
What is S A S S ? CSCI 2133
What is S A S S ? • SASS stands for Syntactically Awesome Style Sheets CSCI 2133
What is S A S S ? SASS stands for Syntactically Awesome Style Sheets • Sass is a C S S preprocessor • CSCI 2133
What is S A S S ? SASS stands for Syntactically Awesome Style Sheets • Sass is a C S S preprocessor • Sass can be written in either the sass or scss syntax • CSCI 2133
Recommend
More recommend
