Scribd
Upload
4 views39 pages

CSS Introduction (Casestudy)

The document provides an introduction to Cascading Style Sheets (CSS), detailing its purpose in styling HTML and XML documents. It covers various types of CSS (inline, embedded, and external), positioning elements, the box model, text flow, media queries, and advanced features like gradients and animations. Additionally, it includes practical examples and case studies demonstrating responsive design techniques using CSS.

Uploaded by

Karthikeyini S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views39 pages

CSS Introduction (Casestudy)

The document provides an introduction to Cascading Style Sheets (CSS), detailing its purpose in styling HTML and XML documents. It covers various types of CSS (inline, embedded, and external), positioning elements, the box model, text flow, media queries, and advanced features like gradients and animations. Additionally, it includes practical examples and case studies demonstrating responsive design techniques using CSS.

Uploaded by

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

Introduction to Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a
document written in HTML or XML. CSS defines how elements are displayed on the screen,
paper, or other media. It allows for the separation of content (HTML) from design (CSS),
improving flexibility and control over the layout and appearance of web pages.

Types of CSS
1. Inline Styles

 Inline styles are applied directly to an HTML element using the style attribute.
 It has the highest specificity among the three types of CSS.
 Example:

<p style="color: red; font-size: 16px;">This is an inline styled


paragraph.</p>

✅ Advantages:

 Easy to apply for quick styling changes.


❌ Disadvantages:
 Difficult to maintain and modify because the style is tightly coupled with the HTML
element.

2. Embedded Styles (Internal CSS)

 Embedded styles are defined within a <style> tag inside the <head> section of an
HTML document.
 Used to apply styles to a single document.
 Example:

<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>

✅ Advantages:

 Useful for styling a single HTML document.


❌ Disadvantages:
 Not reusable across multiple pages.
3. External Styles

 External styles are stored in a separate .css file and linked using the <link> tag.
 Recommended for consistent styling across multiple pages.
 Example:

<head>
<link rel="stylesheet" href="styles.css">
</head>

✅ Advantages:

 Centralized styling for easier maintenance.


❌ Disadvantages:
 Requires an extra HTTP request to load the CSS file.

Conflicting Styles
When multiple styles target the same element, CSS follows a hierarchy of specificity:

1. Inline styles (highest specificity)


2. Internal styles
3. External styles
4. Browser default styles (lowest specificity)

👉 The !important keyword can override all other styles:

p {
color: blue !important;
}

Absolute and Relative Positional Elements


1. Relative Positioning

 An element is positioned relative to its normal position.


 Example:

div {
position: relative;
top: 20px;
left: 30px;
}

2. Absolute Positioning
 An element is positioned relative to its nearest positioned ancestor (or the document
body if none exists).
 Example:

div {
position: absolute;
top: 50px;
left: 50px;
}

Backgrounds
 CSS allows you to style the background of elements using:
o Background color
o Background images
o Background repeat and position

body {
background-color: lightgray;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
}

Box Model
Every HTML element is treated as a box with the following parts:

1. Content – The actual content of the element.


2. Padding – The space between the content and the border.
3. Border – The edge of the element.
4. Margin – The space between the element and neighboring elements.

Example:

div {
width: 300px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}

Text Flow
 CSS controls text alignment and direction using properties like:
o text-align
o direction
o white-space Example:
p {
text-align: center;
direction: rtl;
}

Media Types
CSS can apply different styles depending on the media type:

 screen – for computer screens


 print – for printed documents
 speech – for screen readers

Example:

@media print {
body {
font-size: 12pt;
}
}

Media Queries
 Media queries allow you to apply styles based on screen size or device type. Example:

@media (max-width: 600px) {


body {
background-color: lightblue;
}
}

Text Shadows
 Adds shadow effects to text.

h1 {
text-shadow: 2px 2px 5px gray;
}

Rounded Corners
 Creates rounded corners using the border-radius property.

div {
border-radius: 10px;
}
Linear Gradient
 Creates a linear color transition.

