slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда не активнаЗвезда не активнаЗвезда не активна2 / 5
 
Автор: Администратор
Просмотров: 3822
Теги: css, css3, rgba, hover, color, active

Стандартный стиль для ссылок не часто подходит под дизайны сайтов. И появляется необходимость поменять стиль так, чтобы в текущий дизайн и при этом красиво выделялась. Противоречивая задача, не правда ли? =)

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

В первую очередь стоит коснуться псевдоклассов. Вы наверняка замечали, что ссылки изменяются, когда на них наводят курсор или в момент нажатия на нее. Именно псевдоклассы помогают создать такой эффект. Если вы не знаете, что такое псевдоклассы, то советую вам пройти Курс по CSS.

Вот те псевдоклассы, которые нам понадобятся:

:hover - указывает, как должна выглядеть ссылка при наведении на нее курсора

:active - указывает, как должна выглядеть ссылка в момент нажатия на нее

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

Например, вот так выглядит общий стиль для всех ссылок на этом сайте:

a {color:#ff955b; text-decoration:none; transition: 0.2s;}
a:hover {color: #990000;}
a:active {color:#000;}

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

Например, можно использовать способ задания цвета, при помощи rgba. Составляющая alpha в этом случае может помочь подобрать нужный оттенок цвета на странице. Пример:

a {color:rgba(0,0,0,0.5);}

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

Довольно интересное свойство transition, которое принимает в качестве значения время(кол-во секунд). Это свойство определяет скорость изменения ссылки. Это означает, что при изменении ссылки от обычного стиля к псевдоклассу :hover будет происходить плавно и более красиво. Пример использования этого свойства вы можете видеть на это сайте: ссылка.

Очень любят добавлять или убирать подчеркивание ссылки при наведении. Стандартно то подчеркивание есть у обычной ссылки и исчезает при наведении на нее(:hover). За это действие отвечает свойство text-decoration и его значение underline. Также можно при помощи значения overline помещать черту над ссылкой или заставлять их мигать - blink.

Проблема в том, что такое подчеркивание не позволяет настроить тип линии и его цвет совпадает с цветом текста. Не всегда такое удобно. Если вы хотите изменить тип линии на пунктирный или еще какой-то, и задать свой цвет подчеркиванию, то используйте свойство border-bottom. При этом стоит следить за значением и наличием свойства display, которое может сделать тэг <a> дивным и тогда подчеркивание выйдет из-под контроля, за границы самого текста и выглядеть это будет не так, как вам бы хотелось.

Последнее свойство, на которое я бы хотел обратить внимание - text-shadow, это довольно новое свойство и многие о нем даже не слышали. Оно позволяет задать тень тексту. Но, немного схитрив эту тень можно превратить во внешнее свечение. В качестве значений text-shadow принимает такой шаблон:

a {text-shadow: *отклонение по горизонтали* *отклонение по вертикали* *размытие тени* *цвет тени*;}

Вот пример стиля для ссылки с тенью:

a {text-shadow: 2px 1px 1px rgba(0,0,0,0.3);}

вот как это выглядит: ссылка тенью.

При этом можно задавать в одном свойства через запятую, и за счет этого сделать эффект свечения, пример:

a {text-shadow: 0 0 4px rgba(0,0,255,0.3), 0 0 4px rgba(0,0,255,0.3), 0 0 4px rgba(0,0,255,0.3), 0 0 4px rgba(0,0,255,0.3);}

вот как это выглядит: ссылка с голубым свечением.

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • Varvarka
    4.00
  • ZOMRO
    3.20
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

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

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2145
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

Urii-Polyakov-odnoklassniki аватар
Мы – команда разработчиков, дизайнеров и SEO-специалистов, которая любит свое дело и умеет создавать...
Перейти в тему
ZOMRO аватар
Оптимальные VDS/VPS Это сбалансированное предложение в соотношение цена-качество-количество ресурсо...
Перейти в тему
ZOMRO аватар
Скидка 50% на первый месяц Хотите получить уникальную скидку 50% на первый месяц пользования нашим ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.