Styling with CSS3 Fresco Play Hands-On Solutions
Course Path: Modern Web Development/WEB BASICS/Styling with CSS3
1.CSS3 HandsOn - Morphing Div(30 Min)
File Name: styles.css
#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;
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;
}
}
html{
width: 100%;
height: 100%;
display: flex;
}
body{
display: flex;
margin: auto auto auto auto;
}
- List of Fresco Play Courses without Hands-On | Fresco Play
- HMTL5 Semantics Elements MCQs Answers | Fresco Play
- HMTL5 Semantics Elements Hands-On Solutions | Fresco Play
- Styling with CSS3 Hands-On Solutions | Fresco Play
- Blockchain Intermedio MCQs Answers | Fresco Play
- Blockchain - Potentes Nexus MCQs Answers | Fresco Play
- Azure Essentials MCQs Answers | Fresco Play
- AWS Essentials MCQs Answers | Fresco Play
- Drupal - A Content Vault Fresco Play MCQs Answers
2.CSS3 HandsOn - Scroll Bar(30 Min)
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;
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)
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%;
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;
align-items:center;
justify-content:center;
}
html{
width: 100%;
height: 100%;
display: flex;
}
body{
display: flex;
margin: auto;
}
4.CSS3 HandsOn - Flying Bird
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;
}
.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;
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);
}
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);
}
}
If you want answers to any of the Fresco Play courses feel free to ask in the comment section, we will surely help.
#Miniproject - Java Complete Beginner (Fresco Play Course)
ReplyDeleteNeed hands on for Python Qualis
ReplyDeleteIt is uploaded now you can check.
DeleteError in flying bird code
ReplyDeleteWhat error you are getting can you please specify.
DeleteGetting error
ReplyDeleteCan't find run before running test cases
Have you follow this pre-steps before RUN TESTS
DeleteStep 1: Run->Install
Step 2: Run->Run
Step 3: Run Tests
code not working in flying bird
ReplyDeleteWhat error you are getting can you please specify. Also you can mail error screenshot to notesbureau2021@gmail.com
DeleteSelenium hands on answers
ReplyDeleteSelenium MCQs as well as Handson are uploaded. Please Check. Or you can click selenium in category tab to get directly.
DeletePost a Comment
Any comments and suggestion will be appreciated.