Scribd
Upload
9K views

CSS3 Hands-On &MCQ

The document contains CSS code examples for morphing a div, customizing scroll bars, creating a menu bar, and animating a flying bird. The div morphs colors and shape over 5 seconds using keyframe animations. The scroll bar styles customize its color, width and track. The menu bar example creates buttons that show/hide dropdown content on hover/focus. The flying bird animation positions two bird sprites and scales/moves them across the screen using transform and keyframe animations to simulate flapping flight.

Uploaded by

Stark
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9K views

CSS3 Hands-On &MCQ

The document contains CSS code examples for morphing a div, customizing scroll bars, creating a menu bar, and animating a flying bird. The div morphs colors and shape over 5 seconds using keyframe animations. The scroll bar styles customize its color, width and track. The menu bar example creates buttons that show/hide dropdown content on hover/focus. The flying bird animation positions two bird sprites and scales/moves them across the screen using transform and keyframe animations to simulate flapping flight.

Uploaded by

Stark
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.

html

1.CSS3 HandsOn - Morphing Div(30 Min)

#shape {

height: 300px;

width: 300px;

margin: autoautoautoauto;

background: tomato;

border: 1pxsolidblack;

animation: colorchange5sinfinite;

animation-duration: 5s;

animation-timing-function: ease-in-out;

animation-delay: 0;
https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

animation-duration: alternate;

animation-iteration-count: infinite;

animation-fill-mode: none;

animation-play-state: running;

@keyframes colorchange5sinfinite {

0% {

background: red;

25% {

background: yellow;

50% {

background: blue;

border-radius: 50%;

75% {

background: green;

100% {

background: red;

}
https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

html{

width: 100%;

height: 100%;

display: flex;

body{

display: flex;

margin: auto auto auto auto;

2.CSS3 HandsOn - Scroll Bar(30 Min)


https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

File Name: styles.css

.container::-webkit-scrollbar {

background-color:#fff;

width:13px

.container::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);

background-color: #F5F5F5;

border-radius: 10px;

.container::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: #55;

.container {

height: 200px;

width: 300px;

min-width: 150px;

background: #fff;

margin: auto auto auto auto;


https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

overflow-y: scroll;

overflow-x: scroll;

.overflow{

min-width: 350px;

min-height:250px;

html{

width: 100%;

height: 100%;

display: flex;

body{

display: flex;

margin: auto auto auto auto;

font-size:22px;

font-weight:600;

font-family: comic sans ms;

3.CSS3 HandsOn - Menu Bar(30 Min)


https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

File Name: styles.css

.menu {

height: 24%;

width: 600px;

margin: auto;

border: 1px solid RGBA(0,0,0,.4);

font-family: calibri, monospace;

.button{

width: 150px;

height: 32%;
https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

background: #333;

border:1px solid white;

color: #e7e7e7;

font-weight: 600;

display: flex;

cursor:pointer;

align-items:center;

justify-content:center;

.button:focus, .button:hover {

background: blue;

.button:focus + .content{

display: block;

.content{

background: #f3f3f3;

width: 440px;

height: 23%;

margin-left: 155px;

border: 1px solid #e7e7e7

display: none;

position:absolute;
https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

align-items:center;

justify-content:center;

html{

width: 100%;

height: 100%;

display: flex;

body{

display: flex;

margin: auto;

4.CSS3 HandsOn - Flying Bird


https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

File Name: styles.css

h1 {

font-family: 'comic sans', cursive;

font-size: 25px;

body,html{

min-width:100%;

min-height:100%;

display: flex;

align-items: center;

justify-content: center;
https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

.container {

min-height: 30rem;

min-width:50rem;

background-size: cover;

background-position: center center;

overflow:hidden;

position:relative;

display:flex;

align-items:center;

justify-content:center;

background-image:url(.*bg.jpg.*);

.bird {

background-size: auto 100%;

width: 88px;

height: 125px;

animation-timing-function: steps(10);

animation-iteration-count: infinite;

animation-duration: 1s;

animation-delay: -0.5s;

background-image:url(.*bird-cells.svg.*);

will-change:background-position;
https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

animation-name:fly-cycle;

.bird-container {

top: 20%;

left: -10%;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-duration: 15s;

animation-delay: 0;

position:absolute;

will-change:transform;

transform:scale(.*)translateX(.*);

animation-name:fly-right-one;

@keyframes fly-cycle {

100% {

background-position: -900px 0;

@keyframes fly-right-one {

0% {

transform: scale(0.3) translateX(-10vw);

}
https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

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 {
https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

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);


https://www.notesbureau.com/2021/07/styling-with-css3-fresco-play-mcqs_5.html

You might also like