Styling with CSS3 Hands-On Solutions | TCS Fresco Play

Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.

Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).

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

}

}