B C D H I L R

CSS3

CSS3 is the latest version of the stylesheet language CSS (Cascading Style Sheets) and offers a range of new features and improvements. Here are some of the key innovations of CSS3:

Flexbox layout: CSS3 provides a new layout model called Flexbox, which allows complex layouts to be implemented easily by flexibly aligning containers and elements.

  1. Animation and transition effects: CSS3 allows for the creation of animations and transition effects that can be achieved without JavaScript. This makes web pages more interactive and engaging.
    Colour gradients: CSS3 supports colour gradients that enable smooth colour transitions in backgrounds, text, and other elements.
  2. Shadows and rounded corners: CSS3 provides the option to apply shadows and rounded corners to various elements to make them visually appealing.
  3. Multi-column layouts: CSS3 enables the creation of multi-column layouts on a webpage without requiring tables or other complex structures.
  4. Fonts and text effects: CSS3 offers advanced options for customising fonts and text effects, including the ability to import and use custom fonts.

Overall, CSS3 offers a variety of new features and improvements to design web pages with appealing layouts and complex designs without the need for additional tools or scripts.

Here is an example of a CSS animation:

The CSS code:

div {
	width: 50px;
	height: 50px;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-delay: 2s;
}
@keyframes example {
  0%   {background-color:red; left:2%; top:2%;}
  25%  {background-color:yellow; left:80%; top:2%;}
  50%  {background-color:blue; left:80%; top:80%;}
  75%  {background-color:green; left:2%; top:80%;}
  100% {background-color:red; left:2%; top:2%;}
}

After an example from w3schools.com

It is also possible to design patterns with pure CSS:

Example from CSS3 Patterns Gallery

Related Glossare