Задать вопрос

Андрей

Ответы

  • Как получить картинку из множества слоев?

    @AndreyMyagkov
    Вернуть макет на доработку дизайнеру. Слои должны быть логически сгруппированы!
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать так, чтобы в начале спана пробел не игнорировался?

    @AndreyMyagkov
    Написать в 1 строку
    <p>
<span>Привет</span><span> , </span><span>Человек</span>
</p>
    Ответ написан
    Комментировать
    Комментировать

  • Как переместить файлы в конец диска?

    @AndreyMyagkov
    А если все данные скопировать на другой диск, форматнуть этот и залить на него сначала изменяемые файлы, затем создать буфер для дальнейшего роста изменяемых файлов путем забивания места например фильмами. Затем льем на диск оставшиеся стабильные файлы. Затем удаляем буферные файлы
    В итоге избавляемся от дефрагментации, изменяемые файлы лежат в быстрой области диска. Средняя по скорости область остается пустой, а медленная занята стабильными файлами
    Ответ написан
    1 комментарий
    1 комментарий

  • Заявка с формы приходит дважды. как исправить?

    @AndreyMyagkov
    А зачем маска телефона и обработка формы у Вас в цикле? В этом и проблема

    $('.phonemasked').mask('+7 (999) 999-99-99');

    $(".user_request").submit(function() {
    ......
    Ответ написан
    Комментировать
    Комментировать

  • Что быстрее Jekyll Modx или чистая статика?

    @AndreyMyagkov
    Jeykyll = статика и будут быстрее Modx.
    Правильно приготовленный Modx (особенное, если это EVO) будет не сильно медленнее статики
    Ответ написан
    Комментировать
    Комментировать

  • Как скопировать все CSS стили блока и дочерних нод?

    @AndreyMyagkov
    У вас проблема в организации работы. Если вы сталкиваетесь с такой задачей постоянно, то нужно каждый блок лендинга делать верстку, стили, js в отдельной папке и отельными файлами, а потом все это дело автоматом собирать при помощи gulp. В следующий раз вы просто берете и копируете папку с нужными блоками в новый проект, допиливаете стили и одним кликом собираете новый проект.

    Сейчас можете подключить все стили со старого лендинга и вычистить неиспользуемые стили, инструменты нагуглите
    Ответ написан
    Комментировать
    Комментировать

  • Файловый менеджер, с древовидной структурой папок?

    @AndreyMyagkov
    total commander
    Ответ написан
    Комментировать
    Комментировать

  • Дайте пару ссылок на популярные сборники ui компонентов?

    @AndreyMyagkov
    Бутстрап можно по частям брать.
    А что бы конфликтов не было используйте методологию, например БЭМ
    Ответ написан
    Комментировать
    Комментировать

  • Алгоритмы компоновки элементов - что почитать?

    @AndreyMyagkov
    Наверное это сетка будь до бутстрап или своя и хороший дизайнерский вкус или готовые гайдлайны от MS или Google
    Ответ написан
    Комментировать
    Комментировать

  • Откуда и зачем лишний пиксель в Фотошопе?

    @AndreyMyagkov
    Поиграйтесь с масштабом, наверняка граница текста будет скакать на +/- 1 px
    Ответ написан
    1 комментарий
    1 комментарий

  • Верстка email письма, img+map+adaptive, это возможно?

    @AndreyMyagkov
    1) Сделать человеческий дизайн письма
    2) Попробовать абсолютное позиционирование
    3) Вместо классов использовать инлайновые стили
    Ответ написан
    2 комментария
    2 комментария

  • Инспектор в Chrome показывает неверное разрешение?

    @AndreyMyagkov
    В инспекторе нажми 2-ю иконку - там нормальная тестилка адаптивной верстки
    Ответ написан
    Комментировать
    Комментировать

  • TODO приложение с биндами?

    @AndreyMyagkov
    Wunderlist - есть версии для всех платформ + web версия
    Ответ написан
    Комментировать
    Комментировать

  • Адаптированное меню как правильно селать?

    @AndreyMyagkov 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Меню</title>
</head>
<body>

	<nav class="b-topnav">
		<button class="b-menu-toggle js-menu-toggle"><span class="menu-toggle__line"></span></button>
		<ul class="b-topmenu__list js-topmenu__list">
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 1</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item active">
				<a href="" class="topmenu__link">Пункт меню 2</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem active"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 3</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 4</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 5</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
		</ul>
	</nav>



	<div class="same-block">
		<code>
			Emmet: nav.b-topnav>button.b-menu-toggle>span.menu-toggle__line^+ul.b-topmenu__list.js-topmenu__list>li.topmenu__item*5>a.topmenu__link*4{Пункт меню $}+ul.topmenu__sublist>li.topmenu__subitem*5>a.topmenu__sublink*4{Пункт меню второго уровня $}
		</code>
	</div>

