Skip to content

README.md

Latest commit

 

History

History
74 lines (44 loc) · 2.58 KB

README.md

File metadata and controls

74 lines (44 loc) · 2.58 KB

CSS Demos

This repository contains a collection of practical examples for learning CSS, covering everything from fundamentals to more advanced topics. The project structure is organized into directories that focus on different aspects of CSS.

Project Structure

  • 1workingWithText: Demonstrations on how to style text, including fonts, sizes, spacing, and alignment.
  • 2Properties: Exploration of various CSS properties, such as colors, margins, padding, and borders.
  • 3PositioningAndLayout: Examples of positioning and layout, including absolute and relative positioning, flexbox, and grid.
  • 4CSS3Basics: Introduction to new CSS3 features, including advanced selectors, pseudo-classes, and pseudo-elements.
  • 5Gradients&Backgrounds: Application of gradients and backgrounds, both linear and radial, and background images.
  • 6Transitions&Transforms: Use of transitions and transforms to create animations and dynamic effects.
  • 7CSSFilters: Application of CSS filters to modify the appearance of elements, such as blur, brightness, and contrast.
  • extra: Additional examples and practical exercises.
  • index.css: Main CSS file with global styles.
  • index.html: Main HTML page that references the examples.

How to Use

  1. Clone the repository:

    git clone https://github.com/bernborgess/css-demos.git

  2. Navigate to the project directory:

    cd css-demos

  3. Open the index.html file in your browser to view the main page that references the examples.

Examples

1. Working with Text

Learn how to apply different text styles, adjust spacing, and align text using CSS.

2. Properties

Explore fundamental CSS properties that control the appearance of elements.

3. Positioning and Layout

Learn about modern layout techniques like flexbox and grid, as well as absolute and relative positioning.

4. CSS3 Basics

Discover new CSS3 features and how they can be used to create more advanced styles.

5. Gradients and Backgrounds

Apply gradients and background images to enhance the visual design of your projects.

6. Transitions and Transforms

Add dynamism to your elements with smooth transitions and transformations.

7. CSS Filters

Use filters for advanced visual effects directly in CSS.

Contribution

Contributions are welcome! Feel free to open issues and pull requests with improvements, bug fixes, or new examples.

Contact

Bernardo Borges - GitHub

Learn and practice CSS with these practical examples, and feel free to contribute and improve the project!