Scribd
Upload
10K 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10K 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
We take content rights seriously. If you suspect this is your content, claim it here.
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