<style>
*{
	margin:0;
	padding: 0;
	line-height: 1;
}
li {
	list-style-type: none;
}
html{
	font-size: 16px;
	font-family: Arial, sans-serif;
}
.same-block{
	background-color: lightblue;
	height: 500px;
	padding: 3em;
}
/* NAVBAR */
.b-menu-toggle {
	width: 34px;
	height: 34px;
	margin: 3px;
	background: none;
	border: solid 1px #666;
	padding: 4px;
	border-radius: 3px;
	cursor: pointer;
	outline: none;
}
.menu-toggle__line:after,
.menu-toggle__line:before {
    content: "";
    position: absolute;
    left: 0;
    top: -9px;
}
.menu-toggle__line:after {
    top: 9px;
}
.menu-toggle__line {
    position: relative;
    display: block;
}
.menu-toggle__line,
.menu-toggle__line:after,
.menu-toggle__line:before{
    width: 100%;
    height: 2px;
    background-color: #333;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 2px;
}
.b-menu-toggle.on .menu-toggle__line {
    background-color: transparent;
}
.b-menu-toggle.on .menu-toggle__line:before {
    transform: rotate(45deg) translate(6px, 7px);
}
.b-menu-toggle.on .menu-toggle__line:after {
    transform: rotate(-45deg) translate(6px, -7px);
}
@media (min-width: 240px){
	.b-topnav {
		position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	background-color: #fff;
    	z-index: 99999999;
    	overflow-y: auto;
    	box-shadow: 0 1px 3px rgba(100,100,100,0.9);
    	max-height: 400px;
    	max-height: 90vh;
	}
	.b-topmenu__list {
		margin: 0 0 0.5em 3px;
		max-height: 0;
		overflow:hidden;
    	transition: max-height ease-out .3s;
	}
	.b-topmenu__list.on {
		max-height: 1000px;
		
	}
	.topmenu__item {
		display: block;
		padding: 0.5em 0;
	}
	.topmenu__link {
		color: #333;
		text-transform: uppercase;
	}
	/* level 2 */
	.topmenu__sublist{
		margin: 0.5em 0 0.5em 1em;
	}
	.topmenu__sublink {
		color: #333;
	}
	.topmenu__item.active .topmenu__link,
	.topmenu__link:hover,
	.topmenu__subitem.active .topmenu__sublink,
	.topmenu__sublink:hover {
		color: #007eff;
	}
}
@media (min-width: 768px){
	.b-menu-toggle {
		display: none;
	}
	.b-topnav {
		position: relative;
    	top: 0;
    	left: 0;
    	right: 0;
    	background-color: #007eff;
    	z-index: 0;
    	overflow-y: initial;
    	box-shadow: none;
    	max-height: none;
    	margin-bottom: 20px;
	}
	.b-topmenu__list {
		margin-left: 0;
		display: table;
		width: 100%;
		background-color: #007eff;
		overflow: visible;
	}
	.topmenu__item {
		display: table-cell;
		padding: 0.5em 0;
		text-align: left;
		position: relative;
	}
	.topmenu__link{
		padding: 0 1em;
		color: #fff;
	}
	.topmenu__link:hover,
	.topmenu__item.active .topmenu__link{
		color: #333;
	}
	/*level 2 */
	.topmenu__sublist{
		margin:0;
		display: none;
		background-color: #007eff;
	}
	.topmenu__item:hover>.topmenu__sublist,
	.topmenu__item>.topmenu__sublist:hover {
		display: block;
		position: absolute;
		top:25px;
		left:0;
		right: 0;
	}	
	.topmenu__subitem {
		display: block;
		padding: 0.5em 1em;
		text-align: left;
	}
	.topmenu__sublink {
		color: #fff;
		line-height: 1.3;	
	}
	.topmenu__subitem.active>.topmenu__sublink,
	.topmenu__subitem:hover>.topmenu__sublink  {
		color: #333;
	}
}
/* /NAVBAR */
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
	/*Мобильное меню*/
	$(".js-menu-toggle").on('click', function() {
	  $(this).toggleClass('on');
	 
	   $(".js-topmenu__list").toggleClass('on');
	  return false;
	});
</script>
</body>
</html>
    Ответ написан
    Комментировать
    Комментировать

  • Как задать правильные и пропорциональные размеры заголовков (h1-h5)?

    @AndreyMyagkov
    Можете использовать мой мини CSS фреймворк для работы с типографикой https://github.com/AndreyMyagkov/Typography
    Ответ написан
    Комментировать
    Комментировать

  • На каком движке можно собрать хороший сайт для фотографа?

    @AndreyMyagkov
    modx
    Ответ написан
    Комментировать
    Комментировать

  • Html 5 video как делать видео на весь блок?

    @AndreyMyagkov 
    <div class="b-video">
	<video class="viedeo__file"preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/slide.png" id="video">
        <source src="http://site.ru/video/1.mp4" type="video/mp4" id="source-video">
    </video>
</div>


<style>
	.b-video {
	    width: 100%;
	    min-height: 600px;
	    height: 100vh;
	    position: relative;
	    overflow: hidden;
	    z-index: 1;
}
.viedeo__file{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему скролл бар на малленьком разрешении находить не прижатым к краю, а лежит на контенте?

    @AndreyMyagkov
    У вас что то с браузером. У меня скроллбар прижат к краю
    Ответ написан
    1 комментарий
    1 комментарий

  • Как передать начальные данные клиентской стороне?

    @AndreyMyagkov
    Вы правильно поступаете
    Ответ написан
    Комментировать
    Комментировать

  • Какую готовую библиотеку использовать для шаринга в соц сети?

    @AndreyMyagkov
    share42.com использую
    Ответ написан
    Комментировать
    Комментировать