• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Стильные и красивые заголовки сайта на CSS (Создать красивый вид заголовков и текста для сайта)
Стильные и красивые заголовки сайта на CSS
Kosten
Дата: Вторник, 12.06.2018, 03:37 | Сообщение 1
Администраторы
Сообщений:17051
Награды: 55


Это тема будет интересна для новичков в веб разработке, так уже знающим, что возможно некоторые трюки могли пропустить, в плане выстраивание заголовков в оригинальном стиле. Что здесь собраны самый актуальный список трюков, и также приемов в случайном порядке по стилистике, что поможет выстроить оригинальный стиль дизайна, который вы хотите. Шрифт определяется как безопасный, когда он устанавливается на большое количество компьютеров пользователя.

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

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

Свойства CSS, используемые для стильного текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:

1. Стили шрифта: свойства, что влияют на шрифт, который применяется к тексту, влияющий на то, какой шрифт применяется, насколько он большой, будь то жирный или курсив.

2. Стили текстового макета: свойства, влияющие на интервал и другие возможности компоновки текста, позволяющие манипулировать, например, пробелом между строками и буквами и тем, как текст выравнивается внутри поля содержимого.



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

В этой статье вы найдете полезные трюки и методы CSS, которые использовались для стилизации заголовков, шрифтов, текста и контента, а не полагаться на Photoshop.

Пример для всех установок

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

Первый вариант для заголовка, где шрифт идет темный, а по кроям светлый, что визуально смотрится оригинально.

Описание выставляем под класс tlosazmilan, также для жирного знака выставил h2, что вам не нужно делать, это для наглядности идет.



HTML

Код
<div class="tlosazmilan">
    <h2>ZorNet.Ru: Портал Вебмастера</h2>
   </div>


CSS

Код
.tlosazmilan {
    font-family: Kondolar-Regular, Georgia, serif;
    text-shadow: 1px 1px 0 #f1e9e9, 2px 2px 0 #4e4a4a;
}


Шрифт свой ставим, здесь идет его оформление.
Прикрепления: 7153809.png(16.1 Kb) · 7145138.png(11.8 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 12.06.2018, 18:58 | Сообщение 2
Администраторы
Сообщений:17051
Награды: 55


Это оформление знаков под заголовок отлично подойдет под светлый фон, вот так получится.



Приемка:

HTML

Код
<div class="gersazunima">
    <h2>ZorNet.Ru: Портал</h2>
   </div>


CSS

Код
.gersazunima {
    color: #efebeb;
    text-shadow: -1px 0 0 #101010, 1px 1px 0 #1b1a1a, 2px -1px 0 #1d1d1d, 3px 0 0 #1d1c1c;
}
Прикрепления: 4084342.png(30.8 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 12.06.2018, 19:04 | Сообщение 3
Администраторы
Сообщений:17051
Награды: 55




HTML

Код
<div class="kazersan">
    <h2>ZorNet.Ru</h2>
   </div>


CSS

Код
.kazersan {
    color: #e8e4e4;
    text-shadow: 1px 1px 0 #252424, -1px 1px 0 #191717, 1px -1px 0 #1b1919, -1px -1px 0 #191717;
}
Прикрепления: 6836616.png(8.9 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 12.06.2018, 19:08 | Сообщение 4
Администраторы
Сообщений:17051
Награды: 55




HTML

Код
<div class="zamiksagun">
    <h2>ZorNet.Ru: Портал</h2>
   </div>


CSS

Код
.zamiksagun {
    color: #f9f3f3;
    letter-spacing: -3px;
    text-shadow: 3px 2px 0 #1d1c1c, -3px 2px 0 #131212, 3px -2px 0 #151414, -3px -2px 0 #151414, 4px 1px 0 #131212, -4px 1px 0 #171616, 4px -1px 0 #1b1a1a, -4px -1px 0 #0c0c0c;
}
Прикрепления: 0720911.png(33.7 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 12.06.2018, 19:29 | Сообщение 5
Администраторы
Сообщений:17051
Награды: 55




Это оформление знаков под название или логотип идет под заданный фон, где смотрится, как будто он отпечатан.

HTML

Код
<div class="dynikaqersa">
   <h2>ZorNet.Ru: Портал</h2>
  </div>


CSS

Код
h2 {
    color: #383434;
    text-transform: uppercase;
    text-shadow: -1px -1px 1px #171616, 1px 1px 1px #e0dada;
}

.dynikaqersa {
    text-align:center;
    padding:30px;
    background:#777777;
}
.dynikaqersa div {
    margin: 7px 0;
}
Прикрепления: 5418645.png(22.4 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 12.06.2018, 19:36 | Сообщение 6
Администраторы
Сообщений:17051
Награды: 55


Это оформление больше подойдет на сайты, где есть в дизайне элементы, что созданы в формате 3D, так как сам заголовок в аналогичной форме представлен.



HTML

Код
<div class="mlasertun">
   <h2>ZorNet.Ru: Портал</h2>
  </div>


CSS

Код
.mlasertun {
    color: #b1adad;
    text-shadow: 0 1px 0 #968f8f, 0 2px 0 #736f6f, 0 3px 0 #716c6c, 0 4px 0 #565353, 0 5px 0 #423f3f, 0 6px 0 #403d3d, 0 7px 0 #2d2c2c, 0 8px 0 #2f2d2d, 0 9px 0 #2b2a2a, 0 10px 7px rgba(19, 18, 18, 0.08), 0 11px 10px rgba(0, 0, 0, 0.2);
}
Прикрепления: 7412372.png(31.1 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 12.06.2018, 19:56 | Сообщение 7
Администраторы
Сообщений:17051
Награды: 55


Эта стилистика оформление выполнена на градиентах, где можно самостоятельно поигратся с оттенком.



HTML

Код
<div id="muderolisag">
<h2>ZORNET.RU</h2>
    </div>


CSS

Код
#muderolisag {
    position: relative;
}
#muderolisag h2 {
    color: #36a9de;
    position: relative;
    z-index: 10;
    -webkit-mask-box-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgb(19, 18, 18)), color-stop(100%,rgba(21, 20, 20, 0)));
}
#muderolisag:after {
    content: 'ZORNET.RU';
    width:0%;
    font-size: 4em;
    font-weight: bold;
    text-align: center;
    padding: 0px 0;
    color: #060607;
    position: absolute;
    top: 0;
    left: 0;
}


Шрифт ставит сам веб мастер.
Прикрепления: 5250177.png(12.5 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 12.06.2018, 20:03 | Сообщение 8
Администраторы
Сообщений:17051
Награды: 55


Под темный дизайн сайта. эти знаки сделаны очень ярко, где безусловно будут на первом месте по превлекательности.



HTML

Код
<div class="kigdsaxtun">
    <h2>ZORNET.RU</h2>
   </div>


CSS

Код
.kigdsaxtun {
    color: #f7e5db;
    text-shadow: 0 -1px 4px #FFFFFF, 0 -2px 10px #ecce0b, 0 -10px 20px #ec7c0b, 0 -15px 20px #ec0c0c;
}


Шрифт ставит устанавливаем свой.
Прикрепления: 1412468.png(43.0 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Стильные и красивые заголовки сайта на CSS (Создать красивый вид заголовков и текста для сайта)
  • Страница 1 из 1
  • 1
Поиск: