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









Document


Hover me!

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

NOT

1
2
3

Jim Chen's Blog

Other Assorted Useful CSS Properties