This repository contains a collection of 22 CSS projects. Each project demonstrates different CSS techniques and styles, and serves as an example for learning and practicing CSS.
-- Projects
Below are all the projects with a brief description and links to their GitHub Pages:
- Archery target - This project demonstrates design of an archery target, featuring flexbox for layout.
- Card of 4 hearts - This project demonstrates the design of a playing card featuring the 4 of Hearts. It showcases the use of flexbox and element positioning to replicate the look of a traditional playing card. The layout and alignment of the heart symbols were carefully arranged using CSS positioning techniques.
- Card ace of spades - This project presents a design of the Ace of Spades card. Similar in approach to the 4 of Hearts, this design uses flexbox and CSS positioning to replicate the traditional look of a playing card. The design features three symbols: one in the center and two on the opposite corners, all positioned using flexbox and CSS techniques.
- Codepen tile - This project represents a CodePen Tile, which is a styled card element. The most challenging aspect of this project was achieving responsiveness and precise element positioning. In this design, the tile includes hover effects: when the pointer hovers over the tile, like and comment icons appear, adding an interactive element to the design.
- Colorful button - In this project, I designed a colorful button that uses a linear gradient background and an interesting effect where a child element overlays the parent to create a border-like appearance. On hover, the button grows in size, and its color changes.
- Expanding search bar - This project features a search bar that expands, changes color, and hides the placeholder text when clicked. The label for the search bar is visually hidden but remains accessible to screen readers for SEO. I used CSS properties like focus to trigger the expansion and color change, and ::placeholder to control the placeholder's visibility. I incorporated the transition property for a smooth, animated effect when the search bar expands.
- France flag - This project demonstrates the French flag using CSS. I used the calc() function to evenly divide the flag's width into three equal vertical stripes, ensuring consistent proportions regardless of the flag's overall size.
- Germany flag - This project demonstrates the design of the German flag using CSS. I used the height property to create three horizontal stripes height equal heights, ensuring that the flag maintains consistent proportions.
- Github profile layout - This project showcases a GitHub profile layout, demonstrating techniques in CSS positioning and flexbox. I used % to create a responsive and organized layout that adapts to different screen sizes. The most challenging aspect of this project was mastering precise positioning to ensure a clean and balanced design.
- Japanese flag - This project demonstrates the design of the Japanese flag using CSS. I used the calc() function to calculate the width of the flag. Specifically, I applied calc() to adjust the height and width of the red circle in the center.
- Jeopardy game - This project demonstates Jeopardy-style game where the first side of a card displays a question when the card is flipped. I used the transform-style: preserve-3d property on the card to ensure the back of the card is visible, and the card rotates with rotateY when hovered to reveal the question. To prevent the elements from showing on the back of the card before the flip, I applied backface-visibility: hidden.
- Loading animation - This project demonstrates a loading animation consisting of three dots that continuously grow and shrink in size. The dots change from black to white as they expand and contract, creating a dynamic effect. I used CSS keyframes to define the animation cycle, controlling both the scaling and color transitions of the dots.
- Second loading animation - This project showcases a loading animation with three colored squares, each positioned at a 45-degree angle next to each other in the center of the page. The squares continuously rotate in place, creating a dynamic, eye-catching effect. I used CSS keyframes to control the rotation of the squares, giving them smooth, continuous movement.
- Third loading animation - This project demonstrates a rotating circle animation that simulates a page loading process. I created the circle by increasing the border size and applying border-radius to make the element round. Only the top border is colored, and using CSS keyframes, I created the illusion of a continuous spinning motion, mimicking a loading process.
- Madegascar flag - This project demonstrates the design of the Madagascar flag using CSS. Similar to other flags I've created, I used the calc() function to adjust the proportions of the flag's height and width to ensure accurate dimensions.
- Niger flag - This project demonstrates the design of the Niger flag using CSS. I used the calc() function to adjust the height and distribute the colors evenly across the flag. The orange circle in the center of the flag is placed within a middle div, and I used flexbox to center the circle perfectly within the flag.
- Progress bar - This project showcases a custom progress bar design created using CSS. I styled the outer container with a border, giving it a elegant appearance. Inside the container, a child element simulates the loading process by emitting an animation, making it appear as though the progress is filling up.
- Saturn - This project showcases a 3D representation of Saturn with its iconic rings and a distant planet in the background. To create the realistic appearance of Saturn, I used a linear gradient for the planet's surface and applied box-shadow inset to enhance the depth and give it a more realistic look. The background was styled to represent space, giving the entire scene a cosmic feel. I used transform-style: preserve-3d to maintain the 3D effect on the planet and its rings. For the rings, I applied rotations along the X and Y axes to position them around the planet in a realistic plane. Additionally, the distant planet also has a box-shadow for added depth.
- Sweden flag - This project demonstrates the design of the Swedish flag using CSS. Similar to other flag projects, I used the calc() function to adjust the width and height of the flag, ensuring the correct proportions for each section. The flag consists of a blue background with a yellow Scandinavian cross, and I used CSS to accurately position and size the cross using calc() for precise measurements.
- Switzerland flag - This project demonstrates the design of the Swiss flag using CSS. Similar to my other flag projects, I used the calc() function to accurately determine the flag's width and height, ensuring the correct proportions for each section. The Swiss flag features a red background with a white cross at the center. Using CSS, I positioned and sized the cross precisely, ensuring that it is symmetrical and properly centered within the flag.
- Toggle switch - This project demonstrates custom toggle switch using CSS. The toggle consists of a hidden checkbox input and a styled label. I used display: none to hide the checkbox and applied styles to the label, transforming it into a circular toggle button. When the toggle is activated (when the checkbox is checked), I used the toggle-input:checked + label selector to move the label left and right, simulating the switching effect.
- Word carousel - This project demonstrates a word carousel that rotates multiple words in a sequence. I used CSS pseudo-elements to add additional words after the initial word ("dogs") in the carousel. The words are animated using keyframes, creating a smooth transition effect between them. The container div where I listed the things I love was initially empty, so I used the content property in the CSS to dynamically insert the words into the carousel.
-- Usage
Each project has its own folder within this repository. You can open any project directly through the links above.
-- Contact
If you have any questions or suggestions, feel free to contact me through my GitHub profile!