CSS

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

Перейти к: навигация, поиск
stub.png
Данная страница находится в разработке.
Эта страница ещё не закончена. Информация, представленная здесь, может оказаться неполной или неверной.

Если вы считаете, что её стоило бы доработать как можно быстрее, пожалуйста, скажите об этом.


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

Содержание

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

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

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

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

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

[править] Как сделать чтобы 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] (англ.)

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

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

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

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

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

[править] 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
Источник — «http://xgu.ru/wiki/CSS»