Less:
.block{ position:relative; &:before{ content:''; position:absolute; top:0; left:-20px; display:block; width:20px; height:100px; background:@color_white; -webkit-transform:skewX(15deg); -moz-transform:skewX(15deg); -ms-transform:skewX(15deg); -o-transform:skewX(15deg); transform:skewX(15deg); } }
Javascript:
$('#owl_1').owlCarousel({ loop:true, margin:0, items:1, nav:false, dots:false, autoplay:true, autoplayTimeout:500, animateOut:'fadeOut', animateIn:'fadeIn', });
Less:
#owl_1{ .animated{ -webkit-animation-duration:0ms; animation-duration:0ms; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .fadeOut{ -webkit-animation-name:fadeOut; animation-name:fadeOut; } @-webkit-keyframes fadeOut{ 0%{ opacity:0; } 100%{ opacity:0; } } @keyframes fadeOut{ 0%{ opacity:0; } 100%{ opacity:0; } } }
ul{ list-style:none; column-count:2; -moz-column-count:2; -webkit-column-count:2; } ul li{ -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -moz-page-break-inside:avoid; page-break-inside:avoid; break-inside:avoid-column; }
http://qaru.site/questions/34311/how-to-prevent-column-break-within-an-element
input::-ms-clear{ display:none; width:0; height:0; }
для password:
input::-ms-reveal{ display:none; width:0; height:0; }
Когда, к примеру, 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; } }
