Сдвигающиеся под курсором ссылки
(при помощи CSS)
В данной теме мы Вам расскажем, как при помощи CSS сделать простые ссылки, которые будут плавно сдвигаться в сторону при наведении на них курсора мышки.
Ранее мы уже рассматривали, как реализовать подобные сдвигающиеся ссылки при помощи JavaScript кода в теме Сдвигающиеся под курсором ссылки, но нам прислали вариант реализации данного смещения при помощи CSS.
Для наглядного примера работы скрипта создания сдвигающихся ссылок при помощи CSS, обратите внимание на ссылки, расположенные ниже. При наведении курсора мышки на одну из ссылок, она плавно сдвинется вправо на указанное значение (не работает в старых браузерах IE).
Для получения на Вашей страничке аналогичных сдвигающихся ссылок для начала Вам необходимо прописать стиль данных ссылок. Для этого между тегами добавьте следующий код:
< style type = "text/css" >
. left text — align : left ;
margin : 5px ;
— webkit — transition : — webkit — transform 0.3s ease — in ;
— o — transition : — o — transform 0.3s ease — in ;
— moz — transition : — moz — transform 0.3s ease — in ;
— ms — transition : — ms — transform 0.3s ease — in ;
>
. left : hover — ms — transform : translate ( 25px );
— moz — transform : translate ( 25px );
— webkit — transform : translate ( 25px );
— o — transform : translate ( 25px );
cursor : pointer ;
>
Все ссылки, к которым необходимо применить эффект плавного смещения, следует оформлять следующим образом:
По сравнению со способом, приведенным в теме Сдвигающиеся под курсором ссылки, у данного способа обнаружилось пару незначительных минусов: при наведении курсора текст немного смазывается (в браузере Опера) и не работает в браузере IE. При этом имеется пара хороших плюсов: не нужно загружать тяжелую библиотеку jQuery и работает при выключенном JavaScript в браузере. А какой из предложенных методов использовать — выбирать Вам.
шпаргалки блогерши
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.
Сдвиг ссылок вправо CSS.
Приветствую всех на своём блоге. Давайте сегодня попробуем сделать эффект сдвига ссылок в списке. Иногда возникают моменты, что необходимо ссылки вывести в виде списка прямо в теле сообщения. И чтобы уж он совсем скучным не был, заставим их немного подвигаться. Рассмотрим 2 варианта. Как это применить в сообщении блога и в гаджете ярлыки.
Сдвиг ссылок вправо в сообщении.
Для этого мы просто зададим им класс sdvig a и добавим тег transition. Код получается совершенно простой. Если вы будете не очень часто применять его, то устанавливать его надо непосредственно при написании сообщения в режиме HTML. При этом, заключив в теги .
То, что я выделила синим, это цвет текста до и после наведения. Величина 0.1s отвечает за скорость анимации.
Бывает, что такой вариант применяется в сообщении достаточно часто. В этом случае уместней буде установить первый код непосредственно в шаблоне, перед строкой ]]> и без тегов . А потом при создании поста применить в нужном месте второй код.
Сдвиг ссылок в гаджете ярлыки.
В этом случае единственным условием будет вертикальное расположение ярлыков. Задаётся оно в настройках этого гаджета.
Код несколько отличается. И устанавливается в шаблон блога. Панель администратора-вкладка шаблон-изменить HTML. Находим строку ]]> и прямо над ней вставляем его. В этой статье подробно прочитайте, как это делается.
Не забывайте сохранить шаблон и посмотреть, что получилось. Прямо как кнопочки аккордеона. Другие интересные эффекты, которые можно придать ссылкам были в этой шпаргалке.
Не буду занимать больше ваше драгоценное время. Наверняка предновогодняя суета уже охватила многих. На этом поставлю точку.
Как подвинуть ссылку?
Здрасьте.
Как мне подвинуть ссылку в меню на сайте?
Я сначала двигал с помощью margin-left.
Но между ссылками было какое-то расстояние и увеличивалась длина ссылок.
Попробовал с помощью padding-left.
Теперь увеличивается только длина.
Спасибо.
На всякий случай приложу код:
ul> li>a href="#" id="menu">Главная/a>/li> li>a href="#" id="menu">Магазин/a>/li> li>a href="#" id="menu">О нас/a>/li> li>a href="#" id="menu">Поддержка/a>/li> li>a href="#" id="menu">Новости/a>/li> li>a href="#" id="menu">Сотрудничество/a>/li> /ul>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
ul { list-style: none; background: #3C3C3C; margin-top: 0px; height: 50px; position: fixed; box-shadow: 1px 0 5px #000; width: 1310px; } #menu { text-decoration: none; background: #3C3C3C; color:#fff; padding:0px 15px; font-family: arial black; line-height: 50px; display: block; border-right: 1px solid #95A0A6; -moz-transition: all 0.3s 0.01s ease; -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; padding-left: 114px; } #menu:hover { background: #95A0A6; } li { float:left; }
Как можно ссылку выровнять по правому краю?
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |