Поскольку CSS3 начал получать больше популярности, и больше браузеров начинает поддерживать его, много общих взаимодействий, которые Вы ожидали бы от веб-сайта, которые были созданы, используя javascript, теперь заменяются чистыми решениями CSS. Сегодня я покажу Вам, как создать оживленные счет содержания, используя только CSS.И так, приступим.
HTML:
tab 1 ...tab 2 ...tab 3 ...
CSS:
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Lily Script One', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: #08C;
padding: 15px;
color: white;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}Прежде всего, чтобы копировать функциональность javascript, мы должны найти способ позволить CSS знать, что пользователь щелкнул кнопкой. С javascript мы можем просто добавить название класса по щелчку, но так как мы не собираемся использовать javascript, мы должны взломать наш путь через это. То, что я сделал, я использовал скрытую радио-кнопку, которая связана с признаком этикетки через признак рэла. Этикетка будет действовать как кнопка и когда Вы щелкнете этикеткой, этикетка вызовет “проверенный” признак той связанной радио-кнопки. Теперь мы можем предназначаться для наших стилей с a: проверенный отборщик.От повышения HTML Вы видите, что у меня есть радио-кнопка, этикетка и контейнер на том же самом уровне. Есть причина этого. С помощью удивительного родного брата CSS combinator (~) у нас может быть один отборщик, вызывающий другого отборщика того-же-самого-уровня, даже не будучи гнездящимся он вместе. Это позволяет нам иметь любую радио-кнопку с проверкой, вызывающей любой контейнер, чтобы появиться так, чтобы это копировало поведение нормального счета содержания, созданного с javascript.
В ЗАКЛЮЧЕНИИ
Теперь у Вас есть красивое оживленное содержание счета для Вашего веб-сайта, даже не трогая никакой javascript.
Исходники можно скачать архивом.