Wprawki z CSS3

Na stronie tej stosujemy tylko css - nie używamy żadnych obrazkow ani javascript. Animacja z dołu strony jest robiona za pomocą transformacji css3.

Otwórzcie źródło tej strony. Styl css zanurzyłem na tę stronę, aby łatwiej można było analizować kod. Spróbujcie samodzielnie oprogramować podobne efekty.

Prostokąty

  1. Zbuduj taki element:
    CZERWONO - BIAŁY
  2. Dodaj mu zaokrąglone rogi:
    CZERWONO - BIAŁY
  3. A teraz zrób kółka:

Trójkąty

  1. Zbuduj takie trojkąty:
  2. Spróbuj zrozumieć konstrukcję i samodzielnie zbuduj podobne trójkąty skierowane w różne strony.

Obracający się kwadrat

  1. Zrób taki kwadrat: (skorzystajcie z radial-gradient).
  2. A teraz naucz się go obracać za pomocą @keyframes:

C.d.n.