webcl-fs-20

Module Web Clients FS 20

week 1

• Note that todo items are not yet created:
  • Todo View

week 2

• Tested different HTML input elements and styled the form using CSS grid and the :invalid CSS pseudoclass
  • CSS Validation Goodie

week 3

Ever wondered how to draw triangles using pure CSS? Find out by studying the following examples.

• CSS Goodie - drawing triangles: Explains how to draw pure CSS triangles
  • using border-width and drop-shadow
  • using clip-path

week 4

As we now know how to draw triangles, we proceed to build a collapsible section with a rotating triangle to indicate its status.

• CSS Goodie - collapsible section with pure CSS: Explains how to build a collapsible section using pure CSS
• The projector pattern

week 5

How to build a button with a rainbow colored back blur using an anchor element

• CS Goodie - back blur
  • using Flex
  • using Pseudo-element
  • using filter
  • using linear-gradient
• The projector pattern - Persons

week 6

How to build an animated underline to mimic Material Design text fields

• CSS Goodie - animated underline
• CSS Goodie - animated underline css
  • using background-image
  • using background-position
  • using background-repeat
  • using background-size
  • using transition

This week we generalized the Person projector, so that it may also be used with other models

• The projector pattern - Persons
• The projector pattern - Persons js

week 7

• table projector
  • solution 1
  • solution 2

How tu build buttons with a ripple effect, similar to Material Design buttons

• CSS Goodie - ripple effect
  • using pointer-events
  • using clip-path
  • using mix-blend-mode
  • using JS style.setProperty
  • using JS classList

<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations. In the following Canvas Gauge example you may explore how the Canvas-Element, which is part of HTML5, is used to render 2D shapes

• Canvas Gauge Example
  • Canvas Glossary
  • Canvas Tutorial

week 8

In this CSS Goodie, you may learn how to implement a spotlight feature. While pressing the ALT-Key on your keyboard, a spotlight effect is displayed around your mouse. With this kind of effect, you may draw user attention to the spot arround your cursor.

• CSS Goodie - Spotlight
  • using mousemove event
  • using translateX CSS transform function
• Bucket SVG Animation
• Bucket WAF SVG Animation

week 9

SVG Animation of a signature where the lines are drawn one after the other by manipulating the strokes with JavaScript

• CSS Goodie - Signature
  • using stroke-dasharray
  • using stroke-dasharray

week 10

• Vue.js with SVG repository live
• React and Web Components with SVG repository pdf
• Angular with SVG repository
• optional: Mini repository live