Styling with CSS3_FP Hands-On Solutions
The Course Id is 55188.
1. Flying Bird
h1 {
font-family: 'comic sans', cursive;
font-size: 25px;
color: black;
}
body,
html {
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
min-height: 30rem;
min-width: 50rem;
background-size: cover;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
background-image: url(bg.jpg);
}
.bird {
background-image: url(bird-cells.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: -0.5s;
}
.bird-container {
top: 20%;
left: -10%;
position: absolute;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 15s;
animation-delay: 0;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
}
@keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}
@keyframes fly-right-one {
0% {
transform: scale(0.3) translateX(-10vw);
}
10% {
transform: translateY(2vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(0vh) translateX(30vw) scale(0.5);
}
30% {
transform: translateY(4vh) translateX(50vw) scale(0.6);
}
40% {
transform: translateY(2vh) translateX(70vw) scale(0.6);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.6);
}
60% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
}
@keyframes fly-right-two {
0% {
transform: translateY(-2vh) translateX(-10vw) scale(0.5);
}
10% {
transform: translateY(0vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(-4vh) translateX(30vw) scale(0.6);
}
30% {
transform: translateY(1vh) translateX(50vw) scale(0.45);
}
40% {
transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.45);
}
51% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
}
2. Menu Bar
.button {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.content {
align-items: center;
display: none;
position: absolute;
justify-content: center;
}
.button:focus,
.button:hover {
background-color: blue;
}
.button:focus+.content {
background-color: gray;
}
3. Scroll Bar
.container ::-webkit-scrollbar {
background-color: #fff;
width: 13px;
}
.container ::-webkit-scrollbar-track {
background-color: green;
border-radius: 10px;
box-shadow: inset;
}
.container::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 10px;
box-shadow: inset;
}
.container {
height: 200px;
width: 300px;
min-width: 150px;
background: #fff;
margin: auto auto auto auto;
overflow-x: scroll;
overflow-y: scroll;
}
.container {
height: 200px;
width: 300px;
min-width: 150px;
background: #fff;
margin: auto auto auto auto;
}
.overflow {
min-width: 350px;
min-height: 250px;
}
3. Morphing Div
shape {
height: 300px;
width: 300px;
background: tomato;
margin: auto auto auto auto;
border: 1px solid black;
animation: colorchange 5s infinite;
}
html {
width: 100%;
height: 100%;
display: flex;
}
body {
display: flex;
margin: auto auto auto auto;
}
@Keyframescolorchange {
0% {
background: red;
}
25% {
background: yellow;
}
50% {
background: blue;
}
75% {
background: green;
}
100% {
background: red;
}
}
@keyframes {
border-radius: 10px;
}
4. Scroll Bar
.container ::-webkit-scrollbar {
background-color: #fff;
width: 13px;
}
.container ::-webkit-scrollbar-track {
background-color: green;
border-radius: 10px;
box-shadow: inset;
}
.container::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 10px;
box-shadow: inset;
}
.container {
height: 200px;
width: 300px;
min-width: 150px;
background: #fff;
margin: auto auto auto auto;
overflow-x: scroll;
overflow-y: scroll;
}
.container {
height: 200px;
width: 300px;
min-width: 150px;
background: #fff;
margin: auto auto auto auto;
}
.overflow {
min-width: 350px;
min-height: 250px;
}
Styling with CSS3_FP Hands-On Solutions
Reviewed by TECH UPDATE
on
October 08, 2022
Rating:
error in line #
ReplyDelete.container ::-webkit-scrollbar-track {
background-color: white;
border-radius: 10px;
box-shadow: inset;
Please update the course 64904
ReplyDelete