Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Как такое реализовать при помощи css?


Автор: madkaban 3.5.2007, 10:55
Ден добрый!

Хочу узнать как реализовать такое в css:
 - Первый рисунок (регистрация) - под словом "регистрация" вы видите массу "===========", как это вынести в css?
 - Второй рисунок (статьи) - первая буква белого цвета, а все остальные черного
Хочу реализовать это не прописывая отдельный стиль для первой и остальных букв.


Всем спасибо.

Автор: Uratsakidogi 3.5.2007, 11:17
1. Через фон.
2. :first-letter.

Автор: madkaban 3.5.2007, 14:55
Цитата

2. :first-letter.

если можно поподробнее... 

Автор: ksnk 3.5.2007, 15:17
2.2.10.2. Псевдоэлемент :first-letter

Псевдоэлемент :first-letter применим к любому блочному элементу и задает стиль отображения его первой буквы. Например, следующий фрагмент HTML-документа

<STYLE>
P:first-letter { font-size: 200%; font-weight: bold }
</STYLE>

<P>Это абзац, первая буква которого
будет выделена обозревателем.</P>

будет отображаться так:

Это абзац, первая буква которого будет выделена обозревателем.

К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, свойства границ, свойства заполнителей, свойства рамок, text-decoration, vertical-align (только если float равно none), text-transform, line-height, float, text-shadow и clear.

http://wdh.suncloud.ru/css02.htm#ref22102

P.S. Сначала спутал статьи :(

Автор: ksnk 3.5.2007, 15:41
Код

<style>
.reg {width:400px; border-bottom-style:double;}
.article:first-letter { font-size: 200%; font-weight: bold }
</style>
<div class='reg'>Регистрация</div>
<div class='article'>Статьи</div>


Автор: Uratsakidogi 3.5.2007, 19:12
ksnk, дабл бордер не так отображается. Там скорее double-dashed, но такого не бывает. smile Поэтому фоном.

Автор: ksnk 3.5.2007, 19:42
Uratsakidogi, В вдруг именно это и надо было smile

Автор: madkaban 4.5.2007, 23:24
всем спасибо

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)