<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

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

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Dog Ear Effect, или эффект загнутого уголка на CSS.

Dog Ear Effect, или эффект загнутого уголка на CSS.

Всем привет. Сегодня я покажу, как сделать так называемый Dog Ear Effect. Как это выглядит, вы можете видеть на картинке к статье.

Итак, для начала напишем структуру html. Она у нас будет очень простая: блок с 2 классами и стили подключим.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dog Ear Effect</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box dog-ear">Здесь какой-то длинный текст в нашем блоке...</div>
</body>
</html>

html структура написана. Можно перейти к файлу style.css

.box {
  position: relative;
  background: #edeff0;
  width: 180px;
  height: 180px;
  padding: 20px;
  border-radius: 5px;
  border-bottom: 4px solid #ccc;
  margin: 20px;
}

.dog-ear:before,
.dog-ear:after {
  content: '';
  display: block;
  right: 0;
  top: 0;
  position: absolute;
}

.dog-ear:after {
  border-top: 20px solid transparent;
  border-left: 20px solid rgba(0,0,0,.8);
}

.dog-ear:before {
  border-bottom: 20px solid transparent;
  border-right: 20px solid #fff;
}

Код достаточно прозрачен, но немного пояснить, думаю, стоит.

Стили, которые применены к классу .box, просто задают оформление нашему блоку. Вот, что получается

блок

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

Теперь задаем отдельно стиль для :after. С помощью border мы создаем треугольник, заливаем его черным цветом с прозрачностью .08 и получаем следующее

блок 2

Как видите, все уже почти готово, но нам мешает маленький незогнутый треугольник. Что же делать? А исправить это очень просто. С помощью :before мы создаем такой же по размерам уголок и заливаем белым цветом, т.е цветом нашей страницы. Если у вас страница, к примеру, зеленого цвета, то не забудьте поменять цвет на зеленый и в :before.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

programmist programmist 22.05.2014 10:20:18

В картинке текст с ошибкой!

Ответить

kjuby kjuby 23.05.2014 00:12:04

Михаил возможно вы имели в виду вместо "здесь какой-то длинный текст к нашем блоке" ..."здесь какой-то длинный текст <i>в</i> нашем блоке"?

Ответить

tikkiwiki tikkiwiki 23.05.2014 10:08:39

Исправят.

Ответить

денис2015 денис2015 16.01.2016 21:29:17

Спасибо помогло

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.