Красивые ссылки в ВК на страницу Пример

Содержание

Что касается ссылок на профили или группы — там все просто, это обычные ссылки. А вот с ссылками «поделиться» немного посложнее, т.к. там нужно в ней передать адрес текущей страницы.

В этой заметке установка таких ссылок и варианты их оформления.

Установка ссылок «поделиться» в соц. сетях
Примеры оформления
Цвета социальных сетей
Использование кнопок для пагинации страниц

Установка ссылок «поделиться» в соц. сетях:

ВКонтакте

Одноклассники

Twitter

Примеры оформления:

Все варианты используют шрифт FontAwesome, но могут использовать и графические иконки (последняя ссылка со смайликом).

Вариант 1

.social-icons-1 <
padding : 0 ;
list-style : none ;
margin : 10px ;
.social-icons-1 li <
display : inline-block ;
position : relative ;
font-size : 24px ;
.social-icons-1 i,
.social-icons-1 img <
color : #fff ;
position : absolute ;
left : 18px ;
width : 24px ;
height : 24px ;
text-align : center ;
transition : all 0.3s ease-out ;
.social-icons-1 a <
display : inline-block ;
.social-icons-1 a:before <
transform : scale ( 1 ) ;
width : 60px ;
height : 60px ;
border-radius : 100% ;
display : block ;
background : linear-gradient ( 45deg, #337AB7, #2d6b9f ) ;
box-shadow : 0 2px 5px rgba ( 0,0,0,0.2 ) , 0 2px 4px rgba ( 0,0,0,0.2 ) ;
transition : all 0.3s ease-out ;
.social-icons-1 a:hover:before <
transform : scale ( 0 ) ;
transition : all 0.3s ease-in ;
.social-icons-1 a:hover i,
.social-icons-1 a:hover img <
transform : scale ( 1.8 ) ;
color : #337AB7 ;
transition : all 0.3s ease-in ;

▶️ Как красиво оформить внутренние ссылки ВК

Вариант 2

.social-icons-2 <
padding : 0 ;
list-style : none ;
margin : 10px ;
.social-icons-2 li <
display : inline-block ;
position : relative ;
.social-icons-2 li a <
width : 60px ;
height : 60px ;
display : inline-block ;
text-align : center ;
margin : 0 4px ;
border-radius : 50% ;
padding : 6px ;
box-sizing : border-box ;
text-decoration : none ;
box-shadow : 0 8px 12px rgba ( 0,0,0,0.3 ) ;
background : linear-gradient ( 0deg, #ddd, #fff ) ;
transition : .5s ;
.social-icons-2 li a:hover <
box-shadow : 0 2px 5px rgba ( 0,0,0,0.3 ) ;
color : #000 ;
.social-icons-2 li a i <
display : block ;
background : linear-gradient ( 0deg, #fff, #ddd ) ;
border-radius : 50% ;
padding : 12px ;
font-size : 24px ;
color : #969696 ;
transition : .5s ;
width : 24px ;
height : 24px ;
position : absolute ;
box-sizing : content-box ;
.social-icons-2 li a:hover i <
color : #337AB7 ;
.social-icons-2 li a img <
width : 24px ;
height : 24px ;

Вариант 3

.social-icons-3 <
padding : 0 ;
list-style : none ;
margin : 10px ;
display : flex ;
justify-content : center ;
.social-icons-3 a i <
font-size : 32px ;
line-height : 64px ;
transition : 0.3s ;
.social-icons-3 a img <
width : 32px ;
height : 32px ;
margin-top : 16px ;
.social-icons-3 a <
text-decoration : none ;
position : relative ;
display : block ;
width : 64px ;
height : 64px ;
background : #BFE2FF ;
text-align : center ;
margin : 0 8px ;
box-shadow : 10px 0 10px rgba ( 0, 0, 0, 0.3 ) ;
transition : 0.3s ;
color : #337AB7 ;
.social-icons-3 a::before <
position : absolute ;
background : rgba ( 51, 122, 183, 0.3 ) ;
height : 10% ;
width : 100% ;
transform : skewX ( -45deg ) ;
transition : 0.3s ;
.social-icons-3 a::after <
position : absolute ;
left : 64px ;
background : rgba ( 51, 122, 183, 0.6 ) ;
height : 100% ;
transform : skewY ( -45deg ) ;
transition : 0.3s ;
.social-icons-3 a:hover <
transform : translate ( -5%, 5% ) ;
box-shadow : 6px 4px 20px rgba ( 0, 0, 0, 0.5 ) ;
.social-icons-3 a:hover <
background : #337AB7 ;
.social-icons-3 a:hover i <
color : #fff ;
.social-icons-3 a:hover::after <
background : #184e7c ;
.social-icons-3 a:hover::before <
background : #2a70aa ;

Как красиво оформить внутренние ссылки в ВК с телефона?

Вариант 4

.social-icons-4 <
display : flex ;
justify-content : center ;
flex-wrap : wrap ;
list-style : none ;
margin : 10px ;
.social-icons-4 a <
display : inline-block ;
width : 60px ;
height : 60px ;
border-radius : 100% ;
background : #efefef ;
position : relative ;
margin : 5px ;
text-align : center ;
box-shadow : 0 2px 6px #c1c1c1 ;
font-size : 32px ;
color : #337AB7 ;
transition : 0.5s ;
.social-icons-4 a img <
width : 32px ;
height : 32px ;
margin-top : 14px ;
.social-icons-4 a i,
.social-icons-4 a img <
position : relative ;
line-height : 60px ;
.social-icons-4 a:hover <
color : #fff ;
.social-icons-4 a:after <
display : block ;
position : absolute ;
background : #BFE2FF ;
border-radius : 100% ;
transition : 0.3s ;
.social-icons-4 a:hover:after <
width : 60px ;
height : 60px ;
margin-left : -30px ;
background : #337AB7 ;

Вариант 5

.social-icons-5 <
list-style : none ;
margin : 10px ;
padding : 0 ;
display : flex ;
justify-content : center ;
.social-icons-5 a <
text-decoration : none ;
color : #fff ;
width : 60px ;
height : 60px ;
display : flex ;
align-items : center ;
justify-content : center ;
border-radius : 10px ;
margin : 0 6px ;
font-size : 26px ;
background : #337AB7 ;

Еще по теме: Как зайти Вконтакте через QR код

transition : border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

transition : transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

Источник: atuin.ru

Красивые ссылки на вашем сайте

Эта статья для всех, кто хочет делать красивые сайты. Одна из главных вещей на сайте — это ссылки, и они должны выглядеть роскошно. В этой статье покажем, как настроить красивые ссылки, на примере страницы «О себе».

Сведения из этой статьи будут полезны всем, у кого есть и будет сайт на чистом HTML или на движке, где вы контролируете стили. Если у вас условная «Тильда» или «Редимаг», это не подойдёт — там управление стилями ограничено.

Сейчас у нас есть страница с множеством ссылок, и она выглядит плоховато:

ссылки не подчёркнуты, непонятно, что это ссылки;
когда наводишь мышку, ссылка подчёркивается, но очень толсто;
ссылки, по которым мы уже щёлкали, не выделяются другим цветом — так не ясно, что мы уже читали, а что нет.

Как будет

Давайте исправим каждый пункт, чтобы получилось как на скриншоте ниже: тонкие красивые подчёркивания, красный цвет при наведении, а ещё должно быть видно посещённые ссылки:

Всё дело в CSS

Чтобы сделать красиво, нам понадобится CSS — специальная разметка, которая отвечает за внешний вид и поведение элементов на странице.

В нашем примере CSS-код встроен в саму страницу, поэтому новые инструкции по оформлению добавлять будем тоже там. Это не очень правильно с точки зрения классической разработки — правильнее держать CSS в отдельном файле. Но для текущей задачи это неважно.

Между фигурными скобками мы напишем код, который превратит наши ссылки в ссылки со стильным тонким подчёркиванием. Для этого нам понадобится:

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

Сделаем всё по очереди.

Убираем стандартное подчёркивание

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

Задаём цвет ссылки

Это стандартный цвет ссылок в браузере Chrome, возьмём его за основу.

Делаем тонкую линию внизу

border-bottom: 1px solid;
border-bottom-color: rgba(15, 122, 252, 0.2);

Первая строчка говорит браузеру, чтобы он нарисовал под ссылкой (border-bottom) сплошную линию (solid) толщиной в один пиксель (1px).

А вторая — чтобы эта линия была определённого цвета. RGBA означает, что нам нужно смешать красный, зелёный и синий цвета (RGB) и задать им какую-то прозрачность (A). Сделаем всё тем же цветом, что и ссылки, а прозрачность поставим 0.2 — так линия будет выглядеть тоньше, чем один пиксель.

Собираем всё вместе

Меняем цвет ссылки при наведении

За реакцию на наведение мышки отвечает hover, поэтому нам в CSS-раздел нужно добавить такое:

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

Нам нужно, чтобы ссылка поменяла цвет на оранжевый и при этом осталась тонкая линия подчёркивания. Для этого повторим все шаги из предыдущего раздела, кроме border-bottom: 1px solid; — это свойство достанется в наследство сразу всем ссылкам, а вот всё остальное нужно прописать заново.

Убираем стандартное подчёркивание:

Чтобы текст ссылки стал оранжевого цвета, используем команду:

Делаем у линии тот же цвет, что и у активной ссылки:

border-bottom-color: rgba(208, 64, 0, 0.2);

В итоге получим:

a:hover

Помечаем использованные ссылки

Здесь всё то же самое, что и в предыдущем разделе, только вместо hover будем использовать visited — именно оно отвечает за поведение ссылки, по которой мы уже переходили. Цвет возьмём стандартный фиолетовый: #800080, и этот же цвет переведём в RGBA для подчёркивания ссылок.

a:visited
a < text-decoration: none; color: #0f7afc; border-bottom: 1px solid; border-bottom-color: rgba(15, 122, 252, 0.2); >a:hover < text-decoration: none; color: #cf0000; border-bottom-color: rgba(208, 64, 0, 0.2); >a:visited
Дальше — больше

Еще по теме: Как сделать накрутку в ВК в голосовании

Если вам кажется, что статья закончилась слишком быстро и что можно было сделать ещё красивее, приходите учиться веб-разработке в «Практикум». Будет много HTML, CSS и остальной красоты.

Дальше — больше

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Источник: thecode.media

Как сделать ссылку на сайте

ссылка в тексте

Как создать правильную ссылку на сайте с использованием атрибутов, подробным описанием их типов и с примерами. Так же пошаговое объяснение как отредактировать ссылку в редакторе WordPress. Часто нужно сделать ссылку на другую страницу сайта своего или чужого. И встает вопрос как сделать? Для начала немного разберемся что такое ссылка.

Содержание статьи скрыть

Типы ссылок

Внутренние – ссылки на страницы или объекты внутри сайта. К этому типу относятся – меню, текстовые ссылки, якоря, кнопки, модальные окна и другие объекты. Данный тип ссылок необходим для юзабилите сайта и SEO при например – передачи веса страниц.
Внешние – ссылки на страницы или объекты на сторонних сайтах. Они нужна для: продвижения ваших соц. сетей, работы с партнерами, для упрощения загрузки страниц, для указания поисковикам доп. параметров и так далее.

Программисты применяют другое разделение на типы ссылок:

ссылка на другой сайт

внутренняя ссылка на этот же сайт, но она приведена как абсолютная

внутренняя относительная ссылка на страницу этого сайта. Суда так же относятся все якоря.

Отдельно стоит отметить что не все ссылки “видны пользователям” ссылки могут находиться и в скрытых областях страниц. Наиболее частый пример скрытых полезных ссылок это применения микроразметки данных https://schema.org/ очень важной при продвижении сайтов.

Виды объектов для ссылок на сайтах:

Текстовая ссылка. Пример: На данной странице есть много ссылок и полезной информации. Как видите слова “полезная информация” являются ссылкой. Данная ссылка может вести на другую страницу или на якорь на данной странице.
Кнопка. Все мы их любим и знаем. Это тоже ссылка.
Изображение. Наживая на картинку вы можете перейти на другую страницу или сайт или открыть увеличенное изображение на этой странице.
Иконка. Иконки бываю разных типов. но все их можно сделать ссылками на страницы или якоря.
Модальные окна – это когда вы кликаете кнопку и открывается окно над открытой страницей.
tooltip – это когда вы подводите мышь к объекту и всплывает пояснительный текст. Пример Пример tooltip – подсказка к тексту .
И любой объект на странице. Но это уже более профессиональная тема

Общий вид ссылки

Код ссылки состоит из:

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

Код чистой ссылки:

Где функция href отвечает за url перехода, а адрес_куда_должен_перейти_пользователь – это url в виде:

https://help2site.ru/ – внешний url на страницу. Используется когда вам нужно сделать ссылку на другой сайт или вы не знаете как правильно прописать внутреннюю ссылку.
/contact – внутренняя ссылка на страницу сайта
#glava5 – внутренняя ссылка на якорь установленный на данной странице
/contact#glava5 – внутренняя ссылка на якорь на другой странице вашего сайта

Атрибуты ссылок

name

Атрибут “name” задает имя идентификатора для определения имени места на странице куда должен переходить якорь

Где имя_якоря отвечает за идентификацию функции. Самый частый пример использования кнопка “Наверх”, для того чтобы она при нажатии отправила в то место где вы хотите, нужно добавить атрибут name или существующему объекту или создать пустую ссылку с данным именем. Пример кода для текстовой ссылки:

target

Атрибут “target” задает параметры для загрузки ссылки в этом же окне, в новом окне или фрейме или нет.

Значения атрибута:

Открывать ссылку в новом окне так же можно через атрибут – noopener.

Пример – наши работы

title

Атрибут “title” задает пояснение к ссылке. Отображается в виде всплывающего окна при наведении на ссылку. Любимый атрибут SEO-специалистов который позволяет при правильном его использовании значительно поднять сайт в выдаче.

Пример – Наверх

rel

Атрибут “rel” определяет отношения текущий страницы к странице на которую будет осуществляться переход и описывает ее. Данный атрибут определяется только для поисковых роботов и задает им правила перехода и индексирования открывающейся страницы. Параметр нужен для SEO-оптимизации и продвижения сайтов.

Еще по теме: Как поменять имя в мессенджере в ВК

Один атрибут может содержать несколько значений размещенных через пробел.

Значение атрибута:

rev

Атрибут “rev” в отличие от “rel” описывает текущую страницу по отношению к остальным страницам сайта. Заранее заданных параметров нет поэтому описание делается текстом. Пример:

shape

Атрибут “shape” задает параметры активной области, действителен только на изображениях включенных в объект. Проблема – работает не со всем браузерами. Значения:

circle – Область в виде круга.
default – Область по умолчанию (прямоугольная).
poly – Полигональная область произвольной формы.
rect – Прямоугольная область.

tabindex

Атрибут “tabindex” определяет последовательность перехода по ссылкам при использовании клавиши клавиатуры “TAB”. Применяется при создании специализированных сайтов с ограничениями. Например – сайты для слепых.

type

Атрибут “type” применяется для описания ссылки при вставке объектов MIME (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета). К ним относятся видео, аудио, pdf, архивы (zip, rar и другие), таблицы и многое другое. Полный перечень MIME-типов.

Как создать и отредактировать ссылку на сайте

Если читаете данный материал скорее всего у вас сайт на какой либо CMS (WopdPress, 1C:Битрикс, Drupal, Joomla!, MODx или любой другой). На всех системах стоят разные редакторы которые по разному позволяют создавать ссылки. Например: создать кнопку, добавить изображение или объект. Правятся ссылки в них через открытие (если позволяет CMS) html-кода и поиска там нужного элемента ссылки.

Эта работа скорее для профессионалов и вы можете заказать ее у нас – доработка и поддержка сайта. Мы сейчас рассмотрим возможности простого текстового редактора в котором вы сможете самостоятельно все сделать.

Как создать ссылку в WordPress

Откройте нужную запись или страницу в редакторе. Выделите текст или изображение на который вы хотите поставить ссылку. Нажмите кнопку “Вставить/изменить ссылку“.

ссылка в текст на сайт
поставить ссылку

В открывшемся окне вставьте адрес ссылки (на фото “/blog”), вы увидите текст ссылки (если нужно можно отредактировать), заголовок (это атрибут title) и rel (по умолчанию “нет” и “nofollow”, подробнее про rel) и “Цель” (это атрибут target со значением “Нет” (значение по умолчанию – _self) или “Новое окно”(значение – _blank)).

Предупреждение: если вы в атрибуте rel в WordPresse выбираете “nofollow”, то CMS автоматически вам подставит rel=»nofollow noopener noreferrer»

Если вам нужно добавить какие либо другие атрибуты то вам нужно будет перейти или в панели Инструменты > Исходный код или во вкладку “Текст”. Найти нужный элемент и отредактировать его.

как отредактировать ссылку в редакторе

Предупреждение: не все ваше творчество в коде нравится WordPress, при возврате обратно в Визуально часть кода может исчезнуть. Из этой ситуации можно выйти – оставив так как получилось и вести блог или сайт дальше. Или обратиться к нам за доработками вашего сайта.

Если нужно сделать ссылку с изображения то нужно вставить картинку в текст. Выделить ее и дальше нажимаем на “Вставить/изменить ссылку” и дальше аналогично работе с текстом.

как добавить ссылку на картинку