Scribd
Upload
36 views

CSS Part 4 (Ans)

This document provides answers to questions about CSS properties including transitions, transforms, box-shadow, and background images. It includes code snippets demonstrating how to add a transition with delay and easing to width changes, use transforms to move and rotate an element, skew an element along the x-axis, set a box shadow, and make a div semi-transparent with a background image.

Uploaded by

chhavisharma0610
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

CSS Part 4 (Ans)

This document provides answers to questions about CSS properties including transitions, transforms, box-shadow, and background images. It includes code snippets demonstrating how to add a transition with delay and easing to width changes, use transforms to move and rotate an element, skew an element along the x-axis, set a box shadow, and make a div semi-transparent with a background image.

Uploaded by

chhavisharma0610
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS (Part 4)

somya28kinker@gmail.com
Practice Solutions

Answers

/* Qs1. Add a 2s transition on box1 for width changes.


It should have 'ease-in' speed curve & 0.5s delay */

#box1 {
width: 100px;
height: 100px;
background: green;
transition: width 2s ease-in 0.5s;
}

#box1:hover {
width: 600px;
}

/* Qs2. Using transform, move box2 200px to the right &


200px down. Also rotate it 90deg.*/

#box2 {
width: 100px;
height: 100px;
background: red;
transform: translate(200px, 200px) rotate(90deg);
}

somya28kinker@gmail.com
/* Qs3. Using transform, skew box3 20deg along the x axis.*/

#box3 {
width: 100px;
height: 100px;
background: lightblue;
transform: skewX(20deg);
}

/* Qs4. Set a 2px horizontal & 2px vertical, green shadow


for box4, with a 5px blur radius.*/

#box4 {
width: 100px;
height: 100px;
background: lightgreen;
box-shadow: 2px 2px 5px green;
}

/* Qs5. Set Your picture or any picture as the background of


the div
"myPic". Also, set transparency of this div to 50%. */

#myPic {
width: 200px;
height: 200px;

somya28kinker@gmail.com
background: pink;
background-image: url("picture.jpg");
background-size: cover;
opacity: 50%;
}

You might also like