7) Code Advanced CSS3 Effects

  • zebra striping: tbody tr:nth-child(odd) {background-color: #ccc;}
    A1B1
    A2B2
    A3B3
    A4B4
    A5B5
  • @font-face - With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts.
  • CSS sprites - combine all those little common site images into one, saving lots of separate downloads.
  • flexbox - a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow.
  • transition - CSS3 transitions are effects that let an element gradually change from one style to another. The effect will start when the specified CSS property changes value.
  • transform - The transform property applies a 2D or 3D transformation to an element. This property allows you to scale, move, rotate, skew elements.
  • animations - With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.
    • An animation is an effect that lets an element gradually change from one style to another.
    • @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
    • Bind the animation to a selector by specifying the name and duration of the animation.
  • Browser Compatability: caniuse.com