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