html5 doc

Content

Html tags are ways of labeling/organizing web content.

basic html tags

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

html5 tags

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

Styles

Styling html content is a way to make your content easier/quicker/more pleasant to read and understand. Describing font, colours, and layout occurs in a Casscading StyleSheet (CSS).

• 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

Switching styles of html elements when hovering over elements or activating elements can direct attention to important aspects of the content of the document when desired. The switching of style are less jarring or more effective when the transition is smooth.

• blur images while they are not the focus

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

• transform the size of an image while they are the focus

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

Animations

Simple transistions are not always the best ways to bring attention to content elements. Animations allow for more sophistocated ways to transform html elements.

• 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;}
  }
                              

• periodically wiggle and pop

  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);}
  }