Динамическая разметка с выцветшими границами - PullRequest
Новая
       22

Динамическая разметка с выцветшими границами

0 голосов
/ 08 ноября 2011

Я работаю над воплощением разработанного макета веб-страницы.Дизайн может быть немного необычным, поэтому я не уверен, что это возможно.По сути, у меня будет поле с фиксированной шириной 900 пикселей.Контент будет располагаться посередине тела страницы.Я хочу добавить две вертикальные колонки на страницу с исчезающими pngs.Левый png будет обращен от сплошного черного слева до прозрачного справа.Правый png исчезнет от сплошного черного справа до прозрачного слева.Два PNG будут шириной 250 пикселей каждый.После того, как все расположено, макет должен выглядеть как бумага, которая исчезла на левом и правом краях.Однако хитрость заключается в изменении размера страницы.Я хотел бы убедиться, что когда ширина экрана меньше 1500 пикселей (оба столбца частично находятся за пределами экрана), столбцы не скользят под полем содержимого, а просто уменьшаются до нуля.Пожалуйста, рассмотрите изображения ниже.Черный контур - это экран, синий - содержимое, а красный - столбцы.Когда экран имеет ширину 1500px, столбцы и содержимое хорошо выровнены.Иллюзия (без границ) исчезающего изображения.! [Макет, когда экран имеет ширину 1500 пикселей] [1] Когда экран растянут, столбцы растягиваются на части, и тем не менее выцветший вид сохраняется.! [Макет, когда экран имеет ширину более 1500 пикселей] [2] Наконец, когда экран имеет ширину менее 1500 пикселей, столбцы уменьшаются, но фоновое изображение каждого столбца прикрепляется таким образом, чтобы не нарушать блеклый вид (напримербыло бы неправильно сжать левый столбец, и черные стали ближе к левой стороне поля содержимого).! [Макет при ширине экрана менее 1500 пикселей] [3]

** Не удалось опубликовать изображения: (

1 Ответ

0 голосов
/ 08 ноября 2011

Лучше всего было бы сочетание jquery и css3.

Jquery позволит вам держать основной контент по центру и иметь div с обеих сторон.В то время как CSS3 позволит вам иметь градиент с обеих сторон без необходимости в изображениях.Единственным недостатком является то, что если браузер не поддерживает CSS3, он не будет отображать градиент.Только тот, который не соответствует, является IE8 и ранее.Но есть дополнения, которые помогут (Modenizr и IE Chrome Tab)

Jquery 

$(document).ready(function(){
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

$(window).resize(function() {
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

Left Div CSS 

background-image: linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(90 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 90 90,
 right 90,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);

Right Div CSS 

background-image: linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(270 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 270 270,
 left 270,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);
...