Плавно меняет цвет. Как плавно изменить цвет ссылки? Изменение цвета фона элемента
В наше время для различных сайтов нормой стали всевозможные всплывающие модальные окна - popup"ы - для регистрации, авторизации, информационные окна, - всевозможных форм и размеров. Также существует огромное количество плагинов к тому же jQuery для простого и удобного создания таких попапов - тот же Shadowbox , например.
Внешний вид, размеры и оформление таких попапов совершенно разнообразными - с оверлеем, тенюшками, анимациями - всего не счесть. Объединяет их только, пожалуй, тот факт, что обычно они выводятся в самом центре страницы - как по горизонтали, так и по вертикали. И центрирование это производится средствами JS. Я не буду вдаваться в подробности этих расчетов, опишу их лишь вкратце:
HTML-код попапа обычно имеет такую структуру:
И CSS (здесь и ниже я умышленно буду опускать написание некоторых свойств, необходимых лишь для некоторых браузеров и их версий, оставив лишь самое основное ):
Popup__overlay
{
position
: fixed
;
left
: 0
;
top
: 0
;
background
: #000
;
opacity
: .5
;
filter
: alpha(opacity=50
);
z-index
: 999
}
.popup
{
position
: absolute
;
width
: 20%
;
z-index
: 1000
;
border
: 1px solid #ccc
;
background
: #fff
}
JS определяет браузер и версию браузера, и на основании этого высчитывает размеры рабочей области и размеры самого попапа (если они не заданы), а затем производятся нехитрые вычисления положения его левого верхнего угла (css-свойства left и top для.popup). Многие плагины также реагируют на изменение размеров страницы, пересчитывая всё это дело каждый раз, с тем, чтобы попап располагался точно в центре рабочей области.
Я по натуре своей перфекционист (знаю, порой это плохо), и частенько заморачиваюсь даже над мелкими деталями, пытаясь улучшить и добавить максимально возможную расширяемость этим деталям, и меня не мог не зацепить именно этот момент в работе всех этих плагинов. Возникла мысль, что всю работу по позиционированию попапа можно переложить с плеч JS на плечи самого браузера, то есть выполнять эту работу средствами CSS.
Этим и займёмся.
Ниже я приведу пример попапа, работающего во всех мажорных версиях основных браузеров. Для корректной его работы в IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.
Итак, у нас есть страница с кнопкой, при нажатии на которую должно всплывать модальное окно с некоторой информацией, а весь остальной контент должен затеняться оверлеем.
Для начала - HTML-код. Структура его будет немного отличаться от кода, указанного выше, почему - об этом ниже в статье; классы элементов останутся теми же:
<
div
class
="popup__overlay">
<
div
class
="popup">
И немного CSS:
Popup__overlay
{
position
: fixed
;
left
: 0
;
top
: 0
;
width
: 100%
;
height
: 100%
;
z-index
: 999
}
.popup
{
}
Фиксированные размеры
Самый простой вариант. Ничего нового изобретать не нужно:Popup
{
left
: 50%
;
top
: 50%
;
width
: 400px
;
height
: 200px
;
margin-left
: -200px
;
margin-top
: -100px
}
Отрицательные margin"ы в половину ширины и высоты - банально и скучно, ничего оригинального в этом нет. Идём дальше.
Размеры попапа зависят от содержимого
Сперва - выравнивание по горизонтали - это вроде бы проще. Если попап фиксированной ширины - то достаточно будет следующего:Popup
{
margin
: auto
}
На вертикальное выравнивание это никак не повлияет, и, к слову, если вам достаточно лишь горизонтального выравнивания, то на этом можно и остановиться, указав еще какой-нибудь верхний отступ попапа. Но нам этого мало! Идём дальше.
Вертикальное выравнивание. Здесь уже становится интересно. С такой задачей, конечно, без проблем справилась бы таблица или эмуляция таблицы с помощью display: table & display: table-cell, но заставить такое работать в старых IE - себе дороже. Таблица также отпадает - по понятным причинам.
Итак, margin уже отпадает - размеров мы не знаем. Вспоминаем, что же есть из свойств с подобными эффектами. Ага, text-align. Но только для инлайновых элементов. ОК. Кажется, сам Бог велел использовать display: inline-block - блочный элемент, к которому можно было бы применить свойства для инлайновых элементов. С поддержкой этого свойства у всех браузеров тоже всё, можно сказать, в порядке. Код становится примерно таким:
Popup__overlay
{
position
: fixed
;
left
: 0
;
top
: 0
;
width
: 100%
;
height
: 100%
;
z-index
: 999
;
text-align
: center
}
.popup
{
display
: inline
-block
;
vertical-align
: middle
}
Остаётся вертикальное выравнивание - нам подойдёт vertical-align. В любой другой ситуации было бы также уместно использовать line-height, но поскольку у нас нет фиксированной высоты страницы (line-height в данном контексте), здесь использовать её нельзя. На помощь приходит один трюк с вертикальным выравниванием элементов неизвестных размеров. Я точно помню, что нашел этот способ на Хабре, но, к сожалению, не смог найти ссылку на тот топик. Заключается этот способ в следующем: добавляется inline-block элемент нулевой ширины и 100%-ой высоты родителя, который «расхлопывает» высоту строки до 100% высоты родителя, то есть до высоты рабочей области страницы. Сделаем это изящнее - вместо лишней разметки воспользуемся псевдоэлементами:
Popup__overlay
:after {
display
: inline
-block
;
width
: 0
;
height
: 100%
;
vertical-align
: middle
;
content
: ""
}
Осталось добавить полупрозрачное затемнение оверлея - с этим справится rgba. Всё! Теперь положение попапа регулируется только средствами браузера на уровне CSS.
Довольно часто на сайтах можно повстречать модальные окна, и все они используются для разных задач. В самом деле, это довольно мощное средство, которое позволяет сделать интерфейс сайта более интерактивным и удобным. К примеру, модальные окна могут быть использованы для различных форм, таких как форма авторизации, форма обратной связи, оформление заказа товара, да и мало ли.
В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью JQuery и CSS. Особенность данного примера в том, что тут не требуется , ну за исключением самой библиотеки JQuery.
Размещаем код модального окна на странице:
Как видно из разметки, блок самого модального окна это div c атрибутом id=modal_form , который содержит элемент span c id=modal_close . Этот элемент будет служить кнопкой для закрытия модального окна, кроме того, ниже блока расположен блок div с атрибутом id=overlay , который служит одновременно и для затемнения фона. Модальное окно будет открываться по ссылке, с классом modal .
CSS для модального окна
#modal_form { width: 300px; height: 300px; border-radius: 5px; border: 3px #000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px; } #modal_form #modal_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #overlay { z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80); width:100%; height:100%; top:0; left:0; cursor:pointer; display:none; }
Для modal_form мы задали фиксированную ширину и высоту, а затем отцентрировали положение по центру экрана. Для подложки модального окна (overlay ) мы задаем размер по ширине экрана, заливку с прозрачностью, а так же прячем её по умолчанию. Особый момент с z-index , у модального окна он должен быть наибольшим из всех элементов на странице, а у обложки должен быть больше всех элементов, кроме самого модального окна.
Теперь к самому основному, это код на javascript. Для модального окна будет использоваться два основных события, это его открытие — клик по элементу с классом modal , в нашем случае это ссылка, и закрытие модального окна, это клик по обложке (overlay ), либо клик на кнопку закрыть, в нашем случае это элемент span с id=modal_close .
$(document).ready(function() { $(".modal").click(function(event){ event.preventDefault(); $("#overlay").fadeIn(400, // анимируем показ обложки function(){ // далее показываем мод. окно $("#modal_form") .css("display", "block") .animate({opacity: 1, top: "50%"}, 200); }); }); // закрытие модального окна $("#modal_close, #overlay").click(function(){ $("#modal_form") .animate({opacity: 0, top: "45%"}, 200, // уменьшаем прозрачность function(){ // пoсле aнимaции $(this).css("display", "none"); // скрываем окно $("#overlay").fadeOut(400); // скрывaем пoдлoжку }); }); });
Посредством animate мы меняем позицию по вертикали top , а так же прозрачность opacity , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.
Задача
Решение
Цвет ссылки устанавливается через свойство color , которое добавляется к селектору A . Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover , а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition , значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.
Пример 1. Изменение цвета ссылок
Для сборки мегадроида требуется открыть коробку, достать мешочек с микросхемами и сложить их в нужном порядке, пользуясь нашим подробным 8631-страничным руководством.
В данном примере для наглядности выбраны контрастные цвета и задано время перехода одна секунда. На рабочем сайте время лучше установить меньше, 0.6s или около того. Так что подбирайте значение по своему вкусу и желанию.
Здравствуйте, уважаемые читатели. Сегодня пост будет посвящен тем, кто изучает сайтостроение. На сегодняшний день язык оформления интернет-страниц (CSS) шагнул достаточно далеко. Что поделать, будущее уже наступило. И с его помощью теперь можно не только располагать элементы на странице и , но и применять в ним более интересные эффекты, что придает оформлению страницы совершенно другой вид. Некоторые из них мы сейчас рассмотрим.
- Плавное изменение цвета
- Плавное затухание
- Плавное увеличение — уменьшение
- Плавное перемещение
- Плавный поворот
Плавное затухание
CSS код пишем примерно тот же самый, только свойство указываем — all, то есть ко всему, что последует после , будет применена плавность. В нашем случае это затухание. Блок изменит прозрачность при наведении на 50%.
| 1 2 3 4 5 6 | -webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; transition : all 1s ease; #block1 : hover { opacity : 0.4 ; } |
Webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; #block1:hover{opacity:0.4;}
Плавное увеличение
Здесь все то же самое. Только в примере я установил значение linear вместо ease. Устанавливаем в ширину и высоту, отличную от оригинального размера.
Плавное перемещение
Здесь значения будем прописывать в псевдоклассе, используя свойство transform.
| 1 2 3 4 5 6 | #block1 : hover { -webkit-transform: translate (50px , 0 ) ; -moz-transform: translate (50px , 0 ) ; -o-transform: translate (50px , 0 ) ; transform : translate (50px , 0 ) ; } |
#block1:hover{ -webkit-transform: translate(50px,0); -moz-transform: translate(50px,0); -o-transform: translate(50px,0); transform: translate(50px,0); }; }
#block1:hover{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }
Это означает, что объект будет повернут на 180° по часовой стрелке
Вернемся к теме о браузерах. Opera, Mozilla, Chrome прекрасно поддерживают все эти новшества, но как обычно живет своей жизнью и никуда не спешит. У него и так все хорошо. 🙂 То есть все, о чем я писал выше, он просто не понимает. Вот такие дела. Скачайте исходники и изучите код более подробно.
