Tag: cssf

CSS Animations

CSS Animations

CSS allows animation of HTML elements without using JavaScript!

In this article you will learn about the following properties :

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties 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.

Continue reading CSS Animations

CSS Transitions

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

In this chapter you will learn about the following properties:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Continue reading CSS Transitions

CSS 3D Transforms

CSS 3D Transforms

CSS also supports 3D transformations.

CSS 3D Transforms Functions

With the CSS transform property you can use the following 3D transformation functions:

  • rotateX()
  • rotateY()
  • rotateZ()

Continue reading CSS 3D Transforms

CSS 2D Transforms

CSS 2D Transforms

CSS transforms allow you to move, rotate, scale, and skew elements.

CSS 2D Transforms Functions

With the CSS transform property you can use the following 2D transformation functions:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Continue reading CSS 2D Transforms

CSS Web Fonts

The CSS @font-face Rule

Web fonts allow Web designers to use fonts that are not installed on the user’s computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your “own” fonts are defined within the CSS @font-face rule.

Continue reading CSS Web Fonts

CSS Text Effects

CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes

In this chapter you will learn about the following properties:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS Text Overflow

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

Continue reading CSS Text Effects

CSS Shadow Effects

CSS Shadow Effects

With CSS you can add shadow to text and to elements.

In these chapters you will learn about the following properties:

  • text-shadow
  • box-shadow

CSS Text Shadow

The CSS text-shadow property applies shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px).

Continue reading CSS Shadow Effects

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)
  • Conic Gradients (rotated around a center point)

CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. Continue reading CSS Gradients

CSS Color Keywords

This page will explain the transparent, currentcolor, and
inherit keywords.

The transparent Keyword

The transparent keyword is used to make a color transparent. This is often used to make a transparent background color for an element.

Example

Here, the background color of the <div> element will be fully transparent, and the background image will show through:

body {
background-image: url("paper.gif");
}

div {
background-color: transparent;
}

Continue reading CSS Color Keywords

CSS Colors

CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

The following example defines different RGBA colors:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

Continue reading CSS Colors