• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Свойство text-shadow для оформление текста CSS (Как создать классный и красивый текстовый эффект на CSS)
Свойство text-shadow для оформление текста CSS
Kosten
Дата: Вторник, 10.07.2018, 02:41 | Сообщение 1
Администраторы
Сообщений:17380
Награды: 55


В этом мануале по CSS объясняется, как использовать свойство CSS, называемое text-shadow, с синтаксисом и примерами. Свойство text-shadow CSS добавляет тени в текст. Он принимает список теней, разделенных запятыми, которые должны быть применены к тексту и любому из его decorations. Каждая тень описывается некоторой комбинацией смещений X и Y от элемента, радиуса размытия и цвета. В этом примере задается тень текста элемента h1 с разными значениями. Обратите внимание, что вертикальные и горизонтальные значения.

Обратите внимание, что, как и в случае свойства box-shadow, вы можете определить несколько разделенных запятыми теней. В отличие от box-shadow, вы не можете определить значение или использовать ключевое слово вставки для текстовых теней. Есть способы создать текстовую тень, которая выглядит как тень вставки, но сама тень на самом деле не будет вставкой.

То, что мы создаем, - это в основном эффект прозрачной прозрачности, который очень похож на анаглифе стереоскопические 3D-изображения. Чтобы использовать эффект в нашихего дизайна, мы, конечно же, построим его с помощью CSS, но главное внимание - сохранить в нашей разметке все аккуратное и истинное, без какой-либо повторной разметки. Поэтому мы не хотим использовать ничего подобного/

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



Рассмотрим, как пример:

Stroked Text

HTML

Код
<h2>ZORNET.RU</h2>


CSS

Код
h2 {
    font-size: 87px;
    line-height: 183px;
    font-family: 'JungleFeverRegular', Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: rgba(25, 23, 23, 0.65) 3px 3px 3px;
    -webkit-text-stroke: 2px #dccd1a;
}


Этот вариант один из многих версий.

Более того, мы можем также использовать свойство content, чтобы не только писать вручную в каком-то тексте, но также просить его взять контент из определенного атрибута, такого как заголовок. Это обеспечивает динамическое решение, которое может быть реализовано в WordPress, но оно не является 100% идеальным, поскольку оно не остается верным естественному использованию атрибута title. Атрибут title должен содержать больше информации об элементе, а не срывать тот же текст.

До сих пор мы только что получили два одинаковых слова рядом. Давайте добавим некоторые дополнительные стили CSS, чтобы наложить их на два и принести некоторый цвет.

Во-первых, элемент H1 преобразуется в строку и позиционируется относительно, чтобы обеспечить абсолютное позиционирова текста. Затем, стиль шрифта задается как 183px Helvetica с некоторыми настройками с интервалом между буквами, чтобы подтянуть пример. Затем текст окрашивается с использованием RGBa, который позволяет настроить прозрачность aplha так, чтобы при наложении основного цвета будет отображаться.

Текст из свойства содержимого также задается некоторым стилем, в частности, текст помещается абсолютно для того, чтобы слегка сдвинуться с оригинала на 10 пикселей и 5 пикселей на каждой оси и переключиться на красный, чтобы контрастировать с синим.

Так как этот материал носит ознакомительный характер, сам материал на текстовый эффект с тиснением при помощи CSS вы можете посмотреть в подборке, где представлены разные стили.



Демонстрация
Прикрепления: 9565812.png(19.3 Kb)
Страна: (RU)
Kosten
Дата: Среда, 11.07.2018, 21:35 | Сообщение 2
Администраторы
Сообщений:17380
Награды: 55


Создайте этот текстовый эффект с тиснением CSS3, используя только что text-shadow. Если вы знаете, что это очень просто и быстро сделать этот классный текстовый эффект.



Тисненый учебник по текстовым эффектам CSS3

HTML

Код
<h1>ZorNet.Ru</h1>


CSS

Код
h1 {
    margin: 48px auto;
    text-align: center;
    text-shadow: -1px -1px 0px rgba(226, 226, 226, 0.3), 1px 1px 0px rgba(8, 8, 8, 0.87);
    color: #504a4a;
    opacity: 0.5;
    font: 700 80px 'Bitter';
}


Демонстрация
Прикрепления: 9522398.png(9.5 Kb)
Страна: (RU)
Kosten
Дата: Среда, 11.07.2018, 21:46 | Сообщение 3
Администраторы
Сообщений:17380
Награды: 55


Это полезно для тех интернет-магазинов, которые хотят предлагать рекламные акции, продажи, онлайн-купон. Типичное пограничное лечение, которое вы видите на большинстве веб-сайтов, является сплошной линией, но вы можете альтернативно использовать яблочные штриховые или пунктирные линии на границе.

