Syllabus

1. Section 1. Advanced Decorative Effects
   • 2D transforms, multiple transforms.
   • Types of transforms: moving objects horizontally and vertically, rotation, skew, scaling.
   • Flipping horizontally and vertically.
   • Assigning origin points of transforms.
   • Using transforms for interface tricks: centering, vertical text, skewed buttons, custom shadows, round menu.
   • CSS filters to change brightness, contrast, discoloration.
   • CSS filters to control color saturation, color inversion and color rotation.
   • CSS filters to add blur, change opacity and add shadows.
   • Differences between box-shadow and drop-shadow.
   • Animating CSS filters.
2. Section 2. Advanced Work with Backgrounds and Frames
   • Managing the size of background images. Special cover and contain modes.
   • Managing background display areas and cropping: background-origin and background-clip.
   • Working with multiple background images.
   • Positioning the background relative to different borders of containers.
   • Background repetition mode: round and space.
   • Property for creating outer frames: outline and its features.
   • Rounding corners. Different radii of the rounding of different corners. Managing horizontal and vertical rounding radii.
   • Working with frame images. Areas of a frame image, slicing the image and placing the pieces in the areas of the frame.
   • Symmetrical and asymmetrical slicing.
   • Managing repetition, size and placement of frame images.
   • Techniques for creating interfaces using frames and backgrounds: creating triangles, round interface elements, decorative frames, arrows.
3. Section 3. Interface Animations
   • Smooth transitions between CSS property values. Transition duration control.
   • Managing the list of properties with smooth transitions.
   • Managing transition delay and timing function.
   • Predefined timing functions: ease, linear, ease-in, ease-out, ease-in-out. Arbitrary timing function: cubic-bezier. Discrete time function: steps.
   • Examples of micro-animations in interfaces using smooth transitions: buttons with smooth switching, transforming checkboxes, radio buttons and icons, toggle switches, a dynamic placeholder in the input field.
   • CSS animations with keyframes.
   • Description of keyframes. Initial, final and intermediate keyframes. Frame grouping.
   • Complex animations.
   • General animation parameters: duration, play count, animation direction, animation delay.
   • Managing pre- and post-animation state. Pausing an animation.
   • Timing functions of animations with keyframes: predefined, arbitrary and discrete.
   • Examples of creating complex animated scenes using frame-by-frame animation.
4. Section 4. SVG Basics
   • SVG format. Differences between a vector and a raster.
   • Basic SVG shapes: rectangle, circle, ellipse, polygon, line, polyline.
   • Managing the dimensions and coordinates of SVG shapes. Dimensions and coordinates in percentages.
   • Rectangle with rounded corners.
   • Controlling the fill of SVG shapes using attributes and CSS. Fill opacity.
   • Controlling strokes of SVG shapes using attributes and CSS. Stroke opacity, width and offset.
   • Controlling the shape of line ends and the shape of bends.
   • Working with dashed lines. Creating a dashed line with a complicated rhythm.
   • Managing the dimensions of SVG elements and dimensions of viewBox. The viewBox attribute.
   • Controlling the aspect ratio and alignment of the viewBox. The preserveAspectRatio attribute.
   • Flexible background with preserveAspectRatio.
   • Units and coordinate systems in SVG. Viewport coordinate system and user coordinate system.
   • Coordinate systems and transforms.
   • Examples of drawing SVG images.