Ответы пользователя по тегу CSS
  • Какие хорошие сайты с примерами плагинов и ништяков на javascript + css?

    lazalu68
    @lazalu68
    Salmon
    На codrops просто в диких количествах всякие вкусные фишечки для веба

    Вот например интерактивная выбиралка билетов в кино, где вы можете купить их предварительно виртуально посидев на свободных местах и оценив точку обзора

    Или вот, милый эффект для картинок

    Есть и попроще - просто очень красивый эффект morphing buttons
    Ответ написан
    Комментировать
  • Как сделать такой эффект?

    lazalu68
    @lazalu68
    Salmon
    Как-то так наверное

    update: версия не использующая transform'ы для центрирования элементов
    Ответ написан
    2 комментария
  • Как сделать скрытие элемента при клике на другой элемент?

    lazalu68
    @lazalu68
    Salmon
    Ответ написан
    Комментировать
  • Как плавно перемещать блоки?

    lazalu68
    @lazalu68
    Salmon
    Гляньте jQuery masonry
    Ответ написан
    Комментировать
  • Слайдер на JS. Странности с transition. Как быть?

    lazalu68
    @lazalu68
    Salmon
    У вас верстка слайдера организована немного странно, поэтому чтобы исправить это не изменяя верстки, придется немного усложнить JS.

    Видимый слайд у вас имеет "position: absolute" и по этому поводу занимает верхний слой над остальным контентом родителя, остальные слайды последовательно выстроены в вертикальный ряд и спрятаны с помощью "visibility: hidden; opacity: 0;". Так как к свойству "position" нельзя применить transition, когда вы переключаете слайд, текущий слайд сразу же получает "position: relative" и занимает свое место в вертикальном строю, а целевой слайд сразу же получает "position: absolute" и выскакивает на место предыдущего. То есть при переключении текущий слайд моментально исчезает, после чего сразу же становится виден первый видимый в ряду слайд (который прозрачный), а целевой слайд занимает top-овый слой и ему остается еще целая секунда, чтобы получить 100% opacity То есть в вашем варианте при каждом переключении пользователь видит три слайда: текущий, потом первый видимый в ряду и только потом - целевой. Отсюда и возникает эффект плавного перехода когда вы переключаетесь с 1 на любой другой или со 2 на 1: в этих случаях нету промежуточно видимого слайда, их участвует только двое, поэтому переход получается плавный.

    В целом, я бы для начала поменял верстку как-нибудь) Тогда все будет просто.

    Но если вы религиозно придерживаетесь вашей собственной верстки, то для нее я придумал такой вариант решения: разделить свойства класса .show на те, которые нужно анимировать, и на те, которые не нужно анимировать, и не анимируемые снимать со слайдов только в конце анимации, чтобы во время переключения в верхнем слое было два видимых слайда. Получилось так:

    .slider_artists .show {
      opacity: 1;
    }
    .slider_artists .position {
      position: absolute;
      top: 0;
      left: 0;
    }


    При переключении целевой слайд получает сразу два класса - .show и .position, а текущий лишается сначала класса .show, а потом и .position, когда отыграется анимированный переход к дефолтным для img стилям. Последнее можно было сделать, например, добавив для слайдов eventListener на transitionend, который будет убирать класс .position c текущего элемента (хотя еще можно было по клику на control не только убирать класс .show, а еще оставлять setTimeout для текущего элемента на 1000 миллисекунд, который также будет убирать класс .position). Как-то так:

    for(var i = 0; i < sliderLength.length; i++){
      sliderLength[i].addEventListener("transitionend", function() {
        if (!hasClass(this,'show')) {
          this.classList.remove('position');
        }
      }, false);
    }


    Готовый вариант на codepen.io

    PS: А таки зачем вы сначала указываете transition для всех img, а потом еще раз его указываете для .show ?) Таки в момент когда img получает .show, он уже имеет нужный transition)
    Ответ написан
    3 комментария
  • Как подгрузить контент?

    lazalu68
    @lazalu68
    Salmon
    Я вообще ноль в php и аббревиатура mvc у меня абсолютно безапелляционно ассоциируется с wordpress, представления не имею почему, но мне кажется, что ajax - единственный способ "подгружать контент при клике на кнопку". Никаких других вариантов воооообщеееее не существует.

    Технически клиентом для вас является браузер человека, посетившего ваш сайт. А на данный момент кроме JS нету никакого другого пути взаимодействия DOM'a страницы с браузером. Так что если вам нужна динамическая загрузка контента, то ajax - это не один из множества вариантов, а единственный вариант.
    Ответ написан
    Комментировать
  • Не работает inline block justify выравнивание?

    lazalu68
    @lazalu68
    Salmon
    По результатам поиска решения этой проблемы вынесен вердикт: кажется, вообще ничо нельзя с этим сделать кроме как пихнуть туда &nbsp; или &#32 )
    Ответ написан
  • Как сделать скролл диалога как в вк?

    lazalu68
    @lazalu68
    Salmon
    Если лень читать - пример

    То есть вы хотите сделать так, чтобы при прокрутке скроллился только блок диалогов, да?

    Если я правильно понял вопрос, то скажите, что значит ваша фраза "Кроме перекрытия блока другим блоком через fixed"? Эдак не получится) Потому что визуальная часть vk.com именно с использованием fixed и устроена: есть основной блок фиксированной ширины, внутри него блок контента, который слева и сверху сжат одним блоком sidebar и несколькими header блоками. Поведение этих блоков регулируется классом .im_fixed_nav, который вешается на элемент body: на обычных страницах, например странице пользователя, контент прокручивается вместе с сайдбаром и хэдером, ибо эти блоки имеют по дефолту свойство position: relative;, а на странице диалогов прокручивается только контент, потому что блоки sidebar и header получают position: fixed;. Вот правило, которое за это отвечает:

    .im_fixed_nav #page_header, .im_fixed_nav #side_bar {
        position: fixed;
    }


    Вообще, структура DOM у vk.com довольно запутанная, но если упростить, выглядит она так:

    body
    
    	div.scroll-fix-wrap
    
    		div.scroll-fix
    
    			div.page-layout {
    
    				div.header
    
    				div.sidebar 
    
    				div.content
    
    			}


    Названия блоков мною выбраны так, чтобы наиболее доступно показать как именно реализован scroll-fix. Некоторые названия блоков, которые я здесь использую, действительно используются vk.com, но не все, поэтому не ищите 100%-го совпадения.

    Тут я набросал скелетик vk.com, который показывает, как это все происходит, как структуру так и переключение между режимами скролла. Там найдете ответ на свой вопрос.

    На сайте вконтакте размеры большинства основных блоков задаются динамически, например считаются onscroll; в моем примере все не так круто, никакого динамического подсчета нету, но я честно разделил указания размеров так же, как на vk.com: статические - указаны в css, динамические - в html, индвидиуально для каждого элемента, который нуждается в динамическом пересчете размера.
    Ответ написан
    2 комментария
  • Как сделать вывод div внутри другого div?

    lazalu68
    @lazalu68
    Salmon
    Кстати если я правильно понял данный кусок php, у вас этот js выполняется столько раз, сколько у вас элементов в массиве $humans. Это же не дело, надо js вынести, если не в отдельный .js, то хотя бы из foreach. И зачем вам вообще нужен элемент lastdiv? Мне кажется его можно смело исключить. Получится как-то так:

    <div class="teams_block">
    <script type="text/javascript">
    $(document).ready(function(){
    	var team_elements = $('.team_element'), 
    		round_blocks = $('.round_block');
    
    	$('.team_element').on('click', function(){
    		var self = $(this), 
    			team_description = $('<div class="team_description"><center><img src="/img/spinner_32.gif"></center></div>');
    		self.find('.team_description').remove();
    		self.append(team_description);
    		team_description.load('/command/humandescription?id='+self.data('id'), function(){
    			$(this).css('display','block');
    		});
    		team_elements.removeClass('active');
    		round_blocks.removeClass('active');
    		self.addClass('active');
    		self.find('.round_block').addClass('active');
    	});
    });
    </script>
    <?php foreach ($humans as $human){ ?>
    <div class="team_element" data-id='<?= $human->id ?>'>
    	<div class="round_block">
    		<img src="/images/<?= $human->image ?>" />
    	</div>
    	<div class="title"><?= $human->name ?></div>
    	<div class="desc"><?= $human->office ?></div>
    	<img class="team_arrow" width="61" height="24" src="/img/team_arrow.png" />
    </div>
    <?php } ?>
    </div>
    Ответ написан
  • Как вырезать уголки у блока div?

    lazalu68
    @lazalu68
    Salmon
    Есть такая фишка - border-corner-shape, правда ее кажется все-таки выпилили из спек. Вот Lea Verou рассказывает о ней. А вот демка тоже от Lea Verou, в коде увидите, как у нее через SVG реализованы эти уголки.

    Вот тут тоже чувак спрашивает как сделать уголки, через border-corner-shape, ему отвечают что этого пока нет в спеках и предлагают рабочие варианты )
    Ответ написан
    Комментировать