1. Martin Kruliš 12. 11. 2015 by Martin Kruliš (v1.0)1

2.  Last time we covered … ◦ CSS principles and syntax ◦ Selectors  id, class, type, and universal selector  Selector combinations and aggregations  Pseudo-classes and attribute selectors  Cascading and selector specificity ◦ Basic properties  Fonts, colors, backgrounds  Box model (margins, paddings, borders) 12. 11. 2015 by Martin Kruliš (v1.0)2

3.  Controlling Whitespace ◦ All whitespace is treated as uniform separator  Except in element ◦ whitespace property  Whether whitespace is pre-formated, no-breaking, …  Importing Fonts @font-face { font-family: myCustomFont; src: url(myCustomFont.tff); } ◦ Supports TTF, OTF, WOFF, SVG and EOT formats 12. 11. 2015 by Martin Kruliš (v1.0)3

4.  Gradient Backgrounds ◦ Special values for background property linear-gradient(direction, color1, color2, …) radial-gradient(shape, color1, color2, …) ◦ Also repeating- versions  Shadows ◦ Shadows for whole elements box-shadow: x y blur spread color; ◦ Shadows for inner text text-shadow: x y blur color; 12. 11. 2015 by Martin Kruliš (v1.0)4 Example 1

5.  Round Borders ◦ Created by specifying radius border-radius: 1-4 values  Custom Images for Borders ◦ Using repeating image (texture) for element border  border-image-* properties 12. 11. 2015 by Martin Kruliš (v1.0)5 -source URL to the image used for border -width Width of the border (i.e., the image) -repeat Whether the image should be repeated or stretched -slice How to slice the image for border sides and corners -outset How much the image extends beyond the border box

6.  Element Display Modes ◦ Elements have specific ways of rendering  Inline elements ( ), block elements ( ), table elements, lists, … ◦ display property can override default behavior  Most common values are 12. 11. 2015 by Martin Kruliš (v1.0)6 block Standard block element inline Element rendered inline with the text inline-block Small block inserted in text flow none Hidden element (no effect on layout) list-item Default for elements table, table-* Tables rows and cells have specialized formatting Example 2

7.  Floating Elements ◦ Inline elements that change standard content flow ◦ The floating element is placed at left or right side of the page and rest of the contents flows around it float: left; or float: right;  Originally intended for narrow side-figures  Can be used for page layout (e.g., navigation menu) ◦ Other elements may prevent their content to flow around floating elements clear: left; clear: right; clear: both;  Specify that on one (or both) sides cannot be a floating element (the content is moved below floating element) 12. 11. 2015 by Martin Kruliš (v1.0)7 Example 3

8.  Page Rendering Algorithm ◦ The elements and their content are processed from the beginning to the end ◦ Each element is positioned according to its size and display properties (block, inline, …)  Except for the floating elements mentioned before ◦ This behavior can be modified by positioning 12. 11. 2015 by Martin Kruliš (v1.0)8 static Default page rendering algorithm is used relative Like static, but element is moved relative to its computed position after the layout is created absolute Element is positioned inside closest positioned ancestor fixed Element is fixed within the browser viewport

9.  Positioning-related Properties ◦ Size properties (for all positioning types)  width, height – size of the element contents  min- / max- width / height – size limits ◦ Location properties (for positioned elements only)  top, bottom, left, right  Distance from the edge at the corresponding side 12. 11. 2015 by Martin Kruliš (v1.0)9 Content width right It does not make sense to set left, width, and right simultaneously

10.  Absolute Positioning Example #absDiv { position: absolute; left: 10px; right: 20px; top: 30px; height: 50px; } 12. 11. 2015 by Martin Kruliš (v1.0)10 absDiv 10px 30px 20px 50px Determined by page width

11.  Positioning-related Properties ◦ Additional properties  z-index – depth in the stack of positioned elements  Higher number ~ closer to the top  opacity – may be useful for overlapping elements  0 ~ fully transparent, 1 ~ opaque  overflow – what should browser do when element contents does not fit its explicitly-set size  visible – content overflows and may overlap  hidden – content is cropped to the element boundaries  scroll – scroll bars are added and the element has its own viewport in which the whole content is displayed  auto – similar to scroll, but scroll bars are initially hidden 12. 11. 2015 by Martin Kruliš (v1.0)11 Example 4

12.  Layout ◦ Visual structure of the content blocks of the whole page or its logical part  Placement of menu-bar, additional sidebar, page header and footer, … ◦ Many different approaches  Whether the page scrolls as whole or not  How each container handle content overflows …… 12. 11. 2015 by Martin Kruliš (v1.0)12 content header footer menu bar side bar

13.  Creating Sidebars ◦ Floating Sidebars  Quite easy to design, but  The sidebars must precede main content  It is a little bit tricky to ensure correct sidebar height ◦ Absolute/Fixed Sidebars  Cover the contents underneath  Sidebars can be almost anywhere in the document  More modern approach, which can be used for more complex situations than floating sidebars  Slightly more difficult to design and code 12. 11. 2015 by Martin Kruliš (v1.0)13

