HTML5 & CSS3 in Examples
Russian
Introduction
Chapter I
Chapter II
Chapter III
Chapter IV
Chapter V
Contact
Chapter III
Diving into HTML5 and CSS3
1. Drawing basic geometric shapes
1.1 Displaying a circle
1.2 Displaying a square
1.3 Displaying a triangle
1.4 Displaying a parallelogram
1.5 Transparency
1.6 Example 11: Geometric figures and transparency
1.7 Explanation of the Example 11 program
2. Creating shadow fonts using the
text-shadow
property
2.1 Rounding the corners using the
border-radius
property
2.2 Example 12: Displaying a text which has different combinations of shadows
2.3 Explanation of the Example 12 program
3. Creating a horizontal menu
3.1 The
min-height
and
max-height
properties
3.2 The
linear-gradient()
function
3.3 Example 13: Creating a horizontal menu
3.4 Explanation of the Example 13 program
4. Creating a vertical menu
4.1 Setting shadows for a
<
div
>
element using the
box-shadow
property
4.2 Example 14: Developing a vertical menu
4.3 Explanation of the Example 14 program
5. Creating a popup menu
5.1 The
transition
property
5.2 Example 15: Developing a popup menu
5.3 Explanation of the Example 15 program
6. Designing a transformation
6.1 The
transform
property
6.2 Scaling photos
6.3 Rotation in space: the
rotate3d(x,y,z,angle)
function
6.4 Example 16: Changing the position and size of HTML elements
6.5 Explanation of the Example 16 program
7. Designing animations
7.1 The
animation-name
,
animation-duration
and
animation-direction
properties
7.2 The
animation-timing-function
and
animation-iteration-count
properties
7.3 The
@keyframes
rule
7.4 Creating a 3D rotation effect
7.5 Example 17: Creating a 3D rotation effect
7.6 Explanation of the Example 17 program
8. Introducing the
<
svg
>
element
8.1 Displaying text: the
<
text
>
element
8.2 The
fill
,
stroke
and
stroke-width
attributes
8.3 Gradient fill: the
<
linearGradient
>
element
8.4 Displaying a circle: the
<
circle
>
element
8.5 Displaying a rectangle: the
<
rect
>
element
8.6 The
width
and
height
attributes
8.7 The
<
path
>
element
8.8 The
click
,
mouseover
,
mouseout
,
mousedown
and
mouseup
events
8.9 The
begin
,
end
and
repeatCount
attributes
8.10 Creating animation: the
<
animateMotion
>
and
<
animate
>
elements
8.11 Example 18: Creating
<
svg
>
elements
8.12 Explanation of the Example 18 program
9. The
@media
rule
9.1 The
@page
rule
9.2 The
display
property
9.3 The
@media print
rule
9.4 The
@media (max-width)
rule
9.5 The
@media all and (orientation)
rule
9.6 The
@media screen and (device-width)
rule
9.7 Example 19: Using the
@media
rule
9.8 Explanation of the Example 19 program
1. Drawing basic geometric shapes