html5 doc

basic html

• text - a, p, h1, h2, h3, img, br
• visible structures - ul, ol, li, div, span
• document structures - id, html, head, body

html5

• main sections - header, main, footer
• helper sections - article, section, nav, aside, figure (figcaption)
• doodads - audio, video, details (summary), mark, time

Styles

• CSS basic

  a {
       text-decoration:none;
   }
   .crazy a {
       color: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
   }

• font

  @import url('https://fonts.googleapis.com/css?family=Merriweather');
  @import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
  h1, h2, h3{
      font-family: Merriweather,sans;
  }
  h1::first-letter, h2::first-letter, h3::first-letter {
      font: 200% oblique bold 'Luckiest Guy', sans;
  }

Transitions

• blur

  img {
    filter: blur(3px) grayscale(1);
    transition: all 1s ease-in-out;
  }
  img:hover{
    filter:none;
  }

• transform

  img {
    transform:none;
    transition: all 1s ease-in-out;
  }
  img:hover{
    transform: scale(1.1) rotate(5deg);
  }

Animations

• blur/slide

  details[open] {
      animation: focusing 0.75s ease-out;
  }
  @keyframes focusing  {
      0% {transform: translatex(100%) scale(1); filter: blur(1px);}
      25% {transform: translatex(100%) scale(1.0);filter: blur(3px);}
      75% {transform: scale(1.05); filter: blur(1px);}
      90% {transform: scale(1); filter: none;}
  }
                              

• transform

  nav li:hover {
      animation: wiggle 20s infinite linear;
  }
  @keyframes wiggle {
      0%,1%, 2% {transform: rotateZ(3deg);}
      0.5%, 1.5%, 2.5% {transform: rotateZ(-3deg);}
      3.5%, 6.0%, 10% {transform: scale(1) rotateZ(0deg);}
      4.0% {transform: scale(1.05);}
  }