Форум » Вопросы дизайна » Даешь уроки css! » Ответить
Даешь уроки css!
Serifa: [quote]Zoltan пишет: цитата: может, мне уже уроки css писать начинать пора xD Камрад! Давно пора! Если тебе требуется особое благословение, считай, что мы всем форумом тебе его дали)) [/quote] Предлагаю всем высказаться по данному вопросу. Дело-то ведь полезное, и ни кто-нибудь, а наш родной и знакомый Золтан решил совершить сей подвиг во благо форумного ролевого движения! Давайте его поддержим!
Zoltan: А это нужно? Я так мыслю, и так в сети полно ресурсов, где можно почитать на данную тему.. И вообще, изначально писал в шутку :)
Serifa: Zoltan пишет: А это нужно? Я так мыслю, и так в сети полно ресурсов, где можно почитать на данную тему.. И вообще, изначально писал в шутку :) Нужно. Во-первых, автор не кто-нибудь левый незнакомый, а ты, наш понятный и близкий фри-ролевик. Что немаловажно)) Во-вторых, "полно" - это не значит, хорошо. Вообще, хорошего много не бывает. Так что дерзай и устремляйся, сей разумное и доброе по мере возможностей. Если умеешь и знаешь - надо делать, лишним не будет.
black.dahlia: Serifa пишет: Нужно. Во-первых, автор не кто-нибудь левый незнакомый, а ты, наш понятный и близкий фри-ролевик. Что немаловажно)) Во-вторых, "полно" - это не значит, хорошо. Вообще, хорошего много не бывает. Так что дерзай и устремляйся, сей разумное и доброе по мере возможностей. Если умеешь и знаешь - надо делать, лишним не будет. Я поддерживаю Серифу, да Ты хорошо объясняешь, чопочемхоккейсмячом, а css вещь нужная)
Zoltan: Начнем хD Кнопка с заменяющимся изображением при наведении и клике. Зачем? Красиво) Данный метод предусматривает использование css-спрайтов, т.е картинка одна, а вот css уже её делит на части и показывает по частям, когда нам нужно. Что нам нужно?) Картинка-кнопка! Как видим, картинка состоит из трёх частей, первая в самом верху - это кнопка в "спокойном состоянии". Вторая - кнопка, когда курсор наведён на неё. В данном случае, она на 40 или около того, пикселей ниже, это важный параметр, учитывайте его, когда будете рисовать кнопку! И третья - клик по кнопке. Еще на 40 (или около того) писелей вниз. Прошу обратить внимание, если не вычислить точное кол-во писелей, кнопка будет "прыгать", увидите на демо. Собственно, код кнопки. <a href="#" id="button_sujet"><span></span></a> Спан нам нужен, чтобы было, к чему привязывать картинку :) Адрес ссылки ( # ) заменить на свой ;) Теперь - стиль. <!--настройки кнопки--> #button_sujet, #button_sujet span{ display:block; width:160px; height:40px; position:relative; overflow: hidden; } Присваиваем классу button_sujet и button_sujet span одинаковые параметры отображения, размеры и позиционирование. Последний параметр отвечает за переполнение блока, если содержимое в него не влазит, блок скрывает содержимое. hidden. Менять можно только размеры кнопки ;) #button_sujet span{ height:120px; background: url(http://editor.darknessworld.ru/demo/spryte_button_files/sujet.gif) 0 0 no-repeat; text-indent:-9000px; } Теперь привязываем нашу картинку к спану, парметр no-repeat запрещает картинке повторяться, если блок будет больше, чем она. Текст-индент смещает текст за границы видимого, однако верстка не рвется, т.к указано ранее - скрывать все, что влазит ;) overflow: hidden; #button_sujet:hover{ background:none; } Теперь явно указываем отсутствие заднего плана у ссылки с классом button_sujet. По сути, необязательный параметр, но рекомендуется ради совместимости кнопки к отсталыми браузерами, типа ишака. #button_sujet:hover span{ top:-40px; } Здесь начинаются чудеса) На самом деле, наша кнопка выглядит, как одна целая картинка. Но! Мы сказали браузеру, что кнопка меньше размеров картинки, все не поместилось, влезла первая часть изображения. А что не влезло - указали скрыть. Теперь же мы поднимаем спан выше на 40 пикселей, соответственно, становится видимым нижняя часть картинки, №2 :) Выделенная область - это видимая область. Примерно так #button_sujet:active span, #button_sujet:focus span{ top:-80px; } Теперь же мы указываем, поднять картинку на 80 пикселей. И становится видимым нижний блок нашей картинки :) Присваивается одно и то же отображение к двум событиям - активно и фокус. Т.е. то, что нажимается сейчас и то, что уже нажато. Наша кнопка не будет изменять картинку на себе до клика по другой области - это удобно, если она перекидывает на другую страницу - страница все равно обновится) И, самый важный параметр body{ background: #d6d6d6; } Как видно, я сохранил картинку в гиф с подложкой именно м таким цветом Всем спасибо, все свободны жду вопросов) Ах да, лайв-демо
Serifa: Что-то я не поняла, все эти #button_sujet, # идут один под другим в файлике вроде style css?
Zoltan: Serifa Да, это стиль, вносить в css и подключать к сайту, либо прописать на странице в тегах <style>. Полный код без комментариев #button_sujet, #button_sujet span{ display:block; width:160px; height:40px; position:relative; overflow: hidden; } #button_sujet span{ height:120px; background: url(http://lesson.dark-role.ru/demo/spryte_button_files/sujet.gif) 0 0 no-repeat; text-indent:-9000px; } #button_sujet:hover{ background:none; } #button_sujet:hover span{ top:-40px; } #button_sujet:active span, #button_sujet:focus span{ top:-80px; } body{ background: #d6d6d6; }
Serifa: А теперь все делаем на форумах такие кнопки и отписываемся о результатах! У кого все правильно - получают зачет))) Вот думаю, куда мне такую кнопку присобачить?)
Zoltan: Serifa Да кому оно надо, еще себе такие кнопки рисовать Сегодня урок ориентирован на ИЕ-ненавистников, как я :) Что делаем? Просто даём знать посетителю, что по ссылке он уже ходил ;) За все ссылки по умолчанию отвечает класс "a", у которого есть несколько вариантов - ссылка, просто на страничке (a); посещенная ссылка (visited); ссылка, на которую наведен курсор (hover), и ссылка на страничку, на которой находится пользователь (active). Сейчас рассматриваем посещенные ссылки, однако, заменив a:visited на любое значение - это можно изменить ;) Эффект первый, зачеркивание ссылок. Все просто, перечеркнем посещенные ссылки. Посетить их все равно можно, просто линия поперек. Пишем в css такое a:visited { text-decoration: line-through; } Получаем зачеркнутые ссылки. посмотреть в действии Естессна, можно применить не только к ссылкам, а вообще к любому тексту, но мы сегодня о ссылках) Это самый простой эффект. Следующие немного сложнее. Для браузера ИЕ - фатально сложно, проверив на установленном у меня ИЕ 8, оказалось, что оно не в силах отобразить ничего. Так что.. В любом случае, можно не обращать внимания на этот факт - пользователи браузеров получше всё увидят. А ИЕшники... сами виноваты Картинка около ссылки :) Галочка, в данном случае. Прежде всего, нам нужно найти место, куда воткнуть картинку) Потому пишем в css такое a:visited { padding-right: 12px; } паддинг - значит отступ, райт - право. Т.е отступить вправо 12 пикселей, пока что просто Самое время добавить картинку) Пишем в css такое a:visited { padding-right: 12px; background: url(Supergifka.gif) no-repeat 100% 50%; } background задаёт нашей ссылке задний план, смещённый на 12 пикселей вправо. no-repeat запрещает ссылке повторяться. 100% указывает, что картинку нужно отображать после ссылки, указав 10% мы получим картинку на 10% от начала ссылки. А не указав, по умолчанию получим в самом начале. Оно нам надо? посмотреть в действии Но, ведь есть еще классы, к которым можно привязать еще значений) Привяжем к уже существующей ссылке с галочкой еще пункт. a:visited:hover { background-image: url(Supergifka_navedenie.gif) } Т.е в css уже такой код a:visited { padding-right: 12px; background: url(Supergifka.gif) no-repeat 100% 50%; } a:visited:hover { background-image: url(Supergifka_navedenie.gif) } Что мы сделали?) Привязали к наведению курсора на ссылку отображение уже другой картинки, т.е горит галочка - навели, она потухла. Или наоборот, это уже как захотите, я описываю только общий принцип. Можно еще побаловаться с настройками и сделать так a:visited { padding-right: 12px; background: url(Supergifka.gif) no-repeat 100% 50%; color: #aaa; text-decoration: none; } a:visited:hover { background-image: url(Supergifka_navedenie.gif); color: #f00; } Тоесть, по умолчанию, посещенные ссылки серые с красной галочкой, а при наведении - красные с серой галочкой Светофор) Идём дальше) Используем псевдоэлемнты. Пишем в сss так a:visited:before { content: " (Вы ходили по этой ссылке!)"; } Что мы сделали?) Мы приписали перед ссылкой (before) текст, указанный в кавычках :) Или сделаем другой текст и после, after a:visited:after { content: " (ok)"; font-size: 70%; } Или настроим немного размер нашего "ок") a:visited:after { content: " (ok)"; font-size: 70%; } Теперь, благодаря параметру font-size мы уменьшили "ок" на 30 процентов) Сделаем сложнее?) Пишем такое) a:visited:after { content: " (ok)"; font-size: 60%; text-transform: uppercase; color: #777; } a:visited:hover:after { content: " (Эй! Вы здесь уже были!)"; font-size: 80%; text-transform: uppercase; color: #f00; } Что мы натворили?) Рассмотрим первый класс, a:visited:after. Приписываем "ок" после ссылки, т.к афтер. Далее, устанавливаем размер, 60%. Потом параметром text-transform задаём подчёркивание ссылки (кстати, написав туда text-transform:capitalize; мы заставим все посещенные ссылки начинаться с большой буквы ). И цвет. Далее, идет класс a:visited:hover:after, который отвечает за ссылку, которую пользователь посетил и на которую вновь навёл курсор. Вместо "ок" пишем напоминание, что пользователь там был, указываем размер 80%, снова подчёркивание и цвет, красный, поярче :) Конечно же, это все раскрывает только общий принцип, на самом деле можно вертеть ссылками, как угодно. Но не забывайте - наляпистость - не лучшее, что можно придумать для вашего форума. Чувство меры вам в руки :) С наступающим Рождеством!
Serifa: Zoltan, ты будешь удивлен, но в Хроме тоже ничего не работает!(( Настройки файрвола - там все разрешено. Может, адблок или что-то такое? Проверила в Опере - работает. В Хроме - нет ни галочек, ни эффектов, ничего.
Zoltan: Serifa Cкачал хром, действительно. Не работает только для общих условий, т.е конструкция типа a:hover:after { content: " (Эй! Вы здесь уже были!)"; font-size: 80%; text-transform: uppercase; color: #f00; } РАБОТАЕТ. А вот уже a:visited:hover:after уже нет. Причем в весии хрома 5 и ниже это было! Отписался на форуме у них, жду ответа. Может, включат исправление в новой версии... печально, что не работает(
Serifa: a:hover:after { content: " (Эй! Вы здесь уже были!)"; font-size: 80%; text-transform: uppercase; color: #f00; } - а у меня не работает(( У тебя никаких расширений не стоит? У меня есть 1. ад блок 2. Browser Button for AdBlock - Версия: 0.0.12 3. Plugin helper for chrome - Версия: 8.8 4. Awesome Screenshot: захвати и подпиши - Версия: 2.4.9 5. Download Master - Версия: 1.1.4 6. Расширение Download Master для Chrome 7. Google Translate - Версия: 1.2.3.1 8. Speed Dial (ru) - Версия: 2.1.0 9. Web Developer - Версия: 0.3.1 10. YouTube Music Video Lyrics - Версия: 1.1.0 (отключено) 11. Расширение Web страницы - Webpage Screenshot - Версия: 4.6.2
Zoltan: Serifa Чистый хром, вообще без ничего. А на этой страничке работает? click here
Serifa: А там работает! Что ты изменил?
Zoltan: В ходе оперативного расследования оказалось, что максимум, что нам позволяет хром - это установить цвет посещенной ссылки. a:visited {color:black !important;} Потому, что... в нём где-то есть дырка, благодаря которой через это можно применить эксплойт и сломать пользователя. Гугл об этом оперативно умалчивает А вот мозилла сообщает подробности http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ Однако, проверив в мозилле 3.0.5 заметил, что там все работает. Ок, урок потерпел крах, не работает в хроме. Досадно. Пост поправить не могу, увы; эффекты работают в ие 8, на версии ниже проверить не могу( Хром же игнорит всё. Обещаю в последующем проверять сначала. Однако, хром позволяет разукрашивать ссылки НЕ посещённые как угодно хD Что, собственно, теперь и демонстрируется в демо. А посещенные.. украсим цветом) Обещаю, что потом об этом будет урок на java, мы все-таки разрисуем эти посещённые ссылки
Serifa: А какое именно демо, которое в предыдущем посте или выше? Сейчас проверю, что там с правкой постов. На Борде многое остается непонятным, например, система перехода из участников в "постоянные участники". То самое демо, в котором в Хроме "все работает"?)
полная версия страницы