Section 1: create header

Link to note: https://app.gitbook.com/@luluandlynn-wl/s/css/ 1 Basic reset using the universal selector 过去我们使用Normalize make a cross-browser reset, 但随着浏览器 is better, 可以使用universal selector 更为简便 box-sizing: define how the width and height are calculated: should they include padding and borders default is content-box line-height: 1.7 1.7 times bigger than the predefined line height ** color: (font color)

** universal 的字体定义在body 里面比较好，这样其他element会通过继承apply字体样式

{ margin: 0; padding: 0;

box-sizing: border-box; }

2 set project-wide font definitions ** universal 的字体定义在body 里面比较好，这样其他element会通过继承apply字体样式 body { font-family: "Lato", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: #777;

} 3 clip parts of element using clip-path

.header { height: 95vh; / background image 按定义的先后，先定义的在第一层，再往后叠放；可在 background-image 第一个参数定义渐变方向/ background-image: linear-gradient(to right bottom,#7ed56fb4, #28b485a2), url(../img/hero.jpg); / whatever the size of viewpoint, try to fit it (会根据viewpoint的缩放而缩放) / background-size: cover; / 在缩放时候保持image top 部分维持不变 / background-position: top; / polygon 定义留在屏幕上的图片，定义多点坐标 100% 对应图片的width height/ / 正三角形 polygon(50% 0, 100% 100%, 0 100% ) / / Tool: clippy / clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100% ); } 4 Add logo at top left corner .logo-box { / absolute 的参考系是有position 为relative 的parent / position: absolute; top: 40px; left: 40px; }

.logo { / 一般只规定image 的height， browser 会自动计算width / height: 35px; } 5 Center something position: absolute + top + left +transform: translate .text-box { position: absolute; top: 50%; left: 50%; / 这个%只和自己本身element有关，向左shift 50%，再向上shift 50% / transform: translate(-50%, -50%); }

center some text/inline-block text-align: center; //写在parent 里 6 Use animation .heading-primary-main { display: block; font-size: 60px; font-weight: 500; letter-spacing: 35px;

animation-name: moveInLeft; animation-duration: 3s; / animation-delay: 2s; animation-iteration-count: 3; animation-timing-function: ease-out; / }

/ 定义一个animation / @keyframes moveInLeft { / animation 进程百分比 / 0% { / 一开始不可见 fade in / opacity: 0; transform: translateX(-100px); }

80% {
    transform: translateX(10px);
}

100% {
    opacity: 1;
    transform: translate(0);
}

}

7 ::after / ::after work as a child of btn / .btn::after { / content 是必须的，可以传一个空string / content: ""; display: inline-block; / 这里的参考系都是parent 即.btn 的长和宽 / height: 100%; width: 100%;

 border-radius: 100px;

 /* 想把这个：after 样式的button放在原button的正背面; absolute会找到一个最近的parent 有relative 作为reference（btn）*/
 position: absolute;
 top: 0;
 left: 0;
 /* 到此它只是正好叠在了btn的表面，要把它往下放一层， 用zindex */
 z-index: -1;

 /* 给这个tranform规定一个时间 （让：after变大的特效 --> fade out） */
 transition: all .4s;

}

.btn-white::after { background-color: #fff; }

/ 当hover 在btn时，想要apply一些style在：after 上: 让：after变大的特效 --> fade out / .btn:hover::after { / 放大 / transform: scaleX(1.4) scaleY(1.6); / fade out / opacity: 0;

} 8 transform / 放大自己两倍 / transform: scale(2);

/ 这个%只和自己本身element有关，向左shift 50%，再向上shift 50% / transform: translate(-50%, -50%);

jonasschmedtmann / advanced-css-course

Section 1: create header #78