CSS

Материал из Xgu.ru

Данная страница находится в разработке. Эта страница ещё не закончена. Информация, представленная здесь, может оказаться неполной или неверной. Если вы считаете, что её стоило бы доработать как можно быстрее, пожалуйста, скажите об этом.

Здесь пока собираем различные интересные заметки, касающиеся разметки и дизайна web-страницы, не только CSS, потом разрежем

Содержание 1 Вопросы и ответы 1.1 Как сделать чтобы фиксированный (fixed) div по одной оси был плавающим по другой? 1.2 Как сделать чтобы div прокручивался вместе со страницей до верха, а потом зависал (sticky sidebar)? 1.3 Как сделать несколько рамок у одного div'а? 2 Дополнительная информация 2.1 Шрифты 2.2 less.js 2.3 Twitter Bootstrap

[править] Вопросы и ответы

[править] Как сделать чтобы фиксированный (fixed) div по одной оси был плавающим по другой?

Так не получится, но можно вложить один div в другой:

<div style='float:right; width: 180px;'>
 <div style='position: fixed'>
   <!-- Your content -->
 </div>
</div>

Источник: Align div right with position fixed

[править] Как сделать чтобы div прокручивался вместе со страницей до верха, а потом зависал (sticky sidebar)?

$(function(){ // document ready
 
  var stickyTop = $('.sticky').offset().top; // returns number
 
  $(window).scroll(function(){ // scroll event 
 
    var windowTop = $(window).scrollTop(); // returns number
 
    if (stickyTop < windowTop) {
      $('.sticky').css({ position: 'fixed', top: 0 });
    }
    else {
      $('.sticky').css('position','static');
    }
 
  });
 
});

И подробное объяснение, как это работает:

• [1] (англ.)

Есть ещё различные плагины для этого, например:

• Sticky Sidebar (англ.)

[править] Как сделать несколько рамок у одного div'а?

Нормального метода нет, но есть несколько окольных путей:

• Multiple Borders with CSS (англ.)

[править] Дополнительная информация

[править] Шрифты

• http://cssfontstack.com/ (англ.) — таблица шрифтов CSS

[править] less.js

• Sass vs. LESS (англ.) — глубокое сравнение Sass и Less.js

[править] Twitter Bootstrap

• 50 Must-have plugins for extending Twitter Bootstrap (англ.) — кайфовая подборка плагинов для Бутстрепа
• Bootsnipp (англ.) — Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework; подборка элементов веб-страниц на bootstrap