CSS | Modern layout design using CSS , top 10 useful css tricks

Cascading Style Sheets (CSS) is the backbone of modern web design, enabling developers and designers to create visually appealing and user-friendly websites. CSS controls the layout, colors, fonts, and overall presentation of a webpage.

1. What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of HTML elements. CSS allows you to control how content appears on various devices and screen sizes, enabling the creation of responsive and visually engaging designs.

Key Features of CSS

Separation of Content and Style: Keeps HTML for structure and CSS for styling, improving maintainability.
Responsive Design: Adapts designs to different screen sizes and resolutions.
Reusability: CSS styles can be reused across multiple web pages.

2. Types of CSS

CSS can be applied to HTML in three ways:

Inline CSS

Styles are applied directly to an HTML element using the style attribute.
Example:

<p style="color: red; font-size: 16px;">This is a red paragraph.</p>

Internal CSS

Styles are defined within the <style> tag in the <head> section of an HTML document.
Example:

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

External CSS

Styles are stored in a separate file and linked to the HTML document using the <link> tag.
Example:

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

3. Top 10 Powerful CSS Tricks

1. Centering with Flexbox

.container {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}

2. Custom Shapes with Clip-Path

div {  
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);  
}

3. Variable Fonts

body {  
  font-variation-settings: "wght" 700;  
}

4. Responsive Typography

html {  
  font-size: clamp(1rem, 2vw, 2rem);  
}

5. Gradient Borders

button {  
  border: 2px solid transparent;  
  background: linear-gradient(to right, red, blue);  
  -webkit-background-clip: text;  
  color: transparent;  
}

6. Text Truncation

p {  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}

7. Sticky Header

header {  
  position: sticky;  
  top: 0;  
  z-index: 1000;  
}

8. Dark Mode Toggle

body {  
  background-color: var(--bg-color);  
}  

.dark-mode {  
  --bg-color: black;  
}

9. Parallax Effect

.background {  
  background-attachment: fixed;  
  background-size: cover;  
}

10. Neumorphism Design

div {  
  box-shadow: 10px 10px 20px #bcbcbc, -10px -10px 20px #ffffff;  
}

4. CSS Selectors

Selectors are patterns used to select and style elements.

1. Basic Selectors

A. Type Selector: Targets elements by their type.

p { color: green; }

B. Class Selector: Targets elements by their class name.

.highlight { background-color: yellow; }

C. ID Selector: Targets a specific element by its ID.

#header { font-size: 24px; }

2. Advanced Selectors

A. Attribute Selector: Selects elements based on attributes

input[type="text"] { border: 1px solid black; }

B. Pseudo-classes: Target elements in a specific state (e.g., :hover, :focus)

a:hover { color: red; }

C. Pseudo-elements: Style parts of elements (e.g., ::before, ::after)

p::first-line { font-weight: bold; }

5. CSS Box Model

The box model is the foundation of layout design in CSS. Every HTML element is considered a rectangular box consisting of:

Content: The inner part where text or elements are displayed.
Padding: Space between the content and the border.
Border: The edge surrounding the padding.
Margin: Space outside the border, separating the element from others.

div {  
  width: 100px;  
  padding: 10px;  
  border: 2px solid black;  
  margin: 20px;  
}

6. Positioning

CSS offers multiple positioning schemes to control how elements are placed:

Static: Default position, follows normal document flow.
Relative: Positioned relative to its normal position.
Absolute: Positioned relative to its nearest positioned ancestor.
Fixed: Positioned relative to the viewport, does not move during scrolling.
Sticky: Toggles between relative and fixed based on scroll position.

7. Responsive Design with Media Queries

Media queries allow CSS to apply styles based on device characteristics like width, height, and orientation.

@media (max-width: 768px) {  
  body { font-size: 14px; }  
}

8. Animation and Transitions

CSS animations and transitions enhance interactivity and visual appeal.

A. Transitions

Transitions smoothly change property values over time.

button {  
  background-color: blue;  
  transition: background-color 0.3s;  
}  

button:hover {  
  background-color: green;  
}

B. Animations

Define animations using @keyframes and apply them with the animation property.

@keyframes slideIn {  
  from { transform: translateX(-100%); }  
  to { transform: translateX(0); }  
}  

div {  
  animation: slideIn 1s ease-in-out;  
}

Check Out Tailwind Component Design

CSS & CSS3