Отправлено: 04.01.11 14:10. Заголовок: Даешь уроки css!

цитата:

Zoltan пишет:  цитата: может, мне уже уроки css писать начинать пора xD Камрад! Давно пора! Если тебе требуется особое благословение, считай, что мы всем форумом тебе его дали))

Предлагаю всем высказаться по данному вопросу. Дело-то ведь полезное, и ни кто-нибудь, а наш родной и знакомый Золтан решил совершить сей подвиг во благо форумного ролевого движения! Давайте его поддержим!

 Отправлено: 04.01.11 20:27. Заголовок: А это нужно? Я так м..

А это нужно? Я так мыслю, и так в сети полно ресурсов, где можно почитать на данную тему.. И вообще, изначально писал в шутку :)

 Отправлено: 04.01.11 20:36. Заголовок: Zoltan пишет: А это..

Zoltan пишет:

цитата:

А это нужно? Я так мыслю, и так в сети полно ресурсов, где можно почитать на данную тему.. И вообще, изначально писал в шутку :)

Нужно. Во-первых, автор не кто-нибудь левый незнакомый, а ты, наш понятный и близкий фри-ролевик. Что немаловажно)) Во-вторых, "полно" - это не значит, хорошо. Вообще, хорошего много не бывает. Так что дерзай и устремляйся, сей разумное и доброе по мере возможностей. Если умеешь и знаешь - надо делать, лишним не будет.

 Отправлено: 04.01.11 20:58. Заголовок: Serifa пишет: Нужн..

Serifa пишет:

цитата:

Нужно. Во-первых, автор не кто-нибудь левый незнакомый, а ты, наш понятный и близкий фри-ролевик. Что немаловажно)) Во-вторых, "полно" - это не значит, хорошо. Вообще, хорошего много не бывает. Так что дерзай и устремляйся, сей разумное и доброе по мере возможностей. Если умеешь и знаешь - надо делать, лишним не будет.

Я поддерживаю Серифу, да Ты хорошо объясняешь, чопочемхоккейсмячом, а css вещь нужная)

 Отправлено: 05.01.11 19:16. Заголовок: Начнем хD Кнопка с з..

Начнем х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;
}
Как видно, я сохранил картинку в гиф с подложкой именно м таким цветом
Всем спасибо, все свободны жду вопросов) Ах да, лайв-демо

 Отправлено: 05.01.11 19:55. Заголовок: Что-то я не поняла, ..

Что-то я не поняла, все эти #button_sujet, # идут один под другим в файлике вроде style css?

 Отправлено: 05.01.11 20:44. Заголовок: Serifa Да, это стил..

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; }

 Отправлено: 05.01.11 21:23. Заголовок: А теперь все делаем ..

А теперь все делаем на форумах такие кнопки и отписываемся о результатах! У кого все правильно - получают зачет)))

Вот думаю, куда мне такую кнопку присобачить?)

 Отправлено: 06.01.11 17:48. Заголовок: Serifa Да кому оно н..

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%, снова подчёркивание и цвет, красный, поярче :)

Конечно же, это все раскрывает только общий принцип, на самом деле можно вертеть ссылками, как угодно. Но не забывайте - наляпистость - не лучшее, что можно придумать для вашего форума. Чувство меры вам в руки :) С наступающим Рождеством!

 Отправлено: 06.01.11 20:22. Заголовок: Zoltan, ты будешь уд..

Zoltan, ты будешь удивлен, но в Хроме тоже ничего не работает!(( Настройки файрвола - там все разрешено. Может, адблок или что-то такое?

Проверила в Опере - работает. В Хроме - нет ни галочек, ни эффектов, ничего.

 Отправлено: 06.01.11 21:30. Заголовок: Serifa Cкачал хром,..

Serifa
Cкачал хром, действительно. Не работает только для общих условий, т.е конструкция типа
a:hover:after { content: " (Эй! Вы здесь уже были!)"; font-size: 80%; text-transform: uppercase; color: #f00; }

РАБОТАЕТ. А вот уже a:visited:hover:after уже нет. Причем в весии хрома 5 и ниже это было! Отписался на форуме у них, жду ответа. Может, включат исправление в новой версии... печально, что не работает(

 Отправлено: 06.01.11 21:38. Заголовок: a:hover:after { cont..

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

 Отправлено: 06.01.11 21:43. Заголовок: Serifa Чистый хром, ..

Serifa
Чистый хром, вообще без ничего. А на этой страничке работает?
click here

 Отправлено: 06.01.11 21:53. Заголовок: А там работает! htt..

А там работает! Что ты изменил?

 Отправлено: 07.01.11 09:29. Заголовок: В ходе оперативного ..

В ходе оперативного расследования оказалось, что максимум, что нам позволяет хром - это установить цвет посещенной ссылки.

цитата:

a:visited {color:black !important;}

Потому, что... в нём где-то есть дырка, благодаря которой через это можно применить эксплойт и сломать пользователя. Гугл об этом оперативно умалчивает А вот мозилла сообщает подробности
http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/<\/u><\/a>

Однако, проверив в мозилле 3.0.5 заметил, что там все работает.
Ок, урок потерпел крах, не работает в хроме. Досадно.

Пост поправить не могу, увы; эффекты работают в ие 8, на версии ниже проверить не могу(



Хром же игнорит всё. Обещаю в последующем проверять сначала.

Однако, хром позволяет разукрашивать ссылки НЕ посещённые как угодно хD Что, собственно, теперь и демонстрируется в демо. А посещенные.. украсим цветом) Обещаю, что потом об этом будет урок на java, мы все-таки разрисуем эти посещённые ссылки

 Отправлено: 07.01.11 14:15. Заголовок: А какое именно демо,..

А какое именно демо, которое в предыдущем посте или выше? Сейчас проверю, что там с правкой постов. На Борде многое остается непонятным, например, система перехода из участников в "постоянные участники".

То самое демо, в котором в Хроме "все работает"?)