Разбивка текста в газетном стиле.



Красивое оформление текста в газетном стиле с помощью CSS для оформления юзабилити страницы и придания ей уникального дизайна.Конечно текст разбить на колонки можно и с помощью таблиц,но это будет более трудоёмкий процесс.Здесь же в примере приведённом на странице ниже разбивка и позиционирование текста будет происходить практически без вашего участия.Просто при создании страницы весь текст будет нужно поместить в небольшой контейнер.


Установка кода для оформления текста.


Теперь разберем как и куда вставить наш код CSS,который разобьёт текст статьи на колонки как в газете,и чтобы он нам не мешал в дальнейшем и тем не менее исправно выполнял все свои функции.По аналогии со всеми другими кодами и скриптами существует несколько вариантов установки кода для стильного оформления текста.Самый основной и самый правильный конечно это же вставить код CSS в шаблон нашего блога перед закрывающим тегом ]]></b:skin>. Следует запомнить правило если вы собираетесь залезть в шаблон,то копировать и вносить код следует без этих тегов<style>....</style>. Необходимо при копировании и установке аккуратно удалить их и затем только поставить на место.В других же случаях,таких как установка в гаджет НТМЛ или просто на страницу эти теги удалять не нужно,именно они являются основной составляющей частью кода.

Хотя если для вас сложно разобраться где это и как туда вставить,то просто скопируйте весь код CSS целиком и вставьте его в гаджет НТМЛ,куда копируете и вставляете все другие подобные коды или же если данный эффект вы планируете применить одноразово,то просто добавьте данный код непосредственно в тело сообщения,где нибудь в конце,чтобы не путался под руками.

Код НТМЛ который необходимо скопировать и записать где-то в доступном месте,так как именно этой частью кода придётся пользоваться в дальнейшем на тех страницах где будет применён этот довольно простой,но тем не менее интересный код для оформления текста на странице.Это основная часть кода,которой вы возможно будете пользоваться ещё неоднократно в дальнейшем <div class="text_v-gol">Ваш текст</div>
<style>
.text_v-gol {
padding-bottom:20px; /*отступ снизу*/
width:100%; /*указываем общую ширину блока с колонками*/
text-align:justify; /*выравнивание текста внутри колонок*/
column-width: 200px; /*указываем ширину колонок*/
-moz-column-width: 200px;/*указываем ширину колонок*/
-webkit-column-width: 200px;/*указываем ширину колонок*/
column-gap: 20px; /*отступ между колонками*/
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-rule: 0px solid #000; /* разделяем колонки линией,если надо и задаём цвет разделителя*/
-moz-column-rule: 0px solid #000;/* разделяем колонки линией,если надо и задаём цвет разделителя*/
-webkit-column-rule: 0px solid #000;/* разделяем колонки линией,если надо и задаём цвет разделителя*/
}</style> 

Применение эффекта разбивки текста.


Как использовать разбивку текста на две,три или большее количество колонок решать вам,но можно эксперементировать и в процессе написания сообщения выделять только различные участки текста,которые необходимо или выделить или придать им более ёмкий презентабельный вид.Можно  заключить весь текст на странице в этот код и тогда вся страница будет разделена на колонки,а можно только необходимые вам абзацы заключить в секцию такого вида <div class="text_v-gol">Ваш текст</div> .Разделение колонок можно оставить невидимым или добавить разделитель добавив цвет и толщину по своему усмотрению.Настройки внесены непосредственно в код CSS и более менее,как я думаю будут понятны,если же возникнуть вопросы оставьте коммент.


Смотреть ещё



Слайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог
Оформление блоков для кода
Выпадающие вкладки-табы
Программы для заработка на автопилоте

Отправить комментарий