Ответы пользователя по тегу CSS
  • Как выполнить функцию при достижении div?

    @stas3572
    шапка фиксированная, как я понял..

    можно двумя способами отследить что вы дошли до второго блока, но оба так или иначе с применением .scrollTop():
    $('#page1').outerHeight() - высота первого блока, если блоки идут встык;
    $('#page2').offset().top - положение второго блока относительно начала страницы

    В общем проверяете скролл, если скролл равен значению положения второго элемента - запускаете анимации, меняете классы хедеру, в общем все, что вашей душе угодно
    Ответ написан
    1 комментарий
  • Некорретная работа css свойства content. В чем может быть проблема?

    @stas3572
    зачем вы так? не думали что можно и по другому сверстать, не используя last-child например:

    nav:after,
    nav:before,
    nav li + li:before {
    	content: ' | ';
    }

    а ваш вариант тоже кстати должен работать, может откуда то переопределяет стиль?
    Ответ написан
    Комментировать
  • Влияет ли структура сайта на позицию в поисковиках?

    @stas3572
    Да что вы несете, век информационной паранойи, за нами следят, пищь-пищь один один.

    Ага, а когда у каждого второго одинаковые наборы классов и идентификаторов (footer, header, main - тысячи их!!!), особенно когда в проектах используют фреймворки типа Bootstrap - вы хотите сказать поисковые роботы и анализаторы сравнивают их и расценивают как одинаковых?!

    Главные вещи для поисковиков: текстовое содержимое, ключевики, заголовки и микроразметка, ну еще семантика
    Ответ написан
    2 комментария
  • Как сделать просветление фона при наведении?

    @stas3572
    Да какая «нетривиальная», не тривиальная если только на чистом css было бы (и то решение у меня есть, но врядли рабочее, да и поддержка браузерами неважная):
    .block,
    .block:hover{
    cursor: url(images/gradient.cur), pointer;
    }


    А вообще настоящее простое решение вот:
    <div class="banner">
    	<div class="cursor-grad"></div>
    	....
    </div>

    banner - position:relative, cursor-grad - position:absolute, visability:hidden, фоном градиент пнг-шный, размеры - по размеру фона.
    а дальше простой jquery:
    $('.banner').on('mousemove', function(e){
    	$('.cursor-grad').css({
    		left: e.pageX - $('.banner').offset().left,
    		top:  e.pageY - $('.banner').offset().top,
    		visibility: 'visible'
    	});
    });
    Ответ написан
    Комментировать
  • Как решить эту проблему(верстка)?

    @stas3572
    Вариант «а»: Открыть таки ссылку, данную @VitaZheltyakov, и посмотреть ответ помеченный как Решение и последовать совету данному в ответе.
    Вариант «б»: masonry.desandro.com
    И третий вариант:
    .item {
        float: left;
        clear: left;
    }
    .item:nth-child(even) {
        float: right;
        clear: right;
    }
    Ответ написан
    Комментировать
  • Как сделать подобный greenline.a101.ru/plans сайт?или кто знает аналоги?

    @stas3572
    А вас что более интересует, какая сторона вопроса?
    Если говорить в общем, без иллюстратора во-первых не обойтись. И без хорошего знания js+svg / фронтенда.

    Интерактив на javascript с Raphael.js (посерчите, хорошая библиотека), глянул ваш другой вопрос, сразу скажу - никакого flash.

    Суть примерно такова (касательно интерактивов с выборами домов/подъездов/этажей/квартир):
    1) иллюстратор отрисовывает все эти красивые модельки домов, дворов и т.д.;
    2) в векторе накладываете маски для подсветок, снимаете все точки-координаты для path'ов
    3) дальше понеслась работа с js: svg, работа с Raphael, все прочие свистелки-перделки и т.п.

    Это так, если совсем уж в двух словах)) Насчет бэкенда не знаю, часто самописка или что то очень простое общее, про работу дизайнера в целом я молчу.

    Подобными проектами занимается студия Art3D в Москве, не скажу точно, но помоему и этот сайт их рук дело. Посмотрите портфолио, поймете что у них уже отлаженный процесс.
    Ответ написан
    Комментировать
  • Как сделать рабочий font-face для ie8 ?

    @stas3572
    @font-face {
    	font-family: 'Idealist';
    	src: url('fonts/Idealist/idealist.eot');
    	src: local('☺'),
        	url('fonts/Idealist/idealist.eot?') format('embedded-opentype'),
            url('fonts/Idealist/idealist.woff') format('woff'),
            url('fonts/Idealist/idealist.ttf') format('truetype'),
            url('fonts/Idealist/idealist.svg#idealist') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }


    у меня работает такой вариант, в другом случае - что-то не то с eot-файлом
    Ответ написан
    Комментировать
  • Как применить стиль к элементу, в зависимости от количества потомков (Plain CSS)?

    @stas3572
    :not() и :only-child

    Только придется кое-что немного поменять - перевесить стили на a вместо li и такой фокус возможен:

    ul.menu li a:not(:only-child) {...}

    В реальном проекте конечно маловероятно что пригодится, я подобные вещи скорее называю задачками на сообразительность / для развития ума / на общее знание селекторов.

    В реальных проектах для этого используйте js или css-препроцессоры, или да, помечайте классами
    Ответ написан
  • Использование display: table - зло?

    @stas3572
    Потому что в сети куча старой информации, переписанной и перепощенной 100500 раз.

    Если вкратце, и отбрасываем flex'ы:

    Есть float - он справляется на ура, нужно только не забывать его очищать.

    Есть inline-block - он прекрасен, до тех пор пока вы не сталкиваетесь с проблемой появления отступов между колонками (пробелов между блоками) - вам приходится обнулять font-size у row + display table для сафари на него вешать, а после объявлять font-size у дочерних col'а элементов (хотя есть и другие способы, но этот оптимальный).

    А можно и просто верстать теплыми ламповыми "таблицами", только по-человечески, на display table, table-row, table-cell. Нюансы - нюансы таблиц, больше к сожалению не подскажу, на деле сам сильно не завязывался на таблицах, всех нюансов не знаю.

    Попробуйте каждый, почитайте познакомьтесь и выберите тот, что вам удобнее
    Ответ написан
    Комментировать