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

Все сниппеты с тэгом «ui»



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

На vc.ru вышел годный обзор российских площадок онлайн-курсов. В нём UX/UI дизайнер Евгений Егоров говорит, что Скилбокс ему помог найти крутую работу.

При этом в той же статье один из работодателей (Антон Немкин) говорит, что на работу предпочитает брать людей с высшим.

Так где же правда?

https://vc.ru/education/150028-onlayn-kursy-bespoleznaya-trata-vremeni-ili-vse-taki-net

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

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

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

1llArka.png

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

dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

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

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

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

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

dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Если вам нужно, чтобы открытый popover в Boostrap 3 по наведению не скрывался, пока курсор на самом popover, вам поможет следующее решение.

Демо 97f041fdf9247cf838713969b2855d0b.gif

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

dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

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

Долго искать не пришлось, выбор пал на PerfectScrollbar который очень просто используется. Для начала демо того что получилось:

89f82efb23d7643ffb367b9adf801611.gif

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

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;
}
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;
}
Bran
  • Репутация: 29
  • Сниппеты: 7
  • Ревизии: 0

Добавляем файла с анимациями (Animate.css):

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

Добавим эффект, например, fadeIn:

Результат c414f1672d3e498772c125ad099d7a52.gif

Или, bounceInLeft:

Результат f8cbe60c8260d7109cfc1f42744e961f.gif

На gif, анимация тормозит, но в действительности этого нет.

Для зацикливания анимации, добавьте класс infinite

<!-- fadeIn -->
<h1 class="animated fadeIn">Mega Corporation </h1>

<!-- bounceInLeft -->
<h1 class="animated bounceInLeft">Mega Corporation </h1>
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;
}
Bran
  • Репутация: 29
  • Сниппеты: 7
  • Ревизии: 0

Задача

Иногда, нам нужно пояснить пользователю как всё устроено на нашем сайте (например, сложные формы, CRM, редакторы).

Для этого отлично подходят туры. Заходите на сайт, и вам на странице показывают с помощью шагов для чего нужен каждый элемент. Следуя трендам, показываю как это работает:

l41lHYxV4FjGmaoeI.gif

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

Решение

На деле всё очень просто. Скачиваем, Bootstrap Tour, подключаем скрипты:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-tour.min.css" rel="stylesheet">

<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-tour.min.js"></script>

Теперь добавим шаги в наш скрипт:

var tour = new Tour({
    steps: [
        {
            element: "#element-1",
            title: "Шаг 1",
            content: "Текст для первого шага"
        },
        {
            element: "#element-2",
            title: "Шаг 2",
            content: "Текст для второго шага"
        }
    ]});

tour.init();
tour.start();