Ответы пользователя по тегу CSS
  • Как реализовать работу кнопки "показать полностью"?

    IgorBee
    @IgorBee
    JS,VBS,3D.Web с 07.2015
    Можете ставить сколько угодно таких скрытых блоков,всё будет работать корректно.

    MAjb8aGTGYZLAe.jpg
    function showHideText(elem){   //Вызываем функцию с аргументом в который предается элемент на который был осуществлен клик.
    
       var hideText     = elem.parentElement.querySelector('.hideText');  //Сохраняем элемент на который был произведен клик,поднимаемся выше по родителю и ищем скрытый элемент  текста по классу hideText
    
      hideText.classList.toggle('ShowHideText'); //переключаем если есть такой класс то убираем его если нет,то добавляем. 
     elem.classList.toggle('hide'); //Меняем надпись с "показать текст" на "скрыть текст"
      
      
    }


    В HTML просто установите на кнопку показа onclick="showHideText(this);"

    <div class="opisanie">
                  <h2>Краткое описание</h2>
        
              <p class="hideText">При установке ксенонового оборудования на современные автомобили, оснащенные бортовым компьютером, часто можно столкнуться с тем, что компьютер выдает ошибку в работе системы освещения (загорается соответствующая лампочка на панели приборов). На целом ряде автомобилей это приводит к автоматическому отключению подачи питания на фары. </p>
              <span onclick="showHideText(this);" class="ShowFullText">показать полностью</span>
      </div>


    Код
    Ответ написан
  • Как сделать кнопки + и - для edit?

    IgorBee
    @IgorBee
    JS,VBS,3D.Web с 07.2015
    Как это сделать?


    var pole      = document.querySelector('.pole'); //Цепляем наш form.
    var inputText = document.querySelector('.inputText').value; //Цепляем Input значение которое в нем сейчас,в этой же переменной будем хранить увеличенное или уменьшенное значение
    var elemInp   = document.querySelector('.inputText'); //Цепляем сам элемент Input .
        
        pole.addEventListener('click',function(event){ //Ставим прослушку события клика на From,куда не кликни на From вызовется эта функция
            
            var target=event.target; //Событие target получает элемент на который был осуществлен клик. 
            
            var minus= target.parentElement.classList.contains('minus'); //Сначала пишем target,в нем хранится элемент на который был осуществлен клик ,далее  parentElement ,потому что target вернет самый глубокий элемент а это Bottom, мы от него поднимаемся к его родителю span, далее метод contains он дат <code lang="javascript">
    true
    </code> or <code lang="javascript">
    false
    </code>,если есть такой класс у этого элемента,то есть мы здесь определяем что был осущетсвлен клик именно на элемент minus 
            var plus = target.parentElement.classList.contains('plus');
           
           
            
            if(minus && inputText>=1 ){ --inputText; elemInp.value=inputText;} //делаем проверку условие сработает если был клик на нужный элемент (minus переменная вернет тру или фалс) и чтобы значение инпута было не ниже нуля,а внутри мы сначала у значения инпута снимаем -1 ,a затем записываем новое значение в сам инпут.
            if(plus){ ++inputText; elemInp.value=inputText;}
            
         
          
          
    },false);


    Ваша верстка была незначительно изменена,было добавлено пару классов.

    Держи рабочий код с твоей версткой
    Ответ написан
    Комментировать
  • Можно ли сделать такой слайдер без JS и как?

    IgorBee
    @IgorBee
    JS,VBS,3D.Web с 07.2015
    Да,можно,но зачем?......

    на джс за 20 мин спокойно сделаете.

    на цсс более нескольки часов угробите.

    Кто бубдет тратить здесь нескока часов для написания такого на цсс,я хз....

    ЗЫ.анимацию цсс юзайте и вешайте на цсс событие клик...
    Ответ написан
    Комментировать
  • Как на CSS сделать адаптивный круг?

    IgorBee
    @IgorBee Автор вопроса
    JS,VBS,3D.Web с 07.2015
    div h4 {
        
        background: #009688;
        position: relative;
        display: inline-block;
        width: 100%;
        height: 0;
        padding: 50% 0;
        border-radius: 50%;
    }
    .outsideCircl{
      height:30%;
    }


    Создай див вокруг h4 и этому диву уже ширину задавай,а круг внутри него будет адаптивным
    Ответ написан
    Комментировать
  • Как установить css transition for position: left?

    IgorBee
    @IgorBee Автор вопроса
    JS,VBS,3D.Web с 07.2015
    codepen.io/IgorSun/pen/KMpOLP

    background:#3F3;
            position: absolute;
            left:0px;
           height:200px;
            width:200px;
            -webkit-transition-property: left;
            -webkit-transition-duration: 1.5s;
        }
        #test:hover {
            left:100px;
           
        }
    Ответ написан
    Комментировать
  • Как сверстать такой шаблон?

    IgorBee
    @IgorBee
    JS,VBS,3D.Web с 07.2015
    Готовый вариант
    Создаем блоки и меняем им наклон,а внутри прописываем display: inline-block и противоположную трансформацию для текста,чтобы он был ровным.

    transform: rotate(-45deg);
    ncgTFfe.png
    Ответ написан
    1 комментарий
  • Какой редактор выбрать для работы в html?

    IgorBee
    @IgorBee
    JS,VBS,3D.Web с 07.2015
    Sublime Text 3 или Brackets

    Юзаю оба,поэтому приведу плюсы и минусы.

    Sublime :
    минусы:

    1.Лицензия.
    Требует покупки периодически через каждые 30 сохранней кода требует лицензию оформить,можно просто каждый раз отклонять ,но надоедает.

    2.Не всегда корректно отображает закрывающие теги,поэтому когда ищешь где скобку забыл поставить то бывает трудновато.

    плюсы:
    1.Мало потребляет оперативки 10мб оперативки обычно ему заглаза хватает.
    .

    Brackets
    Плюсы:


    1.Очень удобный и красивый интерфейс .
    2.На русском языке.

    Минусы:
    1.Потребляет больше оперативки чем Саблайм.

    ЗЫ.На ноуте когда у меня октрыто несколько браузеров и десятки вкладок оперативки часто не хватает,поэтому приходится юзать саблайм.

    Вам бы рекомендовал с Brackets начать.

    Удачи.
    Ответ написан
    2 комментария
  • Как сверстать только средствами css эту картинку?

    IgorBee
    @IgorBee
    JS,VBS,3D.Web с 07.2015
    ща попробую сделать дать линк

    Верстка заняла 1,5 часа:
    CSS

    Векторизация заняла 3 минуты:
    Вектор

    Каким методом пользоваться решать вам
    если хотите поддержки на мобильных добавьте префексы.
    Ответ написан
    21 комментарий
  • Почему не влазит асайд справо?

    IgorBee
    @IgorBee Автор вопроса
    JS,VBS,3D.Web с 07.2015
    надо убрать width: 900px;
    Ответ написан
    Комментировать
  • Как через css прописать замену текста в селекторе .pp2?

    IgorBee
    @IgorBee Автор вопроса
    JS,VBS,3D.Web с 07.2015
    #slog {
        color: black;
       
        position: relative;
      }
      #slog::after {
        color: #497349;
        content: "профессор";
        
        position: absolute;
      }


    Как вариант такая конструкция,а Ваши предложения?
    Ответ написан
    Комментировать
  • Почему на одном ПК сайт Тостер ру стал отображаться без форматирования стилей css?

    IgorBee
    @IgorBee
    JS,VBS,3D.Web с 07.2015
    Потому что время у тебя сбито.
    Поправь дату и время на винде.

    детектирую приратскую ОС
    Ответ написан