Задать вопрос
  • Как расположить два блока подряд?

    Symphony
    @Symphony Куратор тега HTML
    Тостер уже не тот
    Ответ написан
    Комментировать
  • Как писать на коде CSS?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Как будто Promt перевел текст с русского на русский х_х
    position - позиционирование элемента относительно родителя и соседей.
    margin - отступ снаружи блока, НЕ изменяет его размеры
    padding - отступ внутри блока, изменяет его размеры
    float - это вообще обтекаемость

    Столько статей про позиционирование написано
    Ответ написан
    Комментировать
  • Нужен ли цикл статей о Entity Framework?

    donkaban
    @donkaban
    Умею рисовать тени
    Я думаю, после прочтения любой книги вам стоит писать цикл статей.
    Окружающие же очевидно:
    1. Не знают ангийского
    2. Мечтают узнать об описанной технологии именно из ваших уст
    3. Не доверяют всяким иностранным геям - авторам.
    Ответ написан
    3 комментария
  • Как стилизовать форму? Select, checkbox, placeholder, etc?

    @IceJOKER
    Web/Android developer
    select - обрамить каким-нибудь div-ом, сместить его стрелочку за блок и вместо него вставить свою картинку.
    checkbox/radio я стилизирую так - убираю нахрен стандартный вид за 100500 пикселей и вместо них ставлю свою картинку (label в помощь, чтоб их можно было отмечать)

    а placeholder - один способ написал 7rulnik или можно javascript-ом сделать редактируемы блок и оформить его как input, чтоб достичь такого эффекта как на скрине
    Ответ написан
    3 комментария
  • Почему греется новый Acer Aspire?

    Diman89
    @Diman89
    Как вариант - без питания используется встроенное видео, с питанием - переключается на внешнее -> большее потребление -> большая производительность -> больший нагрев
    Ответ написан
    4 комментария
  • Есть хороший мануал по bootstrap 3 на русском?

    Vanger
    @Vanger
    А что не так с getbootstrap.com там же знаний английского надо 5 класс 1 четверть.
    Ответ написан
    1 комментарий
  • Как разместить inline-block'и друг под другом?

    AndruSender
    @AndruSender
    <br/>
    Решает :)
    Ответ написан
    Комментировать
  • Кроссбраузерная верска. Как ее реализовать?

    Symphony
    @Symphony Куратор тега CSS
    Надо подправить вон там и дописать несколько свойств с этой стороны
    Ответ написан
    Комментировать
  • Как организовать что-бы при наводке на картинку, подсвечивался элемент?

    soorax
    @soorax
    Веб дизайнер
    Оберните весь код допустим в див с классом .cc и в стиле пропишите
    .cc:hover a {
    color: red;
    }
    Ответ написан
    Комментировать
  • Как правильно сверстать div ленту?

    thewind
    @thewind
    php программист, front / backend developer
    Попробуйте JS библиотеку masonry.desandro.com - всё будет красиво!
    Ответ написан
    2 комментария
  • Редактор кода на linux?

    Vanger
    @Vanger
    sublimetext?
    webstorm?
    Ответ написан
    Комментировать
  • Можно ли соваться на Одеск с таким уровнем работы(фронтэнд)?

    mr_T
    @mr_T
    Web-разработчик
    Сам верстаю много, так что попробую дать советы, но это чисто мое мнение, поэтому постарайтесь реагировать на это соответствующе :)

    Сначала по вопросам непосредственно в этом посте:
    1) Заказчик может такое принять, а может и не принять - тут зависит от того, насколько он дотошен, вот и все . В любом случае нужно понимать, что редко бывает так, что заказчик что-то понимает в том, что вы делаете, поэтому его "хотелки" скорее всего будут относится к его субъективному восприятию внешнего вида сайта. Но так же нужно понимать еще и то, что внимание к мелочам дает хороший результат на это восприятие в том числе :)
    2) Лично я делаю так, чтобы в шаблоне просто можно было написать что-то вроде
    <? foreach ($slide in $slides): ?>

    <? endforeach; ?>
    и не париться о том, что произойдет дальше (в разумных пределах, конечно - чаще всего слайды должны быть определенных размеров, но об этом нужно говорить).

    Теперь по вашему коду:
    1) Попробуй использовать sass/less с автопрефиксами, компассами и пр. - очень будет удобно писать стили.
    2) Лично я крайне редко пользуюсь сторонними слайдерами, поскольку они часто используют кучу невнятных классов, дивов, врапперов, иннер-врапперов, аутер-врапперов, контейнеров и т.д., хотя чаще всего достаточно несколько строк в js, задача которых просто давать нужные классы нужным слайдам, и анимации в css - в итоге так даже быстрее, чем настраивать под себя какой-нибудь сторонний jquery слайдер. А если один раз сделать заготовку на будущее, то вообще все за пару минут можно сделать.
    3) Вместо спрайтов во многих случаях лучше использовать шрифтовые иконки (например, с icomoon.io). Например, для значков соц-сетей. Из приятных бонусов - шрифты можно красить в любой цвет и анимировать, а так же они векторные, что позволяет не париться по поводу дисплеев с высокой четкостью. Можно еще svg, но с ними немного сложнее, зато гибко.
    4) Обычно на подобных сайтах лепят фиксированное меню, которое сужается при прокрутке ниже (что, кстати, опять-таки решается css transition'ами и парой строк в js для задания класса типа small).
    5) #link-services feature лучше сделать не section, а article или figure - так будет правильнее семантически. А section'ами лучше сделать #link-services, #link-portfolio и т.п. Почитай на любом ресурсе о семантическом значении html5 тегов, там много интересного можешь найти :)
    6) Я бы как-то выделил элементы формы при фокусе, сделал их поконтрастнее, а то на некоторых экранах текст может сливаться с фоном инпута.
    7) p.section-description лучше сделать без класса вообще, а в css задать общий стиль для всех абзацев, изменяя его в конкретных случаях при необходимости.
    8) Раз уж сайт такой весь из себя анимированный, то что ж вы не сделали анимацию ссылок :) ? Хотя бы на работах в портфолио обязательно нужно это сделать, причем недостаточно просто картинок, нужны как минимум еще заголовки, которые могут, например, всплывать по наведению. Очень красиво получаются в таких моментах анимации transform: scale(...) вместе с opacity.
    9) header и footer не всегда по одному в одном документе, эти элементы могу вкладываться так же и в article или section. Как следствие лучше дать своим body > header и body > footer внятные классы или айдишники, иллюстрирующие их принадлежность ко всей странице, а не к отдельным блокам.
    10) .feature > aside я могу быть не прав, но мне кажется, что это семантически неверно. Aside должен показывать какую-то часть документа, которая помогает ориентироваться в контенте на сайте (например, фильтры, боковое меню). В твоем случае это просто иконка, так что тут лучше обойтись просто div'ом.
    11) По js: у вас какой-то странный блок сверху, где задаются глобальные переменные. Вы там используете jQuery, при этом не помещая код в $(document).ready. Весь код jQuery, связанный с селекторами (как минимум) всегда должен быть внутри ready. Да и какие-то странные конструкции там вроде var buttonAll = $('.works-button')[0], которые потом используются снова как $(buttonAll). Лучше в buttonAll записать строки с селекторами тогда уж, а не использовать jQuery 2 раза для одного и того же. Да и конструкции вроде $('.works-button')[0,1,2,3] довольно опасны. Тут лучше дать каждой кнопке какой-нибудь атрибут типа data-category (или вообще в href писать #category-name), и написать один обработчик для всех этих кнопок, который просто фильтрует работы по значению этого атрибута. Так будет проще в будущем что-то поменять, при этом совершенно не затрагивая код js.

    В общем, как-то так.
    Ответ написан
    4 комментария
  • Как быстро из html переписать в php ?

    Я так понимаю вопрос немного в другом. У человека есть набор HTML. Так называемый статический сайт. Ему нужно сделать из него динамический. Что бы данные брались из базы.

    Автор, я прав?
    Ответ написан
    2 комментария
  • Как быстро из html переписать в php ?

    Небольшое отступление. Предлагаю прочесть Капитал Маркса. Он там много рассуждает о том, что "быстро", "что-угодно" в "что-угодно" при нажатии одной кнопки лишено какой-либо стоимости.
    Может быть, Маркс ответил уже давно на Ваш вопрос.
    Ответ написан
    Комментировать
  • Как убрать отступ слева?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Не благодарите.
    KHMKji4.png
    Ответ написан
    2 комментария
  • Жив ли Vanilla.js?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    То есть вы реально не знаете что такое vanila.js? Вы либо тролль либо не подходите под эту вакансию...

    vanilla-js.com
    Ответ написан
    21 комментарий
  • Как осуществить подключение нескольких шрифтов в css?

    Zoxon
    @Zoxon
    Веб-разработчик
    @font-face {
    font-family: "PT Serif";
      src: url("../fonts/ptserif-normal.eot");
      src: local('☺'), 
      url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-normal.woff") format("woff"),
      url("../fonts/ptserif-normal.ttf") format("truetype"), 
      url("../fonts/ptserif-normal.svg#PT Serif") format("svg");
    
      font-weight: normal;
      font-style: normal;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-bold.eot");
      src: local('☺'), 
      url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-bold.woff") format("woff"), 
      url("../fonts/ptserif-bold.ttf") format("truetype"), 
      url("../fonts/ptserif-bold.svg#PT Serif") format("svg");
    
      font-weight: bold;
      font-style: normal;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-italic.eot");
      src: local('☺'), 
      url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-italic.woff") format("woff"), 
      url("../fonts/ptserif-italic.ttf") format("truetype"), 
      url("../fonts/ptserif-italic.svg#PT Serif") format("svg");
    
      font-weight: normal;
      font-style: italic;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-bolditalic.eot");
      src: local('☺'), 
      url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-bolditalic.woff") format("woff"), 
      url("../fonts/ptserif-bolditalic.ttf") format("truetype"), 
      url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg");
    
      font-weight: bold;
      font-style: italic;
    }


    В font-weight можно использовать не ключевые слова, а цифры

    100 Ultra Light
    200 Thin
    300 Light
    400 Regular, Normal
    500 Roman
    600 Medium, SemiBold
    700 Bold
    800 Heavy, ExtraBold
    900 Black

    При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

    UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
    Svg нужен для Safari версии ниже 5.1

    Подробнее смотрите на caniuse.com

    Хорошая статья на эту тему nicothin.pro/page/web-fonts

    @font-face { 
      font-family: 'Web font'; 
      src: url('webfont.woff2') format('woff2'), 
           url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
           url('webfont.woff') format('woff'); 
      font-weight: normal; 
      font-style: normal; 
    }
    Ответ написан
    4 комментария