Happy Sunday! ☺️

Here are some useful CSS Tricks for Frontend Developers 👩‍💻
All examples shown here.

0️⃣Sticky Footer
Ensure your footer sticks to the bottom of the page, even if the content is short.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

1️⃣Custom Scrollbars
Style your scrollbars to match your site design using the ::-webkit-scrollbar pseudo-element.

::-webkit-scrollbar {
  width: 20px;
}

2️⃣Text Stroke
Create outlined text using -webkit-text-stroke.

h1 {
  -webkit-text-stroke: 2px black;
  color: white;
}

3️⃣Viewport Units for Typography
Scale text size based on the viewport using vw units.

h1 {
  font-size: 10vw;
}

4️⃣CSS Grid Auto-Placement
Control the automatic placement of grid items with grid-auto-flow.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-flow: dense;
}

5️⃣Aspect Ratio Box
Maintain aspect ratio with the padding trick.

.aspect-ratio-box {
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  position: relative;
}

6️⃣Clip-Path for Custom Shapes
Create custom shapes using clip-path.

.clip-path {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  /* triabgle */
  background: red;
  width: 100px;
  height: 100px;
}

7️⃣CSS Variables with JavaScript
Dynamically change CSS variables using JavaScript.

:root {
  --main-color: #3498db;
}

function changeCssVar() {
  document.documentElement.style.setProperty('--main-color', '#e74c3c');
}

8️⃣Object-Fit for Images and Videos
Control how media fits within a container using object-fit.

img, video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

9️⃣CSS Counters
Create custom counters with counter-reset and counter-increment.

.counter {
  counter-reset: section;
}
.counter h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Use these CSS tricks to enhance your frontend skills and create more dynamic and visually appealing web applications!

#CSS #WebDevelopment #Frontend #Tips #Tricks

@typical_ddev