Leaderboard
Popular Content
Showing content with the highest reputation on 08/31/2018 in Posts
-
Решил поиграться с тегом details и вот что получилось: See the Pen KxaPyX by Alexandr (@AlexZaw) on CodePen. Для поддержки EDGE и IE9-11 пришлось дублировать код, так как они не поддерживают тег details, так что, при использовании чекбоксов код получится короче, но тем не менее вдруг кому пригодится способ стилизации details. (если нужно зафиксировать меню - меняем позиционирование у details и .mmenu ) <details> <summary tabindex='1'> <span class="top"></span> <span class="center"></span> <span class="bottom"></span> </summary> <ul class="mmenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> </ul> </details> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt itaque eum minima exercitationem enim incidunt, eveniet ipsa officia quasi aut eaque quas vel vero atque a perspiciatis tempora! In, eligendi. details { /*position: fixed;*/ position: relative; } ::-webkit-details-marker { display: none; } ::-moz-list-bullet { list-style-type: none; } summary { position: relative; width: 30px; height: 20px; outline: none; } summary span { position: absolute; left: 0; width: 100%; height: 3px; background: #000; border-radius: 3px; transition: all .5s; } .top { top: 0; } .center { top: 50%; transform: translateY(-50%); } .bottom { bottom: 0; } .mmenu { /*position: relative;*/ position: absolute; padding: 0; list-style: none; overflow: hidden; background: #ccc; border-radius: 10px; box-shadow: 0 0 5px #000, inset 0 0 5px #fff } .mmenu a { text-decoration: none; font-size: 18px; color: midnightblue; position: relative; overflow: hidden; } .mmenu a:before { content: ''; display: block; position: absolute; height: 10px; width: 3px; transform: rotate(45deg); background: #fff; right: 100%; top: 6px; opacity: 0; } .mmenu a:hover:before { animation: move .2s linear; animation-fill-mode: forwards } details[open] .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } details[open] .bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } details[open] .center { opacity: 0; } details[open] .mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; } @keyframes showMenu { 0% { padding: 0; opacity: 0; } 100% { opacity: 1; padding: 20px 40px; } } @keyframes move { 0% { right: 100%; opacity: 0; } 50% { right: 50%; opacity: 1; } 100% { right: 0; opacity: 0; } } /*EDGE support*/ @supports (-ms-ime-align:auto) { details, summary { display: block; } summary~.mmenu { opacity: 0; } summary:focus~.mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; } summary:focus .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .bottom.bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .center { opacity: 0; } .mmenu a:hover:before { animation: move .2s linear; animation-fill-mode: forwards } } /*IE9-11 support*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { details, summary { display: block; } summary~.mmenu { visibility: hidden; } summary:focus~.mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; visibility: visible; } summary:focus .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .bottom.bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .center { opacity: 0; } }2 points
This leaderboard is set to Kiev/GMT+02:00
-
Upcoming Events
No upcoming events found -
Сообщения форума
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }
-
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
-
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number">
-
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-