Ответы пользователя по тегу CSS
  • Как убрать прозрачность текста в прозрачном div?

    @Titamik
    Я тут задаю самые глупые вопросы..
    Opacity дает полупрозрачность всему блоку, а не его фону.
    Для того, чтобы сделать полупрозрачным только фон, используйте
    bacground: rgba( r,g,b,0.2);
    Ответ написан
    Комментировать
  • Верстка блока в лендинге - как правильно реализовать+адаптив?

    @Titamik Автор вопроса
    Я тут задаю самые глупые вопросы..
    Ребят, смотрю, многие подписались. Реализовал вот так:
    <section class="container-fluid bl">
         <h2>Сферы применения мобильных <br> расточных станков</h2>
                <div class="sam-boxes">
    				<div class="sam-boxes-holder">
    					<div class="sam-box">
    						<div class="sam-box-holder">
    							<div class="sam-box-frame">
    								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img1.jpg" width="313" height="271" alt="">
    								<div class="text-box">
    									<p>Восстановление изношенных отверстий экскаваторов, подъемных кранов, корпус редукторов. Восстановление отверстий кораблей под гребные винты, рули и проч.</p>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="sam-box">
    						<div class="sam-box-holder">
    							<div class="sam-box-frame">
    								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img2.jpg" width="313" height="271" alt="">
    								<div class="text-box">
    									<p>Энергетическое оборудование: насосы, компрессоры, котлы турбины, барабаны, задвижки, генераторы</p>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="sam-box">
    						<div class="sam-box-holder">
    							<div class="sam-box-frame">
    								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img3.jpg" width="313" height="271" alt="">
    								<div class="text-box">
    									<p>Нефтегазовая промышленность: газоперекачивающие агрегаты, насосные станции, колонны</p>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="sam-box">
    						<div class="sam-box-holder">
    							<div class="sam-box-frame">
    								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img4.jpg" width="313" height="271" alt="">
    								<div class="text-box">
    									<p>Металлургическая промышленность: печи, машины непрерывного литья, прокатные станы, клети</p>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="sam-box">
    						<div class="sam-box-holder">
    							<div class="sam-box-frame">
    								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img5.jpg" width="313" height="271" alt="">
    								<div class="text-box">
    									<p>Железнодорожный транспорт: узлы и агрегаты локомотивов и вагонов, блоки двигателей и прочее</p>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
        </section>

    .sam-boxes{
    	width:1130px;
    	margin:0 auto;
    	background:#fff;
    	text-align:center;
    }
    .sam-boxes:after{
    	content:"";
    	display:block;
    	clear:both;
    }
    .sam-boxes-holder{margin:0 -15px;}
    .sam-box{
    	display:inline-block;
    	vertical-align:top;
    	margin:0 -4px 35px 0;
    	width:33.3333%;
    	padding:0 15px;
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	box-sizing:border-box;
    	position:relative;
    }
    .sam-box .sam-box-holder{
    	width:100%;
    	width:344px;
    	height:297px;
    	position:relative;
    	margin:0 auto;
    }
    .sam-box .sam-box-holder:after{
    	content:"";
    	display:block;
    	clear:both;
    }
    .sam-box .sam-box-frame{
    	width:100%;
    	width:344px;
    	height:297px;
    	overflow:hidden;
    	position:relative;
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	box-sizing:border-box;
    	padding:13px 15px;
    }
    .sam-box:nth-child(1):before{
    	content:"";
    	display:block;
    	position:absolute;
    	width:58px;
    	height:1px;
    	background:url(../img/bg-line-c.png) no-repeat;
    	left:355px;
    	top:148px;
    }
    .sam-box:nth-child(2):before{
    	content:"";
    	display:block;
    	position:absolute;
    	width:58px;
    	height:1px;
    	background:url(../img/bg-line-c.png) no-repeat;
    	left:355px;
    	top:148px;
    }
    .sam-box:nth-child(4):before{
    	content:"";
    	display:block;
    	position:absolute;
    	width:58px;
    	height:1px;
    	background:url(../img/bg-line-c.png) no-repeat;
    	left:355px;
    	top:148px;
    }
    .sam-box .sam-box-holder:after{
    	content:"";
    	display:block;
    	position:absolute;
    	top:0;
    	left:0;
    	background:url(../img/bg-sam-box.png) no-repeat;
    	width:344px;
    	height:297px;
    }
    .sam-box:nth-child(1) .sam-box-holder:before{
    	content:"";
    	display:block;
    	position:absolute;
    	width:30px;
    	height:38px;
    	background:url(../img/bg-line-r.png) no-repeat;
    	left:254px;
    	top:296px;
    }
    .sam-box:nth-child(2) .sam-box-holder:before{
    	content:"";
    	display:block;
    	position:absolute;
    	width:31px;
    	height:38px;
    	background:url(../img/bg-line-l.png) no-repeat;
    	left:60px;
    	top:297px;
    }
    .sam-box:nth-child(3) .sam-box-holder:before{
    	content:"";
    	display:block;
    	position:absolute;
    	width:31px;
    	height:38px;
    	background:url(../img/bg-line-l.png) no-repeat;
    	left:60px;
    	top:297px;
    }
    .sam-box:nth-child(5) .sam-box-holder:before{
    	content:"";
    	display:block;
    	position:absolute;
    	width:31px;
    	height:38px;
    	background:url(../img/bg-line-r.png) no-repeat;
    	left:60px;
    	top:-36px;
    }
    .sam-box img{
    	width:313px;
    	height:271px;
    }
    .sam-box .text-box{
    	position:absolute;
    	left:15px;
    	bottom:13px;
    	width:312px;
    	height:135px;
    	background:url(../img/bg-frame.png) no-repeat;
    	    padding-top: 20px;
    }
    .sam-box p{
    	margin:0;
    	font-family: 'Muller Light';
    	font-size: 13px;
    	color: #f3b2b2;
    	    margin: 0 auto;
        line-height: 12px;
    
    }
    
    .bl h2 {
    	color: #353535;
    	text-align: center;
    	margin-bottom: 80px;
    }


    Где картинки - соответствующие линии - вроде, красиво))
    Ответ написан
  • Принцип работы popup других сервисов?

    @Titamik
    Я тут задаю самые глупые вопросы..
    Ну, подключая скрипт на сайт, он действительно подгружается из сервиса. Скорее всего, для того, чтобы все работало, необходимо прописать уникальный класс или id для блока, который даст скрипту "понять" что превратить в попап
    Ответ написан
    Комментировать
  • Английский для front-end, где брать словарный запас?

    @Titamik
    Я тут задаю самые глупые вопросы..
    Чтение туториалов по актуальным (для Вас) проблемам
    Ответ написан
    Комментировать