Объедините это с некоторыми скругленными углами CSS3 и теневой коробкой, и у вас есть хорошая маленькая графическая карта CSS!

1.



2.



Купон CSS

HTML

Код
<body>
    <div id="external-resources">
     <h2>ZORNET.RU</h2>
    </div>
</body>


CSS

Код
h2 {
font-size: 63px;
line-height: 68px;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

#external-resources {
    background-color: #f8fdff;
    height: 170px;
    width: 395px;
    margin: 98px auto;
    border: 3px dashed #21303b;
    -webkit-box-shadow: 10px 10px 10px #756d6d;
    -moz-box-shadow: 10px 10px 10px #000;
    box-shadow: 9px 9px 9px #191818;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
}


Демонстрация
Прикрепления: 3433775.png(15.3 Kb) · 9194843.png(72.3 Kb)
Страна: (RU)
Kosten
Дата: Среда, 11.07.2018, 22:02 | Сообщение 4
Администраторы
Сообщений:17380
Награды: 55


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

На этот раз вместо границы мы используем контур. Контур можно легко вставить, используя отрицательное значение для команды outline-offset.



HTML

Код
<body>
    <div id="coupon-graphic">
     <h2>ZORNET.RU</h2>
    </div>
</body>


CSS

Код
h2 {
    font-size: 63px;
    line-height: 215px;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
}

#coupon-graphic{
    outline: 1px dashed #d0dae2;
    outline-offset: -7px;
    background-color: #2d4c63;
    height: 215px;
    width: 412px;
    margin: 100px auto;
    -webkit-box-shadow: 2px 2px 2px #1b1919;
    -moz-box-shadow: 2px 2px 2px #000;
    box-shadow: 2px 2px 2px #1b1a1a;
}


Демонстрация
Прикрепления: 7163036.png(13.6 Kb)
Страна: (RU)
Kosten
Дата: Среда, 11.07.2018, 22:12 | Сообщение 5
Администраторы
Сообщений:17380
Награды: 55


Этот популярный и возможно, чрезмерно используемый эффект Web 2.0 использовался для того, чтобы требовать хотя бы одного изображения. Теперь используя CSS3 и небольшой градиент фона, вы знаете, как вы можете воссоздать этот блеск, используя только код.

Сложные CSS-градиенты сложно построить, поэтому я рекомендую использовать Ultimate CSS Gradient Generator или что-то подобное, чтобы помочь автоматизировать процесс.



HTML

Код
<body>
    <div id="create-typography">
     <h2>ZORNET.RU</h2>
    </div>
</body>


CSS

Код
h2 {
    font-size: 60px;
    line-height: 201px;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: rgba(115, 114, 114, 0.12) 5px 5px 5px;
}

#create-typography {
    background: #5f5757;
    background: -moz-linear-gradient(top, #666666 4%, #545454 50%, #3A3A3A 51%, #131313 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#524d4d), color-stop(50%,#544d4d), color-stop(51%,#252222), color-stop(100%,#191717));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',GradientType=0 );
    height: 211px;
    width: 417px;
    margin: 100px auto;
    -webkit-box-shadow: 5px 5px 5px rgba(29, 27, 27, 0.36);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
    box-shadow: 5px 5px 5px rgba(80, 77, 77, 0.22);
    -webkit-border-radius: 83px;
    -moz-border-radius: 83px;
    border-radius: 83px;
}


Демонстрация
Прикрепления: 9516129.png(21.5 Kb)
Страна: (RU)
Kosten
Дата: Среда, 11.07.2018, 22:22 | Сообщение 6
Администраторы
Сообщений:17380
Награды: 55


Обнаружил этот отзыв полностью случайно, создав какой-то поглаженный текст для предыдущего примера. Оказывается, если вы используете RGBa на поглаженном тексте и немного уменьшите непрозрачность, вы можете добиться потрясающего двойного удара. Что не совсем уверен, почему это работает, что-то связанное с кровотечением от удара, но это так.



Двухстрочный текст

HTML

Код
<h2>ZORNET.RU</h2>


CSS

Код
h2 {
    font-size: 130px;
    line-height: 120px;
    font-weight: bold;
    text-align: center;
    text-shadow: rgba(25, 23, 23, 0.76) 3px 3px 3px;
    -webkit-text-stroke: 4px rgba(19, 18, 18, 0.61);
}


Демонстрация
Прикрепления: 5241841.png(44.7 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Свойство text-shadow для оформление текста CSS (Как создать классный и красивый текстовый эффект на CSS)
  • Страница 1 из 1
  • 1
Поиск: