Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
MaryT

Mary Солнечная

IT люблю
  • 26
    вклад
  • 47
    вопросов
  • 57
    ответов
  • 26%
    решений
Ответы
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Что нужно знать для автоматизированного тестирования?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    соглашусь с комментаторами выше: язык программирования + гугол это сильные вещи.
    Тут уже был похожий вопрос:
    С чего начать путь тестировщика автоматизатора?
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Какие предметы необходимо сдавать при поступлении на инженера-технолога; инженера-программиста; программиста, техника?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    не тратьте время на поступление на программиста - это бестолковая затея, на том же youtube быстрее и лучше научитесь
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как сверстать файл из psd?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Вы видимо плохо понимаете как происходит сам процесс верстки. Разумеется... надо самому все верстать!

    То есть надо вытаскивать все картинки из получившегося после "сохранить в web" файла и самому все верстать

    Нет.Вы должны вытаскивать картиночки уже из psd. Вы открываете psd, выбираете слой с картиночкой и сохраняете его в png/jpg. Сохранять картиночки/иконочки/узорчики все отдельно в папку.
    А верстать все ручечками надо!
    В интернете просто огромное кол-во туториалов/видеоканалов где все просто пошажачно рассказывается, любому школьнику понятно. Любой запрос на ютюбе - верстка сайта из psd приведет вас к правильным действиям и решению
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как компилировать Sass?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Ccыль
    у него же - sass
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как раскомментировать HTML?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    ctrl+shift+/ ?
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как реализовать подобную функцию выбора этажа?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Тыц
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • В каком редакторе лучше верстать?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Попробуйте Brackets, классный редактор
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Почему не появляется тень на картинке?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Надо добавить блоку #news
    position:relative; z-index:1;
    а картинке:
    position: relative;
     z-index: -1;

    Тыц

    теперь css такой:
    .clearfix:after{
      content:'';
      display:table;
      clear:both;
    }
    #news a{
      display:block;
    }
    #news {
      float: left;
      width: 100%;
      height: 300px;
      background: #3E3E3E;
      position: relative;
      z-index: 1;
    }
    
    #news article {
      width: 400px;
      height: 250px;
      margin: 15px;
      box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.6);  /*Тень*/
    }
    
    #news article img {
      width: 400px;
      height: 250px;
      position: relative;
      z-index: -10;
    }
    
    #news article h1 {
      position: absolute;
      top: 190px;
      left: 15px;
      font-size: 1.1em;
      color: #FFF;
    }
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему на моб. версии иконка на карте зарезается?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Проблемы не только на телефоне, но и на десктопе
    Поиграйтесь с этими значениями
    //var image = new google.maps.MarkerImage('http://test3.cf21443.tmweb.ru/wp-content/themes/flame/images/1-06.svg',
    new google.maps.Size(85, 82),
    new google.maps.Point(0,0),
    new google.maps.Point(16, 35));


    подробнее про маркеры
    https://developers.google.com/maps/documentation/j...
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Зачем нужен 'return' при описании тасков в gulpfile.js?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    так красивше)
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как лучше сверстать такой блок со спойлером?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Это самые обыкновенные табы:
    Тыц.
    Только вам надо добавить треугольничек, это тоже просто делается:
    Например, отследить по клику: если есть класс, который делает активным цифру, то показать его треугольник, если нет - не показывать
    Ответ написан более трёх лет назад
    4 комментария
    4 комментария
  • Как подключить шрифт в sass?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Вот так у меня работает:
    @font-face
      font-family: "vera-crouz"
      src: url(../fonts/vera-crouz.ttf)
      src: url(../fonts/vera-crouz.eot)
      src: url(../fonts/vera-crouz.woff)

    все объявления шрифтов должны быть друг за другом, + без запятых
    тоже была проблема, я задавала здесь этот вопрос:
    Тыц
    Ответ написан более трёх лет назад
    5 комментариев
    5 комментариев
  • Какие есть хорошие вертикальные слайдеры/карусельки?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Осторожно! Это не реклама!
    slick!
    vertical/verticalSwiping имеется :) проверено
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему принято навигацию по сайту верстать списком?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Вы можете сделать абсолютно все дивами, но это будет семантически неправильное решение. Вот даже логически если порассуждать:
    меню — это перечень ссылок.
    Перечень - какой-то список.
    В итоге у нас получится семантически правильный код
    Тыц
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как в Bootstrap скрыть элемент на смартфонах?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    ну вообще, по идее, других вариантов нет.
    .hidden-* (xs) и правда должен скрыть ваш блок. Посмотрите, может где-то какие-то стили или скрипты перебивают
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как сделать такой эффект с градиентами?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    стоило заглянуть в sourses, а тааам... чудеса! :)

    //gradient animations
        var colors = new Array(
            [62,35,255],
            [60,255,60],
            [255,35,98],
            [45,175,230],
            [255,0,255],
            [255,128,0]);
    
        var step = 0;
    //color table indices for:
    // current color left
    // next color left
    // current color right
    
    // next color right
        var colorIndices = [0,1,2,3];
    
    //transition speed
        var gradientSpeed = 0.002;
    
        function updateGradient()
        {
    
            if ( $===undefined ) return;
    
            var c0_0 = colors[colorIndices[0]];
            var c0_1 = colors[colorIndices[1]];
            var c1_0 = colors[colorIndices[2]];
            var c1_1 = colors[colorIndices[3]];
    
            var istep = 1 - step;
            var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
            var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
            var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
            var color1 = "rgb("+r1+","+g1+","+b1+")";
    
            var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
            var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
            var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
            var color2 = "rgb("+r2+","+g2+","+b2+")";
    
            $('#gradient').css({
                background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
                background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
    
            step += gradientSpeed;
            if ( step >= 1 )
            {
                step %= 1;
                colorIndices[0] = colorIndices[1];
                colorIndices[2] = colorIndices[3];
    
                //pick two new target color indices
                //do not pick the same as the current one
                colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
                colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
            }
        }
    
        setInterval(updateGradient,10);
    
    });
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему никто не используют все возможности bootstrap?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Bootstrap можно использовать, если:
    1) нет определенного дизайна или предпочтений для дизайна нет дизайна (сайтик-визитка, админка какая-нить)
    2) когда дизайнер сделал макет по бутстраповской сетке :)
    3) когда вы понимаете, что в принципе что-то из бутстрапа подойдет.
    4) когда вы не умеете во флексы :)

    Bootstrap не подходит, если вам нужно сверстать макет с "уникальным" дизайном. :)

    По началу я тоже считала - бутстрап сама гениальность и решение всех моих проблем, но его нельзя везде пихать. Это будет туча переопределений стилей, просто ужас. А если вы видите, что у вас в макете много таких элементов, типа 6 блоков, 4 блока, 2 блока, то почему бы и не вытащить только один компонент с сеткой, запилить его, юзать и никакого геморроя и переопределения?
    PS - как говорится, каждому своё.
    Ответ написан более трёх лет назад
    16 комментариев
    16 комментариев
  • Как сделать переупорядочевание колонок boostrap?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Класс push выполняет перемещение колонок вправо, а класс pull перемещает колонки влево.

    Вам нужно добавить вот этому блоку сol-md-push-12:
    <div class="col-md-4 col-md-offset-2">
                   <div class="manevrennaya">
                        <h1>Она Маневренная!</h1>
                        <p>И легко управляется. Компактная, пройдет в любые двери, войдет в любой лифт.</p>
                        
                    </div>
              </div>


    А вот этому:
    <div class="col-md-5 col-md-offset-1 manevrennayaimg">
           <img src="img/POKEMONSKOLYASKOY.jpg" alt="">
    </div>

    сol-md-pull-12

    Заранее извиняюсь, если ошиблась с цифрой от 1 до 12, но смысл тот же
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Реально ли найти для тренировка psd макет, который будет нормальним?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    так как нету адекватных макетов.

    Вопрос 1: что вы подразумеваете под "адекватностью макетов"? :)
    Совет 1: чтобы научиться верстать, надо верстать все подряд. :)

    но вот в макете только одна картинка с текстом, как верстать другие элементы слайда

    Что вы подразумеваете по другими элементами слайдра? :)
    Если вы не понимаете как делать остальные слайды, то в такой ситуации надо мыслить чуть шире - это не картинка с текстом и кнопками, это слайд, в котором отдельно текст, картинка и кнопка. И вам нужно подумать - так, вот есть слайдер, у него есть какие-то фиксированные размеры, или их нет, как будет заливаться картинка - фоном или просто вставлена img, и всё такое. Вам просто для примера можно брать другие картинки и адаптировать их под ширину вашего слайдера, а не думать "вот тут одна картинка в макете, а где же остальные?". + как вариант в фш в некоторых макетах дизайнеры оставляют скрытыми слоями дополнительные картинки
    <div class="slider">
        <div class="slide-item">
             <p>Далеко далеко, за высокими горами...</p>
             <a href="#">Подробнее</a>
       </div>
        <div class="slide-item">
            <p>Далеко далеко, за высокими горами...</p>
             <a href="#">Подробнее</a>
        </div>
        <div class="slide-item">
             <p>Далеко далеко, за высокими горами...</p>
             <a href="#">Подробнее</a>
        </div>
    </div>


    В таких случаях макет делается х2 от реального размера, и все картинки делаются тоже х2.
    Потом ширина макета, есть макеты с шириной 2к, 4к, как такие верстать

    На такой вопрос тоже уже есть ответ Тыц
    Плюс все еще от макета зависит. Хотелось бы посмотреть чо там, может быть у вас 4к макет с контейнером по центру.
    В любом случае, медиазапросы вам помогут
    Ответ написан более трёх лет назад
    4 комментария
    4 комментария
  • Как это сделано?

    MaryT
    Mary Солнечная @MaryT
    IT люблю
    Не на codepen, но типа таво. Это один из многих вариантов верстки такого блока
    Тыц

    Совет - если хотите научиться - не стоит бездумно копировать. Копируя, не разобравшись, траблов будет в десятки раз больше, что приведет к полному тупизму и неспособности решать самые простые задачи (что уже говорить о программировании)
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
Оценили как «Нравится»
  • 1
  • 2
  • 3
  • Следующие →
Самые активные сегодня
  • Drno
    • 9 ответов
    • 0 вопросов
  • Rsa97
    Rsa97
    • 9 ответов
    • 0 вопросов
  • CityCat4
    CityCat4
    • 6 ответов
    • 0 вопросов
  • Pavel Merkushevich
    • 6 ответов
    • 0 вопросов
  • Leviofanh
    • 4 ответа
    • 1 вопрос
  • vabka
    Василий Банников
    • 5 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Правила
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации