rgba(0, 209, 112, 0.5)

alpha 0-1
opacity 0-1

Opacity affect the whole element.

position

https://developer.mozilla.org/en-US/docs/Web/CSS/position

position: sticky is coooool. Go check it out.

Transitions

1
2
3

div:nth-of-type(2){
    transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}

The Power of CSS Transforms

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

FancyButton_Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fancyBtn.css">
    <title>Document</title>
</head>
<body>
    <button>Hover me!</button>
</body>
</html>

body{
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #151b29;
}

button{
    background: none;
    color: #ffa260;
    border: 2px solid ;
    padding: 1em 2em;
    font-size: 1em;
    transition: all 0.25s;
}

button:hover{
    border-color: #f1ff5c;
    color: white;
    box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c; 
    transform: translateY(-0.25em);
    /* box-shadow: 12px 12px 2px 1px red; */
    cursor: pointer;
}

The truth about Background

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Google Font is Amazing

I could put whatever font I want. It might work on my machine, but I have no guarantees that same font will exist or be installed on your machine or the average person’s machine.

One option that we have is to actually include a font. As part of our document, we can include a font file so you can buy a font, you can download them.

Google font is free.

https://fonts.google.com/

copy-paste the link part to the <head> in your html file
In css file,

1
2
3

body{
    font-family: Roboto, sans-serif;
}

PhotoBlogCodeAlog_Pt1

In order to do some simple calculation, we can use calc() in css.

img {
    width: 30%;
    margin: calc(10%/6);
}

white space element:

Annoying issue for html, the reason why

1
2
3

<img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"><img
    src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"><img
    src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg">

NOT

1
2
3

<img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg">
<img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg">
<img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg">

JimYuan's Blog

Other Assorted Useful CSS Properties