14.  Additional Tips ◦ Use sufficient margins  For floating or absolutely positioned elements ◦ margin-left: auto; margin-right: auto;  Centers elements with fixed width ◦ Матрёшка (Matryoshka) hack  Problem with setting accurate width along with padding and border  Solution: double the container (e.g., )  Outer container gets the width (and margin ) property, inner container gets the padding and border ◦ Relative elements with absolute children 12. 11. 2015 by Martin Kruliš (v1.0)14 Example 5

15.  Media Types ◦ Select style sheets for particular media  PC screen, printer, projector, handheld devices, …  Media Features (Properties) ◦ Add additional conditions to the types  Viewport size limits, orientation, color depth, …  Utilization ◦ Attribute media in and elements ◦ @media rule inside style sheet @media screen and (min-width: 480px) { CSS rules } 12. 11. 2015 by Martin Kruliš (v1.0)15

16.  Media Query Syntax ◦ Media type and arbitrary number of media features concatenated with and operator print and (monochrome)  Features are either flags or name-value pairs ◦ Queries can be concatenated by comma  Which acts as or operator  Media Types 12. 11. 2015 by Martin Kruliš (v1.0)16 all All possible media inputs (default) screen Screen of a computer (laptop, tablet, …) print Printer speech Screen reader that presents the page in vocal form

17.  Media Features ◦ Additional properties required from the media 12. 11. 2015 by Martin Kruliš (v1.0)17 width height Length that specifies width/height of the viewport. Property accepts min- and max- prefixes, which are more useful (e.g., min-width: 300px ) device-width device-height Width/height of the whole rendering surface (also accepts min- and max- prefixes) orientation Possible values portrait and landscape aspect-ratio The width/height ratio of the view port color Indicating a color device; optional value indicate number of bits per channel (e.g., min-color: 8 ) monochrome Indicating a monochrome/greyscale device resolution Output smoothness in dpi or dpcm

18.  Responsive Web Design ◦ The web adjusts layout (and other properties) to the properties of display device  So it can effectively present its contents on small handheld devices as well as on 4K monitors ◦ Possible approaches  Important measurements are expressed relatively in %, vh, and vw units  Multiple layouts (style sheets) are prepared for different devices (and selected by media conditions) 12. 11. 2015 by Martin Kruliš (v1.0)18 Example 6

19.  Graphical Filters ◦ Rendering effects performed on the element filter: filter_fnc1(…) filter_fnc2(…) … 12. 11. 2015 by Martin Kruliš (v1.0)19 blur(radius) Gaussian blur effect brightness(%) Applies linear multiplier contrast(%) Adjusts contrast of the image drop-shadow(…) Creates shadow given particular direction, color, … grayscale(%) Unifies color components into greyscale output hue-rotate(deg) Adjusts hue component of HSB/HSL color space invert(%) Performs color inversion saturate(%) Linearly multiplies the saturation color component sepia(%) Creates sepia (old photograph) effect Example 7

20.  Projection Transformations ◦ Linear transformations of projection matrix transform: func1(…) func2(…) … ◦ 2D transformations 12. 11. 2015 by Martin Kruliš (v1.0)20 translate(x,y) Translate by vector (x,y) rotate(deg) Rotation around z-axis (perpendicular to screen) scale(x,y) Enlarge or shrink by given factor skew(xdeg,ydeg) skewX(deg) skewY(deg) Create a skew effect (asymmetrical rotation) matrix(…) Specify linear transformation matrix

21.  Projection Transformations ◦ 3D transformations  Analogical to 2D case (except for skew ) rotate -> rotate3d, rotateX, rotateY, rotateZ matrix(6 vals) -> matrix3d(16 vals)  perspective() – distance between z-plane and user ◦ Additional properties  transform-origin – center of transformation (rotate)  transform-style – flat or preserve-3d  transform-box –bounding box for the transformation  border-box, fill-box, or view-box 12. 11. 2015 by Martin Kruliš (v1.0)21 Example 8

22.  CSS Property Transitions ◦ Modifications of CSS properties are animated  When pseudo-class changes (e.g., :hover or :target)  Client-side script changes classes, style attribute, … ◦ Properties 12. 11. 2015 by Martin Kruliš (v1.0)22 transition-property Which CSS properties are animated transition-duration How long should each animation last transition-timing- function Interpolation function used for the animation ( linear, ease, ease-in, ease-out, …) transition-delay Delay before the change is started transition Sets all previous properties at once Example 9

23. 12. 11. 2015 by Martin Kruliš (v1.0)23

24.  CSS Development ◦ CSS3 has modular structure  Modules have their own implementation lifecycle ◦ Browsers usually introduce new features using vendor-specific prefixes for CSS properties  -moz- Mozilla (Firefox)  -webkit- Chrome, new Opera (old Opera had -o- )  -ms- Microsoft Internet Explorer ◦ Browsers should ignore unknown properties -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 12. 11. 2015 by Martin Kruliš (v1.0)24

25. 12. 11. 2015 by Martin Kruliš (v1.0)25