B C D H I L M

CSS3

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

  1. Flexbox layout: CSS3 offers a new layout model called Flexbox, with which complex layouts can be easily realised by flexibly aligning containers and elements.
  2. Animation and transition effects: CSS3 allows the creation of animations and transition effects that can be realised without JavaScript. This allows websites to be made more interactive and appealing.
  3. Colour gradients: CSS3 supports colour gradients that enable smooth colour transitions in backgrounds, texts and other elements.
  4. Shadows and rounded corners: CSS3 offers the option of applying shadows and rounded corners to various elements to make them more visually appealing.
  5. Multi-column layouts: CSS3 enables the creation of multi-column layouts on a website without the need for tables or other complex structures.
  6. Fonts and text effects: CSS3 offers advanced options for customising fonts and text effects, including the option to import and use custom fonts.

Overall, CSS3 offers a wide range of new functions and improvements to create websites with an appealing design and complex layout without 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;
        animation: example 5s infinitive;
}
@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%;}
}

Following an example from w3schools.com

It is also possible to design with pure CSS patterns:

Example from CSS3 Patterns Gallery

Related Glossare