3 things you never thought were possible with only CSS
Tags: css, webdev
Published: 2023-02-12 23:20:54

by [Favour Onyeke](https://blog.openreplay.com/authors/favour-onyeke)

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.

![adapted from linuxhint](https://blog.openreplay.com/images/three-things-you-never-thought-were-possible-with-just-css/images/image01.png)




## 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. 

- Step 1: Create an HTML document. We could use a generated ‘Lorem’ text, but to not cluster our HTML document, I embedded a javascript code that repeats my text 500 times.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="form.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="text">
</div>
    </div>
    <script>
      let str = "Open Replay ";
      document.getElementById("text").innerHTML = str.repeat(500);
    </script>
  </body>
</html>
```

- Step 2:  Edited the background image in the CSS document. We gave it a darker color. Set the overflow hidden and the font family to a sans-serif font.

```css
body {
  background: rgb(0, 0, 0);
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
}
```

- Step 3: First, select the id “text”. Set background image using CSS URL `()` function. We are using this image from [unsplash.com](https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60). Set the background-size to 80vh.

![2](https://blog.openreplay.com/images/three-things-you-never-thought-were-possible-with-just-css/images/image02.jpeg)


Add `background-repeat` to `no-repeat` to avoid repetition of the image. Reduce the space between lines for better visuals. `background-attachment` to fixed.

- Step 4:  To clip text over an image and we use  `-WebKit-text-fill-color` property and the `WebKit-text-fill-color`. We will be setting the background of the to -webkit-text-fill-color: rgba(255, 255, 255, 0);

```css    
body {
  background: rgb(0, 0, 0);
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
}
#text {
  line-height: 14px;
  background: url("https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60");
  -webkit-background-clip: text;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  background-size: 80vh;
}
```

The output: 

![3](https://blog.openreplay.com/images/three-things-you-never-thought-were-possible-with-just-css/images/image03.png)

## 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](/scl/fo/yem9uc8cynm61synsefhv/h?dl=0&rlkey=2q771sr4nibb0z8lmugbb0y1r).

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 
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Light bulb</title>
    <link rel="stylesheet" href="bulb.css" />
  </head>
  <body>
    <label for="switch">
      <input type="checkbox" id="switch" />
      <span id="bulb-button"></span>
      <div class="bulb"></div>
    </label>
  </body>
</html>
```

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.

![4](https://blog.openreplay.com/images/three-things-you-never-thought-were-possible-with-just-css/images/image04.jpeg)


The CSS section:
```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333333;
  min-height: 100vh;
}
#switch {
  appearance: none;
}
label {
  position: relative;
  width: 150px;
  height: 75px;
  background: #212121;
  border-radius: 10px;
}
#bulb-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  height: 75px;
  background: rgb(23, 14, 14);
  border: 6px solid #212121;
  border-radius: 14px;
  cursor: pointer;
  transition: 0.5s;
  color: aliceblue;
}
#switch:checked ~ span {
  left: 75px;
  background-color: #ffffff;
}
.bulb {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 348px;
  height: 408px;
  transform: translate(-50%);
  background: url(light-bulb-0ff.jpg);
  pointer-events: none;
  transition: 0.5s;
}
/* Use the lighted bulb in this section */
#switch:checked ~ .bulb {
  background: url(light-bulb-on.jpg);
}
```    

Here's  your output:

![Light bulb](https://blog.openreplay.com/images/three-things-you-never-thought-were-possible-with-just-css/images/image05.gif)


<h2>Session Replay for Developers</h2> 
<p><em>
Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data
</em></p>
<img alt="OpenReplay" width="768" height="400" src="https://blog.openreplay.com/assets/overview_Z17Qdyg.png" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em>





## 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.
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="harmburger.css" />
    <title>Document</title>
  </head>
  <body>
    <header class="header">
      <div class="navigation">
        <input type="checkbox" class="toggle" />
        <div class="hamburger"></div>
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </div>
    </header>
  </body>
</html>
```    

The CSS section for the hamburger menu
```css
* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(232, 181, 29);
  padding: 0 25px;
  transition: 0.3s;
}
.menu li {
  list-style-type: none;
}
.menu li a {
  color: aliceblue;
  text-decoration: none;
  display: block;
  padding: 40px 25px;
  font-size: 18px;
  line-height: 1;
  transition: 0.3s;
}
.hamburger {
  position: relative;
  width: 30px;
  margin-top: 25px;
  margin-bottom: 20px;
  height: 4px;
  background: aliceblue;
  cursor: pointer;
  border-radius: 10px;
  z-index: 2;
}
.hamburger:before,
.hamburger:after {
  background: aliceblue;
  content: "";
  position: absolute;
  height: 4px;
  right: 0;
  border-radius: 10px;
  transition: 0.3s;
}
.hamburger:before {
  top: -10px;
  width: 25px;
}
.hamburger:after {
  top: 10px;
  width: 25px;
}
.toggle {
  position: absolute;
  width: 30px;
  height: 100%;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
}
.navigation input:checked ~ .menu {
  right: 0;
}
.hamburger,
.toggle {
  display: block;
}
.header {
  padding: 10px 20px;
}
.menu {
  justify-content: start;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0;
  right: -300px;
  background: rgb(232, 181, 29);
  width: 300px;
  height: 100%;
  padding-top: 65px;
}
.menu li {
  width: 100%;
}
.menu li a,
.menu li a:hover {
  padding: 30px;
  font-size: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
```

Here's the result you get.

![Hamburger menu](https://blog.openreplay.com/images/three-things-you-never-thought-were-possible-with-just-css/images/image06.gif)


CSS has endless possibilities and is very flexible to create anything based on your imagination.





[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)