|
Свойство text-shadow для оформление текста CSS
|
|
| Kosten | Вторник, 10 Июля 2018, 02:41 | Сообщение 1 |
| В этом мануале по CSS объясняется, как использовать свойство CSS, называемое text-shadow, с синтаксисом и примерами. Свойство text-shadow CSS добавляет тени в текст. Он принимает список теней, разделенных запятыми, которые должны быть применены к тексту и любому из его decorations. Каждая тень описывается некоторой комбинацией смещений X и Y от элемента, радиуса размытия и цвета. В этом примере задается тень текста элемента h1 с разными значениями. Обратите внимание, что вертикальные и горизонтальные значения.
Обратите внимание, что, как и в случае свойства box-shadow, вы можете определить несколько разделенных запятыми теней. В отличие от box-shadow, вы не можете определить значение или использовать ключевое слово вставки для текстовых теней. Есть способы создать текстовую тень, которая выглядит как тень вставки, но сама тень на самом деле не будет вставкой.
То, что мы создаем, - это в основном эффект прозрачной прозрачности, который очень похож на анаглифе стереоскопические 3D-изображения. Чтобы использовать эффект в нашихего дизайна, мы, конечно же, построим его с помощью CSS, но главное внимание - сохранить в нашей разметке все аккуратное и истинное, без какой-либо повторной разметки. Поэтому мы не хотим использовать ничего подобного/
Здесь вступает в действие свойство content и: после псевдо элемента. Элемент: после псевдо элемента позволяет вставлять фрагмент содержимого после целевого заголовка, а добавление дополнительного текста в свойстве содержимого CSS нашей разметке не содержать каких-либо слов, которые не должны быть там, гарантируя, что их нельзя увидеть или читайте читатели на экране, читатели RSS или поисковые роботы.
Рассмотрим, как пример:
Stroked Text
HTML
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 вы можете посмотреть в подборке, где представлены разные стили.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Среда, 11 Июля 2018, 21:35 | Сообщение 2 |
|
| Создайте этот текстовый эффект с тиснением CSS3, используя только что text-shadow. Если вы знаете, что это очень просто и быстро сделать этот классный текстовый эффект.
Тисненый учебник по текстовым эффектам CSS3
HTML
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';
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Среда, 11 Июля 2018, 21:46 | Сообщение 3 |
|
| Это полезно для тех интернет-магазинов, которые хотят предлагать рекламные акции, продажи, онлайн-купон. Типичное пограничное лечение, которое вы видите на большинстве веб-сайтов, является сплошной линией, но вы можете альтернативно использовать яблочные штриховые или пунктирные линии на границе.
Объедините это с некоторыми скругленными углами 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;
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Среда, 11 Июля 2018, 22:02 | Сообщение 4 |
|
| В то время как мы находимся на грани пунктирной обработки границ, вот альтернативный трюк, который вы можете использовать, чтобы придать коробке тонкую иллюзию.
На этот раз вместо границы мы используем контур. Контур можно легко вставить, используя отрицательное значение для команды 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;
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Среда, 11 Июля 2018, 22:12 | Сообщение 5 |
|
| Этот популярный и возможно, чрезмерно используемый эффект 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;
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Среда, 11 Июля 2018, 22:22 | Сообщение 6 |
|
| Обнаружил этот отзыв полностью случайно, создав какой-то поглаженный текст для предыдущего примера. Оказывается, если вы используете RGBa на поглаженном тексте и немного уменьшите непрозрачность, вы можете добиться потрясающего двойного удара. Что не совсем уверен, почему это работает, что-то связанное с кровотечением от удара, но это так.
Двухстрочный текст
HTML
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);
}
Демонстрация
| | Страна: (RU) |
| |
