CSS (Cascading Style Sheets) is like aesthetics to the HTML used to structure a web document.
Whether you’re a front-end developer, a full stack developer, or someone starting in web design, how to use a CSS style sheet is something you should definitely know how to do!
I’ll be expanding your horizon on the limitless things you could do with just CSS, things you thought you would only do with code.
To go along with some of these tricks, you should have a good knowledge of HTML tags. You should also know CSS, flexbox, and CSS Grid (especially border, margin, and padding).
The Flexible Box Layout Model (flexbox) is designed for one-dimensional content, and it excels at taking a bunch of items of different sizes and returning the best layout.
Creating a text portrait with an Image:
Text portrait is one of the various designs and image manipulations that can be performed using CSS. CSS has a lot of functionalities, and I’ll outline how you could create a text portrait with an image blended in.
Add background-repeat to no-repeat to avoid repetition of the image. Reduce the space between lines for better visuals. background-attachment to fixed.
The output:
The making of a light bulb
It’s unimaginable that CSS could be used to turn on/off a light bulb. You might expect a button that will require an “onClick” function to run a function that turns it off or on. For this trick, we will use a checkbox tag to boycott the javascript code. What we do is switch between two different pictures (the light bulb on and the light bulb image when it’s off)
For the bulb images, download the images from this link.
The :checked attribute indicates whether the checkbox is currently checked. This is used in applying or removing styles to the HTML element.
The HTML section linked to the bulb.css
The sign in CSS: It is a general sibling combinator that selects all elements that the former selector precedes. It selects all the <p> tags below the first selector, which is the <div> tag.
The CSS section:
Here’s your output:
Session Replay for Developers
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data
Happy debugging! Try using OpenReplay today.
Hamburger menu
The hamburger menu is one of the most popular UI elements. Virtually all web designers have heard of or used it in designing websites. An overwhelming majority of the websites we see online use the Hamburger menu. It could be used for mobile responsiveness.
Creating a hamburger requires a good Knowledge of Html, CSS, and Javascript (functions). This post will enlighten you on how to create a hamburger menu without having any knowledge of JavaScript. This could also be like a project for aspiring developers.
The HTML section for the hamburger menu that’s linked to the CSS.
The CSS section for the hamburger menu
Here’s the result you get.
CSS has endless possibilities and is very flexible to create anything based on your imagination.
