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

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


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

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

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

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

Bootstrap 3 модальное окно по центру.

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Если вам не подходит это решение по каким-то своим причинам, и у вас большой список элементов в dropdown. Вы можете добавить обычный скролл списка:

4aab5b09613354a2e25c115a4e8dd84a.gif

Добавим класс scrollable

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu scrollable" aria-labelledby="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        ...
    </ul>
</div>

И последний шаг, css:

.dropdown-menu.scrollable {
    height: auto;
    max-height: 30em;
    overflow-x: hidden;
}
Gravatar image
frama
  • Репутация: 17
  • Сниппеты: 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
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Вот такую красивую кнопку "Поделиться" можно добавить в свои проекты.

Демо:

90f50d9015a147e83726cb2898ced68b.gif

Начнём с разметки:

<div class="btn-group dropup">
    <a type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-share-alt"></i>
    </a>
    <ul class="dropdown-menu arrow">
        <li><input class="form-control input-sm" value="http://gostash.ru" type="text"></li>
        <li><a href="#" class="social-likes" data-url="http://gostash.ru"><div class="twitter"> Twitter</div></a></li>
        <li><a href="#" class="social-likes" data-url="http://gostash.ru"><div class="facebook"> Facebook</div></a></li>
        <li><a href="#" class="social-likes" data-url="http://gostash.ru"><div class="vkontakte"> ВКонтакте</div></a></li>
        <li><a href="#" class="social-likes" data-url="http://gostash.ru"><div class="plusone"> Google+</div></a></li>
    </ul>
</div>

Важно! Для работы кнопки необходимо подключить bootstrap.min.js и также Font Awesome, который я использую для иконок соц. сетей. Вы можете этот шрифт не использовать, а заменить в классах .social-likes__button_название_соц_сети на нужную вам иконку. И последнее, Social Likes.

Осталось добавить css:

.social-likes__button > .social-likes__icon {
    font-family: 'FontAwesome', serif;
}

.social-likes__counter {
    background: #eee;
    margin-left: 0.5em;
    color: #555;
    font-size: 0.8em;
    font-weight: bold;
    display: inline-block;
	min-width: 1.5em;
	text-align: center;
}

.dropdown-menu.arrow input[type=text] {
    margin-left: 0.4em;
    width: 12.3em;
    margin-bottom: 0.3em;
    border-radius: 0.2em !important;
}

.dropdown-menu.arrow {
    margin-bottom: 1em;
}

.dropdown-menu.arrow:before {
    position: absolute;
    bottom: -10px;
    left: 9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right:10px solid transparent;
    border-top: 10px solid #ccc;
    font-size: 0;
    line-height: 0;
    content: '';
}

.dropdown-menu.arrow:after {
    position: absolute;
    bottom: -9px;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #fff;
    font-size: 0;
    line-height: 0;
    content: '';
}

.social-likes__icon > span {
    position:relative;
    top:0;
    left:-3px;
    background-image: none !important;
}

.social-likes__button_twitter > span:before {
    content: "\f099";
    color: #00B7EC;
}

.social-likes__button_facebook > span:before {
    content: "\f082";
    color: #425497;
}

.social-likes__button_vkontakte > span:before {
    content: "\f189";
    color: #526E8F;
}

.social-likes__button_plusone > span:before {
    content: "\f0d5";
    color: #DD4241;
}
jestonedev
  • Репутация: 99
  • Сниппеты: 11
  • Ревизии: 1

Стилизация placeholder на примере анимации "убегания" вправо при получении фокуса

<input class="auth--login" placeholder="Enter your login" >
/* С использованием autoprefixer */
.auth--login::placeholder {
    text-indent: 0px;   
    transition: text-indent 0.3s ease;
}

.auth--login:focus::placeholder {
    text-indent: 500px;
}


/* Без autoprefixer */
.auth--login::-webkit-input-placeholder {
    text-indent: 0px;   
    -webkit-transition: text-indent 0.3s ease;   
            transition: text-indent 0.3s ease;
}

.auth--login::-moz-placeholder {
    text-indent: 0px;   
    transition: text-indent 0.3s ease;
}

.auth--login:-ms-input-placeholder {
    text-indent: 0px;   
    transition: text-indent 0.3s ease;
}

.auth--login::placeholder {
    text-indent: 0px;   
    -webkit-transition: text-indent 0.3s ease;   
            transition: text-indent 0.3s ease;
}

.auth--login:focus::-webkit-input-placeholder {
    text-indent: 500px;
}

.auth--login:focus::-moz-placeholder {
    text-indent: 500px;
}

.auth--login:focus:-ms-input-placeholder {
    text-indent: 500px;
}

.auth--login:focus::placeholder {
    text-indent: 500px;
}
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Вдохновился примером в Codrops, добавил стили как в Bootstrap 3, а также кнопка доступна в трёх размерах — большой, средний, маленький.

Демо:

3oEdv9ziUv0s6RgtPy.gif

Я использую Font Awesome, если вы используете что-то другое в качестве иконки заменили название класса для элемента <i>.

Сделаем разметку страницы:

<input type="file" name="file-lg" id="file-lg" class="file-select file-select-lg"/>
<label for="file-lg" class="filename"><i class="fa fa-arrow-circle-o-up"></i>
    Выберите файл...
</label>

<input type="file" name="file" id="file" class="file-select"/>
<label for="file"><i class="fa fa-arrow-circle-o-up"></i>
    Выберите файл...
</label>

<input type="file" name="file-sm" id="file-sm" class="file-select file-select-sm"/>
<label for="file-sm"><i class="fa fa-arrow-circle-o-up"></i>
    Выберите файл...
</label>

Добавим js, для отображения имени выбранного файла (необходим jQuery):

$(function() {
    $("input:file").change(function (){
        var fileName = $(this).val().split( '\\' ).pop();
        $(this).next('label').html('<i class="fa fa-file"></i> ' + fileName);
    });
});
.file-select {
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.file-select.file-select-lg + label {
  padding: 10px 10px;
  font-size: 18px;
}

.file-select + label {
  font-size: 14px;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 3px;
}

.file-select.file-select-sm + label {
  font-size: 12px;
  padding: 5px 10px;
}

.file-select:focus + label,
.file-select + label:hover {
  background: #ccc;
}
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

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

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

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

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

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
Иван Бармашов
  • Репутация: 71
  • Сниппеты: 7
  • Ревизии: 0

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

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

1llArka.png

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