Блоки CSS сетки с текстом при наведении
 | |
| Оригинальное решение для текста, который построен на блоки, где идет встроенный текст в сетку, плюс эффект на CSS с развертыванием ключевых слов. Надеюсь некоторым понятно, что это изначально будет, так как при просмотре и при установке, мне эта функция понравилась, где вероятно найдет свое применение в плане навигаций. Так как на ее нужно постоянно выделять место, то некоторые просто прописывают красиво в сетку ключевые слова в нужный вам раздел. Но здесь присутствует эффект, и больше всего его применение идет на отдельную страницу. Так как изначально написанные обозначение текста присутствуют верхнем левом углу, где компактно располагаются. Но только стоит навести курсор на них, так они размешаются по всей страницы, где выстраиваются в колонки. Может быть, вы видели вид текста в сетку на некоторых сайтах, особенно на современном дизайне, или где находится много категорий, что для навигаций очень сложно изначально показать. Но с таким эффектам сетки, вы намного упрощаете навигацию по сайту, где намного быстрее находится материал. В основном в разделе категорий или опций разработчики используют эти виды текста в макете сетки. При открытие страницы на сайте.  При наведение на прописанные слова происходит эффект.  Как пример на отдельной страницы прописаны запросы, где при клике переходите на заданную информацию, но это сделано на вновь созданной странице, что также не исключаю в аналогичной мере поставить на модальные одна, и поставить кнопку, под открытие окна или надпись.  Как создать CSS-текст для разметки сетки при наведенииПо сути изначально создан основной элемент div, затем создал несколько элементов div с одинаковым именем класса и поместил текст в элементы div. Где также можно использовать свой оригинальный шрифт, если он уже изначально подключен на сайте. Как видим, здесь присутствует 2 класса для основного div class= "vesuden_teks_setku", а для всех текстовых div выставлено имя класса class="akstuma". Где нужно заметить, как по умолчанию идет, и эти классы остались под ссылку перехода. В основной класс отвечает за дизайн, но здесь за высоту кнопки или ширину, ведь оформление не производилось, здесь самостоятельно под свой стиль сайте делается. Если вы не знаете VW, которое зависит от ширины порта. Кроме того, в материал добавлено свойства flex display и flex-wrap. Где сначала было поставлены небольшие единицы размера и ширины, ведь они будут расширяться при наведении. Запятая после каждого текста или деления ожидает последний, но и завершает точку на последнем тексте, используя last-child. HTML Вы можете видеть на веб-сайтах, что есть много категорий или опций, доступных в текстовом макете, но если они есть, они становятся рамкой, где по сути, это называется текст в макете сетки. Код <div class="vesuden_teks_setku"> <div class="akstuma">Zornet.Ru</div> <div class="akstuma">CSS</div> <div class="akstuma">HTML</div> <div class="akstuma">jQuery</div> <div class="akstuma">Форум</div> <div class="akstuma">Скрипты</div> <div class="akstuma">Шаблоны</div> <div class="akstuma">Ajax</div> <div class="akstuma">Стили</div> <div class="akstuma">PHP</div> <div class="akstuma">JS</div> <div class="akstuma">Ucoz</div> <div class="akstuma">Меню</div> <div class="akstuma">Коды</div> <div class="akstuma">php</div> </div> Как можно заметить, что по умолчанию не предусмотрено место под ссылку для перехода на другую страницу. Что ниже представлен полноценный код, где уже вы можете поставить ссылку под популярные запросы. Этот код выстроен под ссылки на переход: Код <div class="vesuden_teks_setku"> <a class="akstuma" href="/">Web</a> <a class="akstuma" href="/">Zornet.Ru</a> <a class="akstuma" href="/">HTML</a> <a class="akstuma" href="/">jQuery</a> <a class="akstuma" href="/">Форум</a> <a class="akstuma" href="/">Файлы</a> <a class="akstuma" href="/">Скрипты</a> <a class="akstuma" href="/">Шаблоны</a> <a class="akstuma" href="/">Ajax</a> <a class="akstuma" href="/">PHP</a> <a class="akstuma" href="/">Раздел</a> <a class="akstuma" href="/">JS</a> <a class="akstuma" href="/">uCoz</a> <a class="akstuma" href="/">Меню</a> <a class="akstuma" href="/">Коды</a> <a class="akstuma" href="/">Сетка</a> </div> CSS Код .vesuden_teks_setku { display: flex; width: 27vw; padding: 3em; flex-wrap: wrap; transition: all .25s linear; font-size: 1vw; } .vesuden_teks_setku .akstuma { outline: 1px solid rgba(0, 0, 0, 0); padding: .23em 0; min-width: 2.90em; transition: inherit; color: #4e4646; text-align: center; font-size: 18px; font-weight: bold; } .vesuden_teks_setku .akstuma:after { content: ', '; transition: inherit; width: .7em; overflow: hidden; height: 12px; margin-bottom: -.18em; akstuma-align: left; display: inline-block; } .vesuden_teks_setku .akstuma:last-child:after { content: '.'; } .vesuden_teks_setku .akstuma:hover { background: #271f40; color: #ffe7a1; cursor: pointer; border-radius: 5px; } .vesuden_teks_setku:hover { width: 85vw; } .vesuden_teks_setku:hover .akstuma { min-width: 8em; padding: 2em 0; } .vesuden_teks_setku:hover .akstuma:after { width: 0; } Стилистика позволит пользователю или гостям сайта остается найти свою категорий, где при наведении на слова появляется кнопка, а при клике вы переходите на заданную страницу. Таким образом идет создание встроенного текста в сетку, где используем HTML и CSS, без JavaScript. Где само решение обосновано на CSS тексте для размещения сетки при наведении курсора. Другими словами можно выразить как можно кратко, то здесь встроенные тексты изменяются на вид сетки при наведении мыши. Сегодня вы научитесь изменять вид текста в виде сетки с использованием CSS + HTML, где можете использовать это в своих службах, как категории или тегах, где создаем страницы или модальное окно под такой эффект и так далее. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |