January 03, 2023
Nikolay Kostov (Nikolay.IT)
Topics covered:
What is CSS 3?
Selectors
Fonts
Colors
Backgrounds
Borders
Box Model
Animations
Video (in Bulgarian)
VIDEO
Presentation Content
What is CSS 3?
Cascading Style Sheets level 3 is the most recent iteration of CSS
It is divided into several separatedocuments called “modules”
CSS 3 has not been approved as a specification, but there are already a lot of properties that are supported in various browsers.
The earliest CSS 3 drafts were published in June 1999
Attribute Selectors
E[foo^=“bar”]
An E element whose “foo” attribute value begins exactly with the string “bar”
Example: a[src ^=" https://"]
E[foo$=“bar”]
An E element whose “foo” attribute value ends exactly with the string “bar”
E[foo*=“bar”]
An E element whose “foo” attribute value contains the substring “bar”
Structural Pseudo-classes
:root
E:nth-child(n)
An E element, the n-th child of its parent
E:nth-last-child(n)
An E element, the n-th child of its parent, counting from the last on
E:nth-of-type(n)
An E element, the n-th sibling of its type
E:nth-last-of-type(n)
An E element, the n-th sibling of its type, counting from the last one
E:last-child
An E element, last child of its parent
E:first-of-type
An E element, first sibling of its type
E:last-of-type
An E element, last sibling of its type
E:only-child
An E element, only child of its parent
E:only-of-type
An E element, only sibling of its type
E:empty
An E element that has no children (including text nodes)
More detailed descriptions:
The UI Element StatesPseudo-classes
E:enabled
A user interface element E which is enabled
E:disabled
A user interface element E which is disabled
E:checked
A user interface element E which is checked (for instance a radio-button or checkbox)
Other CSS 3 Selectors
E:target
An E element being the target of the referring URI
E:not(s)
An E element that does not match simple selector
E ~ F
An F element preceded by an E element
Font Embeds
Use @font-face to declare font
Point to font file on server
Call font with font-family
Use font embedding instead of images
@font-face {
font-family : SketchRockwell ;
src : url ('SketchRockwell-Bold.ttf' ) ;
}
.my_CSS3_class {
font-family : SketchRockwell ;
font-size : 3.2em ;
}
Text Shadow
Applies shadow to text
Syntax: text-shadow: <horizontal-distance> <vertical-distance> <blur-radius> <shadow-color>;
Do not alter the size of a box
text-shadow : 2px 2px 7px #000000 ;
Text Overflow
Specifies what should happen when text overflows the containing element
Syntax: text-overflow: <value>;
Possible values:
ellipsis - Display ellipses to represent clipped text
clip - Default value, clips text
Word Wrapping
Allows long words to be able to be broken and wrap onto the next line
Syntax: word-wrap: <value>;
Possible values:
Supported in all major browsers
Opacity
RGBA Colors
Standard RGB colors with an opacity value for the color (alpha channel)
Syntax: rgba(<red>, <green>, <blue>, <alpha>)
The range for red , green and blue is between integers 0 and 255
The range for the alpha channel is between 0.0 and 1.0
Example: rgba(255, 0, 0, 0.5)
HSL Colors
Hue is a degree on the color wheel
0 (or 360 ) is red, 120 is green, 240 is blue
Saturation is a percentage value
Lightness is also a percentage
0% is dark (black)
100% is light (white)
50% is the average
HSLA Colors
HSLA allows a fourth value, which sets the Opacity (via the Alpha channel) of the element.
As RGBA is to RGB, HSLA is to HSL
Supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+
Example:
Gradient Backgrounds
Gradients are smooth transitions between two or more specified colors
Use of CSS gradients can replace images and reduce download time
Create a more flexible layout, and look better while zooming
Supported in all major browsers via different keywords
This is still an experimental feature
Gradient Backgrounds Example
background : -moz-linear-gradient (100% 100% 90deg ,
#FFFF00 , #0000FF );
background : -webkit-gradient (linear , 0% 0%, 0%
100%, from (#0000FF ), to (#FFFF00 ));
background : -webkit-linear-gradient (#FFFF00 ,
#0000FF );
background : -o-linear-gradient (#2F2727 , #0000FF );
Multiple Backgrounds
CSS3 allows multiple background images
Simple comma-separated list of images
Supported in Firefox (3.6+), Chrome (1.0/1.3+), Opera (10.5+) and Internet Explorer (9.0+)
Comma separated list for the other properties
background-image : url (sheep .png ), url (grass .png );
Border color
Allows you to create cool colored borders
Only Firefox supports this type of coloring
border : 8px solid #000 ;
-moz-border-bottom-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ;
-moz-border-top-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ;
-moz-border-left-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ;
-moz-border-right-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ;
Border image
Border radius
Box shadow
CSS3 box-sizing
Determine whether you want an element to render it’s borders and padding within its specified width, or outside of it.
Possible values:
box-sizing: content-box
(default)box width: 288 pixels + 10 pixels padding and 1 pixel border on each side = 300 pixels
box-sizing: border-box
box width: 300 pixels, including padding and borders
CSS3 box-sizing (Example)
Example: Box with total width of 300 px (including paddings and borders)
width : 300px ;
border : 1px solid black ;
padding : 5px ;
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
CSS 3 Flexible Box Model
The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.
New values for “display” property:
This box model is still under development
Still not supported in major browsers
CSS 3 Box Model Properties
flex-direction
Specifies how flexbox items are placed
flex-order
May be used to change the ordering of the elements. Elements are sorted by this value.
flex-pack
Defines the flexibility of packing spaces
flex-align
Changes the way free space is allocated
CSS 3 flex-direction
The flex-direction property specifies how flexbox items are placed in the flexbox.
Possible values:
lr – Displays elements from left to right
rl – Displays elements from right to left
tb – Displays elements from top to bottom
bt – Displays elements from bottom to top
inline and inline-reverse
block and block-reverse
Animations
Transitions
2D Transformations
2D transforms are widely supported
Skew – skew element
Scale – scale element
Rotate – rotates element
transform: rotate(45deg);
Translate – moves element
transform: translate(10px, 20px);
3D Transformations
3D transforms are similar to 2D transforms
Only work in Safari and Chrome
X, Y and Z transformation
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
perspective: 800;
perspective-origin: 50% 100px;
translate3d, scale3d
Exercises
Using CSS3 make a rotating 3D Rubik Cube.
Using CSS3 make a text that is pulsing, i.e. gets bigger, then smaller, etc. while blinking with different colors.
Using CSS3 make a text bouncing around the screen (the browser).
Hint: the text should change its position