Суть данного топика- в заголовке. Давайте делиться тем, что мы умеем, знаем, где-то подсмотрели и т.д. Обсуждение, в принципе, лишнее, желательно только примеры. Никогда не думайте: "раз знаю я- значит знают и другие". Это далеко не так.
Что ж, начну. Увидел как-то на одном сайте украшательство в виде верхнего бордюра, который как бы нависал над сайтом, придавая ему более симпатичный вид. Стало интересно, что же это. Оказалось- добавлен псевдокласс before к body. Код и скриншот выкладываю, может пригодится кому.
body:before {
content: "";
position: fixed;
top: -10px; /*отступ вверх от тела*/
left: 0;
width: 100%; /*во всю ширину арбузера*/
height: 15px; /*высота бордюра*/
z-index: 1; /*возвышаем над всеми элементами*/
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .8 ); /*задаем тень блоку с альфа- прозрачностью, на всякий случай для всех арбузов*/
}
В общем, можно подобное сделать и с псевдоклассом after, но если высота страницы небольшая, меньше высоты окна арбузера, то данный элемент внизу будет смотреться весьма несимпатично
Специально для xwab.mobi
Обычно на этом месте располагается header, но раз его там в данный момент нет, то такой вариант будет самый логичный.
Но он не самый адекватный, ведь, например, в таком блоке можно расположить какой-нибудь текст. А в данном примере этого сделать не получиться.
Licetto, немного не так. Хеадер идет ниже, этот блок выше всех элементов, он располагается над телом всего документа.
24 Дек 2012, 5:32Я и говорю, что этот header заменяет этот before блок.
Когда у тебя есть нормальный header, никаких лишние элементы не нужны, особенно, когда они не обладают никакой спецификой.
Licetto, не понимаю, о чем ты. Специфика данного элемента- украшательство. Что такое header? Это набор мета- тегов и подключений js и css. Что мы обсуждаем? Плюсы или минусы body: before? Плюс один( на любителя) - это украшательство. Минусы- я лично их вообще не вижу. Если кто-то считает это лишним- да пожалуйста! А вообще, данный пример имеет еще обучающее назначениие: включив фантазию, можно делать весьма няшные вещи с before и after.
25 Дек 2012, 8:45Если для тебя header - это набор мета-тегов и подключений js и css, то я не вижу смысла вообще вести какие-либо дискуссии по поводу HTML, CSS и дизайна в целом.
25 Дек 2012, 9:52Licetto, я вижу, что все очень умные здесь и сразу "не видят смысла". А смысл есть. Я ошибаюсь? Возможно. Так укажи на ошибки, помоги, поделись. Многие строят из себя мегадизайнеров и кулкодеров- возможно, это и действительно так, но что же мешает поделиться знаниями?! Я лично никогда не считал себя кем-то из вышеперечисленных, я делюсь тем, что знаю. Возможно, повторюсь- Возможно, это кому-нибудь пригодится.
добавлено спустя 1 минуту:
Начнем так. Что для тебя header?
Хорошо, попробуем.
В HTML5 появились новые контейнеры - <header></header>, <nav></nav>, <article></article>, <section></section>, <aside></aside> и, наконец, <footer></footer>. Это не все новые контейнеры, но этого будет достаточно.
Раньше (именно для данного случая) люди присваивали контейнеру <div></div> определённый класс или идентификационный номер, который давал понять какой стиль нужно использовать. Принято считать, что у шапки стиль должен иметь название Header, у навигации Navigation или просто Nav, у тела Content или Section, у подвала сайта - Footer.
Но с приходом HTML5, мы можем не указывать класс и идентификационный номер, потому что контейнеры <header></header>, <footer></footer>, и другие, должны быть только одни на странице, и забирать указания они будут автоматически из стиля header, footer, и так далее.
Ты, в данном случае, путаешь такие понятия как Header и Head.
• Header - это голова, шапка сайта. Когда люди так выражаются, они не имеют ввиду контейнер <head></head>.
• Content - это тело, наполнение сайта. Если употребляешь данное слово - это не значит, что ты имеешь ввиду контейнер <body></body>.
• Footer - это ноги, подвал сайта. Определённого контейнера до HTML5 под это понятие не было, но сейчас оно появилось - это <footer></footer>.
Теперь, я надеюсь, ты понял что я имел ввиду?
Благодарю, понял. Весьма поучительно. HTML5 еще не изучал, именно поэтому и возникло недопонимание.
25 Дек 2012, 15:11