Доброго времени суток, друзья, читатели и гости блога. Поиграюсь немного с текстом и предлагаю вам несколько вариантов его оформления. Используя свойство text-shadow можно создать очень интересные вещи. Если добавить тень к тексту и установить различные параметры
получаются красивые эффекты. У меня уже была шпаргалка на эту тему. Кому интересно, посмотрите здесь. Можно использовать, конечно, и фотошоп и различные онлайн генераторы для этих целей. Но мы сделаем всё, используя только CSS.
Сегодня покажу ещё несколько вариантов.
Протестируйте их в этом редакторе. Коды для них ниже в сообщении. В качестве примера, коль приближаются праздники, сделаем заголовки по теме.
1. Длинные тени.
2. Разъезжающийся текст.
3. Затухающий текст.
Не удержалась - ещё один эффект с тенями.
Приветик
Подобным образом можно оформить заголовки, подзаголовки в блоге. Вместо тегов
<h>...</h> прописать <h1>...</h1> и так далее. Один из таких оставила пока на тестовом блоге для наглядности. Посмотрите там - эффект затухания присутствует на заголовках гаджетов. Если подключить фантазию можно поэкспериментировать с цветами и другими параметрами.
Сегодня у меня всё. Спасибо, что читаете мои шпаргалки и до новых встреч.
получаются красивые эффекты. У меня уже была шпаргалка на эту тему. Кому интересно, посмотрите здесь. Можно использовать, конечно, и фотошоп и различные онлайн генераторы для этих целей. Но мы сделаем всё, используя только CSS.
Сегодня покажу ещё несколько вариантов.
Протестируйте их в этом редакторе. Коды для них ниже в сообщении. В качестве примера, коль приближаются праздники, сделаем заголовки по теме.
1. Длинные тени.
<h>С Новым годом, друзья!</h>
<style> {
background: white;
text-align: center;
font-family: Georgia;
}
H {
font-size: 50px;
font-weight: normal;
cursor: pointer;
text-shadow: 1px 1px 0 hsl(20,100%,50%),
2px 2px 0 hsl(20,100%,50%),
3px 3px 0 hsl(35,100%,50%),
4px 4px 0 hsl(35,100%,50%),
5px 5px 0 hsl(45,100%,50%),
6px 6px 0 hsl(45,100%,55%),
7px 7px 0 hsl(55,100%,60%),
8px 8px 0 hsl(55,100%,65%);
color: hsl(0,100%,40%);
transition: all 1s;
}
H:hover {
text-shadow: 1px -1px 0 hsl(290,100%,40%),
2px -2px 0 hsl(290,100%,40%),
3px -3px 0 hsl(280,100%,60%),
4px -4px 0 hsl(280,100%,60%),
5px -5px 0 hsl(270,100%,75%),
6px -6px 0 hsl(270,100%,80%),
7px -7px 0 hsl(260,100%,85%),
8px -8px 0 hsl(260,100%,90%);
color: hsl(300,100%,30%);
}
</style>
<style> {
background: white;
text-align: center;
font-family: Georgia;
}
H {
font-size: 50px;
font-weight: normal;
cursor: pointer;
text-shadow: 1px 1px 0 hsl(20,100%,50%),
2px 2px 0 hsl(20,100%,50%),
3px 3px 0 hsl(35,100%,50%),
4px 4px 0 hsl(35,100%,50%),
5px 5px 0 hsl(45,100%,50%),
6px 6px 0 hsl(45,100%,55%),
7px 7px 0 hsl(55,100%,60%),
8px 8px 0 hsl(55,100%,65%);
color: hsl(0,100%,40%);
transition: all 1s;
}
H:hover {
text-shadow: 1px -1px 0 hsl(290,100%,40%),
2px -2px 0 hsl(290,100%,40%),
3px -3px 0 hsl(280,100%,60%),
4px -4px 0 hsl(280,100%,60%),
5px -5px 0 hsl(270,100%,75%),
6px -6px 0 hsl(270,100%,80%),
7px -7px 0 hsl(260,100%,85%),
8px -8px 0 hsl(260,100%,90%);
color: hsl(300,100%,30%);
}
</style>
2. Разъезжающийся текст.
<h >С наступающим всех </h>
<style>
h{
font-size: 50px;
font-weight: normal;
cursor: pointer;
overflow: hidden;
text-shadow: 0 0 tomato,
0 0 yellowgreen,
0 0 skyblue;
color: transparent;
transition: all 1s;
}
h:hover {
text-shadow: -400px 0 tomato,
400px 0 yellowgreen,
0 0 skyblue;
}
</style>
<style>
h{
font-size: 50px;
font-weight: normal;
cursor: pointer;
overflow: hidden;
text-shadow: 0 0 tomato,
0 0 yellowgreen,
0 0 skyblue;
color: transparent;
transition: all 1s;
}
h:hover {
text-shadow: -400px 0 tomato,
400px 0 yellowgreen,
0 0 skyblue;
}
</style>
3. Затухающий текст.
<h >Новый год</h>
<style>
H{
font-size: 50px;
font-weight: normal;
cursor: pointer;
text-shadow: 0 0 20px transparent;
color: transparent;
animation: shadows 4s infinite ease-in;
}
@keyframes shadows {
10% {
text-shadow: 0 0px 1px hsl(0, 100%, 40%);
}
60% {
text-shadow: 0 0px 1px crimson;
}
90% {
text-shadow: 0 30px 40px transparent;
}
}
</style>
<style>
H{
font-size: 50px;
font-weight: normal;
cursor: pointer;
text-shadow: 0 0 20px transparent;
color: transparent;
animation: shadows 4s infinite ease-in;
}
@keyframes shadows {
10% {
text-shadow: 0 0px 1px hsl(0, 100%, 40%);
}
60% {
text-shadow: 0 0px 1px crimson;
}
90% {
text-shadow: 0 30px 40px transparent;
}
}
</style>
Не удержалась - ещё один эффект с тенями.
<h>Приветик</h>
<style> {
background: #EEE;
text-align: center;
font-family: Georgia;
}
H {
font-size: 50px;
font-weight: normal;
cursor: pointer;
text-shadow: -1px -1px #FFF,
-2px -2px #FFF,
-1px 1px #FFF,
-2px 2px #FFF,
1px 1px #FFF,
2px 2px #FFF,
1px -1px #FFF,
2px -2px #FFF,
-3px -3px 2px #BBB,
-3px 3px 2px #BBB,
3px 3px 2px #BBB,
3px -3px 2px #BBB;
color: steelblue;
transition: all 1s;
}
H:hover {
color: yellowgreen;
}</style>
<style> {
background: #EEE;
text-align: center;
font-family: Georgia;
}
H {
font-size: 50px;
font-weight: normal;
cursor: pointer;
text-shadow: -1px -1px #FFF,
-2px -2px #FFF,
-1px 1px #FFF,
-2px 2px #FFF,
1px 1px #FFF,
2px 2px #FFF,
1px -1px #FFF,
2px -2px #FFF,
-3px -3px 2px #BBB,
-3px 3px 2px #BBB,
3px 3px 2px #BBB,
3px -3px 2px #BBB;
color: steelblue;
transition: all 1s;
}
H:hover {
color: yellowgreen;
}</style>
Подобным образом можно оформить заголовки, подзаголовки в блоге. Вместо тегов
<h>...</h> прописать <h1>...</h1> и так далее. Один из таких оставила пока на тестовом блоге для наглядности. Посмотрите там - эффект затухания присутствует на заголовках гаджетов. Если подключить фантазию можно поэкспериментировать с цветами и другими параметрами.
Сегодня у меня всё. Спасибо, что читаете мои шпаргалки и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Мне особенно ПРИВЕТИК понравился. Виктория, с наступающем Новым годом!
ОтветитьУдалитьДенег столько вам желаю,
чтобы курам не клевать,
Чтоб пуховая перина и удобная кровать,
Чтоб проблемы и невзгоды не совали к вам свой нос
И чтоб яйца золотые целый год Петух вам нес!
Затухающий текст выглядит загадочно :)
ОтветитьУдалитьНаписала у себя "привет". Спасибо, Вика, с тобой не приходится скучать, каждый раз что-то интересненькое) Не разобралась лишь, как изменить цвет.
ОтветитьУдалитьА еще мне очень нравится как смотрится эффект в меню твоего тестового блога. Может, себе сделала бы, но не поняла, что именно и где размещать.. Наверно, не весь код? в шаблоне?
Наташа, про менюшку у меня пост в черновиках стоит. Готовый. Но, скорее всего я опубликую его после нового года. Спасибо тебе.
ОтветитьУдалить