div {
background: linear-gradient(to right, red, yellow);
}

Radial Gradient
 Creates a circular color transition.

div {
background: radial-gradient(circle, red, yellow);
}

Image Borders
 Applies an image as a border.

div {
border: 10px solid;
border-image: url('border.png') 30 stretch;
}

Animation
 CSS @keyframes define animations. Example:

@keyframes slide {
from { left: 0px; }
to { left: 200px; }
}

div {
position: relative;
animation: slide 2s;
}

Selectors
1. Universal Selector (*) – Selects all elements
2. Type Selector (h1) – Selects all elements of a type
3. Class Selector (.class) – Selects all elements with a class
4. ID Selector (#id) – Selects a specific element
5. Attribute Selector ([type="text"]) – Selects elements with an attribute
Example:

p {
color: red;
}

#heading {
color: blue;
}

.class-name {
font-size: 18px;
}

Transitions and Transformations


1. Transitions

 Allows smooth changes over time.

div {
width: 100px;
transition: width 2s;
}

div:hover {
width: 300px;
}

2. Transformations

 Allows rotating, scaling, skewing, or translating elements.

div {
transform: rotate(45deg);
}

1. Conflicting Styles
When multiple styles target the same element, CSS resolves conflicts based on specificity
and inheritance.

HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
#title {
color: blue; /* ID selector */
}

.heading {
color: red; /* Class selector */
}
</style>
</head>
<body>

<h1 id="title" class="heading">Conflicting Styles Example</h1>

</body>
</html>

Explanation:

 The element has both an ID selector (#title) and a class selector (.heading).
 ID selectors have higher specificity than class selectors.
 Therefore, the text color will be blue.

Output:

 The heading will appear blue because ID selectors have higher specificity than class
selectors.

2. Absolute and Relative Positional Elements


CSS positioning allows you to place elements relative to their normal position or another
element.

HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
.relative-box {
position: relative;
width: 200px;
height: 100px;
background-color: lightblue;
}

.absolute-box {
position: absolute;
top: 20px;
left: 20px;
background-color: coral;
padding: 10px;
}
</style>
</head>
<body>

<div class="relative-box">
Relative Box
<div class="absolute-box">Absolute Box</div>
</div>

</body>
</html>

Explanation:

 .relative-box is positioned relative to its normal position.


 .absolute-box is positioned relative to the .relative-box.

Output:

 The "Absolute Box" appears inside the Relative Box at an offset of top: 20px and
left: 20px.

3. Backgrounds
You can set background color, images, and positioning using CSS.

HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
.background-box {
width: 300px;
height: 150px;
background-color: lightgray;
background-image: url(https://media.geeksforgeeks.org/wp-
content/cdn-uploads/20190417124305/250.png );
);
background-repeat: no-repeat;
background-position: center;
background-size: content;
}
</style>
</head>
<body>

<div class="background-box"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.background-box {
width: 300px;
height: 150px;
background-color: lightgray;
background-image: url(https://media.geeksforgeeks.org/wp-
content/cdn-uploads/20190417124305/250.png );
);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>

<div class="background-box"></div>

</body>
</html>
Explanation:

 background-color sets a background color.


 background-image sets an image.
 background-size: cover ensures the image covers the whole container.

Output:

 A 300px by 150px box with a background image is shown, filling the entire box.

4. Box Model
CSS box model includes content, padding, border, and margin.
HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
.box-model {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 20px;
background-color: lightgreen;
}
</style>
</head>
<body>

<div class="box-model">Box Model Example</div>

</body>
</html>

Explanation:

 Padding = 20px, Border = 5px, Margin = 20px.


 Total width = 200 + (20 + 20) + (5 + 5) + (20 + 20) = 290px.

Output:
 A green box with a black border and padding appears.

5. Text Flow
CSS can control how text is aligned and displayed.

HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
.text-flow {
text-align: justify;
direction: ltr;
white-space: normal;
}
</style>
</head>
<body>

