—»     —»   Создаем сайт с меняющимся цветом посредством CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

Создаем сайт с меняющимся цветом посредством CSS3

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

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

Результат

Ознакомьтесь с результатом работы, описанным в нашей сегодняшней статье.

Создаем сайт с меняющимся цветом посредством CSS3
Создаем сайт с меняющимся цветом посредством CSS3

Как видно, здесь мы используем переходы Webkit CSS3, с помощью которых мы меняем цвет фона, цвет текста, цвет гиперссылок и цвет гиперссылок при наведении на них курсора мыши. Как только вы наводите курсор на прямоугольник, цвет фона, текста и гиперссылок изменяется. Далее, как только вы наводите курсор мыши на ссылку, цвет меняется еще раз.

Здесь мы будем придерживаться семейства WebKit, так как поддержка переходов в Firefox пока еще проходит стадию разработки (например, -moz-transition в Firefox 3.7).

CSS3 переходы (transitions)

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

-webkit-transition-property: color; 
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;

В примере, представленном выше, вы решили, что переход цвета будет осуществляться в линейном режиме в течение 1 секунды. Функция таймера управляет скоростью перехода. В линейном режиме, переход осуществляется на стабильной скорости, в то время как другие режимы более прогрессивны и скорость может увеличиваться. Для более подробной информации о функции таймера, обратитесь к статье CSS Animation на сайте Webkit.org.

Пример, приведенный выше, построен на единственном параметре перехода, но мы также можем задать несколько параметров перехода на одну команду. Рассмотрим следующее:

-webkit-transition-property: color, background; 
    -webkit-transition-duration: 1s, 1s;
    -webkit-transition-timing-function: linear, ease-in;

Этот пример представляет как изменений цвета текста, так и фона (параметры разделены запятыми), которые производятся в течение одной секунды. Функция таймера для параметра «цвета» линейна, а вот параметр «фона» задает облегченную функцию.

Для того чтобы более подробно изучить этот пример, изучите статью о переходах CSS3 на сайте NetTuts.

Начнем: HTML

Для начала нам надо набросать обычный чистый шаблон XHTML (можно было бы также легко воспользоваться HTML5, но мы решили сосредоточиться на актуальной технологии).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>Page Title</title>
       <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
</head>

<body>
</body>

</html>

После того, как вы создали пустой шаблон, добавьте один div для того, чтобы разместить в нем текст. Впишите туда что захотите, но не забудьте добавить туда ссылок, чтобы в полной мере насладиться эффектом переходов.

<body>

    <div class="textContainer">
        <p>Hi there, my name is Josh. Check out my <a href="http://">portfolio</a>,
        follow me on <a href="http://">Twitter</a>, and read all
        <a href="http://">about</a> my life.</p>
    </div>

</body>

Итак. Как мы уже сказали ранее, мы работаем над крайне простым примером, так что это весь код HTML, который нам потребуется. Мы задали класс div’у, вместо Id, так что вы с легкостью можете добавлять другие области на странице, которые будут служить функциональной стороной сайта.

Основной CSS

Так как HTML представляет собой всего один скучный абзац, нам стоит полностью надеяться только на CSS, за счет которого можно сделать страницу более привлекательной.

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

body {
    background: #222;
    color: #fff;    
}

.textContainer {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 50px;
}

.textContainer a{
    text-decoration: none;
    color:#999;
}

Здесь мы указали простой стиль фона, блока с текстом и ссылок. Мы задали фону темно-серый цвет, тексту белый цвет и шрифт Helvetica.

И наконец, ссылки у нас теперь светло-серые, и у них нет никакого оформления. У вас должно быть нечто вроде этого:

Создаем сайт с меняющимся цветом посредством CSS3

Теперь мы расширим секцию textContainer, придав ей тонкую границу, и расположив ее по центру страницы. Последнюю часть (центрирование) выполняем за счет выставления параметра ширины и установки автоматических полей. Убедитесь, что вы выровняли текст по центру div’а.

.textContainer {
    margin: auto;
    width: 800px;
    height: 300px;
    text-align: center;
    margin-top: 100px;
    border: 1px solid #028fd7;

    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 50px;
}

Это приведет примерно к тому, что вы видите в демо.

Создаем сайт с меняющимся цветом посредством CSS3

Немного волшебства

Теперь, после того как мы задали стиль нашей странице, пора бы уже добавить немного цветовых переходов, чтобы немного оживить её. Первое, чему мы придадим эффект перехода – это textContainer. Мы будем использовать тот же код, который видели в пояснении перехода CSS3 выше.

.textContainer {
    margin: auto;
    width: 800px;
    height: 300px;
    text-align: center;
    margin-top: 100px;
    border: 1px solid #028fd7;

    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 50px;

    -webkit-transition-property: color, background;
    -webkit-transition-duration: 1s, 1s;
    -webkit-transition-timing-function: linear, ease-in;
}

Таким образом, мы установим переход на любое изменение параметров «color» или «background».

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

.textContainer a{
text-decoration: none;
color:#999;

-webkit-transition-property:color;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}

Как указано выше, данный код сам по себе ничего не делает. Он просто следит за изменениями указанных параметров. При изменениях параметров цвета за счет CSS, переход будет произведен с данными параметрами.

Катализатор

Настраивая переходы, важно создать событие, которое бы их запускало. Относительно CSS, наиболее легкий и применяемый способ – это событие при наведении курсора. Хотя этот метод чаще применяется к ссылкам, мы также применим его к нашему div’у. Т.е. как только курсор будет наведен на блок, переход запускается.

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

.textContainer:hover {
    color:#555;
    background:#fff;
}

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

.textContainer:hover a {
    color: #96dbfe;
}

Этот код подействует на .textContainer и цвет ссылок изменится на светло-синий. И наконец, нам нужно задать изменение светло-синего цвета на темный, как только будет наведен курсор мыши.

.textContainer a:hover {
    color:#028fd7;
}

Учтите, что между .textContainer:hover a и .textContainer a:hover огромная разница. Одно действует, когда курсор мыши наводится где угодно на блок div, а второе действует при наведении только на ссылки.

На этом мы заканчиваем работу над CSS. Теперь, когда вы наведете курсор на div, цвет фона изменится на белый, а текст на темно-серый, а ссылки станут светло-синими. Далее, когда вы наведете на ссылку, они станут темными.

Создаем сайт с меняющимся цветом посредством CSS3

В заключение

Надеемся, что эта статья поможет вам придумывать различные интересные «фокусы» в дальнейшем. Нам также интересно ваше мнение по поводу переходов CSS. А также не забывайте делиться с нами информацией о переходах, если вам что-то известно.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 11528   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031