Tips on creating multiple divs enclosing text

Question

Tips on creating multiple divs enclosing text

When attempting to wrap divs around a span element, I encountered difficulties in determining the height and width of the text. I opted not to use box shadows as they are intended for an animation. You can view the desired appearance via this image. For the current code, visit here.

Various methods were attempted, such as utilizing multiple spans that match each other's attributes, but incorporating the ::after pseudo-element led to distorted code. Implementing .mid and .max widths also interfered with the ::after code and transitions.

:root {
  --txt-color: #fff;
  --txt-box-bg: #424242;
  --main-bg: #000;
  --transparent: transparent;

  /* front page title text */
  --main-front-color: #e84118;
  --second-front-color: #fbc531;
  --third-front-color: #00a8ff;
}

* {
  margin: 0px;
  padding: 0px;
}
/* Text */
.head-text {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--txt-color);
}

.main-text {
  font-family: "IBM Plex Mono" monospace;
  color: var(--txt-color);
}

.bold {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

.light {
  font-weight: lighter;
}

/* Alignment */
.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Classes */
.front-page {
  background-color: var(--main-bg);
}

.full-page {
  background-size: cover;
  height: 100vh;
}

#title-text {
  position: absolute;
  display: inline-block;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  background-image: linear-gradient(#000,#000);
  background-size: 100% 100%;
  background-position: right;
  background-repeat: no-repeat;
  transition: 1s all;
  font-weight: bold;
  text-align: center;
  font-size: 90px;
  -webkit-text-stroke: 2px var(--main-front-color);
  animation: stroke-rainbow 13s linear infinite;
  z-index: 2;
}

#title-text::after {
  content: '';
  display: block;
  width: 0;
  height: 4px;
  background: var(--txt-color);
  transition: 1s all;
  animation: stroke-rainbow 13s linear infinite;
}

#title-text:hover {
  background-size: 0% 100%;
}

#title-text:hover::after {
  width: 100%;
}

@keyframes stroke-rainbow {
  0% {
    border-color: var(--main-front-color);
    -webkit-text-stroke-color: var(--main-front-color);
    background-color: var(--main-front-color);
    #title-text::after {

    }
  }
  25% {
    border-color: var(--second-front-color);
    -webkit-text-stroke-color: var(--second-front-color);
    background-color: var(--second-front-color);
  }
  50% {
    border-color: var(--third-front-color);
    -webkit-text-stroke-color: var(--third-front-color);
    background-color: var(--third-front-color);
  }
  75% {
    border-color: var(--second-front-color);
    -webkit-text-stroke-color: var(--second-front-color);
    background-color: var(--second-front-color);
  }
  100% {
    border-color: var(--main-front-color);
    -webkit-text-stroke-color: var(--main-front-color);
    background-color: var(--main-front-color);
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i" rel="stylesheet">
    <title>Portfolio</title>
  </head>
  <body>
    <!-- Full page intro -->
    <div class="front-page full-page">
      <span id="title-text" class="center head-text">Hi</span>
      </div>
    </div>
  </body>
</html>

html css

Answer 1

Answer №1

To achieve this layout efficiently, utilize flexbox. Begin by setting up a container div that contains nested divs with different colored borders. Place your text within the central div for emphasis.

Here is the HTML structure:

<div id="container">
  <div id="one">
    <div id="two">
      <div id="three">
        <div id="four">
          <div id="five">
            <div id="six">
              Hi!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And here is the corresponding CSS code:

#container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60vw;
  height: 100vh;
}

.colored-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#one {
  border: 2px solid yellow;
}

#two {
  border: 2px solid red;
}

#three {
  border: 2px solid rebeccapurple;
}

#four {
  border: 2px solid dodgerblue;
}

#five {
  border: 2px solid lightgreen;
}

#six {
  border: 2px solid brown;
}

EDIT: For a cleaner approach, assign a common class like .colored-box to all numbered divs (e.g., #one, #two) in your HTML and define shared properties in CSS using that class.

Modified HTML:

<div id="container">
  <div id="one" class="colored-box">
    <div id="two" class="colored-box">
      <div id="three" class="colored-box">
        <div id="four" class="colored-box">
          <div id="five" class="colored-box">
            <div id="six" class="colored-box">
              Hi!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Updated CSS:

.colored-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

Answer 2

To achieve this layout efficiently, utilize flexbox. Begin by setting up a container div that contains nested divs with different colored borders. Place your text within the central div for emphasis.

Here is the HTML structure:

<div id="container">
  <div id="one">
    <div id="two">
      <div id="three">
        <div id="four">
          <div id="five">
            <div id="six">
              Hi!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And here is the corresponding CSS code:

#container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60vw;
  height: 100vh;
}

.colored-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#one {
  border: 2px solid yellow;
}

#two {
  border: 2px solid red;
}

#three {
  border: 2px solid rebeccapurple;
}

#four {
  border: 2px solid dodgerblue;
}

#five {
  border: 2px solid lightgreen;
}

#six {
  border: 2px solid brown;
}

EDIT: For a cleaner approach, assign a common class like .colored-box to all numbered divs (e.g., #one, #two) in your HTML and define shared properties in CSS using that class.

Modified HTML:

<div id="container">
  <div id="one" class="colored-box">
    <div id="two" class="colored-box">
      <div id="three" class="colored-box">
        <div id="four" class="colored-box">
          <div id="five" class="colored-box">
            <div id="six" class="colored-box">
              Hi!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Updated CSS:

.colored-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

Tips on creating multiple divs enclosing text

Answer №1

Similar questions

Column overflowing from row in Bootstrap grid on smaller screens

Setting up an image background in three.js: A beginner's guide

Having trouble selecting a dynamically changing div element in Selenium with Java using a click action

Tips on causing a div to overflow instead of wrapping onto a new line

Adjust div height to match the dynamic height of an image using jQuery

What is the most effective way to reduce the spacing between columns in Bootstrap while maintaining consistent spacing on the outer edges?

Button with embedded Bootstrap dropdown

The footer section of my website seems to have gone missing in the HTML/CSS coding

Is there a way to center the text at 0% using text-align in Bootstrap?

What is the method for inputting a value into a textfield using JavaScript?

Adjust the image size within an Iframe to zoom in or out

Ways to utilize gridster by accessing the nativeElement of ElementRef

Tips for traversing a list of elements that has become stale due to a webpage refresh

How to position preloader at the center in materializeCSS

Tips for stopping an accordion from toggling in Bootstrap when a user clicks on a specific section of the toggle button

Dynamically adding a class name to the outer element of a component

What is the process for including a static file on an http server?

use css to remove container div tag

What is the reason that <span> elements do not automatically wrap around to the next line when they are in line with each other without any white space?

Problem with child divs escaping outside the boundaries of the parent div