Как сделать переход между элементами?
Хочу создать переход цветом между картинкой и фоном на сайте как на 2 скрине.
Скрин моего сайта:
Скрин другого сайта:
CSS:
@charset "UTF-8"; body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #2c2c2c; height: 2400px; width: auto; overflow-x: hidden; } #header { position: relative; width: auto; height: 820px; background-image: url(../../images/fon.png); background-position: top center; background-repeat: no-repeat; background-color: #2C2C2C; background-size: cover; overflow: hidden; } #header_gradient { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: linear-gradient(to top, #2C2C2C 0%, transparent 100%); mix-blend-mode: multiply; } #content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 0px; } #content2 { position: absolute; top: 600px; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 20px; margin: 262px 0; } #server-name { font-size: 62px; color: white; text-shadow: 6px 6px 8px rgba(0, 0, 0, 0.5); margin: 12px 0; } #discord-link { color: white; font-size: 28px; text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.5); text-decoration: none; } #about-project { font-size: 42px; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin: 24px 0; } |
@charset "UTF-8"; body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #2c2c2c; height: 2400px; width: auto; overflow-x: hidden; } #header { position: relative; width: auto; height: 820px; background-image: url(../../images/fon.png); background-position: top center; background-repeat: no-repeat; background-color: #2C2C2C; background-size: cover; overflow: hidden; } #header_gradient { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: linear-gradient(to top, #2C2C2C 0%, transparent 100%); mix-blend-mode: multiply; } #content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 0px; } #content2 { position: absolute; top: 600px; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 20px; margin: 262px 0; } #server-name { font-size: 62px; color: white; text-shadow: 6px 6px 8px rgba(0, 0, 0, 0.5); margin: 12px 0; } #discord-link { color: white; font-size: 28px; text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.5); text-decoration: none; } #about-project { font-size: 42px; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin: 24px 0; }
HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> </head> <body id="body"> <div id="header"> <div id="header_gradient"> </div> </div> <div id="content"> <h1 id="server-name">Old Memories</h1> <a id="discord-link" href="https://discord.gg/WpWxxnrN">Наш Discord</a> </div> <div id="content2"> <h2 id="about-project">О проекте</h2> </div> <script src="script.js"></script> </body> </html> |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> </head> <body id="body"> <div id="header"> <div id="header_gradient"> </div> </div> <div id="content"> <h1 id="server-name">Old Memories</h1> <a id="discord-link" href="https://discord.gg/WpWxxnrN">Наш Discord</a> </div> <div id="content2"> <h2 id="about-project">О проекте</h2> </div> <script src="script.js"></script> </body> </html>
Дополнительно:
Обычный множественный фон.
Зачем для этого пустой div?
Абсолюты тут вообще не нужны.
Контент, который должен быть внутри header, должен быть там и в разметке.
А вы вытащили его наружу, а потом позиционировали его абсолютом. Зачем??
Почитайте про поток, флексы, гриды, семантические теги.
И старайтесь не использовать id для стилизации, не стреляйте сами себе в ногу.
<body> <header class="header"> <div class="container"> <h1 id="server-name">Old Memories</h1> <a id="discord-link" href="https://discord.gg/WpWxxnrN">Наш Discord</a> </div> </header> <main class="main"> <section class="about"> <h2 id="about-project">О проекте</h2> <p>текст</p> </section> </main> <script src="script.js"></script> </body> |
<body> <header class="header"> <div class="container"> <h1 id="server-name">Old Memories</h1> <a id="discord-link" href="https://discord.gg/WpWxxnrN">Наш Discord</a> </div> </header> <main class="main"> <section class="about"> <h2 id="about-project">О проекте</h2> <p>текст</p> </section> </main> <script src="script.js"></script> </body>
И для .header задавайте фон картинкой и градиент.
Получается в .header добавить background: linear-gradient(to top, #2C2C2C 0%, transparent 100%); ?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для осуществления перехода между элементами на веб-странице можно использовать различные методы, в зависимости от конкретной ситуации. Вот несколько способов, которые можно использовать:
1. Ссылки с якорями:
Для создания переходов между элементами на одной и той же странице можно использовать якоря. Для этого необходимо добавить атрибут id к элементу, к которому нужно осуществить переход, и затем создать ссылку с атрибутом href, указывающим на этот id. Например:
<a href="#element_id">Перейти к элементу</a> <div id="element_id">Содержимое элемента</div>
2. JavaScript:
С использованием JavaScript можно создать более динамические переходы между элементами. Например, можно использовать метод scrollIntoView(), который прокручивает страницу к указанному элементу. Пример использования:
<button>Перейти к элементу</button> <div id="element_id">Содержимое элемента</div>
3. CSS:
С помощью CSS также можно создать стилизованные переходы между элементами, например, с помощью псевдокласса :target. При клике на ссылку с якорем, элемент с соответствующим id будет выделен. Пример:
:target { background-color: yellow; } <a href="#element_id">Перейти к элементу</a> <div id="element_id">Содержимое элемента</div>:target { background-color: yellow; } <a href="#element_id">Перейти к элементу</a> <div id="element_id">Содержимое элемента</div>
Это лишь некоторые из способов реализации переходов между элементами на веб-странице. Выбор конкретного метода зависит от требований проекта и предпочтений разработчика.