Применить стили к :before
(1200 — ширина рабочей области)
$(window).load(function(){
var half=(parseInt($(window).width())-1200)/2;
$('head').append('<style>.title:before{width:'+(half-15)+'px;left:-'+half+'px;}</style>');
});
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 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%);
}
}
}
}
}
}
}