3 things you never thought were possible with only CSS

OpenReplay Tech Blog - Feb 12 '23 - - Dev Community

by 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

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. 
<!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>
Enter fullscreen mode Exit fullscreen mode
  • 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. 
body {
  background: rgb(0, 0, 0);
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
}
Enter fullscreen mode Exit fullscreen mode
  • Step 3: First, select the id “text”. Set background image using CSS URL () function. We are using this image from unsplash.com. Set the background-size to 80vh.

2

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); 
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;
}
Enter fullscreen mode Exit fullscreen mode

The output:

3

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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

The CSS section:

* {
  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);
}
Enter fullscreen mode Exit fullscreen mode

Here's your output:

Light bulb

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

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

<!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>
Enter fullscreen mode Exit fullscreen mode

The CSS section for the hamburger menu

* {
  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;
}
Enter fullscreen mode Exit fullscreen mode

Here's the result you get.

Hamburger menu

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

newsletter

Image
Your first PR on your recently joined company

softwareengineering, software
Image
AWS Certification Quiz 2

aws
Image
Building Highly Available and Scalable Web Applications with AWS Elastic Load Balancer
Image
AWS Well-Architected Considerations for Financial Services

aws
Image
Solutions Architect - Associate

aws
Image
BITCOIN RECOVERY IS VERY MUCH REAL
Image
how coding a cluster in html css js

help
Image
Svelte and GraphQL with Authentication

svelte, graphql
Image
AWS Certification Exam 8

aws
Image
Master Object Oriented Programming with TypeScript | OOP Concepts Part 1

javascript, webdev, programming, tutorial
Image
AWS Backup Primer

aws
Image
Mastering .env File Usage in React Applications

javascript, beginners, tutorial, react
Image
Blum or Why Hamster Kombat might be a waste. And you should look else where (crypto exchange)

productivity, freelance, cryptocurrency, programming
Image
The Complete Guide To Full Stack Development On BSV Blockchain with React, sCrypt, Typescript and Panda.

blockchaindevelopers, bitcoin, bsvblockchain, bsvdevelopers
Image
React Lifecycle Methods Using Class & Functional Components
Image
Onepoint à VoxxedDays Luxembourg 2024

talks, conference, onepoint
Image
AWS Certification Quiz 4

aws
Image
AWS Certification Quiz 3

aws
Image
Git Cheat Sheet – Git Commands You Should Know

webdev, github, git, javascript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .