拷贝代码
6:18 - Progress bar code scroll() example
footer::after {
content: "";
height: 1em;
width: 100%;
background: var(--yellow);
left: 0;
bottom: 0;
position: fixed;
transform-origin: top left;
animation: progress-scale linear;
animation-timeline: scroll();
}
@keyframes progress-scale {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
拷贝代码
8:36 - html an css of text blocks showcasing different code topics
What you can learn:
- Web Development
- Computer Science
- Data Science
.topic-item {
background: var(--yellow);
border: 1px solid var(--gray);
/* additional CSS... */
}
拷贝代码
9:12 - text blocks twisting from the left - animation
@keyframes in-from-left {
from {
opacity: 0;
transform: scale(.8) rotate(-90deg)
translateY(15vh);
}
}
拷贝代码
9:18 - text blocks twisting from the middle - animation
@keyframes in-from-middle {
from {
opacity: 0;
transform: scale(.8)
translateY(15vh);
}
拷贝代码
9:24 - text blocks twisting from the right - animation
@keyframes in-from-right {
from {
opacity: 0;
transform: scale(.8) rotate(90deg)
translateY(15vh);
}
}
拷贝代码
10:07 - view() timeline example with timeline and range
.topic-item {
animation-fill-mode: both;
animation-timeline: view();
animation-range:
&:nth-child(3n + 1) { animation-name: in-from-left; }
&:nth-child(3n + 2) { animation-name: in-from-middle; }
&:nth-child(3n + 3) { animation-name: in-from-right; }
}
拷贝代码
12:20 - animation range 50%
.topic-item {
animation-fill-mode: both;
animation-timeline: view();
animation-range: 0% 50%;
&:nth-child(3n + 1) { animation-name: in-from-left; }
&:nth-child(3n + 2) { animation-name: in-from-middle; }
&:nth-child(3n + 3) { animation-name: in-from-right; }
}
拷贝代码
14:20 - simple cross document view transition code
@view-transition {
navigation: auto;
}
拷贝代码
16:00 - adding media query for reduced motion
@view-transition { navigation: auto; }
@media not (prefers-reduced-motion) {
@keyframes slide-in {
from { translate: 100vw 0; }
}
@keyframes slide-out {
to { translate: -100vw 0; }
}
}
拷贝代码
16:22 - adding ids to html for cross document view transition
拷贝代码
16:58 - slide effect for cross document view transition
@view-transition { navigation: auto; }
@media not (prefers-reduced-motion) {
#school-info {
view-transition-name: main-body;
}
::view-transition-old(main-body) {
}
::view-transition-new(main-body) {
}
@keyframes slide-in {
from { translate:e100vw 0; }
}
}
拷贝代码
19:48 - nav bar and profile menu
A-School of Code
- Courses
- Cohorts
-
拷贝代码
20:37 - adding popover attributes
拷贝代码
20:51 - adding aria to popover target
A-School of Code
- Courses
- Cohorts
-
拷贝代码
21:58 - establishing the anchor
.profile-button {
anchor-name: --profile-button;
}
.profile-menu {
position-anchor: --profile-button;
}
拷贝代码
23:25 - setting the target to top right
.profile-menu {
position-anchor: --profile-button;
position-area: top right;
}
拷贝代码
23:39 - setting the target to bottom center
.profile-menu {
position-anchor: --profile-button;
position-area: bottom center;
}
拷贝代码
24:16 - setting the target to span right
.profile-menu {
position-anchor: --profile-button;
position-area: span-right;
}
拷贝代码
24:17 - setting the target to span left
.profile-menu {
position-anchor: --profile-button;
position-area: span-left;
}
拷贝代码
27:30 - intro to the anchor() function
.profile-button {
anchor-name: --profile-button;
}
.profile-menu {
position-anchor: --profile-button;
position: absolute;
top: anchor(bottom);
left: anchor(left);
}
拷贝代码
28:26 - using calc and units in anchor() function
.profile-button {
anchor-name: --profile-button;
}
.profile-menu {
position-anchor: --profile-button;
position: absolute;
top: anchor(bottom);
left: calc(anchor(left) + 1.5em);
}
拷贝代码
29:43 - adding a text gradient
.logo {
background-image: linear-gradient(to
bottom right in hsl,
yellow, orange);
background-clip: text;
color: transparent;
}
拷贝代码
31:05 - adding a gradient to border
.primary-btn {
background-image: linear-gradient(to
bottom right in hsl,
yellow, orange);
background-clip: border-area;
border-color: transparent;
background-origin: border-box;
}
拷贝代码
32:15 - shorthand for adding gradient to border
.primary-btn {
background: border-area linear-gradient(to bottom right in hsl, yellow, orange);
border-color: transparent;
}
拷贝代码
33:33 - arrow shape using path
.review-shape {
clip-path: path("M0 0 L 500 0 L 600
100 L 500 200 L 0
200 Q 100 100 0 0 z");
}
拷贝代码
35:01 - arrow shape using shape()
.review-shape {
clip-path: shape(from top left,
line to calc(100% - 50cqh) 0%,
line to 100% 50cqh,
line to calc(100% - 50cqh) 100%,
line to bottom left,
curve to top left with 50cqh 50cqh,
close);
}
拷贝代码
41:42 - dynamic range limit: no limit
img {
dynamic-range-limit: no-limit;
}
拷贝代码
41:57 - dynamic range limit: standard
img {
dynamic-range-limit: standard;
}