Martin Kruliš
by Martin Kruliš (v1.0)
12. 11. 2015
1

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)
by Martin Kruliš (v1.0)
12. 11. 2015
2

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
by Martin Kruliš (v1.0)
12. 11. 2015
3

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;
by Martin Kruliš (v1.0)
Example 1
12. 11. 2015
4

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
-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
by Martin Kruliš (v1.0)
12. 11. 2015
5

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
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
by Martin Kruliš (v1.0)
12. 11. 2015
6

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)
Example 3
by Martin Kruliš (v1.0)
12. 11. 2015
7

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
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
by Martin Kruliš (v1.0)
12. 11. 2015
8

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
It does not make sense
to set left, width, and
right simultaneously
width
Content
by Martin Kruliš (v1.0)
right
12. 11. 2015
9

Absolute Positioning Example
#absDiv {
position: absolute;
left: 10px;
10px
right: 20px;
top: 30px;
height: 50px;
}
30px
absDiv
50px
20px
Determined by
page width
by Martin Kruliš (v1.0)
12. 11. 2015
10

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
Example 4
by Martin Kruliš (v1.0)
12. 11. 2015
11
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
content
side bar
 Whether the page scrolls
as whole or not
 How each container handle
content overflows
 …
header
menu bar

footer
by Martin Kruliš (v1.0)
12. 11. 2015
12

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
by Martin Kruliš (v1.0)
12. 11. 2015
13

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
by Martin Kruliš (v1.0)
Example 5
12. 11. 2015
14

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
}
by Martin Kruliš (v1.0)
12. 11. 2015
15

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
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
by Martin Kruliš (v1.0)
12. 11. 2015
16

Media Features
◦ Additional properties required from the media
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
by Martin Kruliš (v1.0)
12. 11. 2015
17

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)
Example 6
by Martin Kruliš (v1.0)
12. 11. 2015
18

Graphical Filters
◦ Rendering effects performed on the element
filter: filter_fnc1(…) filter_fnc2(…) …
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
by Martin Kruliš (v1.0)
Example 7
12. 11. 2015
19

Projection Transformations
◦ Linear transformations of projection matrix
transform: func1(…) func2(…) …
◦ 2D 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
by Martin Kruliš (v1.0)
12. 11. 2015
20

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
by Martin Kruliš (v1.0)
Example 8
12. 11. 2015
21

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
transition-property
Which CSS properties are animated
transition-duration
How long should each animation last
transition-timingfunction
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
by Martin Kruliš (v1.0)
12. 11. 2015
22

CSS Development
◦ CSS3 has modular structure
 Modules have their own implementation lifecycle
◦ Browsers usually introduce new features using
vendor-specific prefixes for CSS properties
 -mozMozilla (Firefox)
 -webkit- Chrome, new Opera (old Opera had -o-)
 -msMicrosoft Internet Explorer
◦ Browsers should ignore unknown properties
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
by Martin Kruliš (v1.0)
12. 11. 2015
24
by Martin Kruliš (v1.0)
12. 11. 2015
25