Сегодня мы создадим набор красивых эффектов для крупных заголовков используя CSS3 и JQuery. Множество вещей можно сделать при помощи CSS3-анимации и переходов, и мы рассмотрим некоторые из этих возможностей.
Мы также будем использовать скрипт Lettering.js, чтобы работать с отдельными буквами в слове, которое будет в нашем большом заголовке.
Изображения, используемое в демо от Andrey & Lili.. Они распространяются на условиях лицензии Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.
Структура будет простая, тег h2 с ссылкой внутри. Мы обернем заголовок в контейнер "letter-container":
(0)
<div id="letter-container" class="letter-container">
<h2><a href="#">Sun</a></h2>
</div>
Затем мы вызовим плагин Lettering.js, чтобы каждая буква была обернута в тег span.
Теперь давайте взглянем на примеры. Я покажу все стили, которые имеют отношение к эффектам. В исходных файлах вы можете посмотреть все остальные стили, такие как: позиционирование, заголовки, шрифты и так далее.
Чтобы не загромождать урок, я не буду указывать в примерах кода какие-либо префиксы CSS для различных браузеров. В исходных файлах они есть, конечно.
В первом примере мы хотим исказить буквы, чтобы создать небольшую перспективу. Но мы также хотим изменить слово при наведении курсора мыши, поэтому наш код будет содержать дополнительный элемент A внутри тега h2. Чтобы эффект работал хорошо, мы выберем два слова с одинаковым числом букв:
<div id="letter-container" class="letter-container">
<h2><a href="#">Chaos</a></h2>
<h2><a href="#">Order</a></h2>
</div>
Мы установим для ссылок абсолютное позиционирование и спрячем второе слово, указав для него opacity равную 0:
.letter-container h2 a {
text-align: center;
text-transform: uppercase;
font-size: 150px;
position: absolute;
width: 800px;
height: 180px;
top: 0px;
left: 50%;
margin-left: -400px;
transition: all 0.3s linear;
}
.letter-container h2 a:nth-child(2) {
opacity: 0;
}
Теги span будут иметь некоторые правила для тени текста и переходов. Каждый дочерний четный элемент будет повернут на 10 градусов, а нечетный на -10 градусов:
.letter-container h2 a span {
display: inline-block;
position: relative;
width: 120px;
margin: 0px;
transition: all 0.3s linear;
text-shadow:
2px 2px 2px rgba(0,0,0,0.6),
1px 1px 2px rgba(0,0,0,0.4),
0px 0px 2px rgba(255,255,255,0.9);
}
.letter-container h2 a span:nth-child(odd) {
transform: skewY(10deg);
background: #333;
box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
z-index: 10;
}
.letter-container h2 a span:nth-child(even) {
transform: skewY(-10deg);
background: #666;
box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
z-index: 10;
}
Когда мы наводим курсор мыши на тег h2, мы хотим, чтобы появилось второе слово, а первое исчезло:
.letter-container h2:hover a:nth-child(1) {
opacity: 0;
}
.letter-container h2:hover a:nth-child(2) {
opacity: 1;
}
Кроме того, мы хотим выпрямить буквы:
.letter-container h2:hover a span {
transform: skewY(0deg);
background: #680121;
}
.letter-container h2 a span:hover {
color: #f6b0c5;
}
Во втором примере мы поиграем немного с псевдо-элементами. Во-первых, мы зададим стили для каждого тега span таким образом, чтобы он выглядел как фото полароида:
.letter-container h2 a span {
display: inline-block;
position: relative;
width: 200px;
height: 140px;
background: #000;
line-height: 140px;
font-size: 120px;
margin: 3px;
background-position: 50% 0%;
background-size: 200px 267px;
color: #fff;
text-shadow:
0px 0px 1px #fff,
2px 2px 5px rgba(0,0,0,0.4);
border-color: #fff;
border-style: solid;
border-width: 10px 10px 45px 10px;
box-shadow:
2px 2px 8px 4px rgba(0,0,0,0.9),
0px 0px 2px rgba(0,0,0,0.2) inset;
transition: all 0.3s ease-in-out;
}
Затем мы добавим псевдо элемент, который будет содержать градиент, что позволит нашему полароиду выглядеть более реалистичным:
.letter-container h2 a span:before {
content:'';
position: absolute;
width: 220px;
height: 195px;
top: -10px;
left: -10px;
background: linear-gradient(-45deg, rgba(14,14,14,0.32) 0%,rgba(127,127,127,0.21) 18%,rgba(170,170,170,0.11) 34%,rgba(201,201,201,0) 51%,rgba(242,242,242,0.1) 66%,rgba(255,255,255,0.18) 79%,rgba(71,69,69,0.32) 100%);
}
Теперь, мы будем поворачивать четные и нечетные буквы в разные стороны, чтобы они выглядели как разбросанные фотографии:
.letter-container h2 a span:nth-child(even) {
transform: rotate(3deg);
}
.letter-container h2 a span:nth-child(odd) {
transform: rotate(-5deg);
}
Для каждого символа (мы используем классы, создаваемые lettering.js, но мы могли бы также использовать селектор nth-child) мы будем добавлять различные фоновые изображения:
.letter-container span.char1 {
background-image: url(../images/1.jpg);
}
.letter-container span.char2 {
background-image: url(../images/2.jpg);
}
.letter-container span.char3 {
background-image: url(../images/3.jpg);
}
.letter-container span.char4 {
background-image: url(../images/4.jpg);
}
.letter-container span.char5 {
background-image: url(../images/5.jpg);
}
При наведении на каждую ссылку, мы будем поворачивать тег span и увеличивать его в размерах:
.letter-container h2 a:hover span:nth-child(even) {
transform: scale(0.9) rotate(-5deg);
}
.letter-container h2 a:hover span:nth-child(odd) {
transform: scale(0.9) rotate(3deg);
}
При наведении мыши мы создаем анимацию, которая перемещает фоновое изображение:
.letter-container h2 a span:nth-child(even):hover,
.letter-container h2 a span:nth-child(odd):hover {
animation: moveImg 9s linear infinite forwards;
color: rgba(255,255,255,0.4);
text-shadow:0px 0px 5px rgba(0,0,0,0.1);
transform: scale(1.1);
z-index: 10;
box-shadow:
2px 2px 20px 4px rgba(0,0,0,0.6),
0px 0px 2px rgba(0,0,0,0.2) inset;
}
@keyframes moveImg {
0% {
background-position: 50% 0%;
}
50% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
В третьем примере мы будем применять анимацию к тегу span, которая будет выполняться один раз при загрузке страницы. Мы сделаем размытые буквы более строгими. Мы также будем использовать маску, чтобы добавить текстуру на буквы (поддерживается только Webkit браузерами, на данный момент):
.letter-container h2 a span {
font-size: 105px;
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
mask-image: url(../images/mask2.png);
transition: all 0.3s linear;
animation: sharpen 0.6s linear backwards;
}
При наведении на букву мы будем менять её цвет:
.letter-container h2 a span:hover{
color: #3f7f75;
}
Мы создадим рандомное появления букв, задавая каждой букве задержку анимации:
.letter-container h2 a span:nth-child(1) {
animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(2) {
animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
animation-delay: 1s;
}
/* ... и так для каждой буквы */
Анимация превращает размытую, нечеткую и прозрачную букву в букву с резкими краями, четким цветом и тонкими тенями:
@keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #444;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #444;
color: transparent;
}
100% {
color: #444;
opacity: 1;
text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
}
}
Этот пример довольно сильно отличается от предыдущих, потому что мы будем применять немного больше JQuery. Чтобы понять, что мы делаем, я покажу вам, что наша функция JQuery делает из заголовка. Код, который создается для каждой буквы после применения lettering.js получается следующий:
<div class="twrap">
<div class="tbg">
<span>P</span>
</div>
<div class="tup">
<div class="tfront">
<span>P</span>
</div>
<div class="tback">
<span>P</span>
</div>
</div>
<div class="tdown">
<span>P</span>
</div>
</div>
Почему такая структура? Мы хотим поиграть с перспективой и 3D-трансформацией, так что нам нужно еще несколько элементов, чтобы сделать эту работу.
Мы хотим, чтобы этот заголовок выглядел как информационное табло аэропорта, и когда мы наводим курсор мыши на тег span, мы хотим чтобы верхний элемент падал вниз, но в 3D! Это будет работать только в браузер Webkit, но у нас будет хорошая альтернатива и для других.
Итак, давайте начнем со стилей для новой обертки. Это будет контейнер с перспективой:
.letter-container h2 .twrap {
position: relative;
display: inline-block;
width: 100px;
height: 120px;
line-height: 120px;
font-size: 120px;
border: 15px solid rgba(0,0,0,0.5);
-webkit-perspective: 400;
box-shadow: 1px 1px 4px #000;
}
Затем мы определяем фон буквы, который будет желтым:
.letter-container h2 .tbg {
background: #121212;
position: absolute;
color: #f2c200;
width: 100%;
height: 100%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
Нижняя часть буквы в обоих "tdown" и "tup" ("tback") контейнерах будет скрываться благодаря отрицательному отступу:
.letter-container h2 .tdown {
height: 50%;
top: 50%;
width: 100%;
position: absolute;
overflow: hidden;
z-index: 1;
background: #151515;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span {
display: block;
margin-top:-60px;
}
Все элементы будут иметь абсолютное позиционирование. Элементы внутри "tup" будут иметь свойство -webkit-backface-visibility: hidden. Таким образом мы сможем повернуть "tback" в 3D пространстве, а затем "tup", при наведении:
.letter-container h2 .tup {
height: 50%;
width: 100%;
position: absolute;
z-index: 10;
-webkit-transform-origin: 50% 100%;
transition: all 0.3s linear;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront,
.letter-container h2 .tup .tback {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
-webkit-backface-visibility: hidden;
background: #151515;
}
.letter-container h2 .tup .tback {
background: #121212;
color: #f2c200;
}
.csstransforms3d .letter-container h2 .tup .tback {
-webkit-transform: rotateX(-180deg);
}
.csstransforms3d .letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(-180deg);
}
Когда мы не имеем поддержки 3D-трансформации, то мы не показываем "tback". Вместо этого, мы анимируем "tup" и "tdown", перемещая их вниз:
/* Для браузеров без поддержки 3d трансформации*/
.no-csstransforms3d .letter-container h2 .tup .tback {
display: none;
}
.no-csstransforms3d .letter-container h2 a .twrap:hover .tup {
animation: moveBackUp 0.7s ease-in-out forwards;
}
.no-csstransforms3d .letter-container h2 a .twrap:hover .tdown {
animation: moveBackDown 0.7s ease-in-out forwards;
}
@keyframes moveBackUp {
0%{
transform: translateY(0%);
}
50%{
transform: translateY(-120%);
z-index: -1;
}
100%{
transform: translateY(0%);
z-index: -1;
}
}
@keyframes moveBackDown {
0%{
transform: translateY(0%);
}
50%{
transform: translateY(120%);
z-index: -1;
}
100%{
transform: translateY(0%);
z-index: -1;
}
}
Итак, пример 5 выглядит немного сумасшедшим: мы создадим тени текста, которые "поднимают" буквы. Мы также создадим псевдо элемент, который содержит супергероя в качестве фона:
.letter-container h2 a:before {
content: '';
position: absolute;
z-index: 0;
width: 525px;
height: 616px;
background: transparent url(../images/superhero.png) no-repeat center center;
background-size: 40%;
top: 0px;
left: 50%;
margin-left: -277px;
transition: all 0.3s ease-in-out;
}
При наведении, мы будем анимировать размер фона, чтобы сделать супергероя больше:
.letter-container h2 a:hover:before{
background-size: 100%;
}
Тег span будет иметь свойство text-shadow, которое "поднимает" буквы, а при наведении мыши мы будем сдвигать буквы вниз, добавив отступы и изменив тени:
.letter-container h2 a span {
color: #ff3de6;
float:left;
position: relative;
z-index: 100;
transition: all 0.3s ease-in-out;
text-shadow:
0px -1px 3px #cb4aba,
0 4px 3px #934589,
2px 15px 5px rgba(0, 0, 0, 0.2),
1px 20px 10px rgba(0, 0, 0, 0.3);
}
.letter-container h2 a span:hover {
color: #e929d0;
padding-top: 10px;
text-shadow:
0px -1px 3px #cb4aba,
0 4px 3px #934589,
1px 1px 10px rgba(0, 0, 0, 0.2);
}
В этом примере мы будем делать что-то подобное, что и в примере 3, кроме того мы будем анимировать буквы по очереди. Мы также будем применять маску, которая создаст некоторые текстуры буквами:
.letter-container h2 a {
text-align: center;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
mask: url(../images/mask.png) repeat;
}
Анимация будет "писать" письмо и мы будем применять различную задержку анимации к каждому дочернему элементу:
.letter-container h2 a span {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
transition: all 0.3s linear;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:hover{
text-shadow: 0px 0px 40px #fff;
}
.letter-container h2 a span:nth-child(1) {
animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
animation-delay: 0.2s;
}
/* ...и так для всех букв */
@keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
В последнем примере мы создадим несколько кругов, для каждой буквы, а при наведении мы добавим радиальный градиент, чтобы он выглядел, как солнце:
.letter-container h2 a span {
display: inline-block;
background: #bfd4e2;
color: #ecf0f2;
text-shadow: 1px 1px 2px rgba(120,155,179,0.5);
width: 200px;
height: 200px;
line-height: 200px;
font-size: 100px;
margin: 3px;
cursor: pointer;
border-radius: 50%;
box-shadow:
2px 2px 10px rgba(43,54,61, 0.4),
0px 0px 0px 9px rgba(116,161,191,0.3) inset;
transition: all 0.3s ease-in-out;
}
.letter-container h2 a:hover span{
opacity: 0.3;
}
Вы можете прочитать о радиальном градиенте здесь.
.letter-container h2 a span:hover{
opacity: 1;
box-shadow:
2px 2px 10px rgba(43,54,61, 0.4),
0px 0px 0px 0px #fedc3f inset,
0px 0px 100px 30px rgba(255,244,193,0.8);
color: #ff8624;
text-shadow:
1px 1px 2px rgba(166,97,41,0.5),
1px 1px 1px #e66212, 3px 3px 1px #fdff64,
4px 4px 6px #ff7420;
background-image:
radial-gradient(
center center,
circle contain,
#fedc3f 0%, #ff7420 100%
);
}
Ну вот и всё! Надеюсь вам понравились эти необычные типографические эффекты созданные при помощи CSS3 и jQuery!
Какой ваш любимый?
© 2008 - 2024 Все права защищены