Styling with CSS3 Hands-On Solutions

What is CSS?

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

CSS Example

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS3 Hands-On Example:-

Course Path: Modern Web Development/WEB BASICS/Styling with CSS3
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)

Problem:

Create a Morphing div as shown in the below image. A div like a square and morphis shape to become a circle while chanding colors.

Solution :

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;

}

Click here to read HTML CSS interview questions and Answers

2.CSS3 HandsOn – Scroll Bar(30 Min)

Problem:- Create a CSS scroll Bar as shown in the image below. Please try to recreate the same thing as visually similar as possible.

Solution:-

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;

}

Read our other blogs

3.CSS3 HandsOn – Menu Bar(30 Min)

Porblem:- Create a CSS Menu bar as shown in the image below.

Solution:-

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

Problem:- Create a CSS animation to make a flying bird effect as shown in below gif.

Solution

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

}

}

SAP S/4HANA Master Data Concepts Questions & Answers
SAP S/4HANA Functional Capabilities 1909 Questions & Answer
SAP S/4HANA Technical Capabilities 1909 Questions & Answers
SAP Implementation S/4HANA Project Management Questions & Answers
SAP S/4 HANA Enterprise Management – Sales Questions Answers
SAP S/4HANA Key Concepts Overview Questions & Answers
SAP S/4HANA Enterprise Structure Questions & Answer
SAP S/4HANA Reporting and Analytics Questions & Answers
SAP S/4HANA Navigation Interview Questions and Answers
SAP S/4HANA Awareness 1909 Questions and Answers

About Author


After years of Technical Work, I feel like an expert when it comes to Develop wordpress website. Check out How to Create a Wordpress Website in 5 Mins, and Earn Money Online Follow me on Facebook for all the latest updates.

Leave a Comment