{"id":609,"date":"2022-03-15T04:17:43","date_gmt":"2022-03-15T04:17:43","guid":{"rendered":"https:\/\/emorah.com\/story\/?p=609"},"modified":"2022-03-17T22:04:23","modified_gmt":"2022-03-17T22:04:23","slug":"styling-with-css3-fresco-play-hands-on-solutions","status":"publish","type":"post","link":"https:\/\/emorah.com\/story\/fresco-play\/styling-with-css3-fresco-play-hands-on-solutions\/","title":{"rendered":"Styling with CSS3 Fresco Play Hands-On Solutions"},"content":{"rendered":"\n

Styling with CSS3 Fresco Play Hands-On Solutions<\/p>\n\n\n\n

Disclaimer:\u00a0The main motive to provide this solution is to help and support those who are unable to do these courses due to facing some issue and having a little bit lack of knowledge. All of the material and information contained on this website is for knowledge and education purposes only.Try to understand these solutions and solve your Hands-On problems. (Not encourage copy and paste these solutions)<\/strong><\/p>\n\n\n\n

Please follow the below steps before Run Tests<\/strong> to run your code successfully otherwise you will face some server issues even Hands-On code is correct.
Step 1: Run->InstallStep 2: Run->RunStep 3: Run Tests<\/p>\n\n\n\n

1.CSS3 HandsOn – Morphing Div(30 Min)<\/strong><\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

File Name: styles.css<\/strong><\/p>\n\n\n\n

#shape {<\/p>\n\n\n\n

height: 300px;<\/p>\n\n\n\n

width: 300px;<\/p>\n\n\n\n

margin: autoautoautoauto;<\/p>\n\n\n\n

background: tomato;<\/p>\n\n\n\n

border: 1pxsolidblack;<\/p>\n\n\n\n

animation: colorchange5sinfinite;<\/strong><\/p>\n\n\n\n

animation-duration: 5s;<\/strong><\/p>\n\n\n\n

animation-timing-function: ease-in-out;<\/strong><\/p>\n\n\n\n

animation-delay: 0;<\/strong><\/p>\n\n\n\n

animation-duration: alternate;<\/strong><\/p>\n\n\n\n

animation-iteration-count: infinite;<\/strong><\/p>\n\n\n\n

animation-fill-mode: none;<\/strong><\/p>\n\n\n\n

animation-play-state: running;<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

@keyframes colorchange5sinfinite {<\/strong><\/p>\n\n\n\n

0% {<\/strong><\/p>\n\n\n\n

background: red;<\/strong><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

25% {<\/strong><\/p>\n\n\n\n

background: yellow;<\/strong><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

50% {<\/strong><\/p>\n\n\n\n

background: blue;<\/strong><\/p>\n\n\n\n

border-radius: 50%;<\/strong><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

75% {<\/strong><\/p>\n\n\n\n

background: green;<\/strong><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

100% {<\/strong><\/p>\n\n\n\n

background: red;<\/strong><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

html{<\/p>\n\n\n\n

width: 100%;<\/p>\n\n\n\n

height: 100%;<\/p>\n\n\n\n

display: flex;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

body{<\/p>\n\n\n\n

display: flex;<\/p>\n\n\n\n

margin: auto auto auto auto;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

2.CSS3 HandsOn – Scroll Bar(30 Min)<\/strong><\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

File Name: <\/strong>styles.css<\/strong><\/p>\n\n\n\n

.container::-webkit-scrollbar {<\/p>\n\n\n\n

background-color:#fff;<\/p>\n\n\n\n

width:13px<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.container::-webkit-scrollbar-track {<\/p>\n\n\n\n

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);<\/strong><\/p>\n\n\n\n

background-color: #F5F5F5;<\/strong><\/p>\n\n\n\n

border-radius: 10px;<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

.container::-webkit-scrollbar-thumb {<\/p>\n\n\n\n

border-radius: 10px;<\/strong><\/p>\n\n\n\n

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);<\/strong><\/p>\n\n\n\n

background-color: #55;<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

.container {<\/p>\n\n\n\n

height: 200px;<\/p>\n\n\n\n

width: 300px;<\/p>\n\n\n\n

min-width: 150px;<\/p>\n\n\n\n

background: #fff;<\/p>\n\n\n\n

margin: auto auto auto auto;<\/p>\n\n\n\n

overflow-y: scroll;<\/strong><\/p>\n\n\n\n

overflow-x: scroll;<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

.overflow{<\/p>\n\n\n\n

min-width: 350px;<\/p>\n\n\n\n

min-height:250px;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

html{<\/p>\n\n\n\n

width: 100%;<\/p>\n\n\n\n

height: 100%;<\/p>\n\n\n\n

display: flex;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

body{<\/p>\n\n\n\n

display: flex;<\/p>\n\n\n\n

margin: auto auto auto auto;<\/p>\n\n\n\n

font-size:22px;<\/p>\n\n\n\n

font-weight:600;<\/p>\n\n\n\n

font-family: comic sans ms;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

3.CSS3 HandsOn – Menu Bar(30 Min)<\/strong><\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

File Name: <\/strong>styles.css<\/strong><\/p>\n\n\n\n

.menu {<\/p>\n\n\n\n

height: 24%;<\/p>\n\n\n\n

width: 600px;<\/p>\n\n\n\n

margin: auto;<\/p>\n\n\n\n

border: 1px solid RGBA(0,0,0,.4);<\/p>\n\n\n\n

font-family: calibri, monospace;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.button{<\/p>\n\n\n\n

width: 150px;<\/p>\n\n\n\n

height: 32%;<\/p>\n\n\n\n

background: #333;<\/p>\n\n\n\n

border:1px solid white;<\/p>\n\n\n\n

color: #e7e7e7;<\/p>\n\n\n\n

font-weight: 600;<\/p>\n\n\n\n

display: flex;<\/strong><\/p>\n\n\n\n

cursor:pointer;<\/strong><\/p>\n\n\n\n

align-items:center;<\/strong><\/p>\n\n\n\n

justify-content:center;<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

.button:focus, .button:hover {<\/strong><\/p>\n\n\n\n

background: blue;<\/strong><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

.button:focus + .content{<\/strong><\/p>\n\n\n\n

display: block;<\/strong><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

.content{<\/p>\n\n\n\n

background: #f3f3f3;<\/p>\n\n\n\n

width: 440px;<\/p>\n\n\n\n

height: 23%;<\/p>\n\n\n\n

margin-left: 155px;<\/p>\n\n\n\n

border: 1px solid #e7e7e7<\/p>\n\n\n\n

display: none;<\/strong><\/p>\n\n\n\n

position:absolute;<\/strong><\/p>\n\n\n\n

align-items:center;<\/strong><\/p>\n\n\n\n

justify-content:center;<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

html{<\/p>\n\n\n\n

width: 100%;<\/p>\n\n\n\n

height: 100%;<\/p>\n\n\n\n

display: flex;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

body{<\/p>\n\n\n\n

display: flex;<\/p>\n\n\n\n

margin: auto;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

4.CSS3 HandsOn – Flying Bird<\/strong><\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

File Name: <\/strong>styles.css<\/strong><\/p>\n\n\n\n

h1 {<\/p>\n\n\n\n

font-family: ‘comic sans’, cursive;<\/p>\n\n\n\n

font-size: 25px;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

body,html{<\/p>\n\n\n\n

min-width:100%;<\/p>\n\n\n\n

min-height:100%;<\/p>\n\n\n\n

display: flex;<\/p>\n\n\n\n

align-items: center;<\/p>\n\n\n\n

justify-content: center;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.container {<\/p>\n\n\n\n

min-height: 30rem;<\/p>\n\n\n\n

min-width:50rem;<\/p>\n\n\n\n

background-size: cover;<\/p>\n\n\n\n

background-position: center center;<\/p>\n\n\n\n

overflow:hidden;<\/p>\n\n\n\n

position:relative;<\/p>\n\n\n\n

display:flex;<\/strong><\/p>\n\n\n\n

align-items:center;<\/strong><\/p>\n\n\n\n

justify-content:center;<\/strong><\/p>\n\n\n\n

background-image:url(.*bg.jpg.*);<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

.bird {<\/p>\n\n\n\n

background-size: auto 100%;<\/p>\n\n\n\n

width: 88px;<\/p>\n\n\n\n

height: 125px;<\/p>\n\n\n\n

animation-timing-function: steps(10);<\/p>\n\n\n\n

animation-iteration-count: infinite;<\/p>\n\n\n\n

animation-duration: 1s;<\/p>\n\n\n\n

animation-delay: -0.5s;<\/p>\n\n\n\n

background-image:url(.*bird-cells.svg.*);<\/strong><\/p>\n\n\n\n

will-change:background-position;<\/strong><\/p>\n\n\n\n

animation-name:fly-cycle;<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

.bird-container {<\/p>\n\n\n\n

top: 20%;<\/p>\n\n\n\n

left: -10%;<\/p>\n\n\n\n

animation-timing-function: linear;<\/p>\n\n\n\n

animation-iteration-count: infinite;<\/p>\n\n\n\n

animation-duration: 15s;<\/p>\n\n\n\n

animation-delay: 0;<\/p>\n\n\n\n

position:absolute;<\/strong><\/p>\n\n\n\n

will-change:transform;<\/strong><\/p>\n\n\n\n

transform:scale(.*)translateX(.*);<\/strong><\/p>\n\n\n\n

animation-name:fly-right-one;<\/strong><\/p>\n\n\n\n

}<\/p>\n\n\n\n

@keyframes fly-cycle {<\/p>\n\n\n\n

100% {<\/p>\n\n\n\n

background-position: -900px 0;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

@keyframes fly-right-one {<\/p>\n\n\n\n

0% {<\/p>\n\n\n\n

transform: scale(0.3) translateX(-10vw);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

10% {<\/p>\n\n\n\n

transform: translateY(2vh) translateX(10vw) scale(0.4);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

20% {<\/p>\n\n\n\n

transform: translateY(0vh) translateX(30vw) scale(0.5);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

30% {<\/p>\n\n\n\n

transform: translateY(4vh) translateX(50vw) scale(0.6);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

40% {<\/p>\n\n\n\n

transform: translateY(2vh) translateX(70vw) scale(0.6);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

50% {<\/p>\n\n\n\n

transform: translateY(0vh) translateX(90vw) scale(0.6);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

60% {<\/p>\n\n\n\n

transform: translateY(0vh) translateX(110vw) scale(0.6);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

100% {<\/p>\n\n\n\n

transform: translateY(0vh) translateX(110vw) scale(0.6);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

@keyframes fly-right-two {<\/p>\n\n\n\n

0% {<\/p>\n\n\n\n

transform: translateY(-2vh) translateX(-10vw) scale(0.5);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

10% {<\/p>\n\n\n\n

transform: translateY(0vh) translateX(10vw) scale(0.4);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

20% {<\/p>\n\n\n\n

transform: translateY(-4vh) translateX(30vw) scale(0.6);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

30% {<\/p>\n\n\n\n

transform: translateY(1vh) translateX(50vw) scale(0.45);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

40% {<\/p>\n\n\n\n

transform: translateY(-2.5vh) translateX(70vw) scale(0.5);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

50% {<\/p>\n\n\n\n

transform: translateY(0vh) translateX(90vw) scale(0.45);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

51% {<\/p>\n\n\n\n

transform: translateY(0vh) translateX(110vw) scale(0.45);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

100% {<\/p>\n\n\n\n

transform: translateY(0vh) translateX(110vw) scale(0.45);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

}<\/p>\n","protected":false},"excerpt":{"rendered":"

Styling with CSS3 Fresco Play Hands-On Solutions Disclaimer:\u00a0The main motive to provide this solution is to help and support those who are unable to do these courses due to facing some issue and having a little bit lack of knowledge. All of the material and information contained on this website […]<\/p>\n","protected":false},"author":3,"featured_media":611,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":""},"categories":[156],"tags":[],"_links":{"self":[{"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/posts\/609"}],"collection":[{"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/comments?post=609"}],"version-history":[{"count":2,"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/posts\/609\/revisions"}],"predecessor-version":[{"id":615,"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/posts\/609\/revisions\/615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/media\/611"}],"wp:attachment":[{"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/media?parent=609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/categories?post=609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emorah.com\/story\/wp-json\/wp\/v2\/tags?post=609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}