Скрипты

repairer-2-3-система-управления-мастерской Система управления мастерской по ремонту электроники и т.д. Это на самом деле инновационный, простой и мощный инструмент управления. Это просто Ваш...
cool-comments-ajax-system Ajax Cool coments это система для добавления комментариев очень легко на любой сайт или веб-страницу. Она была конструирована думая 100% о конечном...
stockpile-система-управления-запасами-и-заказами StockPile делает процесс управления инвентаризации на основе бизнеса гораздо проще. Все ваши запасы, заказы и клиенты управляются и учитываются в одном...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Текстовые эффекты CSS3

Текстовые эффекты CSS3

В этой статье вы увидите, шесть интересных CSS3 эффекта для текста, такие как 3D эффект через тень, градиент, анимационный блик света, трансформация, обводка. Данные эффекты работают на 100% в браузере Chrome.

 Результат.

Текстовые эффекты CSS3

DEMO

Для начала добавим общий стиль для текста, это его положения и размер.

 

#main div {
    font-size: 120px;
    font-weight:bold;
    position: relative;
}

1. Эффект 3Dтени. Необходимо указать горизонтальную тень, вертикальную тень, расстояние размытия и цвет тени.

text-shadow: h-shadow v-shadow blur color;
text-shadow: 2px 2px 5px #FF7777;

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

# Eff1 {
     цвет: # 00b506;
     Текст-тень:
         0px 0px 0 RGB (-28153, -22),
         1px 1px 0 RGB (-55126, -49),
         2px 2px 0 RGB (-83,98, -77),
         3px 3px 0 RGB (-111,70, -105),
         4px 4px 0 RGB (-139,42, -133),
         5px 5px 0 RGB (-166,15, -160),
         6px 6px 0 RGB (-194, -13, -188),
         7px 7px 0 RGB (-222, -41, -216),
         8px 8px 7px RGBA (0,0,0,0.75),
         8px 8px 1px RGBA (0,0,0,0.5),
         0px 0px 7px RGBA (0,0,0, 0,2);
 }

2. CSS3 градиент текста. Этот эффект использует свойство (-webkit-mask-image), которое в данный момент поддерживается только браузерами на базе WebKit.

#eff2 {
    color: #00b506;
    text-shadow: 1px 1px 1px #000000;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
}

3. CSS3 радуга на тексте. Этот эффект использует свойство (-webkit-text-fill-color), которое в данный момент поддерживается только браузерами на базе WebKit.

#eff3 {
    background-image: -webkit-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:    -moz-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:     -ms-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:      -o-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:         linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

4. Анимированный блик света. Этот эффект использует свойство (-webkit-background-clip).

#eff4 {
    background: #00b506 -webkit-gradient(linear, left top, right top, from(#00b506), to(#00b506), color-stop(0.5, #ffffff)) 0 0 no-repeat;
    color: rgba(255, 255, 255, 0.1);
    font-size: 120px;
    font-weight: bold;
    position: relative;

    -webkit-animation: shine 2s infinite;
    -webkit-background-clip: text;
    -webkit-background-size: 300px;
}

@-webkit-keyframes shine {
    0% {
        background-position: top left;
    }
    100% {
        background-position: top right;
    }
}

5. Простая обводка текста.

#eff5 {
    color: #00b506;

    -webkit-text-stroke: 1px #000;
}

6. Эффект трансформации текста. При наведении курсора текст переворачивается в нашем случае на 180 градусов. Используется свойство (rotateY).

 

#eff6 {
    color: #00b506;
}
#eff6 p {
    color: #8A2BE2;
    cursor: pointer;
    display: inline-block;

    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
#eff6 p:hover {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -0-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
}


  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...