Эффект буквицыВ типографических изданиях очень часто можно встретить буквицу – выделенную по размеру и цвету первую букву первого абзаца. Красиво так смотрится… Вот бы к себе такую на сайт! Некоторые ограничиваются использованием рисунков, но вдруг посетитель отключил показ картинок. Тогда не будет ни буквицы, ни красоты: от нее останется только пустой квадратик. Решением проблемы становится применение CSS.First-letter Псевдо-элемент first-letter как раз и занимается управлением первой буквы заданного блока. Он ищет первый элемент и присваивает ему указанные значения. Стиль написания очень прост. Пример <Style type=text/css> В примере буква 'О' станет зеленой и увеличенной в два раза, при
этом текст будет ее обтекать с правой стороны. Если предложение
начинается с кавычки, то она вместе с буквой войдет в состав first-letter . Пример DIV.effect:first-letter {color: gold} First-line Действует точно также, как и first-letter . Разница только в объектах выделения: first-line визуально изменяет первую строку в нужном вам блоке. Пример <Style type=text/css> Первая строка в абзаце написана малыми прописными буквами: очень эффектное выделение начала статьи в каком-нибудь журнале. "Было бы интересно использовать оба псевдо-класса в одном блоке" – скажете вы. И такое в CSS возможно. Надо всего лишь два раза определить элемент и украшенный в вашем стиле абзац не заставит себя ждать. Пример <Style type=text/css>DIV#beautiful:first-line {font-weight: bolder; color:#0f0} DIV#beautiful:first-letter {font-size:16px; font-style: oblique; color:#f00} </Style> <div id=beautiful> Ваша статья самая <br> статьястая статья в мире. </div> Источник: barionics.com |
КОНТАКТЫ
г. Екатеринбург info@vismech.ru |
текущее: НОВОСТИ 05.12.2013 - Уход за флэш-накопителем 05.12.2013 - Компьютер самопроизвольно выключается 05.12.2013 - Почему не запускается компьютер? 27.11.2013 - Canon Legria HF R406 - Описание видеокамеры 27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer |