Навигация
 
Сейчас на сайте
Гостей: 14

Гости:
[Ваш IP] 14:03:52
/Форум/Тема
Yandex [Bot] 14:03:27
/forum_threads.php
46.229.168.142 14:02:28
/Форум/Тема
46.229.168.147 14:02:23
/Форум/Тема
Yandex [Bot] 14:02:18
/forum_threads.php
54.36.148.157 14:02:07
/Поиск
54.36.148.0 14:01:39
/Форум/Тема
46.229.168.134 14:01:33
/Форум/Тема
46.229.168.143 14:01:07
/main.php
54.36.150.75 14:00:43
/main.php
4 - не показано

Всего пользователей: 116
Новый пользователь: Tim
 
RSS потоки
RSS Форумы: тема

RSS Новости
RSS Комментарии
RSS Форумы
RSS Статьи
RSS Фотогалерея
RSS Файлы
RSS Ссылки
 
Нажималка
[хочу себе такую панельку!]



Ваш код:
(кнопка | ссылка)

[Полный список кнопок]
 
Автор: Polarfox
ID темы: 217
Информация
В этой теме сообщений: 4, просмотров темы: 7755.
Просмотр темы
 Распечатать тему
CSS before/after - занимательные псевдоклассы
Polarfox
:before - вставить нечто ДО элемента
:after - вставить нечто ПОСЛЕ элемента


Обычно вставляют статический текст/подсказки, информацию, при этом этот текст является зависимым только от таблиц стилей.

Пример - во все теги параграфов, добавится текст:
  1.  
  2. p:after {
  3. content:"- Remember this";
  4. }
  5.  
  6. p:before {
  7. content:"Read this: ";
  8. }
  9.  


Описание свойства "content"
Свойство может быть одним из:
  • none - сброс контента (ничего)
  • normal - содержание (по умолчанию) ставится в "ничего" - честно говоря поведение одинаково с none, но отличия быть должны :)
  • counter - счетчик, пояснения ниже
  • attr(атрибут) - вывод атрибута тега, пояснение ниже
  • строка - вывод строки, ну тут все просто
  • url(ссылка) - используется содержание по ссылке - картинка, клип, звук, все что поддерживает браузер, но самое простое - картинка, описывается так же как путь до фоновой картинки - url(smiley.gif) .
  • inherit - наследуется значение от предка (как обычно)

Отдельно элементы цитирования:
  • open-quote - открываем цитату (кавычки)
  • close-quote - закрываем цитату (кавычки)
  • no-open-quote - убираем открывающие кавычки (если есть)
  • no-close-quote - убираем закрывающие кавычки (если есть)


Работаем со счетчиком - я вырезал все лишнее
Скачать исходный код  GeSHi: HTML выделить всё
  1. <style type="text/css">
  2. p {
  3. counter-increment: myIndex; /*называем счетчик, определяем и прибавляем на каждом параграфе*/
  4. }
  5.  
  6. p:before {
  7. content:counter(myIndex);/*вызываем счетчик по имени - выводим его на каждом параграфе*/
  8. }
  9.  
  10. <p>First make a variable (myIndex) and make it increase every time a p element occurs.</p>
  11. <!-- Создаем переменную myIndex и пусть увеличивается каждый элемент параграфа -->
  12. <p>Then insert the counter in front of all p elements</p>
  13. <!-- Выведем счетчик впереди всех элементов параграфа -->
  14. <p><b>Note:</b> For the counter property to work in IE8, a DOCTYPE must be declared.</p>
  15. <!-- Тут про осла, фиг я буду переводить :P -->


Выводим параметр - href (адрес) перед ссылкой
  1. a:before {
  2. content:attr(href);
  3. }


Очень интересные эффекты дает в сочетании с другими типами псевдо-селекторов и js.
Надеюсь обзор был немного полезен :)

Подготовлено на базе материалов
http://www.w3schools.com
На англицком:
Больше примеров по content: http://www.w3scho...ontent.asp

unLogic creator | For English speaking users
unlogic.info/images/unapproved_dev.png
 
http://unlogic.info
WhiteFox
Короткая навигация по форуму (избранное): [Пропустить]

А еще есть Файлы - небольшая полезная подборка от меня


Все мои (и не только) загрузки я размещаю на форуме.
Понравившийся аддон можно скачать , кликнув по ссылке с файлом внизу поста - первый пост по традиции - это описание, ссылки на скачку и примеры работы.
Бесплатно, без регистрации, быстро и просто.

Вы можете свободно копировать информацию к себе, при условии установки активной ссылки на автора (по большей части - это все же я), сайты партнеры могут просто указать авторство, без ссылки.
Поскольку большинство скриптов я обновляю постоянно - если вы захотите распространять мои скрипты, я рекомендую просто делать ссылки на темы, либо следить за обновлениями.

 
jikaka
весьма интересно, вот бы еще живой пример глянуть
www.rusfusion.ru - сайт официальной поддержки PHP-Fusion в России
 
www.rusfusion.ru
Polarfox
Больше примеров по content
на англицком смотрел?

Если нет то либо нежелание либо тотальное незнание англицкого, в любом случае два тутошних примера рабочие Smile
unLogic creator | For English speaking users
unlogic.info/images/unapproved_dev.png
 
http://unlogic.info
jikaka
на англицком смотрел?

теперь посмотрел, прикольно
просто не сообразил сначала
www.rusfusion.ru - сайт официальной поддержки PHP-Fusion в России
 
www.rusfusion.ru
Перейти на форум: