Форум » Вопросы дизайна » Даешь уроки css! » Ответить
Даешь уроки css!
Serifa: [quote]Zoltan пишет: цитата: может, мне уже уроки css писать начинать пора xD Камрад! Давно пора! Если тебе требуется особое благословение, считай, что мы всем форумом тебе его дали)) [/quote] Предлагаю всем высказаться по данному вопросу. Дело-то ведь полезное, и ни кто-нибудь, а наш родной и знакомый Золтан решил совершить сей подвиг во благо форумного ролевого движения! Давайте его поддержим!
Zoltan: Serifa пишет: А какое именно демо тут проверял в ИЕ 8, Мозилла 3.0.5, Хром 6, опера 10.10 и 11. Все работает. Не работает только для visited. Весь урок там, т.к небыло возможности править пост.
Zoltan: Продолжаем :) Сегодня о выпадающих меню, будем использовать новые свойства css3, увы, не всеми браузерами поддерживаемые. Работает без cкругления углов в ИЕ8, опера 10.10, частичная поддержка эффектов в опера 11, идеальная совместимость - гугл хром. В любом случае, меню работает во всех браузерах. Отображается только немного по-разному :) Итак, начнём с простого, с каркаса :) У нас есть разделы и некоторые ссылки, которые мы обрамляем в хтмл код :) <ul id="nav"> <li ><a href="http://moysuperforum.ru/">На главную</a></li> </ul> Итак, начали :) ul = начало нашего меню. li - означает элемент меню. Но зачем нам одна ссылка? :) Добавим больше <ul id="nav"> <li ><a href="http://moysuperforum.ru/">На главную</a></li> <li><a href="">Разделы</a></li> </ul> Итак, пока что 2 ссылки и всё. Пока что просто, верно?) Теперь добавим в пункт разделы, собственно, выпадающие элементы ;) <ul id="nav"> <li ><a href="#">На главную</a></li> <li><a href="#">Разделы (со вложениями)</a> <ul> <li><a href="#">Игры</a> </ul> </li> </ul> Конструкция вложения в меню - открываем новый элемент li, внутрь него запихиваем новый ul - это то меню, что будет выпадать при наведении на родительский li, т.е ссылку, которую создали чуть выше. Таким образом, вложенность может быть неограниченной ;) <ul id="nav"> <li ><a href="#">На главную</a></li> <li><a href="">Разделы (со вложениями)</a> <ul> <li><a href="">Игры</a> <ul> <li><a href="">Локационки</a></li> <li><a href="">Эпизодички</a> <ul> <li><a href="">Гениальные</a></li> <li><a href="">Интересные</a></li> <li><a href="">Не очень =\</a></li> </ul> </li> <li><a href="">Настолки Оо</a></li> </ul> </li> <li><a href="">Флуд</a></li> <li><a href="">Рекламный раздел</a></li> </ul> </li> <li><a href="">Регистрация</a></li> <li><a href="">Сюжет</a></li> </ul> Теперь наш стиль, тобишь css :) Для начала, мы открывали меню (ul) с айди nav, чтобы выделить его среди прочих) Присваием этому id стиль #nav { margin: 0; padding: 7px 6px 0; background: #7d7d7d url(gradient.png) repeat-x 0 -110px; line-height: 100%; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); } Комментарии по строчкам %) Маргин - отступы, ноль пикселей - нам не нужно пустое пространство Значение отсупов от края до содержимого, в пикселях. Задний фон нашего меню, используем одну маленькую картинку, запрещаем ей повторяться. Высота строки 100% - чтобы гарантированно влез шрифт сглаживание углов в 2 пикселя. Работает в новых браузерах. Отсюда и до конца - костыли для мозиллы, чтобы меню не поломалось в ней Далее, берем известный нам айди nav и присваем стиль элементам li внутри этого айди #nav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } Полный код css #nav { margin: 0; padding: 7px 6px 0; background: #7d7d7d url(gradient.png) repeat-x 0 -110px; line-height: 100%; display: inline-block; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); } #nav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } /* родительская ссылка */ #nav a { font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3); } #nav a:hover { background: #000; color: #fff; } /* родительская ссылка при наведении курсором */ #nav .current a, #nav li:hover > a { background: #666 url(gradient.png) repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); } /* дочерние разделы */ #nav ul li:hover a, #nav li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } #nav ul a:hover { background: #0078ff url(gradient.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px rgba(0,0,0, .1); } /* стили для li */ #nav li:hover > ul { display: block; } /* cписок дочерних ли */ #nav ul { display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; left: 0; background: #ddd url(gradient.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); } #nav ul li { float: none; margin: 0; padding: 0; } #nav ul a { font-weight: normal; text-shadow: 0 1px 0 #fff; } /* Дорние от дочерних li %) */ #nav ul ul { left: 181px; top: -3px; } #nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; } /* Выравниваем кочки */ #nav:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } Лайв-демо тут. В хроме и новой опере углы закруглены, в остальных браузерах меню квадратно-гнездовое :) Кстати, принимаю заказы, если кто-то что-то хочет сделать, но не знает, как :) Мну злой, но не кусючий, пишите
Serifa: А на Борду придется запихивать весь этот длиннющий код? С выравниванием кочек? Ладно, попробуем как-нибудь, как разгребу немного, да и диз надо облегчить здесь, че то он в Хроме временами прыгает. Здесь боковые бордеры ведут себя неадекватно.
Zoltan: Serifa пишет: А на Борду придется запихивать весь этот длиннющий код? С выравниванием кочек? угу :( Лучше бы вынести в отдельный css-файл, тогда бы он загружался один раз, а потом браузер бы доставал уже из кеша. Вообще, этот код весит копейки, так меньше 3х кб... но все равно не очень удобно, что на борде в файл вынести нельзя успехов с дизом
Zoltan: вспомнил про эту темку, решил что-то полезное описать, например, оформление цитаты, на майбе и клонах часто её раскрашивают. На борде же это нереально без стороннего яваскрипта, так как изначально у цитаты нет ни одного уникального идентификатора - можно изменить её стиль, но тогда изменится весь стиль форума. Так вот вопрос, нужен ли мануальчик такой, с "левым" скриптом?
Morfus: Где-то мне попадался уже такой...
Zoltan: Morfus просто единственный вариант, не удивлён, что такое было)
Serifa: Я лично "за". Борду ведь ломать не так жалко, как форум на платном хостинге
Zoltan: Serifa пишет: Борду ведь ломать не так жалко, как форум на платном хостинге Никто ничего не ломает) Просто немного изменим вывод. Всё равно всё обрабатывает ява-скрипт. Потому можно подключить свой, который "перехватит" бразды правления. Потому скрипт желательно подключать в самом низу, насколько мне известно, на борде есть возможность воткнуть скрипт в подвал. Если подключить его вверху, то работать не будет. Т.к весит он довольно много (приходится заново объявлять целую функцию), то втыкать весь код на страницу неразумно, лучше подключить по типу script src="http://... Т.к на борде этого сделать нельзя - каждый может зарегистрироваться на юкозе, народе, гугл коде или вообще где угодно и положить скрипт туда. Возможно, можно и сократить размер, вырезав лишнее, но у меня тогда перестаёт работать. Потому скрипт весит 15кб. Не много. Подключать можно так <script src="http://editor.darknessworld.ru/js/forum2.js" type="text/javascript"></script> Оттуда же можно сохранить скрипт и залить куда угодно, смотрите выше. С моего сайта тоже работать будет. Специально ничего не сжимал, чтоб было ясно видно, что вредоносного кода там нет. можно сжать и тогда будет 11 килобайт кода. Что мы делаем? Раньше сама "цитата" была таблицей, без особых атрибутов и возможности настройки. Теперь это 2 div'a, которые можно спокойно настроить через css. Заголовок, т.е сам текст "цитата:" и тело цитаты. Если вставить скрипт, а потом вставить css-код <Style> #quot_header { padding-left:40px; color:grey; font-size:10px; border: 1px dashed black;} #quot_body { color:white; font-style:italic; border:2px solid grey; background: #18181a; padding: 5 5 5; text-shadow:red 0px 1px 0px; -moz-border-radius:13px; -webkit-border-radius:13px; border-radius:13px; } </Style> Тогда выглядеть будет так #quot_header - это заголовок, #quot_body - "тело". Т.к все настройки вынесены в css, то каждый может сам себе настроить, как угодно. Если не настраивать, то выглядеть будет, как простой текст, т.е без любых выделений вообще.
Serifa: Вопрос: 1. А где на борде эту css закапывать? Тут под нее нет места, тут все встроенное. (А, т.е. вставляется в хтмл-верх?) 2. Где взять сам скрипт? 15 кб весит, я правильно поняла? Ну, это как бы немного...
Zoltan: Serifa пишет: 1. А где на борде эту css закапывать? Тут под нее нет места, тут все встроенное. (А, т.е. вставляется в хтмл-верх?) Я вообще в шоке от этой "встроенности" на борде, если честно. Уныло было не выделить места под css, картинки и скрипты. Потому в посту выше советовал завести аккаунт где-нибудь "на стороне". Например, есть яндекс-хостинг. Php и прочие языки он не поддерживает, но положить туда скрипты и css можно. Если этого не делать - то можно вставить css хоть в хтмл-верх, хоть в низ, эта штука будет работать в любом случае. А вот скрипт - только в низ. Serifa пишет: 2. Где взять сам скрипт? 15 кб весит, я правильно поняла? Ну, это как бы немного... Можно вставить в тело форума код <script src="http://editor.darknessworld.ru/js/forum2.js" type="text/javascript"></script> я положил скрипт себе на сайт. Можно перейти по ссылке, откроется скрипт, потом нажать "файл-сохранить" и положить его куда угодно и оттуда уже подключать.
Morfus: CSS тоже можно на Борде подключать отдельным файлом. В этом случае между head и /head.
Serifa: Тут остается самый главный вопрос: куда класть эти файлы? Я вот не хочу их к себе на фору орг уносить, мне там зачем бордовское постороннее? А куда еще? Специально регится на юкозе ради пары скриптов и папки картинок - это слишком жирно.
Morfus: Serifa, тут уж нужно выбирать - нужно оно на форе орг или надо искать другое хранилище. )
Serifa: Вот и я про другое хранилище. Потому что на форуме лишние файлы, не имеющие прямого отношения к самому форуму и его работе, скорее вредны. А вот альтернативы нет. Борду тоже можно понять - ей на своих серверах лишние файлы тоже не нужны. В итоге все остаются при своем интересе.
полная версия страницы