Автор

15 04.2013
Градиентный текст

Градиентный текст


 

Вариант реализации CSS3 градиента на тексте. Нужный эффект достигается за счет такой подборки цвета заднего фона, что накладываемый на него градиент практически не виден, а текст приобретает градиент, за счет более светлого цвета используемого для самого текста.

 

ДЕМО

 

HTML разметка

<h1 class="text"><span>WWW.S-SD.RU</span></h1>

 

CSS

body {
    background-color: #272727;
}
h1 {
    font-family: "Arial", sans-serif;
    font-size: 85px;
    text-align: center;
    font-weight: bold;
    color: #3d3d3d;
    margin-top: 200px;
}
.text {
    position:relative;
}
.text:after {
    content: '';
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: -moz-linear-gradient(top,  rgba(39,39,39,1) 0%, rgba(39,39,39,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,39,39,1)), color-stop(100%,rgba(39,39,39,0)));
    background: -webkit-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
    background: -o-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
    background: -ms-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
    background: linear-gradient(to bottom,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#00272727',GradientType=0 );
}
span {
    text-shadow:
        0 -1px 0 #858585,
        0 1px 10px rgba(0,0,0,.6),
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.2),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 7px 10px rgba(0,0,0,.25),
        0 15px 10px rgba(0,0,0,.2),
        0 25px 15px rgba(0,0,0,.15);
}

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

05 06.2017
Градиентный текст

Эта анимированная боковая корзина - это умный и ненавязчивый способ позволить пользователям входить и выходить из списка продуктов, которые они хотят купить, без необходимости обновлять страницу или запускать всплывающее окно.


11 09.2017
Градиентный текст

Кнопка вызова к действию, которая анимируется и превращается в полноразмерное модальное окно.


12 02.2017
Градиентный текст

Вчера рылся в инете на предмет найти что-то интересное и удача не обошла меня стороной, я нарыл на зарубежном сайте этот пример Parallax Scroll Effects, правда пришлось немного повозиться чтоб его скачать, а точнее сохранить себе. Буквально около 3 часов мытарства собрал всё воедино, и теперь вы сможете оценить, скачать и использовать в своих нуждах этот пример!


27 04.2013
Градиентный текст

Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать Elastislide - плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close