07.09.2013 - 20:16
Для початку — короткий вступ. Можете пропустити, якщо не любите графоманії від мене.
В один прекрасний день знайшлися підараси, які влаштували фішингову атаку у ЖЖ, поцупивши багато паролів від облікових записів. Суть полягала в тому, що коли користувач, маючи френда із зламаним журналом, заходячи у свою френдстрічку, бачив повідомлення про необхідність авторизації. І СУП, борючись із такими атаками, влаштувала фільтрацію атрибутів class та id у дописах користувачів. Чим же він був корисним? Наприклад тим, що всі стилі, про які я писав, можна один-єдиний раз занести в налаштування журналу і не прописувати щоразу в кожному дописі, просто пишучи щось типу:
<div class="framed_pic"><img src="image.jpg" alt="Гарно оформлена картинка"></div>На даний момент можливість таку повернули, але лише платним та постійним обліковим записам. Можна було-б заплатити тих нещасних 2 бакса за місяць, тим більше, що там даються розширені можливості для оформлення журналу — геть до того, що можна ваяти власні "шкірки", та-й реклами не буде. Але стабільність роботи сервісу заставляє бажати кращого, тому обійдемося чим є.
На майбутнє — якщо ЖЖ серйозно глючитиме, можете читати мене на стенделоні — там коментарі через DISQUS, ніби без особливих проблем пишуться.
Ну, а тепер по суті. Сьогодні я розкажу, як за допомогою атрибуту style зробити маленький спойлер, приховавши текст і як зробити текст із спадною підказкою. Для цього ми будемо використовувати тег <span></span>. Він призначений для виділення фрагментів тексту і сам по собі нічого не робить, проте із атрибутом style можна змінити стилі для фрагменту тексту. Мої студенти інколи намагаються писати його як spam, але велика замашна дерев’яна указка призначена для запобігання таких випадків в подальшому.
Отже, заключаємо текст в тег span і прописуємо однакові кольори для тексту та фону — так, як на самому початку допису:
<span style="color:black; background-color:black;">підараси</span>Тут color — колір тексту, background-color — для фону, відповідно. Щоб не так кидалося в очі, можна зробити білим, або під фоновий колір вашого журналу. Достатньо виділити слова щоб прочитати. Якби був доступний атрибут class, можна було-б використати псевдоклас hover — тоді текст показувався-б при наведенні курсору миші.
Щоб зробити спадну підказку, знадобиться атрибут title, якого можна прописати поруч зі style. Я про нього вже писав, коли розказував, як оформлювати картинки.
<span title="англ. заголовок" style="border-bottom:dashed 2px black;">атрибут title</span>Підведіть курсор до слова title. підкресленого пунктиром щоб побачити, як це працює. Тут я вжив параметр border-bottom, яким задається нижня рамка — вона dashed (пунктир), товщиною 2px і чорна. Ось і все на сьогодні, не перемикайтеся.