<p class="text-flow">
This is an example of text flow. The text will wrap and align according
to the CSS rules.
</p>

</body>
</html>

Explanation:

 text-align: justify ensures even alignment.


 direction: rtl sets the text direction from right to left.

Output:

 The text is justified and aligned from left to right

6. Media Queries
CSS can adapt styles based on screen size.

HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: white;
}

@media (max-width: 600px) {


body {
background-color: lightblue;
}
}
</style>
</head>
<body>

<p>Resize the browser window to see the background color change.</p>

</body>
</html>

Explanation:

 Background color changes to light blue when screen size ≤ 600px.

Output:

 The background changes on smaller screens.

7. Text Shadows
You can add shadows to text using text-shadow.

HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px gray;
}
</style>
</head>
<body>

<h1>Text Shadow Example</h1>

</body>
</html>

Explanation:

 2px offset horizontally, 2px offset vertically, 5px blur.

Output:

 Text appears with a gray shadow.

8. Rounded Corners
You can create rounded corners using border-radius.
HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
.rounded {
width: 150px;
height: 150px;
background-color: coral;
border-radius: 15px;
}
</style>
</head>
<body>

<div class="rounded"></div>

</body>
</html>

Output:

 A box with rounded corners.

9. Linear Gradient
CSS supports color gradients.
HTML Example:
<div style="width:200px; height:100px; background: linear-gradient(to
right, red, yellow);"></div>

Output:

 A gradient from red to yellow from left to right.

10. Radial Gradient


You can create circular gradients.

HTML Example:
<div style="width:200px; height:100px; background: radial-gradient(circle,
red, yellow);"></div>

Output:

 A circular gradient from red to yellow.

11. Animation
CSS allows element animation.
HTML Example:
<style>
@keyframes slide {
from { left: 0; }
to { left: 100px; }
}
div {
position: relative;
animation: slide 2s infinite alternate;
}
</style>
<div>Animated Box</div>

Output:

 Box moves left to right.

12. Transition and Transformation


CSS allows smooth transitions and transformations.

HTML Example:
<style>
div {
transition: transform 0.5s;
}
div:hover {
transform: rotate(15deg);
}
</style>
<div>Hover Me!</div>

Output:
 Box rotates when hovered.

Example2
Animation

The @keyframes Rule


When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element.
The animation will last for 4 seconds, and it will gradually change the
background-color of the <div> element from "red" to "yellow":
Case study for CSS

1. You are designing a responsive e-commerce website. On mobile devices (width less than
600px), the sidebar overlaps the product grid. On tablets (width between 600px and 900px),
the product cards appear too small. The layout works fine on desktops. Write CSS media
queries to solve these layout issues and explain how media queries help in building
responsive websites.

✅ CSS Code for Responsive E-commerce Website


The goal is to fix the following issues using CSS media queries:
✔️On mobile devices (width less than 600px), the sidebar overlaps the product grid.
✔️On tablets (width between 600px and 900px), the product cards appear too small.
✔️The layout works fine on desktops.

🖥️HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Responsive E-Commerce</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="container">
<!-- Sidebar -->
<div class="sidebar">
<h2>Sidebar</h2>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
</div>

<!-- Product Grid -->


<div class="product-grid">
<div class="product-card">Product 1</div>
<div class="product-card">Product 2</div>
<div class="product-card">Product 3</div>
<div class="product-card">Product 4</div>
<div class="product-card">Product 5</div>
<div class="product-card">Product 6</div>
</div>
</div>

</body>
</html>

🎨 CSS Code
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
display: flex;
gap: 20px;
padding: 20px;
}

/* Sidebar Styling */
.sidebar {
width: 250px;
background-color: #f4f4f4;
padding: 20px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* Product Grid Styling */


.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
flex-grow: 1;
}

.product-card {
background-color: #e0e0e0;
padding: 20px;
text-align: center;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.product-card:hover {
transform: scale(1.05);
}

/* ✅ Mobile Devices (Width Less than 600px) */


@media (max-width: 600px) {
.container {
flex-direction: column; /* Stack sidebar and grid vertically */
}
.sidebar {
width: 100%; /* Take full width */
margin-bottom: 20px; /* Add spacing */
}

.product-grid {
grid-template-columns: repeat(1, 1fr); /* Single column */
}
}

/* ✅ Tablets (Width Between 600px and 900px) */


@media (min-width: 600px) and (max-width: 900px) {
.product-grid {
grid-template-columns: repeat(2, 1fr); /* Two columns */
}
}

/* ✅ Desktops (Width Greater than 900px) */


@media (min-width: 900px) {
.product-grid {
grid-template-columns: repeat(3, 1fr); /* Three columns */
}
}

📌 Explanation of Code
✅ 1. General Styles

 The container uses flexbox to arrange the sidebar and product grid side by side.
 The gap property provides spacing between elements.
 box-shadow, border-radius, and hover effects improve the overall styling.

✅ 2. Mobile Devices – max-width: 600px

@media (max-width: 600px) {


.container {
flex-direction: column;
}

.sidebar {
width: 100%;
margin-bottom: 20px;
}

.product-grid {
grid-template-columns: repeat(1, 1fr);
}
}
Explanation

1. @media (max-width: 600px)


 This is a media query that sets up a condition:
➔ The styles inside this block will only apply if the viewport width is 600px or less
(i.e., for small screens like smartphones).
 max-width: 600px means the styles will take effect only when the screen size is
600 pixels or narrower.

2. .container { flex-direction: column; }

 .container is a CSS class selector targeting an element with the class name
container.
 flex-direction: column changes the layout direction of a flex container to be
vertical:
➔ The child elements of .container will now be stacked vertically instead of
horizontally.

Example: If the .container initially had a flex-direction: row, switching to column


will make the items appear one below the other instead of side-by-side.

3. .sidebar { width: 100%; margin-bottom: 20px; }

 .sidebar is another CSS class selector targeting an element with the class name
sidebar.
 width: 100% makes the sidebar take up the full width of the screen.
 margin-bottom: 20px adds 20 pixels of space below the sidebar, creating a gap
between it and the next element.

Effect:
The sidebar will stretch to fill the screen width and leave a gap below it.

4. .product-grid { grid-template-columns: repeat(1, 1fr); }

 .product-grid targets an element styled as a CSS grid.


 grid-template-columns: repeat(1, 1fr) sets up the grid layout to have one
column:
➔ repeat(1, 1fr) means "create 1 column" where 1fr means "one fraction of
available space."

Effect:
Products in the grid will stack vertically into a single column.
✅ 3. Tablets – min-width: 600px and max-width: 900px

@media (min-width: 600px) and (max-width: 900px) {


.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}

. @media (min-width: 600px) and (max-width: 900px)

 This is a media query that sets up a condition:


➔ The styles inside this block will apply only if the viewport width is between 600px
and 900px (inclusive).

✅ min-width: 600px ➔ The styles apply when the screen size is 600 pixels or wider.
✅ max-width: 900px ➔ The styles apply when the screen size is 900 pixels or narrower.

👉 This means the styles will apply for devices like tablets (in portrait or landscape mode) or
small laptop screens.

2. .product-grid { grid-template-columns: repeat(2, 1fr); }

 .product-grid targets an element styled as a CSS grid.


 grid-template-columns: repeat(2, 1fr) sets up the grid layout to have two
equal columns:
➔ repeat(2, 1fr) means "create 2 columns" where each column takes up 1
fraction (1fr) of the available space.

✅ 4. Desktops – min-width: 900px

@media (min-width: 900px) {


.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}

👉 Solution:
✔️On desktops, product cards are displayed in three columns.
✔️Utilizes available screen space for better organization.
🌟 Output Description
1. On Desktop:

 Sidebar is aligned on the left.


 Product grid displays in three columns.

2. On Tablet (600px - 900px):

 Sidebar remains aligned to the left.


 Product grid switches to two columns.

3. On Mobile (less than 600px):

 Sidebar and product grid are stacked vertically.


 Product grid switches to single column for better readability.

2. You are designing a login form for a website. When a user focuses on an input
field, it should slightly rotate and scale using transformations, and the Submit
button should smoothly change its background color on hover using
transitions. Write the CSS code using appropriate selectors, transitions, and
transformations to achieve this. Also, explain how these properties enhance
the interactivity and user experience of a web page.

Login Form with Transitions and Transformations


In this example, we will create a login form with the following interactive effects:
✔️When the user focuses on an input field, it will rotate and scale using CSS transformations.
✔️The Submit button will smoothly change its background color on hover using CSS transitions.

🖥️HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Interactive Login Form</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="login-container">
<h2>Login</h2>
<form action="#">
<input type="text" class="input-field" placeholder="Username"
required />
<input type="password" class="input-field" placeholder="Password"
required />
<button type="submit" class="submit-btn">Login</button>
</form>
</div>

</body>
</html>

🎨 CSS Code
/* ================= General Styles ================= */

body {

font-family: Arial, sans-serif;

background-color: #f4f4f9;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

/* ================= Login Container ================= */

.login-container {
background-color: #ffffff;

padding: 40px;

border-radius: 12px;

box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

width: 320px;

text-align: center;

/* ================= Heading ================= */

h2 {

color: #333;

margin-bottom: 20px;

font-size: 24px;

font-weight: 600;

/* ================= Input Fields ================= */

.input-field {

width: 100%;

padding: 12px;

margin-bottom: 16px;

border: 1px solid #ccc;

border-radius: 8px;

box-sizing: border-box;

font-size: 16px;

transition: transform 0.2s ease, box-shadow 0.2s ease;

}
/* ✅ Transformation on Focus */

.input-field:focus {

outline: none;

transform: scale(1.03);

box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);

border-color: #4CAF50; /* Highlight border color */

/* ✅ Hover Effect for Better Feedback */

.input-field:hover {

border-color: #4CAF50;

Explanation

1. .input-field:focus
.input-field:focus {
outline: none;
transform: scale(1.03);
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
border-color: #4CAF50; /* Highlight border color */
}

✅ Purpose:

 The :focus pseudo-class is triggered when the user clicks or tabs into an input field
(when it gains focus).
 This helps give the user visual feedback that the input is active and ready for typing.

✅ Step-by-Step Explanation:

Property Purpose
outline: none;
Removes the default browser outline around the input
field (to apply custom styling).
transform: scale(1.03);
Scales the input field by 3% to make it slightly larger
and more prominent.
box-shadow: 0px 4px 12px Adds a shadow effect to give the input field a raised,
rgba(0, 0, 0, 0.15); 3D look.
border-color: #4CAF50;
Changes the border color to green to highlight the
focused state.
➡️Example:

👉 When the user clicks on the input field:

 The field slightly enlarges (scale(1.03))


 A soft shadow appears (box-shadow)
 The border turns green (border-color)

This makes the input field more noticeable and user-friendly.

2. .input-field:hover
.input-field:hover {
border-color: #4CAF50;
}

✅ Purpose:

 The :hover pseudo-class is triggered when the user moves the mouse pointer over the
input field.
 It provides visual feedback to signal that the field is interactive.

✅ Step-by-Step Explanation:

Property Purpose
border-color: Changes the border color to green when the user hovers over the
#4CAF50; field.

➡️Example:

👉 When the user hovers over the input field:

 The green border color appears, signaling that the field is interactive and ready for
input.

/* ================= Submit Button ================= */

.submit-btn {

width: 100%;

padding: 12px;
background-color: #4CAF50;

color: white;

border: none;

border-radius: 8px;

font-size: 16px;

font-weight: 500;

cursor: pointer;

transition: background-color 0.3s ease, transform 0.1s ease;

/* ✅ Transition on Hover */

.submit-btn:hover {

background-color: #45a049;

/* ✅ Animation on Click */

.submit-btn:active {

transform: scale(0.95);

/* ✅ Disabled State for Better UX */

.submit-btn:disabled {

background-color: #ccc;

cursor: not-allowed;

Explanation

1. .submit-btn:active
.submit-btn:active {
transform: scale(0.95);
}

✅ Purpose:

 The :active pseudo-class is triggered when the user clicks and holds down the submit
button.
 It gives the user immediate visual feedback that the button is being pressed.

✅ Step-by-Step Explanation:

Property Purpose

transform: Reduces the button size by 5% when clicked to simulate a "pressing


scale(0.95); down" effect.

➡️Example:

👉 When the user clicks the button:


✔️The button shrinks slightly, creating a "pressed" effect.
✔️The effect gives a more tactile feel, improving interaction feedback.

🔎 Why scale(0.95) Works:

 Reducing the size by 5% creates a subtle but noticeable effect.


 It simulates a real-world button press, improving the natural feel of the UI.

2. .submit-btn:disabled
.submit-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}

✅ Purpose:

 The :disabled pseudo-class targets the button when it’s in a disabled state.
 A disabled button usually means that the form is incomplete or not ready for submission.

✅ Step-by-Step Explanation:
Property Purpose

background-color:
#ccc;
Changes the background to light gray to signal that the button is inactive.

Changes the mouse pointer to a "🚫 not-allowed" symbol, reinforcing that


cursor: not-allowed;
the button is inactive.

📌 Explanation of Code
✅ 1. General Styles
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
✔️Centers the form vertically and horizontally using flexbox.
✔️Sets a light gray background color to make the form stand out.

✅ 2. Login Container
.login-container {
background-color: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
width: 320px;
text-align: center;
}

✔️The login form is given a clean, modern look with rounded corners and a subtle shadow.
✔️The container width is fixed to 320px to maintain consistency across screen sizes.

✅ 3. Input Fields
.input-field {
width: 100%;
padding: 12px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

✔️transition applies a smooth effect to changes in transform and box-shadow properties.


✔️box-sizing: border-box ensures padding and border are included in the element's total
width and height.

✅ 4. Transformation on Focus
.input-field:focus {
outline: none;
transform: scale(1.05) rotate(2deg);
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}

✔️transform: scale(1.05) increases size by 5%.


✔️rotate(2deg) rotates the element slightly to add an interactive feel.
✔️box-shadow creates a depth effect.
👉 Effect: The input field appears to "pop out" and rotate slightly when focused.

✅ 5. Submit Button
.submit-btn {
width: 100%;
padding: 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

✔️transition creates a smooth color transition on hover.


✔️cursor: pointer changes the cursor to a hand symbol to indicate clickability.

✅ 6. Transition on Hover
.submit-btn:hover {
background-color: #45a049;
}

✔️The background color darkens slightly on hover to provide visual feedback.

✅ 7. Animation on Click
.submit-btn:active {
transform: scale(0.95);
}

✔️The button slightly shrinks when clicked to create a tactile feel.

🚀 How Transitions and Transformations Improve UX


✅ Transforms make interactions feel more dynamic and engaging.
✅ Transitions provide a smooth, natural feel to state changes (e.g., hover and click).
✅ Visually responsive elements increase user engagement and improve navigation clarity.
✅ Better responsiveness and feedback increase user confidence and satisfaction.
🌟 Output Description
Initial State:

 Login form appears centered with a clean and modern look.

On Focus:

 Input field increases size by 5% and rotates slightly.


 A soft shadow appears around the input field.

On Hover:

 The submit button’s background color darkens smoothly.

On Click:

 The button slightly shrinks, giving a "pressed" effect.

🎯 Why This Code is Effective


✔️Clean and modern design.
✔️Smooth transitions and responsive feedback.
✔️Enhances user interaction and usability.

👉 Copy and run this code — you'll love how interactive it feels! 😎

You might also like