CSS: линия за градиентом текста

ProgramBox

CSS: линия за градиентом текста

Post author:admin
Запись опубликована:20 августа, 2022
Post category:Вопросы по программированию

#css

Вопрос:

Я пытаюсь сделать двойную линию за градиентным текстом.

Градиент текста создается путем установки фона с помощью градиента, затем используйте контур обрезки для трассировки текста.
Линия за текстом обычно создается путем добавления строки в середине родительского элемента, а затем установки дочернему элементу родительского цвета фона.

Я столкнулся с некоторой проблемой, поскольку им обоим необходимо использовать свойство background .

Пожалуйста, прочитайте следующий код:

 body{
    background: grey;
}

@keyframes textBG {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}

.line-behind.background {
  position: relative;
  z-index: 1;
}

.line-behind.background::before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}

.line-behind.background span {
  /* to hide the lines from behind the text, you have to set the background color the same as the container */
  background: grey;
  padding: 0 15px;
}
.line-behind.double::before {
  /* this is just to undo the ::before styling from above */
  border-top: none;
}

.line-behind.double::after {
  border-bottom: 1px solid blue;
  -webkit-box-shadow: 0 1px 0 0 red;
  -moz-box-shadow: 0 1px 0 0 red;
  box-shadow: 0 1px 0 0 red;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  width: 95%;
  z-index: -1;
}

.text-gradient {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size:42px;
  color: transparent;
  background: linear-gradient(to left, #1e5799, #2ce0bf, #76dd2c, #dba62b, #e02cbf, #1e5799);
  background-size: 1000px 100%;
  animation: textBG 15s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
}

.text-gradient::selection {
  color: white;
  background: darkorchid;
}

#shelf-image{
    position: fixed;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#shelf-image-title{
    width: 100vw;
    height: 8vh;
    text-align: center;
}

#shelf-section{
    width: 100vw;
    height: 92vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border: dashed;
}

#shelf-image-container{
    overflow: auto;
    width: 80vmin;
    height: 80vmin;
    border: double;
}

#shelf-image-info{
    width: 50vmin;
    height: 80vmin;
    border: 1px solid;
}

 <div id="shelf-image">
    <div id="shelf-image-title">
        <div class="line-behind background double">
            <span>
                <h1 class="text-gradient">
                    Settings
                </h1>
            </span>
        </h1>
    </div>

    <!-- <div id="shelf-image-title">
        <div class="line-behind background double">
            <span class="text-gradient">
                Settings
            </span>
        </h1>
    </div> -->

    <div id="shelf-section">
        <div id="shelf-image-container">
            <svg id="settings_icon" viewBox="0 0 46.57 46.96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="white"><path d="M31.36 23.43L31.02 25.83L30 28.08L28.29 29.95L25.98 31.16L23.37 31.41L20.86 30.66L18.83 29.08L17.46 26.99L16.78 24.64L16.78 22.22L17.46 19.87L18.83 17.78L20.86 16.2L23.37 15.45L25.98 15.71L28.29 16.91L30 18.78L31.02 21.03L31.36 23.43Z" stroke="black" fill="none" stroke-width="3" stroke-linecap="round" /><path d="M21.02 10.83L20.65 0L32.59 0.4L30 11.13L35.37 17.31L45.19 11.64L46.57 23.89L36.2 23.28L34.44 32.59L43.8 38.56L32.96 46.96L28.52 35.63L17.87 34.92L15.09 46.56L4.07 38.16L13.43 30.97L12.04 23.48L0 24.8L4.72 8.3L14.63 15.38L21.2 10.63" stroke="black" fill="none" stroke-width="3" stroke-linecap="round" /></svg>
        </div>
        <div id="shelf-image-info">
            <h2>Here</h2>
            <p>Here</p>
        </div>
    </div>
</div>

Развернуть фрагмент

Я попытался отделить text-gradient класс от a h1 вместо span , но это не сработало.

Если кто-то может предложить некоторую помощь, я буду очень благодарен.

1. Чего вы пытаетесь достичь? Строка только за текстом?

2. @ John: Извините, возможно, я не понял. Линия, идущая за текстом, не должна быть видна во фрагментах кода выше

3. Я все еще не совсем понимаю. Вы хотите, чтобы строка была точно такой, какой она есть сейчас, просто чтобы ее не было видно за текстом. Таким образом, строка будет находиться только слева и справа от текста правильно?

4. Да, точно, я хочу, чтобы часть строки, идущая за текстом, исчезла.

Ответ №1:

Самым простым методом было бы добавить display: inline-block; к родительскому элементу h1 (the span ) . Это позволяет диапазону соответствовать ограничительной рамке текста и использовать его фон для блокирования строки.

 body{
    background: grey;
}

@keyframes textBG {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}

.line-behind.background {
  position: relative;
  z-index: 1;
}

.line-behind.background::before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}

.line-behind.background span {
  /* to hide the lines from behind the text, you have to set the background color the same as the container */
  background: grey;
  padding: 0 15px;
}
.line-behind.double::before {
  /* this is just to undo the ::before styling from above */
  border-top: none;
}

.line-behind.double::after {
  border-bottom: 1px solid blue;
  -webkit-box-shadow: 0 1px 0 0 red;
  -moz-box-shadow: 0 1px 0 0 red;
  box-shadow: 0 1px 0 0 red;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  width: 95%;
  z-index: -1;
}

.text-gradient {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size:42px;
  color: transparent;
  background: linear-gradient(to left, #1e5799, #2ce0bf, #76dd2c, #dba62b, #e02cbf, #1e5799);
  background-size: 1000px 100%;
  animation: textBG 15s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
}

.text-gradient::selection {
  color: white;
  background: darkorchid;
}

#shelf-image{
    position: fixed;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#shelf-image-title{
    width: 100vw;
    height: 8vh;
    text-align: center;
}

#shelf-section{
    width: 100vw;
    height: 92vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border: dashed;
}

#shelf-image-container{
    overflow: auto;
    width: 80vmin;
    height: 80vmin;
    border: double;
}

#shelf-image-info{
    width: 50vmin;
    height: 80vmin;
    border: 1px solid;
}

.text-wrap {
    display: inline-block;
}

 <div id="shelf-image">
    <div id="shelf-image-title">
        <div class="line-behind background double">
            <span class="text-wrap">
                <h1 class="text-gradient">
                    Settings
                </h1>
            </span>
        </h1>
    </div>

    <!-- <div id="shelf-image-title">
        <div class="line-behind background double">
            <span class="text-gradient">
                Settings
            </span>
        </h1>
    </div> -->

    <div id="shelf-section">
        <div id="shelf-image-container">
            <svg id="settings_icon" viewBox="0 0 46.57 46.96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="white"><path d="M31.36 23.43L31.02 25.83L30 28.08L28.29 29.95L25.98 31.16L23.37 31.41L20.86 30.66L18.83 29.08L17.46 26.99L16.78 24.64L16.78 22.22L17.46 19.87L18.83 17.78L20.86 16.2L23.37 15.45L25.98 15.71L28.29 16.91L30 18.78L31.02 21.03L31.36 23.43Z" stroke="black" fill="none" stroke-width="3" stroke-linecap="round" /><path d="M21.02 10.83L20.65 0L32.59 0.4L30 11.13L35.37 17.31L45.19 11.64L46.57 23.89L36.2 23.28L34.44 32.59L43.8 38.56L32.96 46.96L28.52 35.63L17.87 34.92L15.09 46.56L4.07 38.16L13.43 30.97L12.04 23.48L0 24.8L4.72 8.3L14.63 15.38L21.2 10.63" stroke="black" fill="none" stroke-width="3" stroke-linecap="round" /></svg>
        </div>
        <div id="shelf-image-info">
            <h2>Here</h2>
            <p>Here</p>
        </div>
    </div>
