Когда, к примеру, input checkbox невидим, а вместо него отображается иконка font awesome или др. и нужно проверить его checked и т.д.
Не использовать display:none или visibility:hidden
Использовать, например, opacity:0;
.header — фоновое изображение
.mask — полупрозрачный белый фон
.l1,.l2,.l3,.l4 — буквы вырезающие из полупрозрачного фона полноцветную картинку
.l5,.l6 — ссылка в рамке, вырезающей из полупрозрачного фона полноцветную картинку
Используются свойства: -webkit-text-fill-color:transparent; и -webkit-background-clip:text;
Полный пример:
HTML:
<div class="header"> <div class="mask"> <div class="text"> <div class="wrap"> <div class="l1">Lorem ipsum</div> <div class="l2">dolor sit amet consectetur</div> <div class="l3">sed do eiusmod tempor incididunt</div> <div class="l4">Excepteur sint</div> <a class="l5" href="#">Duis aute</a> <div class="l6"><span><i></i></span></div> </div> </div> </div> </div>
CSS:
.header{ height:860px; background:url("../images/header.jpg") center center; background-size:cover; position:relative; .mask{ height:100%; } .text{ text-transform:uppercase; text-align:center; font-weight:900; div,a{ width:100%; position:absolute; display:block; left:0; color:@color_white; text-decoration:none; } .l1{ font-size:50px; line-height:50px; top:230px; background-position:50% -230px; } .l2{ font-size:70px; line-height:70px; top:330px; background-position:50% -330px; } .l3{ font-size:30px; line-height:30px; top:450px; background-position:50% -450px; } .l4{ font-size:30px; line-height:30px; top:500px; background-position:50% -500px; } .l5{ font-size:25px; line-height:100px; top:600px; background-position:50% -600px; z-index:2; } .l6{ top:600px; z-index:1; span{ display:inline-block; width:570px; z-index:0; position:absolute; top:0; left:50%; margin-left:-285px; height:100px; border:5px solid @color_white; box-sizing:border-box; i{ display:block; height:90px; } } } } &:not(:hover){ .mask{ background:fade(@color_white,70%); .text{ div,a{ background-image:url("../images/header.jpg"); background-repeat:no-repeat; -webkit-text-fill-color:transparent; -webkit-background-clip:text; } .l6{ span{ border-color:transparent; background:url("../images/header.jpg") no-repeat 50% -605px; i{ background:fade(@color_white,70%); } } } } } } }
Используя переменные, определяем какой шрифт использовать, первый — локальный, второй с google fonts.
@font_gotham:true; @font_opensans:false; .set_fonts() when (@font_gotham=true){ @import '../css/GothamPro.css'; @font_base:GothamProRegular; @font_base_it:GothamProItalic; @font_300:GothamProLight; @font_300_it:GothamProLightItalic; @font_500:GothamProMedium; @font_500_it:GothamProMediumItalic; @font_700:GothamProBold; @font_700_it:GothamProBoldItalic; @font_900:GothamProBlack; @font_900_it:GothamProBlackItalic; .font_it{ font-family:@font_base_it; } .font_300{ font-family:@font_300; } .font_300_it{ font-family:@font_300_it; } .font_500{ font-family:@font_500; } .font_500_it{ font-family:@font_500_it; } .font_700{ font-family:@font_700; } .font_700_it{ font-family:@font_700_it; } .font_900{ font-family:@font_700; } .font_900_it{ font-family:@font_900_it; } }; .set_fonts() when (@font_opensans=true){ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese'); @font_base:'Open Sans',sans-serif; .font_it{ font-style:italic; } .font_300{ font-weight:300; } .font_300_it{ font-weight:300; font-style:italic; } .font_500{ font-weight:600; } .font_500_it{ font-weight:600; font-style:italic; } .font_700{ font-weight:700; } .font_700_it{ font-weight:700; font-style:italic; } .font_900{ font-weight:800; } .font_900_it{ font-weight:800; font-style:italic; } }; .set_fonts();
Использование:
body{ font-family:@font_base; } .ex{ .font_500(); font-size:12px; & when (@font_opensans=true){ font-size:14px; } }
Пример для less:
textarea{ padding:15px; resize:none; scrollbar-color:fade(@color_link,80%) fade(@color_link,10%); scrollbar-width:thin; } textarea::-webkit-scrollbar{ width:10px; } textarea::-webkit-scrollbar-track{ background-color:fade(@color_link,10%); } textarea::-webkit-scrollbar-thumb{ background-color:fade(@color_link,80%); }
$(window).scroll(function(){ if($(window).scrollTop()>130){ $('header .top').addClass('fixed'); } else{ $('header .top').removeClass('fixed'); } });
header{ .top{ color:@color_white; background:@color_text; padding:10px 0; &.fixed{ position:fixed; top:0; left:0; width:100%; z-index:10000; } } }
Чтобы в свойство css content автоматически подставлялось значение атрибута data-name тега.
Пример на less:
div{ &:after{ content:~"attr(data-name)"; } }
html:
<div data-name="test"></div>Пример на less:
.zoom(@zoom){ zoom:@zoom; -ms-zoom:@zoom; -webkit-zoom:@zoom; -moz-transform:scale(@zoom,@zoom); -moz-transform-origin:top center; } img{ .zoom(.7); }
