cooledit

Доброго времени суток дизайнеры.

Сегодняшний пост посвящён тому, как сделать красивый 3d текст с помощью CSS 3-й версии.

↓

↓

↓

↓

↓

↓

В 3-й версии CSS появилась возможность добавлять тени к тексту с помощью кода "text-shadow".

Выглядит код примерно вот так:

.coolclass{
text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}
 
/*или*/
 
.coolclass{
text-shadow: 2px 2px 3 #fff;
}

Но данный код не сможет сделать по настоящему классный эффект типа вот этого:

Для того что бы получить такой эффект надо совместить или размножить код "text-shadow", причём использовать при этом как минимум два цвета, тогда эффект 3d будет реально классно выглядеть.

Для начала возьмём 2 цвета: один будет чёрный, а второй серый. Код "text-shadow" будем использовать 6 раз:

h2
{
        text-shadow:
        1px 1px 0 #CCC,
        2px 2px 0 #CCC, /* конец двух уровней серого оттенка тени*/
        3px 3px 0 #444,
        4px 4px 0 #444,
        5px 5px 0 #444,
        6px 6px 0 #444; /* конец четырёх уровней тёмного оттенка тени */
}

Должно получится что то вроде этого:

Теперь я предлагаю вашему вниманию ещё один эффект, эффект трансформации, который лучше всего использовать с кодом ":hover".

Сам код выглядит вот так:

h2:hover
{
        /* CSS3 Transform Effect */
        -webkit-transform: scale(1.2);     /* Safari & Chrome */
        -moz-transform: scale(1.2);        /* Firefox */
        -o-transform: scale(1.2);          /* Opera */
}

Результат будет выглядеть примерно вот так:

Вы можете изменять размер просто поменяв значение в скобках.

Также можно влиять на скорость  изменения размера. вот пример такого кода:

h2
{
        /* CSS3 Transition Effect */
        -webkit-transition: all 0.12s ease-out;             /* Safari & Chrome */
        -moz-transition: all 0.12s ease-out;                /* Firefox */
        -o-transition: all 0.12s ease-out;          /* Opera */
}

ДЭМО по статье

Вот и всё что я хотел сегодня написать, если у вас интересная тема для поста или есть вопрос по wordpress, я могу написать пост и попробывать ответить на ваш вопрос.