ZorNet.Ru — сайт для вебмастера » HTML и CSS » Диалоговое окно описание для сайта с эффектом CSS

Диалоговое окно описание для сайта с эффектом CSS

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

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

В самом вверху написан заголовок, что дает основание предполагать, что оно идет под разные мануалы и тематическое значение. Также он установлен под h1, под поисковые системы, где можно включить ключевое слово.

Но думаю вам лучше посмотреть на его Demo, что ниже будет представлено.

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

Переходим к установке:

Первым делом ставим HTML код, там где хотите его видеть.

Код

Код

<article id="gkodersa_mikavem">
  <div class="lersamihdsa_tunitva">
  <h1 class="opesanyg_dxamilud">ZorNet.Ru: Создание сайта uCoz</h1>
  <p>Здесь идет ваше описание, что можно в него ставить ссылки, также менять графику.<p> Это под второе описание с отступом</p>
  </div>
  <a class="sawrum_gilozdarnil" href="http://zornet.ru"><span>Перейти</span></a>
</article>

CSS

Код

#gkodersa_mikavem {
  position: relative;
  width: 550px;
  margin: 99px auto;
  overflow: hidden;
  padding: 3px 15px 19px;
}

#gkodersa_mikavem .lersamihdsa_tunitva {
  position: relative;
  z-index: 1;
  margin-bottom: 17px;
  border-bottom: 1px solid #868080;
  color: #292525;
}

.opesanyg_dxamilud {
  color: #3253b3;
  font-size: 2rem;
  font-weight: 500;
}

.lersamihdsa_tunitva p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 280;
}

.sawrum_gilozdarnil, .sawrum_gilozdarnil span {
  text-decoration: none;
  color: #eae4e4;
}

.sawrum_gilozdarnil span {
  position: relative;
  background: #485ece;
  padding: 4px 15px;
  font-size: 1rem;
}

.sawrum_gilozdarnil:before {
  content: '';
  position: absolute;
  right: 0px;
  top: 0px;
  border-top: 39px solid #292525;
  border-left: 39px solid #292525;
  box-shadow: 0 0 0 99em #d8d1d1;
}

.sawrum_gilozdarnil:hover:before {
  border-top: 61px solid transparent;
  border-left: 61px solid #20aeca;
  box-shadow: 0 0 0 99em #313131;
}

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

Демонстрация:

16 Января 2018 Просмотров: 1652 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0