Для получения полного доступа
зарегистрируйтесь.

Раздел:
Подраздел:
Языки:


Valentin Sayik  php - yii2, laravel5 | DB - MySQL PostgreSQL | VCS - Git
  • Репутация: 28
  • Сниппеты: 4
  • Ревизии: 0

Мы хотим поделиться с вами вдохновляющими адаптивными прайс-таблицами сделанными на флексбоксе. Прайс-таблицы являются основной частью лендингов и сайтов на которых предлагают цифровые или другие платные услуги.

Продолжение »

Иван Бармашов  JS, HTML5, CSS3
  • Репутация: 70
  • Сниппеты: 7
  • Ревизии: 0

UPD: обновил сниппет, спасибо Great-Antique

Когда на странице в списках много элементов, то её нужно как-то скрывать. В проекте использовал такое решение:

1llArka.png

Продолжение »

Gravatar image
frama  php, c++, qt, yii2
  • Репутация: 16
  • Сниппеты: 1
  • Ревизии: 0

Для использования justify-блоков:

<div class="justify">
   <div class="justify-block">1</div>
   <div class="justify-block">2</div>
   <div class="justify-block">3</div>
</div>
.justify {
  text-align: justify;
}
.justify:after {
  content: " ";
  display: inline-block;
  width: 100%;
}
.justify-block {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  width: 330px; /* Требуемая ширина блока */
}
dfatt  PHP, C#, JS
  • Репутация: 241
  • Сниппеты: 48
  • Ревизии: 7

Как написали в комментариях к моему сниппету, 58kb довольно много для инпута от которого нужен только поиск.Правда этот вариант требует jQuery, но, нет проблем переписать на Vanila JS.

Покажу сразу результат того, что у нас получится:

А теперь, к делу. Для начала добавим общий скелет:

Продолжение »

Сниппет,  CSS

Link

Gravatar image
Makcim  
  • Репутация: 6
  • Сниппеты: 3
  • Ревизии: 0
<!-- Позволяет избежать дублирование индексации контента -->
<!-- http://www.searchengines.ru/kak_pravilno_is_rel_canonical.html -->
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">

<!-- Короткая ссылка на документ. Не рекомендуется к использованию, т. к. может порождать дубли страниц при индексации -->
<link rel="shortlink" href="https://example.com/?p=42">

<!-- Ссылка на AMP-версию -->
<!-- https://support.google.com/webmasters/answer/6340290?hl=ru -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Ссылка на CSS-файл -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Ссылка на JSON-файл, который описывает установку веб-приложения -->
<link rel="manifest" href="manifest.json">

<!-- Ссылка на автора документа -->
<link rel="author" href="humans.txt">

<!-- Cсылка на страницу с авторскими правами, согласно которым предоставляется текущий документ -->
<link rel="copyright" href="copyright.html">

<!-- Ссылка на другую языковую версию документа -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Информация об авторе -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- Ссылка на документ, который содержит архивную ссылку на текущий документ -->
<link rel="archives" href="https://example.com/2003/05/" title="May 2003">

<!-- Ссылка на документ выше (относительно иерархии сайта) -->
<link rel="index" href="https://example.com/" title="Cassius Clay">

<!-- Ссылка на начало текущего документа (например, на первую страницу статьи) -->
<link rel="start" href="https://example.com/books/winnie_the_pooh/part1/" title="Pattern Recognition 1">

<!-- Ссылка на предыдущую страницу текущего документа -->
<link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention.">

<!-- Ссылка на сам ресурс (ссылка "на себя"). Данная ссылка может, например, понадобиться для обращения к документу, если его описание было получено в составе коллекции -->
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">

<!-- Ссылка на первую, следующую, предыдущую и последнюю страницы документа -->
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="previous" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">

<!-- Используется когда используется сторонний сервис для редактирования блога -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Указывает адрес пингбэк-сервера -->
<!-- Как поясняется в спецификации, «пингбэк» это способ для блога автоматически оповещать сайты, ссылающиеся на него. Это создает обратную связь — способ пройти назад по цепочке ссылок вместо «прямого прохода». В блогах, частности WordPress, пингбэк-механизм используется для уведомления авторов, что вы ссылаетесь на кого-то при создании новой записи -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Уведомляет URL, когда вы ссылаетесь на него на вашем сайте -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Загружает внешний HTML-файл в текущий файл -->
<link rel="import" href="component.html">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Поисковый запрос">

<!-- Фиды -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="subresource" href="styles.css">
<link rel="preload" href="image.png">
Иван Бармашов  JS, HTML5, CSS3
  • Репутация: 70
  • Сниппеты: 7
  • Ревизии: 0