</div>

Развернуть фрагмент

Ответ №2:

Надеюсь, это сработает для вас. Вы можете взломать это, чтобы это работало, создав div перед и div после вашего текста, который генерирует строку. А затем стилизуйте его так, чтобы строка находилась слева и справа от текста, а текст был центрирован. Взгляните на этот пример, который я сделал:

 body{
    background: grey;
}

@keyframes textBG {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}

.line-behind.background {
  position: relative;
  z-index: 1;
}

.line-behind.background::before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}



.line-behind.background span {
  /* to hide the lines from behind the text, you have to set the background color the same as the container */
  background: grey;
  padding: 0 15px;
}
.line-behind.double::before {
  /* this is just to undo the ::before styling from above */
  border-top: none;
}

.theline {
  border-bottom: 1px solid blue;
  -webkit-box-shadow: 0 1px 0 0 red;
  -moz-box-shadow: 0 1px 0 0 red;
  box-shadow: 0 1px 0 0 red;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  top: 45%;
  z-index: -1;
  width: 100%;
}

.text-gradient {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size:42px;
  color: transparent;
  background: linear-gradient(to left, #1e5799, #2ce0bf, #76dd2c, #dba62b, #e02cbf, #1e5799);
  animation: textBG 15s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
  align-items: center;
  justify-content: center;
  display: flex;
}

.text-gradient::selection {
  color: white;
  background: darkorchid;
}

#shelf-image{
    position: fixed;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#shelf-image-title{
    width: 100vw;
    height: 8vh;
    text-align: center;
}

#shelf-section{
    width: 100vw;
    height: 92vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border: dashed;
}

#shelf-image-container{
    overflow: auto;
    width: 80vmin;
    height: 80vmin;
    border: double;
}

#shelf-image-info{
    width: 50vmin;
    height: 80vmin;
    border: 1px solid;
}

 <div id="shelf-image">
    <div id="shelf-image-title">
        <div class="line-behind background double">
            <span>
                <h1 class="text-gradient">
                    <div class="theline"></div>Settings<div class="theline"></div>
                </h1>
                
            </span>
        
    </div>

    <!-- <div id="shelf-image-title">
        <div class="line-behind background double">
            <span class="text-gradient">
                Settings
            </span>
        </h1>
    </div> -->

    <div id="shelf-section">
        <div id="shelf-image-container">
            <svg id="settings_icon" viewBox="0 0 46.57 46.96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="white"><path d="M31.36 23.43L31.02 25.83L30 28.08L28.29 29.95L25.98 31.16L23.37 31.41L20.86 30.66L18.83 29.08L17.46 26.99L16.78 24.64L16.78 22.22L17.46 19.87L18.83 17.78L20.86 16.2L23.37 15.45L25.98 15.71L28.29 16.91L30 18.78L31.02 21.03L31.36 23.43Z" stroke="black" fill="none" stroke-width="3" stroke-linecap="round" /><path d="M21.02 10.83L20.65 0L32.59 0.4L30 11.13L35.37 17.31L45.19 11.64L46.57 23.89L36.2 23.28L34.44 32.59L43.8 38.56L32.96 46.96L28.52 35.63L17.87 34.92L15.09 46.56L4.07 38.16L13.43 30.97L12.04 23.48L0 24.8L4.72 8.3L14.63 15.38L21.2 10.63" stroke="black" fill="none" stroke-width="3" stroke-linecap="round" /></svg>
        </div>
        <div id="shelf-image-info">
            <h2>Here</h2>
            <p>Here</p>
        </div>
    </div>
</div>

Развернуть фрагмент

Метки: CSS: линия за градиентом текста

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Можно ли перенаправить пользователя на другую страницу, не очищая историю страницы с помощью JavaScript и HTML?

iOS может воспроизводить AVPlayer, не дожидаясь AVPlayerItem

jQuery Mobile отключает / включает элементы управления