<html>
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="materialPreloader.js"></script>
<link rel="stylesheet" type="text/css" href="css/materialPreloader.css">
<script type="text/javascript">
jQuery(document).ready(function($) {
preloader = new $.materialPreloader({
position: 'top',
height: '5px',
col_1: '#159756',
col_2: '#da4733',
col_3: '#3b78e7',
col_4: '#fdba2c',
fadeIn: 200,
fadeOut: 200
});
$(window).on('load', function(){console.log('BlaBla'); preloader && preloader.off();});
preloader.on();
setTimeout(preloader.off,9000);
});
</script>.wrapper:hover .wrap,.image:hover {
z-index:1;
}display:inline-block;
.material-news {
display: inline;
font: 12px/2.5 "Arial";
text-align: justify;
color: #464646;
}
.material-news:before {
display: block;
content: '.';
color: white;
}
.readmore-btn {
display: inline;
padding-left:1ex;
font: 12px "Arial";
}
.text-list-item-dn>br {
display: none; /* Благодарю @laska */
}.articleBody .material-news {
padding: 15px;
display: block;
}.container {
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
overflow-x: scroll;
-ms-writing-mode: tb-lr;
-webkit-writing-mode: vertical-lr;
-moz-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
writing-mode: vertical-lr;
}
.items {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
-ms-writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
-moz-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
}.proportionale {
position:absolute;
width: 100vmin;
height: 66vmin; /* соотношение всегда будет 3/2 */
}
@media orientation: portrait {
.proportionale {
position:absolute;
width: 66vmin;
height: 100vmin; /* при портрете соотношение всегда будет 2/3 */
}
}main {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
width:90%;
margin: auto;
}
section {
order: 0;
flex: 0 1 60vw;
align-self: stretch;
outline:blue 1px solid;
}.small {
... /* здесь спозицинируйте малый банер */
}
.big {
display: none;
}
header:hover .big {
display: block;
position: absolute;
... /* здесь спозицинируйте и анимируйте большой банер */
}html,body {
position:absolute;
top:0;bottom:0;
left:0;right:0;
overflow:hidden;
}
body {
overflow:auto;
}
.modal {
position:fixed;
top:0;bottom:0;
left:0;right:0;
}<input id="yourtextbox" ... autofocus />function setFocusToTextBox(){
var textbox = document.getElementById("yourtextbox");
textbox.focus();
textbox.scrollIntoView();
}<main>
<div>
<p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
</div>
<div>
<p>Span</p><p>Span</p><p>Span</p>
</div>
<div>
<p>Span</p><p>SpanSpanSpanSpan</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
</div>
</main>main {
position:relative; /* должно быть отлично от static */
overflow:hidden;
}
div {
vertical-align:top;
position:relative;
display:inline-block;
z-index:1; /* заменить на background:gray; если плохо использовать z-index */
}
div:after {
content:'';
position:absolute;
left:0;right:0;
bottom:-1000%; /* здесь максимально возможная разница между блоками в процентах (здесь х10)*/
top:0;z-index:-1; /* заменить top на top:100%; если нужно забрать z-index */
background:gray;
}<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 15 169" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="shape">
<polygon points="3,84 7,76 4,84 7,92 "/>
</symbol>
<polygon points="3,84 7,76 4,84 7,92 "/>
<symbol id="shapeRed">
<use xlink:href="#shape" fill="red"/>
</symbol>
<symbol id="shapeGreen">
<use xlink:href="#shape" fill="green"/>
</symbol>
</svg>.arrow {background:url(icon.svg#shapeGreen);}
.arrow:hover {background:url(icon.svg#shapeRed);}atb = document.styleSheets[__найти номер стайлшита__].cssRules[__найти номер привила__].style.backgroundImage;
atb = atb.replace('url(,','').replace(/\)$/,'');
atb = window.btoa('<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 15 169" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href='+abt+'/></svg>');
document.styleSheets[__номер стайлшита__].cssRules[__номер привила__].style.backgroundImage = atb;section.bullets table tr td.date span.title { /* должен быть селектор .bullets .date .title */
font-size: 12px;
text-transform: uppercase;
color: #777;
font-weight: normal;
display: block;
}
section.bullets table tr td.date span { /* как максимум .bullets .date span */
font-family: gotham;
font-size: 16px;
color: #777;
font-weight: 600;
display: block;
}
section.bullets table tr td.fav { /* максимум селектор .bullets .fav */
padding-right: 40px;
}
section.bullets table tr td.fav a.btn { /* .bullets .fav .btn */
text-decoration: none;
padding-top: 8px;
-webkit-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
section.bullets table tr td.fav a.btn:hover { /* .bullets .fav .btn:hover */
color: #5824dc;
border-color: #5824dc;
-webkit-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}function feather(mask) {
$('img.feather').each( function(){
var src = this.attr('src');
mask = mask || this.data('mask') || 'http://dragon.deparadox.com/img/wual.png';
src = 'url(data:image/svg+xml;base64,'+btoa(
'<svg width="400" height="300" baseProfile="full" version="1.2">'+
' <defs>'+
' <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"'+ 'transform="scale(1)">'+
' <image width="100%" height="300" xlink:href="'+mask+'" />'+
' </mask>'+
' </defs>'+
' <image id="the-mask" mask="url(#svgmask2)" width="100%" height="300" y="0" x="0" xlink:href="'+src+'" />'+
' </svg>')+')';
this.attr('src',src);
});
}...
/* Добавим data-header="M" к .masonry-item*/
<div class="col-lg-3 col-md-3 col-sm-3 col-xl-12 masonry-item" data-header="M">
/* <li class="header">M</li> Убрать из разметки*/
...
</div>
....masonry-item[data-header]:before {
content: attr(data-header);
display: block;
font-weight:bold;
}<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li title="Action" id="action" ><a href="#action">Action</a></li>
<li title="Another action" id="aaction"><a href="#aaction">Another action</a></li>
<li title="Something else here" id="some"><a href="#some">Something else here</a></li>
<li class="divider"></li>
<li title="Separated link" id="separ"><a href="#separ">Separated link</a></li>
</ul>
</div>
<script>
window.onhashchange = function(e){
var secure = '; secure';
/* имя поля куки */
var name = 'menu';
/* ложим пункт меню в шапку сайта */
document.title = document.getElementById(window.location.hash.substring(1)).title;
/* ложим пункт меню в куки сайта */
document.cookie = [ name, '=', encodeURIComponent(document.title), secure].join('');
});
</script>
<style>
/* CSS */
li[id]:target {
/* здесь позиционируеш блок li в шапке меню */
}
</style>