Результат: 0dc7ec0c59a544528cde1e8d76d0c3ce.png

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

.members .item:nth-child(n+3):nth-child(-n+5) {
    background: #9b59b6;
    color: #fff;
}
Gravatar image
zular  JavaScript, CSS
  • Репутация: 33
  • Сниппеты: 7
  • Ревизии: 0

Демо 216bf798e5c8.gif

Как использовать

Добавить код в свой файл стилей, на нужном блоке добавлять класс preloader.

Код

.preloader {
    position: relative;
    min-height: 60px;
}

.preloader:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .9);
    height: 100%;
    width: 100%;
    display: block !important;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.preloader:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border: 4px rgba(0, 0, 0, .25) solid;
    border-top: 4px #1071b6 solid;
    border-radius: 50%;
    -webkit-animation: preloader .6s infinite linear;
            animation: preloader .6s infinite linear;
}

@-webkit-keyframes preloader {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
    }
}

@keyframes preloader {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
    }
}
Gravatar image
Makcim  
  • Репутация: 6
  • Сниппеты: 3
  • Ревизии: 0
<div class="boxes">
  <input type="checkbox" id="box-1">
  <label for="box-1">Sustainable typewriter cronut</label>

  <input type="checkbox" id="box-2" checked>
  <label for="box-2">Gentrify pickled kale chips </label>

  <input type="checkbox" id="box-3">
  <label for="box-3">Gastropub butcher</label>
</div>
стилизация элементов checkbox
.boxes {
  margin: auto;
  padding: 50px;
  background: #484848;
}

/*Checkboxes styles*/
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
Gravatar image
opotemkin  php, jquery, javascript, Yii и Yii2
  • Репутация: 11
  • Сниппеты: 4
  • Ревизии: 0

Для тех, кто использует bootstrap. Если есть некое множество Popover, а при клике необходимо активировать только один, при этом остальные скрывать. Есть простое решение, но даже документация не всем помогает :)

  1. Необходимо, чтобы data-trigger="focus", т.е.
    <a data-trigger="focus" data-toggle="popover">popover ссылка</a>
    

    или в коде js

    $('[data-toggle="popover"]').popover({
    trigger: 'focus'
    });
    
  2. Все элементы должны содержать tabindex="0" Т.е.
    <a tabindex="0" data-trigger="focus" data-toggle="popover">popover ссылка</a>
    

    Читайте внимательно документацию и применяйте :)

Gravatar image
Quberik  
  • Репутация: 8
  • Сниппеты: 1
  • Ревизии: 0

Как известно css страдает от нехватки Namespace. Классы забиваются только в глобальную область видимости, что соответственно рано или поздно приводит к конфликту имён. Реализуем пространства имён через префиксы. Они позволят нам определить тип класса/объекта.

l- layout. Используется для структурных объектов страницы. Это могут быть: шапка сайта, главное меню, футер, а также любые другие части, которые «вшиты» в шаблон страницы и имеют строго определённое место. Например, сайдбар будет иметь класс l-sidebar.

e- element. Любой выделенный элемент, повторяющийся на нескольких страницах. Это может быть кнопка, список тегов, социальные иконки, JS-плагины календарика, модальных окон, туллтипов и пр. Все они повторяются на нескольких страницах, на разных местах, в разных комбинациях. Например, e-submit кнопка отправки формы, или e-news-header скажет нам о том, что данный класс относится к заголовку новостей.

g- global. Такие префиксы даются «модифицирующим классам». То есть классам, которые навешиваются на любой объект на странице и модифицируют его. К таким классам можно отнести: g-clrfix, g-bold, g-inlineBlock и пр. Все они не являются самостоятельными элементами, а лишь изменяют свойства других объектов.

p- page. Данный префикс будет означать, что данный объект встречается только на одной странице (или группе однородных страниц одного раздела сайта) и не повторяется по всему сайту. Например, блок информации о пользователе и блок друзей встречаются только на странице профиля. Желательно такие классы хранить в отдельном CSS-файле.

j- javascript. Это единственный префикс, классы которого ни в коем случае нельзя стилизовать. Классы с данным префиксом используются только для доступа из JS: $loginForm.find(’.j-sendBtn’).

a- animation. Класс, который используется для анимации объекта. Например, a-fade-in говорит о том, что объект плавно появится на странице при помощи анимации. Или a-slide-up скажет нам о том, что объект появится снизу вверх ввиде анимации слайда.

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

Todo