Здравствуйте уважаемые веб-мастера.
Несколько примеров того, как можно украсить заголовок статьи средствами CSS и Javascript.
1. Обводка заголовка.
Обводка текста
Чтобы вокруг каждой буквы получилась ровная обводка используется следующая комбинация теней.
p{
text-align: center;
font-size:46px;
letter-spacing: 4px;
color:#fff;
text-shadow: -1px -1px #EE8A08,
-2px -2px #EE8A08,
-1px 1px #EE8A08,
-2px 2px #EE8A08,
1px 1px #EE8A08,
2px 2px #EE8A08,
1px -1px #EE8A08,
2px -2px #EE8A08,
}
Это так сказать каркас, а вот ширина цвет и вид обводки подбирается индивидуально путём изменений значений в text-shadow.
Структуру обводки можно менять как душе угодно. Можно у самой обводки сделать границы, можно увеличить или уменьшить отдельные полосы составляющие обводку.
2. Заголовок с длинной тенью.
Заголовок с длинной тенью
p{
color: #333;
line-height: 1.2;
margin: 15px 0;
font-size: 40px;
font-weight: lighter;
letter-spacing: .1em;
text-transform: uppercase;
text-shadow: 1px 1px 8px rgba(0, 0, 0, .08),
2px 2px 1px rgba(0, 0, 0, .075),
4px 4px 1px rgba(0, 0, 0, .07),
6px 6px 1px rgba(0, 0, 0, .065),
8px 8px 1px rgba(0, 0, 0, .06),
10px 10px 1px rgba(0, 0, 0, .055),
12px 12px 1px rgba(0, 0, 0, .05),
14px 14px 1px rgba(0, 0, 0, .045),
16px 16px 1px rgba(0, 0, 0, .04),
18px 18px 1px rgba(0, 0, 0, .035),
20px 20px 1px rgba(0, 0, 0, .03),
22px 22px 1px rgba(0, 0, 0, .025),
24px 24px 1px rgba(0, 0, 0, .02),
26px 26px 1px rgba(0, 0, 0, .015),
28px 28px 1px rgba(0, 0, 0, .01),
30px 30px 1px rgba(0, 0, 0, .005),
32px 32px 1px rgba(0, 0, 0, .0025),
34px 34px 1px rgba(0, 0, 0, .002),
36px 36px 1px rgba(0, 0, 0, .0015),
38px 38px 1px rgba(0, 0, 0, .001);
3. Выделенный заголовок
Выделенный заголовок
p{
padding:50px;
background: #777;
font-family: Arial;
line-height:5em;
font-size:40px;
font-weight:normal;
color:#999;
text-align:center;
letter-spacing: -1pt;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #fff;
}
4. Пылающий заголовок.
Доступные настройки скрипта я указал в комментариях.
HTML
<div class="flame" id="fire">Пылающий заголовок</div>
CSS
.flame {
font-size: 30px;
padding: 20px 0 10px 20px;
width: 350px;
font-weight: bold;
background: scroll 0% 0% rgb(0, 0, 0);
color: rgb(50, 50, 50);
text-shadow: -1px 2px rgb(255, 255, 0),
2px -3px 3px rgb(255, 204, 0),
2px -5px 6px rgb(255, 153, 0),
-3px -7px 8px rgb(255, 102, 0),
1px -15px 30px rgb(255, 51, 0),
3px -30px 55px rgb(255, 0, 0);
Javascript
<script>
var lever = false; // Тумблер
var textBrightness = 80; // Яркость текста
var fireCount = 9; // Величина пламени
var fireDelta = new Array();
var step = 10; // Шаг колебаний
var angle = 0; // Угол колебаний
var radius = 10;
function animate()
{
fireDelta[fireCount - step] = Math.random() * 2 - 1;
var e = document.getElementById("fire");
var s = "";
for (var i = 0; i < fireCount; i++)
{
if (s) s += ", ";
s += Math.round(fireDelta[(i + fireCount - step) % fireCount] * i) + "px " + (-2 * i -1) + "px " + (2 + i) + "px ";
s += "rgb(255, " + (255 - i * Math.floor(255 / (fireCount - 1))) + ", 0)";
}
e.style.textShadow = s;
e.style.color = "rgb(" +
(textBrightness + step % 2) + ", " +
textBrightness + ", " +
textBrightness + ")";
step = (step + 1) % fireCount;
angle -= 0.8;
if (angle <= 0) angle = Math.PI * 2;
var e = document.getElementById("rgb");
var s = Math.round(Math.cos(angle + Math.PI * 2 / 3) * radius) + "px 4px #0F0";
e.style.textShadow = s;
e.style.color = "rgb(" + (255 - step % 2) + ", 255, 255)";
}
function toggleAnimation()
{
for (var i = 0; i < fireCount; i++)
fireDelta[i] = Math.random() * 2 - 1;
if (lever)
{
window.clearInterval(lever);
lever = false;
}
else
lever = window.setInterval(function() { animate(); }, 100);
return false;
}
toggleAnimation();
</script>
В WordPress скрипт и html устанавливается прямо на страницу, если для одной страницы.
Если для всего сайта, то в файлы header.php или foonter.php/
CSS соответственно в style.css.
Желаю творческих успехов.
В раздел >>>
А ну-ка, что там ещё интересного
Дополнительная панель для сайта
Увеличение картинки по клику
Счётчик обратного отсчёта
Слайдер на javascript
Растягивающийся блок
В раздел
Вот тут всё про бегущую строку: https://starper55plys.ru/html/begushhaya-stroka/
Пилающий текст эффектно, надо добавить бегущую строку ваааще будет.