• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Реализовать переключение вкладок на CSS (Красивые переключатели табы для сайта на HTML И CSS)
Реализовать переключение вкладок на CSS
Kosten
Дата: Среда, 2019-06-05, 03:30 | Сообщение 1
Администраторы
Сообщений:22600
Награды: 56


Обратите внимание на то, как реализовать функцию вкладки, которую можно переключать одним щелчком мыши, если имеется много информации. Так как такая функция переключателя играет большую роль на сайте, в плане функциональности. Ведь каждая вкладка имеет свою информацию. Если смотреть кино сайты, но почти все применяют вкладки, но разве по дизайну и стилистике переделывают.

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

Здесь выставил на каждую страницу вкладку и подписал на кнопках, чтоб для всех было изначально понятно, что и какая функция находится вкладках.



HTML

Код
<div class="sevalua">
    <input id="vomplimen-1" type="radio" name="radio-set" class="vomplimen-selector-1" checked="checked" />
    <label for="vomplimen-1" class="vomplimen-label-1">1 </label>

    <input id="vomplimen-2" type="radio" name="radio-set" class="vomplimen-selector-2" />
    <label for="vomplimen-2" class="vomplimen-label-2">2 </label>

    <div class="budcom-nsoequels"></div>

    <div class="verwhelming">
        <div class="verwhelming-1">
            <h2>Здесь ключевое слово</h2>
            <p>Идет первое краткое описание на материал.</p>
        </div>
        <div class="verwhelming-2">
            <h2>Ключевое слово</h2>
            <p>Здесь пишем второе описание</p>
        </div>
    </div>
</div>

CSS

Код
.sevalua {
position: relative;
margin: 40px auto;
width: 750px;
}

.sevalua input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}

.sevalua input#vomplimen-2{
left: 120px;
}

.sevalua label {
background: #5ba4a4;
background: -moz-linear-gradient(top, #5ba4a4 0%, #1abc9c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#1abc9c));
background: -webkit-linear-gradient(top, #5ba4a4 0%,#1abc9c 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#1abc9c 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#1abc9c 100%);
background: linear-gradient(top, #5ba4a4 0%,#1abc9c 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 80px;
color: #0c4d40;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.sevalua label:after {
verwhelming: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}

.sevalua input:hover + label {
background: #5ba4a4;
}

.sevalua label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.vomplimen-label-2 {
z-index: 3;
}

.sevalua input:checked + label {
background: #fff;
z-index: 6;
}

.budcom-nsoequels {
clear: both;
}

.verwhelming {
background: #fff;
position: relative;
width: 100%;
height: 240px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}

.verwhelming div {
position: absolute;
top: 0;
left: 0;
padding: 25px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}

.sevalua input.vomplimen-selector-1:checked ~ .verwhelming .verwhelming-1,
.sevalua input.vomplimen-selector-2:checked ~ .verwhelming .verwhelming-2 {
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
}

.verwhelming div h2{
color: #0c4d40;
margin: 0 0 10px 0;
font-weight: bold;
}

.verwhelming div p {
font-size: 14px;
line-height: 22px;
font-style: italic;
text-align: left;
margin: 0;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(12,77,64, 0.1);
}

@media only screen and (max-width: 767px) {
body {
padding: 0 10px;
}

.sevalua {
margin: 40px 0;
width: 100%;
}

.sevalua input {
margin: 0;
}

.verwhelming {
min-height: 450px;
}

.verwhelming div {
padding: 20px;
}
}

В стилистику CSS добавлены медиа-запрос, это сделано для того, когда вы сделаете его соответствующим для смартфона, точнее, чтоб на всех мобильных экранах показывал корректно и понятно.

Демонстрация
Прикрепления: 5089952.png(34.1 Kb) · gasekin.zip(3.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Реализовать переключение вкладок на CSS (Красивые переключатели табы для сайта на HTML И CSS)
  • Страница 1 из 1
  • 1
Поиск: