Ответы пользователя по тегу Вёрстка
  • Как из iframe показать модалку на весь экран?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Да, возможно. После полной загрузки DOM используя JavaScript вы можете отлавливать нажатие на элемент в iframe. А дальше взять URL картинки, присвоить его родительскому окну и открыть в модалке.
    <iframe id="fff"><img src="xxx.jpg"></iframe>
    jQuery('#fff').contents().find('img').attr('src');
    Ответ написан
    Комментировать
  • Как лучше сделать div с выпуклым углом?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    <html>
    <head>
    <style type="text/css">
    	.xxx {
    	    width: 500px;
    	    height: 300px;
    	    background-color: #fff;
    	    color: #000;
    	    border: 2px solid #336699;
    	    padding: 20px;
    	    position: relative;
    	}
    	.xxx::before {
    	    content: "";
    	    width: 0px;
    	    height: 0px;
    	    position: absolute;
    	    border-left: 42px solid #336699;
    	    border-right: 42px solid transparent;
    	    border-top: 42px solid #336699;
    	    border-bottom: 42px solid transparent;
    	    left: -2px;
    	    bottom: -85px;
    	}
    	.xxx::after {
    	    content: "";
    	    width: 0px;
    	    height: 0px;
    	    position: absolute;
    	    border-left: 40px solid #fff;
    	    border-right: 40px solid transparent;
    	    border-top: 40px solid #fff;
    	    border-bottom: 40px solid transparent;
    	    left: 0px;
    	    bottom: -80px;
    	}
    </style>
    </head>
    <body>
    	<div class="xxx">xxx</div>
    </body>
    </html>


    5f292fc0aed92963901784.jpeg
    Ответ написан
    1 комментарий
  • CSS. Срезать углы блока. Как сделать подобие стрелки?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    <html>
    <head>
    	<style type="text/css">
    		.btn {
    			display: block;
    			width: 300px;
    			height: 50px;
    			background: #003399;
    			text-align: center;
    			padding: 30px 40px 0 40px;
    			position: relative;
    			margin: 0 10px 0 0; 
    			color: #fff;
    		}
    		.btn:after {
    			content: "";  
    			border-top: 40px solid transparent;
    			border-bottom: 40px solid transparent;
    			border-left: 40px solid #003399;
    			position: absolute; right: -40px; top: 0;
    		}
    	</style>
    </head>
    <body>
    	<a class="btn">NEXT</a>
    </body>
    </html>


    Имитация бортика:

    .btn {
    			display: block;
    			position: relative;
    			width: 300px;
    			height: 35px;
    			background: #003399;
    			border: 2px solid #3399cc;
    			border-radius: 5px;
    			text-align: center;
    			padding: 15px 20px 0 0;
    			color: #fff;
    		}
    		
    		.btn:after {
    			content: "";
    			position: absolute;
    			width: 38px;
    			height: 38px;
    			transform: rotate(45deg);
    			right: -18px;
    			top: 5px;
    			background: #003399;
    			border-top: 2px solid #3399cc;
    			border-right: 2px solid #3399cc;
    			border-radius: 5px;
    		}
    Ответ написан
  • Оцените макет веб-сайта?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Надо сразу разобраться, это вы для себя делаете или будете кому-то показывать? Если для себя, то всё сделано так "как нравиться вам", тут останавливайтесь и дальше не читайте.

    Смысл персональной странички, передать информацию о себе. Ключевое слово "информацию" и передавать её надо максимально грамотно. Не занимайтесь "креативом", рано вам пока это. Основное правило композиции: если объект выкинуть и ничего не измениться, то этот объект лишний. Всегда пользуйтесь этим правилом по 100 раз на дню. А дальше, сверху вниз с лева на право:
    • Разделение ссылок наклонными "слэшами" говорит нам, что это путь (хлебные крошки), а не меню. Используйте более принятые знаки, например вертикальные линии или токи, кружочки.
    • Все эти фишки с "My name is web developer and I am Kirill from Russia" устарели лет 10 назад. Просто передавайте информацию максимально грамотно! Используйте знаки препинания и заглавные буквы там где надо > Hello,
    • Думаю, что в тексте достаточно того, что вы из Калининграда. Не надо уточнять, а тем более в обратную сторону (Калининград, Россия - а не наоборот).
    • Параграф текста "For now..." без отступа? А почему следующий с отступом? Везде должно быть одинаково.
    • В тексте есть грамматические ошибки.
    • Предложение пишется с заглавной буквы, в том числе если оно кнопка.
    • CV это по-русски, в английском языке это "Resume".
    • Ваше имя написано ExtraBold'ом, это "лишний объект". Шрифт тоже объект, не надо их много! Достаточно тех которые используете в основном тексте Regular и Bold.
    • Высказывания Стива Джобса оставьте для девочек в Фэйсбуке, тут они не уместны.
    • Я бы и розочку сделал белой, тогда бы страница была монохромной :)

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

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Все мои заказчики без исключения нервничают, когда дизайнеры/верстальщики им рассказывают, что на "нормальном" экране выглядет нормально. Но давайте полагаться на демократические ценности: у 80% населения интернета вертикальное разрешение экрана 900 и меньше. А абсолютное большинство сидят на резолюции 1366x768, чуть ли не 30% от всех пользователей. Так, что вот вам и ответ: с картинкой планшета надо что-то делать.

    #2
    Если вы изучаете вёрстку на примере Tinyone то вам необходимо подправить файл main.css изменив стиль объекта с классом ".ipad" в строке 81, с этого:
    .ipad {
        display: block;
        margin: 60px auto 0;
    }

    на что-то такое:
    .ipad {
        display: block;
        margin: 60px auto 0;
        max-height: 320px;
        width: auto !important;
    }
    Ответ написан
    1 комментарий
  • Из-за чего может прыгать шрифт?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Это не шрифт прыгает, это ваш браузер неправильно его масштабирует и неправильно сглаживает. Поиграйтесь с CSS стилями, например такими:
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    Ответ написан
    Комментировать
  • Скруглённая картинка при наведении. Как пофиксить баг в хроме?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    И в Сафари этот баг присутствует. Решаеться перемещением объектов местами.
    div {
       border-radius: 20px;
       z-index: 3;
    }
    img {
      /*border-radius: 10px;*/ <--- Это лишнее
      z-index: 2;
    }
    Ответ написан
  • Почему вертикальное выравнивание текста работает по разному на десктопе и мобильных устройствах?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Вставьте в вопрос кусок CSS кода отвечающий за стиль кнопок.

    #2
    В вашем случае то, что отмечено как MOBILE является правильным вариантом, так как вертикальный центр буквы измеряется не по заглавным буквам, а по строчным. Небольшой отступ всё исправит margin-top: 0.2em;. А в DESKTOP версии просто разрешение экрана слишком мало чтобы увидеть, что текст тоже немного выше центра кнопки.

    Если отступ вас не устраивает, а искать альтернативный шрифт со всеми форматами для всех браузеров вам неохота - можно искусственно уменьшить высоту букв, сравняв по высоте прописные и строчные font-variant-caps: all-small-caps;, а они уже будут хоть и маленькие но по середине.

    Вот тут интересная статья на эту тему:
    https://positive-js.github.io/blog/css-font-metric...

    Метрики вашего шрифта для самостоятельного расчёта отступов:
    5dc4309159864977435820.png
    Ответ написан
  • Как мне спозиционировать скролл на странице?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    А может лучше уменьшить ширину блоков чтобы влезли все и без скролла?
    Ну а если это "дизайнерская задумка" то попробуйте сделать карусель.
    Ответ написан
    Комментировать
  • Почему список выходит за пределы div хедера?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Высота ".container-header" 125 пикселей, в нём находятся два блока, первый ".logo" высотой тоже 125 пикселей и второй ". menu" которому места не осталось. Вот он и вылез за пределы.
    Ответ написан
    Комментировать