Web System Technologies 1: Pseudo-classes and Elements

• Here are study notes on Web System Technologies 1, Prefinal Topic 2, covering pseudo-classes, pseudo-elements, transitions and animations

Pseudo-classes

• A pseudo-class is used to define a special state of an element.
• It can style an element on mouse hover, style visited/unvisited links differently, and style an element when it gets focus.
• Pseudo-classes can be combined with HTML classes.
• HTML classes can be combined with pseudo-classes.

Pseudo-classes For Hypertext

• Links can be displayed in different ways.
• These include unvisited link, visited link, mouse over link, and selected/active link.
• The link, visited, hover, and active pseudo-classes can be used to style hyperlinks differently based on their state.

Pseudo-elements

• A CSS pseudo-element is used to style specified parts of an element.
• It can style the first letter, or line, of an element.
• It can insert content before, or after, the content of an element.

The ::first-line Pseudo-Element

• The ::first-line pseudo-element is used to add a special style to the first line of a text.
• It can only be applied to block-level elements.
• Font properties, color properties and background properties can be applied to the first line.
• Word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height and clear can also be specified.

Transitions

• CSS transitions allow you to change property values smoothly, over a given duration.
• To create a transition effect, you must specify the CSS property and the duration of the effect.
• If the duration part is not specified, the transition will have no effect, because the default value is 0.

transition-timing-function

• The transition-timing-function property specifies the speed curve of the transition effect.
• It can have the following values: 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'

Delay the Transition Effect

• The transition-delay property specifies a delay (in seconds) for the transition effect.

Transition Properties

• The 'transition' property is a shorthand for setting all transition properties.
• The 'transition-delay' property specifies a delay (in seconds).
• The 'transition-duration' property specifies how long a transition effect takes to complete, in seconds or milliseconds.
• The 'transition-property' property specifies the CSS property to which the transition effect is applied.
• The 'transition-timing-function' property specifies the speed curve of the transition effect.

Animations

• CSS allows animation of HTML elements without using JavaScript.
• An animation lets an element gradually change from one style to another.
• You can change as many CSS properties as you want, as many times as you want.
• To use CSS animation, you must first specify some keyframes for the animation.
• Keyframes hold what styles the element will have at certain times.

Browser Support For Animations

• Animations are supported by all major browsers.

The @keyframes Rule

• When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style.
• To get an animation to work, you must bind the animation to an element.

Delay an Animation

• The animation-delay property specifies a delay for the start of an animation.