CSS Beispiel
- Vorherige Seite CSS Grid-Item
- Nächste Seite CSS Quiz
CSS-Selektoren
CSS-Nutzung
CSS-Farben
CSS-Hintergrund
- Set the background color of the page
- Set the background color for different elements
- Set the image as the page background
- How to repeat the background image only horizontally
- How to position the background image
- Fixed background image (the image will not scroll with the rest of the page)
- All background properties in one declaration
- Advanced background example
CSS-Rahmen
- Set the width of all four borders
- Set the width of the top border
- Set the width of the bottom border
- Set the width of the left border
- Set the width of the right border
- Set the style of all four borders
- Set the style of the top border
- Set the style of the bottom border
- Set the style of the left border
- Set the style of the right border
- Set the color of all four borders
- Set the color of the top border
- Set the color of the bottom border
- Set the color of the left border
- Set the color of the right border
- All border properties in one declaration
- Add rounded corners to the element
- Set different borders for each side
- All top border properties in one declaration
- All bottom border properties in one declaration
- All left border properties in one declaration
- All right border properties in one declaration
CSS-Außenabstand
- Specify different margins for each side of the element
- Use a shorthand margin property with four values
- Use a shorthand margin property with three values
- Use a shorthand margin property with two values
- Use a shorthand margin property with one value
- Set the margin to auto to center the elements within its container
- Inherit the left margin from the parent element
- Margin collapsing
CSS-Innenabstand
- Specify different paddings for each side of the element
- Use a shorthand padding with four values
- Use a shorthand padding with three values
- Use a shorthand padding with two values
- Use a shorthand padding with one value
- Padding and element width (do not set box-sizing)
- Padding and element width (set box-sizing)
- Set the left padding of the element
- Set the right padding of the element
- Set the top padding of the element
- Set the bottom padding of the element
CSS height/width
CSS box model
CSS-Kontur
CSS-Text
- Set text color for different elements
- Align text
- Remove the line under the link
- Decorate text
- Control the case of letters in text
- Indent text
- Specify the character spacing
- Specify the line spacing
- Set the text direction of the element
- Increase the spacing between letters
- Specify the text shadow of the element
- Disable text wrapping within elements
- Align images within text vertically
CSS-Schrift
CSS-Link
CSS-Liste
CSS-Tabelle
- Specify black borders for table, th, and td elements
- Use border-collapse
- Single border around the table
- Specify the width and height of the table
- Set the horizontal alignment of the content (text-align)
- Set the vertical alignment of the content
- Specify the padding of the th and td elements
- Horizontal rule
- Hoverable tables
- Striped tables
- Specify the color of the table border
- Set the position of the table title
- Responsive tables
- Create attractive tables
CSS display
CSS positioning
- Place elements relative to the browser window
- Place elements relative to the normal position of the element
- Position elements using absolute values
- Sticky positioning
- Overlap elements
- Set the shape of the element
- Set the top edge of the image using pixel values
- Set the bottom edge of the image using pixel values
- Verwenden Sie Pixelwerte, um die linke Kante des Bildes zu setzen
- Verwenden Sie Pixelwerte, um die rechte Kante des Bildes zu setzen
- Positionieren Sie Bildtext (links oben)
- Positionieren Sie Bildtext (rechts oben)
- Positionieren Sie Bildtext (links unten)
- Positionieren Sie Bildtext (rechts unten)
- Positionieren Sie Bildtext (zentriert)
CSS Overflow
- Verwendung von overflow: visible - Inhalte werden nicht abgeschnitten. Sie werden außerhalb des Elementrahmens gerendert.
- Verwendung von overflow: hidden - Inhalte werden abgeschnitten, und der Rest des Inhalts wird versteckt.
- Verwendung von overflow: scroll - Inhalte werden abgeschnitten, aber Rollbalken werden hinzugefügt, um den Rest des Inhalts anzuzeigen.
- Verwendung von overflow: auto - Wenn Inhalte abgeschnitten wurden, sollten Rollbalken hinzugefügt werden, um den Rest des Inhalts anzuzeigen.
- Verwendung von overflow-x und overflow-y
CSS Floating
- Einfache Verwendung der float-Eigenschaft
- Bilder mit Rand und Außenabstand nach rechts floaten
- Bilder mit Titel nach rechts floaten
- Lassen Sie den ersten Buchstaben eines Absatzes nach links floaten
- Schließen Sie das Floating (verwenden Sie die clear-Eigenschaft)
- Schließen Sie das Floating (verwenden Sie den clearfix Hack)
- Erstellen Sie Floating-Boxen
- Erstellen Sie nebeneinanderstehende Bilder
- Erstellen Sie gleichhöhe Kästen (durch flexbox)
- Erstellen Sie ein horizontales Menü
- Erstellen Sie ein Beispiel für ein Web-Layout
CSS Inline-block
CSS-Ausrichtungselemente
- Zentrierung durch Außenabstand
- Zentrierung von Text
- Zentrierung von Bildern
- Linkes/Rechtes Ausrichten durch position
- Linkes/Rechtes Ausrichten durch position - Crossbrowserlösung
- Linkes/Rechtes Ausrichten durch float
- Linkes/Rechtes Ausrichten durch float - Crossbrowserlösung
- Vertikale Zentrierung durch padding
- Vertikale und horizontale Zentrierung
- Vertikale Zentrierung durch line-height
- Vertikale und horizontale Zentrierung durch position
CSS-Kompositionsoperator
CSS-Pseudo-Klasse
- Fügt Links verschiedene Farben hinzu
- Fügt Links andere Stile hinzu
- Verwendung von :focus
- :first-child - Abstimmt auf das erste p-Element
- :first-child - Abstimmt auf den ersten i-Element im ersten p-Element
- :first-child - Abstimmt auf alle ersten Kind p-Elemente, die alle i-Elemente enthalten
- Use :lang
CSS-Pseudo-Element
CSS Content Generation
CSS-Transparenz
CSS-Navigationsleiste
CSS Dropdown List
CSS-Bildsynergie
CSS-Attributselektor
- Select All <a> Elements with Attribute target
- Select All <a> Elements with Attribute target="_blank"
- Select All Elements with Title Attribute Containing a Space-Separated List of Words, One of Which Is "flower"
- Select All Elements with Class Attribute Values Starting with "top" (Must Be the Whole Word)
- Select All Elements with Class Attribute Values Starting with "top" (Must Not Be the Whole Word)
- Select All Elements with Class Attribute Values Ending with "test"
- Select All Elements with Class Attribute Values Containing "te"
CSS-Formular
CSS-Website-Layout
CSS-Rundungen
CSS-Rahmenbilder
CSS-Hintergrund
- Add multiple background images to the element
- Define the size of the background image
- Use "contain" and "cover" to scale the background image
- Define the size of the background image
- Full-size background image (completely covers the content area)
- Use background-origin to define the position of the background image
- Use background-clip to define the drawing area of the background
CSS-Verlauf
- Linear gradient - from top to bottom
- Linear gradient - from left to right
- Linear gradient - diagonal
- Linear gradient - specific angle
- Linear gradient - multiple color stops
- Linear gradient - rainbow color + text
- Linear gradient - transparency
- Linear gradient - repeated linear gradients
- Radial gradient - evenly distributed color stops
- Radial gradient - color stops with different spacing
- Radial gradient - set shape
- Radial gradient - different size keywords
- Radial gradient - repeated radial gradients
CSS Shadow Effects
- Simple shadow effect
- Add color to shadow
- Add blur effect to shadow
- White text with black shadow
- Red neon glow shadow
- Red and blue neon glow shadows
- White text with black, blue, and dark blue shadows
- Add a simple box-shadow to the element
- Add color to box-shadow
- Add color and blur effects to box-shadow
- Create a card-like effect similar to paper cards (text)
- Create a card-like effect similar to paper cards (Polaroid images)
CSS-Texteffekte
CSS Web Fonts
CSS 2D-Transformationen
- translate() - remove elements from the current position
- rotate() - clockwise rotation of elements
- rotate() - counter-clockwise rotation of elements
- scale() - Element vergrößern
- scale() - Element verkleinern
- skewX() - Element entlang der X-Achse neigen
- skewY() - Element entlang der Y-Achse neigen
- skew() - Element entlang der X- und Y-Achse neigen
- matrix() - Rotation, Skalierung, Verschiebung und Neigung eines Elements
CSS 3D-Transformationen
CSS Übergänge
- Übergang - Ändern der Breite eines Elements
- Übergang - Ändern der Breite und Höhe eines Elements
- Unterschiedliche Glättungskurven für Übergänge festlegen
- Verzögerung für Übergangseffekte festlegen
- Transformationen zu Übergangseffekten hinzufügen
- Alle Übergangseigenschaften in einer Kurzwirksatz-Regel angeben
CSS Animationen
- Animation an ein Element binden
- Animation - Ändern der Hintergrundfarbe eines Elements
- Animation - Ändern der Hintergrundfarbe und Position eines Elements
- Verzögerte Animation
- Drei Male vor dem Ende der Animation ausführen
- Endlose Bewegung
- Bewegung in die entgegengesetzte Richtung
- Wechselnde Animation
- Gleitkurve der Animation
- Kurzschreibweise für Animationseigenschaften
CSS Tooltips
CSS gestyltes Bild
- Kantengelöstes Bild
- Kreisförmiges Bild
- Miniaturansicht
- Als Link Miniaturansicht
- Responsive Bilder
- Bildtext (links oben)
- Bildtext (rechts oben)
- Bildtext (links unten)
- Bildtext (rechts oben)
- Bildtext (zentriert)
- Polaroid-Bild
- Graustufenbild-Filter
- Fortgeschritten - Bildmodale durch CSS und JavaScript implementiert
CSS Object-fit
CSS Buttons
- Grundlegende CSS Buttons
- Farbe des Buttons
- Größe des Buttons
- Kantengelöster Button
- Farbe des Buttonrahmens
- Überfahrbare Buttons
- Button mit Schatten
- Deaktivierter Button
- Breite des Buttons
- Buttongruppe
- Buttongruppe mit Rahmen
- Button mit Animation (Überfahreneffekt)
- Button mit Animation (Tastendruckeffekt)
- Button mit Animation (Welleneffekt)
CSS Paginierung
CSS Mehrspaltigkeit
- Mehrere Spalten erstellen
- Abstand zwischen den Spalten festlegen
- Regeln für den Stil zwischen den Spalten festlegen
- Regeln für die Breite zwischen den Spalten festlegen
- Regeln für die Farbe zwischen den Spalten festlegen
- Regeln für die Breite, den Stil und die Farbe zwischen den Spalten festlegen
- Festlegen, wie viele Spalten das Element überspannen soll
- Empfohlene beste Breite für die Spalten festlegen
CSS Benutzeroberfläche
CSS Variablen
CSS Box Sizing
CSS Flexbox
- Flexbox mit drei Flex-Elementen
- Flexbox mit drei Flex-Elementen - rtl-Richtung
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Sortierung der Flex-Elemente
- Margin-right:auto;
- Margin:auto; = perfekter Zentrierung
- align-self auf den Flex-Elementen einstellen
- Die Länge der Flex-Elemente im Verhältnis zum Rest der Flex-Elemente bestimmen
- Eine responsive Bildergalerie mit dem Flexbox erstellen
- Eine responsive Website mit dem Flexbox erstellen
CSS Media Queries
CSS Media Queries - Mehr Beispiele
- Verschiedene Hintergrundfarben basierend auf der Bildschirmbreite einstellen
- Responsive Navigationsmenü
- Responsive Spalten mit Flottieren verwenden
- Responsive Spalten mit Flexbox verwenden
- Elemente durch Media Queries ausblenden
- Responsive Zeichensatzgröße
- Responsive Bildergalerie
- Responsive Websites
- Seitenlayout basierend auf der Richtung des Browsers ändern
- Mindestbreite bis zur Maximale Breite
CSS Responsive Web Design
CSS Grid
- Vorherige Seite CSS Grid-Item
- Nächste Seite CSS Quiz
