Xwab
Форумыnavigate_nextHTML/CSS

Небольшие уроки по CSS
Сообщения
Pisatel

Суть данного топика- в заголовке. Давайте делиться тем, что мы умеем, знаем, где-то подсмотрели и т.д. Обсуждение, в принципе, лишнее, желательно только примеры. Никогда не думайте: "раз знаю я- значит знают и другие". Это далеко не так.
Что ж, начну. Увидел как-то на одном сайте украшательство в виде верхнего бордюра, который как бы нависал над сайтом, придавая ему более симпатичный вид. Стало интересно, что же это. Оказалось- добавлен псевдокласс 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

23 Дек 2012, 15:04
Tringle

Обычно на этом месте располагается header, но раз его там в данный момент нет, то такой вариант будет самый логичный.

Но он не самый адекватный, ведь, например, в таком блоке можно расположить какой-нибудь текст. А в данном примере этого сделать не получиться.

23 Дек 2012, 20:59
Pisatel

Licetto, немного не так. Хеадер идет ниже, этот блок выше всех элементов, он располагается над телом всего документа.

24 Дек 2012, 5:32
Tringle

Я и говорю, что этот header заменяет этот before блок.

Когда у тебя есть нормальный header, никаких лишние элементы не нужны, особенно, когда они не обладают никакой спецификой.

24 Дек 2012, 8:45
Pisatel

Licetto, не понимаю, о чем ты. Специфика данного элемента- украшательство. Что такое header? Это набор мета- тегов и подключений js и css. Что мы обсуждаем? Плюсы или минусы body: before? Плюс один( на любителя) - это украшательство. Минусы- я лично их вообще не вижу. Если кто-то считает это лишним- да пожалуйста! А вообще, данный пример имеет еще обучающее назначениие: включив фантазию, можно делать весьма няшные вещи с before и after.

25 Дек 2012, 8:45
Tringle

Если для тебя header - это набор мета-тегов и подключений js и css, то я не вижу смысла вообще вести какие-либо дискуссии по поводу HTML, CSS и дизайна в целом.

25 Дек 2012, 9:52
Pisatel

Licetto, я вижу, что все очень умные здесь и сразу "не видят смысла". А смысл есть. Я ошибаюсь? Возможно. Так укажи на ошибки, помоги, поделись. Многие строят из себя мегадизайнеров и кулкодеров- возможно, это и действительно так, но что же мешает поделиться знаниями?! Я лично никогда не считал себя кем-то из вышеперечисленных, я делюсь тем, что знаю. Возможно, повторюсь- Возможно, это кому-нибудь пригодится.
добавлено спустя 1 минуту:
Начнем так. Что для тебя header?

25 Дек 2012, 10:12
Tringle

Хорошо, попробуем.

В 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>.

Теперь, я надеюсь, ты понял что я имел ввиду?

25 Дек 2012, 11:04
Pisatel

Благодарю, понял. Весьма поучительно. HTML5 еще не изучал, именно поэтому и возникло недопонимание.

25 Дек 2012, 15:11
Ответить на тему