Ответы пользователя по тегу HTML
  • Верстать ли в perfect pixel?

    reskwer
    @reskwer
    front-end developer
    Конечно верстать, так как только Pixel Perfect дает именно тот результат который задуман.
    Но учтите, время как минимум возрастет в 1,5
    Ответ написан
    Комментировать
  • Как сделать чтобы картинка была слева, а текст был справа от картинки?

    reskwer
    @reskwer
    front-end developer
    картинке дайте float:left
    Ответ написан
    Комментировать
  • Что происходит с Sass?

    reskwer
    @reskwer
    front-end developer
    Если вы используете Sublime то в настройках добавльте строку "atomic_save": true, и проблема будет решена.. в других редакторах думаю этой проблемы нет
    Ответ написан
    Комментировать
  • Адаптивный блок с косыми углами?

    reskwer
    @reskwer
    front-end developer
    На быструю руку накидал пример, в данном примере блок и 2 треугольника codepen.io/reskwer/pen/jVXdRZ?editors=0100
    <div class="block"></div>
    .block{
      width: 300px;
      height: 100px;
      background: #5C72FA;
      position: relative;
    }
    
    .block:before{
      content: '';
      position: absolute;
      bottom: -20px;
      left: 0;
      border: 20px solid transparent;
      border-left: 150px solid #5C72FA;
    }
    
    .block:after{
      content: '';
      position: absolute;
      bottom: -20px;
      right: 0;
      border: 20px solid transparent;
      border-right: 150px solid #5C72FA;
    }
    Ответ написан
  • CSS filter или 2 картинки?

    reskwer
    @reskwer
    front-end developer
    Фильтр
    Ответ написан
    Комментировать
  • Почему одни и те же шрифты в браузере отображаются по разному?

    reskwer
    @reskwer
    front-end developer
    На второй картинке отключено сглаживание шрифта, раньше такое часто можно было увидеть на Windows XP, включите сглаживание шрифтов в вашей ОС
    Ответ написан
    Комментировать
  • Тег main в css Sublime Text 3?

    reskwer
    @reskwer
    front-end developer
    потому что последний рас синтаксис саблайма обновлялся в 2013 году, мы все верим и ждем что за саблайм возьмутся по серьездней, иду в скорости ему нет равных, но а пока вынуждены сидеть на атоме
    Ответ написан
    Комментировать
  • Как сверстать вот такой вот sidebar?

    reskwer
    @reskwer
    front-end developer
    Опять же, ШРИФТОВ НЕТ, верстка без PSD.
    Как то так codepen.io/reskwer/pen/XJpNpO
    С треугольником на Видео, не стал заморачиватся, сделал обычный в rgba 0.5+
    index.html
    <!DOCTYPE html>
    <html lang="ru-RU">
    <head>
    	<meta charset="UTF-8">
    	<meta name="author" content="reskwer">
    	<title>Что-то на CodePen</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div class="sidebar">
    		<div class="facebook">
    			<h1>Facebook block</h1>
    			<div class="facebook-api">
    				<p>В этот блок программист прикрутит facebook API like</p>
    			</div>
    		</div>
    		<div class="photo">
    			<h1>Latest picture galleries</h1>
    			<div class="wiver one">
    				<h2>Navn og tekst til billede</h2>
    				<img src="http://placehold.it/120x76" alt="img">
    			</div>
    			<div class="wiver two">
    				<h2>Navn og tekst til billede</h2>
    				<img src="http://placehold.it/120x76" alt="img">
    			</div>
    			<a href="#" class="more">more pictures</a>
    		</div>
    		<div class="video">
    		<h1>Latest picture galleries</h1>
    			<div class="wiver one">
    				<h2>Navn og tekst til billede</h2>
    				<img src="http://placehold.it/120x76" alt="img">
    				<div class="circle">
    				</div>
    			</div>
    			<div class="wiver two">
    				<h2>Navn og tekst til billede</h2>
    				<img src="http://placehold.it/120x76" alt="img">
    				<div class="circle">
    				</div>
    			</div>
    			<a href="#" class="more">more pictures</a>
    		</div>
    	</div>
    </body>
    </html>

    style.css
    .sidebar{
    	width: 300px;
    	background: #f0f0f0;
    	font: 100% tahoma,verdana,arial;
    	padding: 0 22px;
    	box-sizing: border-box;
    }
    .facebook,.photo,.video{
    	width: 100%;
    	height: 239px;
    	border-bottom: 2px dotted #777;
    	padding-top: 16px;
    }
    h1{
    	font-size: 93%;
    	font-weight: bold;
    	font-style: italic;	
    }
    h2{
    	font-size: 100%;
    	font-weight: normal;
    	letter-spacing: 1px;
    }
    .wiver{
    	width: 120px;
    	display: inline-block;
    	cursor: pointer;
    }
    .more{
    	display: block;
    	text-decoration: none;
    	background: #e8e8e8;
    	color: black;
    	font-weight: 400;
    	font-style: italic;
    	font-size: 93%;
    	width: 113px;
    	height: 20px;
    	text-align: left;
    	padding: 1px 0 1px 9px;
    	margin: 15px 0 14px 49%;
    	position: relative;
    }
    .more:after{
    	content: ">";
    	display: block;
    	width: 10px;
    	height: 15px;
    	position: absolute;
    	top: 3px;
    	right: 7px;
    	color: #7dc8cd;
    }
    .more:hover{
    	background: #aaa;
    }
    .video .wiver{
    	position: relative;
    }
    .circle{
    	width: 65px;
    	height: 65px;
    	border-radius: 50%;
    	background: rgba(255,255,255,.5);
    	position: absolute;
    	bottom: 9px;
    	left: 26px;
    }
    .circle{
    	width: 55px;
    	height: 55px;
    	border-radius: 50%;
    	background: rgba(255,255,255,.5);
    	position: absolute;
    	bottom: 14px;
    	left: 32px;
    }
    .circle:after{
    	display: block;
    	content: "";
    	position: absolute;
    	bottom: 12px;
    	left: 16px;
    	border: 15px solid transparent;
    	border-left: 30px solid rgba(255,255,255,.7);
    }
    .circle:hover{
    	background: rgba(255,255,255,.7);
    	cursor: pointer;
    }
    .circle:hover:after{
    	border-left: 30px solid rgba(255,255,255,.9);
    }
    Ответ написан
    Комментировать
  • Как сделать прозрачные круги на фоне модального окна bootstrap?

    reskwer
    @reskwer
    front-end developer
    Допишите в код модального окна круги, вот вам сделал пример на быструю руку. Прозрачные codepen.io/reskwer/pen/vEgGPm

    Ну и сам код
    index.html
    <!DOCTYPE html>
    <html lang="ru-RU">
    <head>
    	<meta charset="UTF-8">
    	<meta name="author" content="reskwer">
    	<title>Что-то на CodePen</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div class="content">
    	<p>Cras dapibus, leo a euismod luctus, nibh orci tempor mi, non accumsan odio nunc sit amet magna. Curabitur gravida dolor non mi mollis, vitae vehicula ante blandit. Curabitur congue neque sapien, at vestibulum</p> 
    		<div class="circle1"></div>
    		<div class="circle2"></div>
    		<div class="circle3"></div>
    		<div class="circle4"></div>
    	</div>
    </body>
    </html>

    style.css
    html{
      height: 100%;
    }
    body{
    	background: #666;
    }
    .circle1{
    	width: 80px;
    	height: 80px;
    	border-radius: 50%;
    	border: 1px solid rgba(100,149,237,.5);
    	background: rgba(255,235,205,.5);
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    .circle2{
    	width: 160px;
    	height: 160px;
    	border-radius: 50%;
    	border: 1px solid rgba(100,149,237,.5);
    	background: rgba(0,191,55,.5);
    	position: absolute;
    	top: 74px;
    	left: 164px;
    }
    .circle3{
    	width: 120px;
    	height: 120px;
    	border-radius: 50%;
    	border: 1px solid rgba(100,149,237,.5);
    	background: rgba(102,205,270,.5);
    	position: absolute;
    	top: 122px;
    	left: 83px;
    }
    .circle4{
    	width: 100px;
    	height: 100px;
    	border-radius: 50%;
    	border: 1px solid rgba(100,149,237,.5);
    	background: rgba(0,100,0,.5);
    	position: absolute;
    	top: 267px;
    	left: 148px;
    }
    
    .content{
    	width: 400px;
    	height: 400px;
    	position: relative;
        background: linear-gradient(90deg,rgba(255, 255, 255, 0) 1.8em, rgba(135, 206, 235, .5) 2em)4em 0 repeat-y,linear-gradient(rgba(255,255,255, 0) 1.9em, rgba(0, 0, 0, .15) 2em)0 0;
      	background-size: 2em 2em;
      	background-color: ivory;
      	font: 16px/2 'Trebuchet MS', Verdana, sans-serif;
     }
    p{
      margin: 2.5em 3em 1em 8em;
    }
    Ответ написан
    1 комментарий
  • Как можно растянуть блоки (div) по всей доступной высоте, учитывая имеющиеся блоки с фиксированной высотой?

    reskwer
    @reskwer
    front-end developer
    Из предложенных ответов НЕ не 1 по теме, по этому даю свое решение.
    codepen.io/reskwer/pen/jEyqzp
    Код исходников
    index.html
    <!DOCTYPE html>
    <html lang="ru-RU">
    <head>
    	<meta charset="UTF-8">
    	<meta name="author" content="reskwer">
    	<title>Что-то на CodePen</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div class="content">
    		<div id="topbar">Высота 100px</div>
    		<div id="page">Высота 50% от 100%-100px</div>
    		<div id="sidebar">Высота 50% от 100%-100px</div>
    	</div>
    </body>
    </html>

    style.css
    html,body{
    	width: 100%;
    	height: 100%;
    	padding: 0;
    	margin: 0;
    	text-align: center;
    }
    .content{
    	width: 100%;
    	height: 100%;
    	position: relative;
    }
    #topbar {
    	width: 100%;
    	height: 100px;
    	background: #eee;
    	z-index: 3;
    	position: absolute;
    	top: 0;
    	box-sizing: border-box;
    	padding-top: 21px;
    	font-size: 200%;
    }
    #page{
    	width: 100%;
    	height: 50%;
    	background: #aaa;
    	margin-top: -50px;
    	z-index: 2;
    	position: absolute;
    	top: 100px;
    	box-sizing: border-box;
    	padding-top: 11%;;
    	font-size: 200%;
    }
    #sidebar {
    	width: 100%;
    	height: 50%;
    	background: #666;
    	z-index: 1;
    	position: absolute;
    	bottom: 0;
    	box-sizing: border-box;
    	padding-top: 11%;
    	font-size: 200%;
    }

    Автор, не забывай ставить отметку, Решение найдено..
    Ответ написан
  • Kак мне сверстать сайт?

    reskwer
    @reskwer
    front-end developer
    Верстка без PSD и Не имея шрифтов.. codepen.io/reskwer/pen/JoEXWP
    Что получилось :)
    1fc8f66c9a8c4d7db33edac04b94cca7.jpg
    index.html
    <!DOCTYPE html>
    <html lang="ru-RU">
    <head>
    	<meta charset="UTF-8">
    	<meta name="author" content="reskwer">
    	<title>Что-то на CodePen</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div class="block">
    		<span>News</span><span>|</span><span>15 october 2011 - 18:32</span>
    		<h1>Lorem ipsum dolor.</h1>
    		<img src="http://placehold.it/250x150" alt="img">
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus dicta, neque suscipit amet ipsa, quidem, nisi ratione non ex magni et excepturi quaerat atque facere ad facilis, explicabo accusantium magnam.</p>
    		<a href="#">read more</a>
    	</div>
    </body>
    </html>

    style.css
    body{
    	font-family: tahoma,verdana,arial;
    	padding: 25px;
    }
    .block{
    	width: 600px;
    	height: 250px;
    	border-bottom: 2px dotted #ccc;
    	position: relative;
    }
    .block img{
    	float: left;
    	margin: 0 8% 0 1%;
    	border: 3px solid #000;
    	border-radius: 3px;
    }
    .block span:nth-child(1){
    	font: italic 120% tahoma;
    }
    .block span:nth-child(2){
    	color: #ccc;
    	display: inline-block;
    	padding: 0 15px;
    }
    .block span:nth-child(3){
    	font-size: 80%;
    	color: #ccc;
    }
    .block h1{
    	font-size: 140%;
    }
    .block a{
    	display: block;
    	background: #eee;
    	color: black;
    	font-style: italic;
    	width: 100px;
    	height: 22px;
    	position: absolute;
    	right: 20px;
    	text-align: center;
    	text-decoration: none;
    }
    Ответ написан
    2 комментария
  • Как сделать что бы при наведении на картинку появлялось описание?

    reskwer
    @reskwer
    front-end developer
    Ну как то так смотрите codepen.io/reskwer/pen/jEyWew
    файл Index.html
    <!DOCTYPE html>
    <html lang="ru-RU">
    <head>
    	<meta charset="UTF-8">
    	<meta name="author" content="reskwer">
    	<title>Что-то на CodePen</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div class="block">
    		<div class="prewive">
    		Какаето подсказка<br>И еще подсказка
    		</div>
    		<img src="http://placehold.it/150x200" alt="img">
    	</div>
    </body>
    </html>


    Второй файл CSS style.css
    .block{
    	width: 150px;
    	height: 200px;
    	position: relative;
    	border: 1px solid #000;
    }
    .block img{
    	width: 100%;
    	height: 100%;
    }
    .block .prewive{
    	display: none;
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	padding: 15% 3%;
    	box-sizing: border-box;
    }
    .block:hover .prewive{
    	display: block;
    	background: rgba(255,255,255,.8);
    	cursor: pointer;
    }

    создайте эти 2 файла, положите в 1 папку, и будет вам счастье, можно красивую анимацию сделать transition - но думаю это перебор уже.
    Ответ написан
    Комментировать