CSS Voorbeeld
- Vorige pagina CSS Grid Item
- Volgende pagina CSS Quiz
CSS Selectors
CSS Usage
CSS Colors
CSS Background
- Set the background color of the page
- Set the background color of 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 does not scroll with the rest of the page)
- All background properties in one declaration
- Advanced background example
CSS Borders
- 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 Margins
- 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 element within its container
- Inherit the left margin from the parent element
- Margin collapse
CSS Padding
- Specify different padding 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 Outline
CSS Text
- Set the text color of different elements
- Align text
- Remove the line under the link
- Decorate text
- Control the letter case 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 Font
CSS Links
CSS Lists
CSS Tables
- 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 beautiful 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
- Set the left edge of the image using pixel values
- Set the right edge of the image using pixel values
- Position image text (upper left corner)
- Position image text (upper right corner)
- Position image text (lower left corner)
- Position image text (lower right corner)
- Position image text (centered)
CSS Overflow
- Use overflow: visible - The overflow is not clipped. It is rendered outside the element box.
- Use overflow: hidden - The overflow is clipped, and the rest of the content is hidden.
- Use overflow: scroll - The overflow is clipped, but a scrollbar is added to view the rest of the content.
- Use overflow: auto - If the overflow is clipped, a scrollbar should be added to view the rest of the content.
- Use overflow-x and overflow-y
CSS Floating
- Simple use of float property
- Float images with borders and margins to the right of the paragraph
- Float images with title to the right
- Float the first letter of the paragraph to the left
- Close floating (using clear property)
- Close floating (using clearfix hack)
- Create floating boxes
- Create side-by-side images
- Create equal-height boxes (through flexbox)
- Create horizontal menu
- Create web layout examples
CSS Inline-block
CSS alignment of elements
- Centering through margins
- Centering text
- Centering images
- Left and right alignment through position
- Left and right alignment through position - Cross-browser solution
- Left and right alignment through float
- Left and right alignment through float - Cross-browser solution
- Vertical centering through padding
- Vertical and horizontal centering
- Vertical centering through line-height
- Vertical and horizontal centering through position
CSS Combinator
CSS Pseudo-classes
CSS Pseudo-elements
CSS Content Generation
CSS Opacity
CSS Navigation Bar
CSS Dropdown List
CSS Image Gallery
CSS Image Sprites
CSS Attribute Selectors
- 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 Value Starting with "top" (Must Be the Whole Word)
- Select All Elements with Class Attribute Value Starting with "top" (Cannot Be the Whole Word)
- Select All Elements with Class Attribute Value Ending with "test"
- Select All Elements with Class Attribute Value Containing "te"
CSS Forms
CSS Website Layout
CSS Rounded Corners
CSS Border Images
CSS Background
- Add multiple background images to the element
- Specify 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 specify the position of the background image
- Use background-clip to specify the drawing area of the background
CSS Gradients
- 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 gradient
- Radial gradient - Uniformly distributed color stops
- Radial gradient - Color stops with different spacing
- Radial gradient - Set shape
- Radial gradient - Different size keywords
- Radial gradient - Repeated radial gradient
CSS Shadow Effect
- Simple shadow effect
- Add color to the shadow
- Add blur effect to the 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 (text)
- Create a card-like effect (Polaroid image)
CSS Text Effects
CSS Web Font
CSS 2D Transformaties
- translate() - Remove elements from the current position
- rotate() - Clockwise rotation of elements
- rotate() - Counterclockwise rotation of elements
- scale() - Vergroot elementen
- scale() - Verminder elementen
- skewX() - Hellen van elementen langs de X-as
- skewY() - Hellen van elementen langs de Y-as
- skew() - Hellen van elementen langs de X- en Y-as
- matrix() - Roteren, schalen, verplaatsen en hellen van elementen
CSS 3D Transformaties
CSS Transities
- Overgang - Verander de breedte van een element
- Overgang - Verander de breedte en hoogte van een element
- Stel verschillende snelheidskrommingen in voor de overgang
- Stel een vertraging in voor het overgangseffect
- Voeg een transformatie toe aan het overgangseffect
- Stel alle overgangseigenschappen in met een korte schrijf
CSS Animaties
- Bind de animatie aan een element
- Animatie - Verander de achtergrondkleur van een element
- Animatie - Verander de achtergrondkleur en positie van een element
- Vertraging van de animatie
- Voer de animatie driemaal uit voordat de animatie stopt
- Eeuwige animatie
- Animatie van de andere kant
- Alternatieve animatie
- Snelheidskromming van de animatie
- Korte schrijf van animatie-eigenschappen
CSS Tooltips
Geformatterde afbeelding
- Afbeelding met ronde hoeken
- Ronde afbeelding
- Miniatuur
- Als linkje miniature
- Responsive Afbeelding
- Tekst op het beeld (linksonderhoek)
- Tekst op het beeld (rechtsbovenhoek)
- Tekst op het beeld (linksbovenhoek)
- Tekst op het beeld (rechtsbovenhoek)
- Tekst op het beeld (gecentreerd)
- Polaroid afbeelding
- Grijswaarden beeldfilter
- Geavanceerd - Afbeeldingsmodaliteit bereikt via CSS en JavaScript
CSS Object-fit
CSS Knoppen
CSS Paginering
CSS Meerdere Kolommen
- Maak meerdere kolommen
- Stel de speling tussen de kolommen in
- Stel de stijl van de regels tussen de kolommen in
- Stel de breedte van de regels tussen de kolommen in
- Stel de kleur van de regels tussen de kolommen in
- Stel de regels tussen de kolommen in voor breedte, stijl en kleur
- Stel in hoeveel kolommen het element moet overspannen
- Stel de aanbevolen beste breedte van de kolommen in
CSS Gebruikersinterface
CSS Variabelen
CSS Box Sizing
CSS flexbox
- Flexbox met drie flex-items
- Flexbox met drie flex-items - rtl-richting
- 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
- Sortering van flex-items
- Margin-right:auto;
- Margin:auto; = perfecte centrering
- Stel align-self in op het flex-item
- Stel de lengte van het flex-item in, ten opzichte van het overige deel van het flex-item
- Maak een responsieve afbeeldingsbibliotheek met een flexbox
- Maak een responsieve website met een flexbox
CSS Media Queries
CSS Media Queries - Meer Voorbeelden
- Verschillende achtergrondkleuren instellen op basis van schermbreedte
- Responsive Navigatiemenu
- Responsive Kolommen met Float gebruiken
- Responsive Kolommen met Flexbox gebruiken
- Elementen verbergen met media queries
- Responsive Lettergrootte
- Responsive Afbeeldingsbibliotheek
- Responsive Website
- Paginabewerking veranderen op basis van browserrichting
- Minimale breedte tot maximale breedte
CSS Responsive Web Design
CSS Grid
- Vorige pagina CSS Grid Item
- Volgende pagina CSS Quiz
