hetsketch

Да, пожалуй просто вешать классы из JS правильнее. Так и сделаю @Igor Schnaider, спасибо! То что надо)

@Igor Schnaider, да, забыл указать, что пробовал с visibility, но тогда второй блок остается в потоке документа(при visibility: hidden), а мне нужно, чтобы был только один блок.

Приветствую всех! В общем на html странице есть 2 блока: с приветствием и кнопкой и второй блок с калькулятором. Хотелось бы сделать, чтобы при нажатии на кнопку первый блок плавно сдвигался влево и исчезал(как бы за границу экрана), а второй плавно появлялся на его месте. Все как бы работает, но как я понял display:block ломает всю анимацию, то есть второй блок появляется не плавно. Подскажите как лучше это реализовать. Хотелось бы просто, без jQuery. Вот код <div id="content"> <div id="welcome"> <a href="#" id="try-it"/> </div> <div id="calc-wrapper"> </div> </div> #welcome { transition: all 1s ease-in; } #calc-wrapper { display: none; opacity: 0; transition: opacity 1.5s; } 'use strict'; let welcome = document.getElementById('welcome'); let tryIt = document.getElementById('try-it'); let wrapper = document.getElementById('calc-wrapper'); tryIt.addEventListener('click', function (event) { welcome.style = "transform: translate(-100%, 0);"; setInterval(function () { welcome.style = "display: none;"; wrapper.style = "display:block; opacity:1;"; }, 1000); });

@Q4Dizzy, спасибо! Не знал, как эта штука называется, поэтому не смог найти в гугле. Буду ее юзать

Собственно, есть вот такой блок(картинка внизу). При нажатии на пункт, он должен разворачиваться. Открытым может быть только один пункт. Но у меня пока другая проблема, я никак не могу понять, как мне задать обработчик для каждого пункта по отдельности. Например, когда я нажимаю на первый элемент, то открываться должен только он, у меня получается, что открываются все. Вот то, что я наваял на JS. Прошу сильно не пинать, это только 2й макет). <div class="work-type"> <div class="work-item"> <span>Photography</span> <i class="fa fa-angle-down" aria-hidden="true"></i> </div> <p class="desc">Lorem</p> <div class="work-item"> <span>Photography</span> <i class="fa fa-angle-down" aria-hidden="true"></i> </div> <p class="desc">Lorem</p> </div> $(document).ready(function() { var workItem = $('.work-item'); var workDesc = $('.desc'); var arrow = $('.work-item i'); $(workItem).on('click', function(e) { workDesc.slideToggle(); if ($(arrow).hasClass('fa-angle-down')) { $(arrow).removeClass('fa-angle-down'); $(arrow).addClass('fa-angle-up'); workItem.css('margin-bottom', '0'); } else{ $(arrow).removeClass('fa-angle-up'); $(arrow).addClass('fa-angle-down'); workItem.css('margin-bottom', '10px'); } }); });

Короче проблему решил так: создал свой миксин, который из спрайта вытягивает иконку по номеру. И в цикле каждому nth-child(i) задавал i-ю иконку с помощью миксина. @mixin add-icon($sprite-url, $image-width, $n, $offset-x: 0) background-image: url($sprite-url) @if $n == 1 background-position: 0 0 @else background-position: ($n - 1)*($image-width+$offset-x)*(-1) 0px @for $i from 1 through 6 & :nth-child(#{$i}) .service-item &:before @include add-icon("../img/icons.png", 32px, $i, 10px) Всем спасибо за ответы

@andrey7287, да уж... Это пока сложно для моего понимания) Как я понял код написан на SCSS, сейчас пытаюсь в нем разобраться. Попробую сделать без компаса пока, правда не очень хорошо понимаю, как это всё реализовать. Ну а вообще подход делать через background правильный? Или это не так принципиально?

В общем, есть такой блок(см. прикрепленные файлы). Так же есть спрайт с иконками для каждого пункта. Я написал такой код для каждого айтема. И у меня возник такой вопрос: как лучше разместить иконки в айтеме? Читал, что нужно делать в CSS через background, но тогда придется дублировать код и нужно будет давать уникальные имена айтемам. Или же всё таки в этом случае использовать тэг img? Хотелось бы услышать мнение бывалого специалиста) p.s. для разметки использовалась сетка bootstrap <div class="row"> <div class="services"> <div class="col-md-4"> <div class="service-item"> <h3>Photography</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, itaque.</p> </div> </div> ... </div> </div>

@npofopr, хм, мне кажется, что ваш вариант даже лучше. В смысле гибкости больше, во внутренний див можно поместить всё что угодно.

@npofopr, вы имеете в виду на одном слое градиент, а на 2м иконка с текстом?

Ребят, спасибо всем! Я даже не ожидал, что тут так быстро отвечают. Воспользовался советом @Switch74. @npofopr, спасибо за годные примеры! Возник еще такой вопрос: как лучше разместить текст с иконкой? Если бы просто текст, то понятно. Пихаешь в content и все. А как туда добавить ещё и иконку(шрифтовую)?

Всем привет! Такой вопрос: как при наведении на <img> наложить полупрозрачный градиент средствами CSS поверх картинки? Структура HTML такая: <div class="item"> <img src="/img/about-us-1.png" alt="#"> </div> Пример: справа - нормальная картинка, слева при наведении.