- Репутация: 259
- Сниппеты: 53
- Ревизии: 7
Быстрый способ добавить цветовой оверлей на фоновое изображение
.block_business {
background: linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
url('https://images.unsplash.com/photo-1524758631624-e2822e304c36');
}
Результат:
Базовый SEO шаблон
- Репутация: 11
- Сниппеты: 1
- Ревизии: 0
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- МЕТА -->
<title>Заголовок</title>
<meta name="description" content="описание не длинее 155 символов" />
<!-- open graph Facebook-->
<meta property="og:title" content="Заголовок" />
<meta property="og:type" content="website" />
<!-- если сайт многоязычный -->
<!-- <meta property="og:locale" content="ru_RU"> -->
<meta property="og:url" content="http://localhost.my" />
<!-- не меньше 600х315, не более 8Мб -->
<meta property="og:image" content="http://localhost.my/img/og_cover.jpg" />
<meta property="og:description" content="описание не длинее 155 символов" />
<meta property="fb:admins" content="Facebook ID" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ник_компании_в_твиттере">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:description" content="описание не длинее 155 символов">
<meta name="twitter:creator" content="@ник_в_твиттере">
<!-- картинка не меньше 280х150, не более 1Мб -->
<meta name="twitter:image" content="http://localhost.my/img/tw_cover.jpg">
<!-- G+ / Pinterest -->
<meta itemprop="name" content="Заголовок">
<meta itemprop="description" content="описание не длинее 155 символов">
<meta itemprop="image" content="http://localhost.my/img/g_cover.jpg">
<!-- Google authorship -->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]"/>
<!-- фавиконы и иконки сайта -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
</body>
</html>
Валидаторы:
Яндекс https://old.webmaster.yandex.ru/microtest.xml
Google https://search.google.com/structured-data/testing-tool
Pinterest https://developers.pinterest.com/tools/url-debugger/
- Репутация: 29
- Сниппеты: 7
- Ревизии: 0
Добавляем файла с анимациями (Animate.css):
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
Добавим эффект, например, fadeIn:
Результат
Или, bounceInLeft:
Результат
На gif, анимация тормозит, но в действительности этого нет.
Для зацикливания анимации, добавьте класс infinite
<!-- fadeIn -->
<h1 class="animated fadeIn">Mega Corporation </h1>
<!-- bounceInLeft -->
<h1 class="animated bounceInLeft">Mega Corporation </h1>
- Репутация: 259
- Сниппеты: 53
- Ревизии: 7
Мне не нравится как выглядит select в Bootstrap, и при большом кол-ве записей в нём сложно найти нужное значение. С минимальными затратами, вы можете сделать из select в Bootstrap, классную штуку с поиском, например, так:
Сделать это можно при помощи плагина Bootstrap-select, на сайте автора указаны вариации использования плагина.
Подключаем js и css, затем добавляем класс к select-у:
<select class="selectpicker">
<option value="c">C</option>
<option value="c#">C#</option>
...
</select>
- Репутация: 29
- Сниппеты: 7
- Ревизии: 0
Разработчики не тратят время на поиск качественных иконок для UI - и это логично, мы тратим время на другие важные вещи — код.
Но мы делаем проекты для наших пользователей, и будет правильно потратить немного времени на причёсывание UI. В данном случае мы говорим про иконки, самый простой способ решить проблему — начать использовать Font Awesome.
- Копируем папки css, fonts к себе в проект
- Подключаем font-awesome.min.css
На сайте FA, есть каталог, берём название нужной нам иконки (для меню bars), и делаем так:
<span class="fa fa-bars"></span>