Styling with CSS3 Fresco Play Hands-On Solutions
Disclaimer: The 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)
Please follow the below steps before Run Tests 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
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;
}
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);
}
}
0 Comments