Tilonorrinco

Newbie
  • Публикации

    12
  • Зарегистрирован

  • Посещение

  • Дней в лидерах

    2

Последний раз Tilonorrinco выиграл 21 февраля

Публикации Tilonorrinco были самыми популярными!

Репутация

6 Обычная

О Tilonorrinco

  • Звание
    Новичок

Information

  • Sex
    мужской
  1. У меня в примере использованы обычные кавычки, а в макете -- закрывающая "лапка" (”), исправьте в псевдоэлементе content: "”";
  2. John106, 1. Такую же, какую и у дочернего блока wrapper, т.е. .slider { min-width: 1170px; }, аналогично для классов head, foot. 5. Как-то так: https://jsfiddle.net/7ou5cLyo/
  3. John106, 1. При уменьшении экрана обрезаются изображения в блоках foot и slider. Можно назначить им в стилях минимальную ширину, тогда будет норм. При использовании фоновых изображений нужно прописать также и фоновый цвет, похожий на это изображение, чтобы, в случае проблем с загрузкой фоновых изображений текст на этом фоне хорошо читался. При задании шрифтов также полезно помимо основного шрифта прописывать также и несколько безопасных. 2. Тэгу header нужно прописать класс, на будущее, т.к. хедеров может быть несколько на странице. 3. Названия классов не очень информативны. Css сложнее читать, и приходится смотреть в разметку. Что такое line-bot? Что содержится в этом блоке, какое место этот блок занимает по отношению к другим блокам? Сложно сказать, если не заглянуть в html. Еще один пример: блок внутри секции works назван la-works. Не понятно, что такое 'la'. Информативнее, имхо, будет works-item (классика). 4. Уменьшение прозрачности шрифта при наведении на кнопку -- некрасиво. Читабельность пропадает. Цвет текста лучше не изменять, вполне достаточно более темного фона. Такие большие отступы я бы повесил не на саму ссылку, а на slider: прописал бы ему минимальную высоту или что-то в этом роде. А ссылке прописал бы только верхнее поле. А то получается -- удалили кнопку -- slider уменьшился до смешных размеров. 5. С оформлением цитаты как-то сложно вышло. Зачем элемент оформления (кавычка) вынесен в разметку? Можно ведь использовать для этого псевдоэлементы. Почему такие странные поля у параграфа с цитатой (кстати, для такой цитаты можно использовать тег <blockquote>): зачем прописывать ему отступ слева в 217 пикселей, чтобы просто выровнять его по центру?
  4. Так и должно быть. NaN != NaN.
  5. inono, 1. id используются для идентификации элементов страницы при выполнении скриптов, для создания якорей. 2. Псевдоэлементы нужны для создания дополнительных сущностей в коде html и последующей их стилизации. Псевдоэлементы я изучал по книге Макфарланда "Большая книга css", но, мне кажется достаточно будет любой статьи по теме и тренировки в песочнице, там все очень просто: https://habrahabr.ru/post/154319/ 3. по дизайну сайта ничего толкового сказать не могу, т.к. не очень в этих вещах разбираюсь. Как рядовой пользователь могу сказать, что явного неприятия дизайн не вызывает, однако и эмоции "офигенно!" тоже.
  6. 1) Откажитесь от использования id, чтобы не было проблем с каскадностью. (заодно не придется так часто использовать !important, что тоже не очень хорошо) 2) Названия для стилей лучше давать осмысленные, связанные с предназначением блока, а не с его оформлением (класс h1_and_picture -- не есть гуд, класс section-title уже лучше). 3) Самое главное: очень много лишней разметки, цель которой -- только оформление страницы. Все оформление лучше вынести в css: вместо пустых дивов можно использовать псевдоэлементы, вместо бессмысленного <hr> на логотипе просто использовать нижнюю границу у тега h1 или псевдоэлемент. 4) С шапкой очень мудрено вышло, что-то вроде браузерного фотошопа Зачем обрабатывать эту тяжеленную шапку (http://f0115661.xsph.ru/ik_sauna.jpg) в браузере, накладывая дополнительные слои с фильтрами, градиентами и пр., если все это можно сделать в фотошопе и просто вставить одну уже обработанную картинку? Аналогично в подвале: под логотип студии с прозрачными буквами подкладывается дополнительный слой (дополнительный пустой див в разметке) для того, чтобы сделать эти буквы темнее цветом. 5) По тегам: тегов <nav>, <header>, <footer> на странице может быть несколько, поэтому на перспективу лучше сразу же присваивать им классы и задавать стили не элементу, а классу.
  7. SatoRi, на самом деле все просто: https://jsfiddle.net/Tilonorrinco/xgaawnhb/ Здесь псевдоэлемент (тот, который .wrapper:before) стилизован под рамку, растянут по ширине блока-обертки (80% от wrapper) и отцентрирован по-вертикали.
  8. 1) полосы -- фон, который задается либо через изображение, либо через градиент 2) фон этот, скорее всего, присвоен блоку-обертке, который является родительским для двух других блоков (с текстом who we are, what we do) 3) изображения можно обрезать через css, поместив их в контейнер (типа <figure>) с overflow: hidden. Но проще всего обрезать в фотошопе. 4) рамку, разделяющую два блока можно реализовать через псевдоэлемент, присвоенный блоку-обертке, отцентрированный вертикально с помощью абсолютного позиционирования. Псевдоэлемент этот может быть как фиксированной высоты, так и растягивающийся в зависимости от высоты блока-обертки. 5) Сетку можно строить как через флоат, так и через инлайн-блок, у каждого способа свои плюсы и минусы.
  9. fowl, если пользуетесь хромом: 0. переходите на сайт с иконками 1. Нажимаете ctrl+alt+i (или f12) чтобы вызвать инспектор. Появляется новая панель (по умолчанию выходит справа). 2. Жмете ctrl+shift+c (или иконку с изображением стрелки) 3. наводите курсор на то место, где показывается иконка, кликаете. 4. в верхней части панели отображается html код, содержащий инспектируемый элемент (это <div class="lp-address-info lp-address-info-archive lp-icon">). В нижней части -- css код, задающий форматирование элемента. В данном случае видим, что иконка загружается с помощью псевдоэлемента ::before .lp-address-info.lp-icon:before {background: url(../Camafon2/images/icon-map.png);}
  10. Через инспектор (ctrl+shift+i): (http://camafon.ru/wp-content/themes/Camafon2/images/icon-map.png) (http://camafon.ru/wp-content/themes/Camafon2/images/tel.png)
  11. Мужика тоже можно сделать через псевдоэлемент. https://jsfiddle.net/bth3uuL4/3/
  12. Я немного поизвращался в песочнице и получилось вот так: https://jsfiddle.net/bth3uuL4/2/