Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Вкладки с индикатором на чистом CSS3 бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
23.12.2023, 13:29
Вкладки с индикатором на чистом CSS3




Это простые вкладки на чистом CSS, которые созданы с индикатором показа слайдов, где только задействованы стили под дизайн и функции перехода. И можно понять из заголовка, что сегодня в материале узнаете, как самостоятельно создавать вкладки с помощью индикатора, используя только HTML и CSS. Где вы сами выставите значение под различную тематику, а также с изменением цветовой палитры под разные стилистики сайта.

По своей оригинальной конструкций, эти кладки интерфейса или просто вкладка представляет собой графический элемент для управления иди задействование, чтобы одновременно содержать несколько панелей или документов в одном окне, что предоставлено для пользователей. Конструкция вкладок, что выполнены на чистом CSS - это самый простой способ привлечь больше пользователей, а также разместить информацию, что показывается в один клик.

Установка:

HTML

Код

<div class="mudesamod">
  <header>Вкладки с индикатором</header>
  <input type="radio" name="pesnulad" checked id="home">
  <input type="radio" name="pesnulad" id="blog">
  <input type="radio" name="pesnulad" id="code">
  <input type="radio" name="pesnulad" id="help">
  <input type="radio" name="pesnulad" id="about">
  <nav>
  <label for="home" class="home"><i class="fas fa-home"></i>Home</label>
  <label for="blog" class="blog"><i class="fas fa-blog"></i>Blog</label>
  <label for="code" class="code"><i class="fas fa-code"></i>Code</label>
  <label for="help" class="help"><i class="far fa-envelope"></i>Help</label>
  <label for="about" class="about"><i class="far fa-user"></i>About</label>
  <div class="pesnulad"></div>
  </nav>
  <section>
  <div class="conseculad conseculad-1">
  <div class="title">Топ-5 кошельков</div>
  <p>Если вы обращали внимание на новости в сфере технологий и финансов, вы знаете, что за последние месяцы криптовалюта снова пережила стремительный рост.</p>
  </div>
  <div class="conseculad conseculad-2">
  <div class="title">Они хотят иметь</div>
  <p>Из-за этого роста и того факта, что криптовалюта никуда не денется, многие малые предприятия хотят участвовать в этой сфере. Они хотят иметь возможность принимать криптовалютные платежи, чтобы открыть свои физические или интернет-магазины для совершенно новой аудитории.</p>
  </div>
  <div class="conseculad conseculad-3">
  <div class="title">Кошелек WLX</div>
  <p>Для этого им часто потребуется заручиться помощью кошелька с криптовалютой. Это поможет им безопасно и надежно отправлять, хранить и получать криптовалюту. Но из-за того, что рекламируется так много вариантов кошельков, какие из них лучше всего использовать? В этом сообщении блога мы рассмотрим некоторые из них.</p>
  </div>
  <div class="conseculad conseculad-4">
  <div class="title">Этот кошелек</div>
  <p>Этот кошелек также отлично подходит для совершения платежей. Вы можете совершать глобальные переводы, обеспечивать мгновенные платежи и даже автоматизировать повторяющиеся платежи с течением времени. Безопасность, предлагаемая этим кошельком, без сомнения, является одной из их сильных сторон. </p>
  </div>
  <div class="conseculad conseculad-5">
  <div class="title">От шифрования</div>
  <p>От шифрования данных до регулярных аудитов и тестов команда сосредоточена на обеспечении безопасности ваших монет и токенов.</p>
  </div>
  </section>
  </div>


CSS

Код

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  overflow: hidden;
  padding: 0 20px;
  background: #17a2b8;
}
::selection{
  background: rgba(23,162,184,0.3);
}
.mudesamod{
  max-width: 700px;
  width: 100%;
  margin: 200px auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.mudesamod header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.mudesamod nav{
  position: relative;
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
}
.mudesamod nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  color: #17a2b8;
  font-size: 17px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
}
.mudesamod nav label:hover{
  background: rgba(23,162,184,0.3);
}
#home:checked ~ nav label.home,
#blog:checked ~ nav label.blog,
#code:checked ~ nav label.code,
#help:checked ~ nav label.help,
  #about:checked ~ nav label.about{
  color: #fff;
}
nav label i{
  padding-right: 7px;
}
nav .pesnulad{
  position: absolute;
  height: 100%;
  width: 20%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 5px;
  background: #17a2b8;
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#blog:checked ~ nav .pesnulad{
  left: 20%;
}
#code:checked ~ nav .pesnulad{
  left: 40%;
}
#help:checked ~ nav .pesnulad{
  left: 60%;
}
#about:checked ~ nav .pesnulad{
  left: 80%;
}
section .conseculad{
  display: none;
  background: #fff;
}
#home:checked ~ section .conseculad-1,
#blog:checked ~ section .conseculad-2,
#code:checked ~ section .conseculad-3,
#help:checked ~ section .conseculad-4,
#about:checked ~ section .conseculad-5{
  display: block;
}
section .conseculad .title{
  font-size: 21px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}
section .conseculad p{
text-align: justify;
}


Если вы новичок и знаете основы HTML и CSS, вы также можете создать этот тип вкладок на чистом CSS и использовать их на своих HTML-страницах, веб-сайтах и ​​проектах.

Демонстрация

Скачать Вкладки с индикатором на чистом CSS3
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 43 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Кисть для ...
    Стили для ...
    Шрифт - El...
    Фоны для ф...
    Кисть для ...
    PSD исходн...
    Кисть для ...