10 تکنیک پیشرفته CSS که توسعه جلوی شما را دگرگون می کند

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 5rem);
}

p {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.5rem);
}

/* Instead of this */
header a:hover, 
main a:hover, 
footer a:hover {
  text-decoration: underline;
}

/* Use this */
:is(header, main, footer) a:hover {
  text-decoration: underline;
}

.diagonal-section {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  padding: 100px 20px;
}

.diagonal-card {
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

.gradient-border {
  position: relative;
  border-radius: 10px;
  padding: 20px;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 12px;
  background: linear-gradient(
    45deg,
    #ff3c78, #ffa26b, #ff3c78, #ffa26b
  );
  background-size: 400% 400%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 10px;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax-bg {
  transform: translateZ(-10px) scale(2);
}

.parallax-mid {
  transform: translateZ(-5px) scale(1.5);
}

.parallax-front {
  transform: translateZ(0);
}

/* Style form when any input has focus */
form:has(:focus) {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Style a field group when its input is valid */
.field-group:has(input:valid) label {
  color: green;
}

/* Style a field group when its input has content */
.field-group:has(input:not(:placeholder-shown)) label {
  transform: translateY(-1.5rem) scale(0.8);
  color: #4a5568;
}

/* Style form when all required fields are valid */
form:has(input[required]:valid):has(input[required]:invalid) {
  border-color: yellow;
}

form:has(input[required]:valid):not(:has(input[required]:invalid)) {
  border-color: green;
}

.dashboard {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr 1fr;
  grid-template-rows: auto 1fr 1fr auto;
  grid-template-areas: 
    "header header header"
    "sidebar main stats"
    "sidebar main activity"
    "footer footer footer";
  gap: 16px;
  height: 100vh;
}

@media (max-width: 900px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto auto;
    grid-template-areas: 
      "header"
      "sidebar"
      "main"
      "stats"
      "activity"
      "footer";
  }
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.stats { grid-area: stats; }
.activity { grid-area: activity; }
.footer { grid-area: footer; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Adjust for fixed headers */
}

/* Enhance with targeted control */
.quick-nav a {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
  html {
    scroll-behavior: auto;
  }
}

.duotone {
  position: relative;
  display: inline-block;
}

.duotone img {
  display: block;
  filter: grayscale(100%) contrast(1.2);
}

.duotone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e31b6d;
  mix-blend-mode: color;
  pointer-events: none;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #47c9e5;
  mix-blend-mode: exclusion;
  pointer-events: none;
}

.accordion {
  --state: "closed";
}

.accordion:has(:checked) {
  --state: "open";
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

.accordion:has([value="open"]) .accordion-content {
  max-height: 500px;
}

* {
  outline: 1px solid red !important;
}