ro CSS-Tricks werden Sie umhauen

CSS (Cascading Style Sheets) ist eine der beliebtesten Technologien im Webdesign und ermöglicht es Entwicklern, visuelle und responsive Designs zu erstellen. Als Webentwickler ist die Beherrschung von CSS von entscheidender Bedeutung, um Ihre Designvision zum Leben zu erwecken und ein gutes Benutzererlebnis auf allen Geräten sicherzustellen. Hier sind einige Tipps, die Sie in CSS möglicherweise nicht kennen:

1. Neumorphsime:

Neumorphsime bezieht sich auf Soft-UI-Design und ist ein beliebter Designtrend, der Skeuomorphismus und flaches Design kombiniert. Dieser Stil verwendet Schatten und Glanzlichter, um ein glattes Aussehen zu erzeugen. So funktioniert es:

Zuerst erstellen wir einen dezenten Hintergrund: Wählen Sie zunächst eine sanfte Hintergrundfarbe wie Hellgrau, um mit Neumotphsime zu beginnen.

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

Dann erstellen wir ein Element mit diesen Stilen

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

Zuletzt fügen wir beim Schweben einen Kastenschatten zum Element hinzu

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

so bekommen wir diesen schönen Look

Und das können Sie auch machen

Fügen Sie einfach einen Einschub wie folgt zum Kastenschatten hinzu

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() und clamp():

Diese Tools machen Websites und Apps dynamischer und reaktionsschneller. Mit diesen Funktionen können Sie die Größe und Größenänderung von Elementen steuern. und hier geht es zum Erstellen flexibler Typografie:

Mit der Funktion min() können Sie hier den kleinsten Wert aus einer Liste festlegen

vor

.container {
  width:800px;
  max-width:90%;
}

nachher

.container{
  width: min(800px,90%);
}

Die Funktion max() funktioniert genauso wie die Funktion min(), übernimmt jedoch den größeren Wert aus einer Liste. So geht es:

.container{
  width: max(800px,90%);
}

Manchmal legt man die Breite sowie die minimale und maximale Breite in einem Container fest. Es gibt eine andere Funktion namens „clamp()“ und so funktioniert sie

vor

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

Nachher

.container {
  width: clamp(400px,50vw,800px);
}

3. Der :Has()- und :Not()-Selektor:

Der Selektor :not() stellt Elemente dar, die nicht mit einer Liste von Selektoren übereinstimmen

.container:not(:first-child) {
  background-color: blue;
}

Der Selektor :has() stellt ein Element dar, wenn einer der relativen Selektoren, an die als Argument übergeben wird, übereinstimmt

.container:has(svg) {
  padding: 20px;
}

4. Textverlauf:

Für diesen Trick können wir der Textfarbe nicht direkt einen Farbverlauf hinzufügen

.text{
  color: linear-gradient(to right, red,blue);
}

was wir stattdessen tun

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

und voilà, wir bekommen diesen tollen Effekt

Fazit:

Indem Sie eine dieser CSS-Techniken beherrschen, werden Sie Ihre Webdesign-Fähigkeiten auf ein neues Niveau bringen. Mit nur kleinen Anpassungen dieser Techniken können Sie optisch beeindruckende Ergebnisse erzielen und Ihr Design schöner und benutzerfreundlicher gestalten.

Weitere Informationen finden Sie unter: https://designobit.com/

Das obige ist der detaillierte Inhalt vonro CSS-Tricks werden Sie umhauen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!