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

by Martin Kruliš (v1.0) 1

Cascading Style Sheets

and Webpage LayoutMartin Kruliš

12. 11. 2015


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

CSS Revision


Controlling Whitespace◦ All whitespace is treated as uniform separator

Except in <pre> 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

More on CSS Properties


Gradient Backgrounds◦ Special values for background propertylinear-gradient(direction, color1, color2, …)radial-gradient(shape, color1, color2, …)

◦ Also repeating- versions

Shadows◦ Shadows for whole elementsbox-shadow: x y blur spread color;

◦ Shadows for inner texttext-shadow: x y blur color;

12. 11. 2015


Example 1


Round Borders◦ Created by specifying radiusborder-radius: 1-4 values

Custom Images for Borders◦ Using repeating image (texture) for element

border border-image-* properties

12. 11. 2015


-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


Element Display Modes◦ Elements have specific ways of rendering

Inline elements (<em>), block elements (<p>), table elements, lists, …

◦ display property can override default behavior Most common values are

12. 11. 2015

Display

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 <li> elements

table, table-* Tables rows and cells have specialized formatting

Example 2


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 itfloat: 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 elementsclear: 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

Floating Elements

Example 3


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

Content Positioning

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


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

Content Positioning

Content

width

right

It does not make sense to set left, width, and right simultaneously


Absolute Positioning Example

#absDiv { position: absolute; left: 10px; right: 20px; top: 30px; height: 50px;}

12. 11. 2015

Content Positioning

absDiv10px

30px

20px

50px

Determined by page width


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

Content Positioning

Example 4


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 scrollsas whole or not

How each container handlecontent overflows

…

12. 11. 2015

Page Layout

content

header

footerm

enu b

ar

side b

ar


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

Page Layout


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., <div><div>) Outer container gets the width (and margin) property,

inner container gets the padding and border

◦ Relative elements with absolute children

12. 11. 2015

Page Layout

Example 5


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 <style> and <link> elements◦ @media rule inside style sheet@media screen and (min-width: 480px) { CSS rules}

12. 11. 2015

Media


Media Query Syntax◦ Media type and arbitrary number of media

features concatenated with and operatorprint 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

Media

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


Media Features◦ Additional properties required from the media

12. 11. 2015

Media

widthheight

Length that specifies width/height of the viewport. Property accepts min- and max- prefixes, which are more useful (e.g., min-width: 300px)

device-widthdevice-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


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

Responsive Web

Example 6


Graphical Filters◦ Rendering effects performed on the elementfilter: filter_fnc1(…) filter_fnc2(…) …

12. 11. 2015

Filters

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


Projection Transformations◦ Linear transformations of projection matrixtransform: func1(…) func2(…) …

◦ 2D transformations

12. 11. 2015

Transformations

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


Projection Transformations◦ 3D transformations

Analogical to 2D case (except for skew)rotate -> rotate3d, rotateX, rotateY, rotateZmatrix(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

Transformations

Example 8


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

Transitions

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


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

Compatibility Issues

by Martin Kruliš (v1.0) 2512. 11. 2015

Discussion

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

Documents

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