Димитрий
-
Posts
55 -
Joined
-
Last visited
-
Days Won
1
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Димитрий
-
-
На сколько я знаю,
normalize еще и исправляет какие то баги с браузерами (почитайте в самом файле),
reset только сбрасывает (думаю с ним многие значения придется переустанавливать).
-
1 минуту назад, AlexZaw сказал:
Почитайте про плотность пикселей на мобильных устройствах и viewport, например тут https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works
Такие вопросы обсуждаются с дизайнером, если макет утвержден то так и верстаете. В учебном же макете никто вам не подскажет правильного решения
Спасибо!
-
3 часа назад, npofopr сказал:
Что вы там большого увидели?
Две картинки на всю ширину экрана. под ними, под видимой частью экрана, футер.
На картинках всё центруется.
- Я про шрифты, для мобилы если брать 320px (ширину) то 80px шрифт явно будет много для мобильно версии, и как мне правильно уменьшать шрифт для мобил с 320px шириной экрана и скажем для 480px ? в макете только для 750px.
Картинками тоже практический такая ситуация, если оставить ширину картинок таким же как в макете то в 665px(высота) будет очень большим в 320px экранах.
3 часа назад, AlexZaw сказал:Как есть так и верстаете, просто макет на 2880 пикселей, на таком мониторе шрифт в 150 пикселей будет нормально смотреться
Если вам для тренировки - найдите другой макет, который влезет на ваш монитор То есть 2880px - это будет максимальная ширина сайта ?
Другой макет - найду а вот с этим я считаю все равно разобраться нужно.2 часа назад, npofopr сказал:Считайте, что он для ретины) т.е. х2
Тупо все делить на 2, а как макеты для кретин верстают ?
-
Кто подскажет как верстать такой макет ?
Шрифты слишком большие, размеры отступов и самой картины тоже.Как мне быть, сверстать так как есть или поменять все отступы и размеры шрифта на более менее подходящую ?
-
-
1 минуту назад, SelenIT сказал:
Я вам больше скажу по секрету — сами редакторы этой спецификации далеко не всё в ней понимают :). Например, что в CSS2.1 не два контекста форматирования (блочный и строчный), а три (есть еще табличный), они поняли только на 14-й год (!) работы над ней — через год после того, как эта спецификация была «окончательно утверждена»
. Так что нормально открывать в ней что-то новое снова и снова и спустя годы Спасибо!!! А то я уж думал что я такой туп***, что не могу разобраться в этой спецификации....
-
19 часов назад, Arxont сказал:
Большое спасибо за ответ)
Я пытался посмотреть спецификацию, но как мне показалось, для меня это пока сложновато (английский пока увы не на том уровне). Хотя стоит попробовать ещё раз, может со второго раза получится понять)
Ух, большое спасибо за информацию. Я уже сломал голову, пока пытался так же сделать.
Я так понял, float: right в классе box позволяет сделать регистрацию и меню справа. А вот float: left в классе logo уже перемещает логотип вправо. Правда я чуть-чуть запутался, почему регистрация и меню в хтмл поменялись местами. Но я так думаю, что это из-за того, что float: right не только выравнивает элемент по правому краю, но ещё и разворачивает блоки. И как я понял тут только вариант поставить регистрацию перед меню? При этом не будет проблем с валидностью или индексированием сайта?
Мне понадобилось 8-9 месяцев чтобы понимать хоть что-то в этой спецификации, даже сейчас я местами чего-либо не понимаю. Так что это нормально. Пиши в лс, если в телеграмме сидишь, а лучше в скайп го ? Там я тебе могу про спецификацию рассказать столько сколько я знаю.
-
14 часа назад, Arxont сказал:
Большое спасибо за ответ. А вот насчёт понимания свойств css. Я прочитал много информации по вёрстке, и она чуть-чуть смешалась у меня в голове. Поэтому я и хотел попрактиковаться. А нет ли случаем статьи или серии статей, где как раз говорится, в каких случаях применяется то или иное свойство? Может кто-нибудь уже собрал базу информации по данному вопросу?
Стандартно то я вроде понимаю, где какое свойство применяется. Но вот на практике начинаю грубо говоря "тупить".
На практике и я туплю. Статью может кто и написал, лично я не видел.
Советую чего не знаешь искать в спецификациях, не зря же они существуют (там кроется ответы на многие вопросы, хотя новичку разбираться там будет очень тяжело, тем не менее знать спецификацию, - я считаю нужно). -
Зачем тебе именно этот макет, что макетов больше нет ? Бери отсюда https://htmlforum.io/forum/31-макеты-для-вёрстки/, и сверстай, или другой какой нить найди бесплатных полно же в инете.
ps: могу скинуть один psd лендос + шрифты к нему, сам верстаю этот сайт, все не как времени нет до верстать.
-
С position удобно позиционировать всякое.
Насчет пытаться верстать, - у Вас не получиться верстать, пока не будете понимать свойства css и знать для чего лучше они подходят. Я советую теорию знать, потом уже пытаться верстать.
-
В 26.09.2017 в 14:13, nightgremlin сказал:
Прикольная штука получилась с Flex
Если для последнего элемента задать другое значение высоты, то оно останется фиксированным. А другие элементы будут растягиваться по родительскому https://jsfiddle.net/Lh843osr/
Может кому будет полезно!
Спецификации так и написано...
-
17 часов назад, SelenIT сказал:
IE4-8 включительно. Которые давно 1) составляют мизерные проценты, 2) работают на таком древнем железе, что лучше не грузить его никакими необязательными красивостями.
Потому что та древняя технология не умеет в разные варианты одного font-family. Там было тупо 1 font-family — 1 файл.
Было дело. Но опять же, очень давно, сама Apple давно не поддерживает те версии iOS и то железо, на котором с нее нельзя обновиться, да и не живут обычно столько даже эпловские девайсы:).
Сейчас woff и woff2 достаточно каждому (с). Даже ttf уже не особо нужен.
А где кроме can i use можно посмотреть, почитать про все браузеры, мобильные/и десктопные которые сейчас актуальны и их нужно поддерживать ?
ps: вроде как не нужно сами браузеры поддерживать, нужно вроде как движки поддерживать.
-
20 часов назад, SelenIT сказал:
eot — очень древняя реализация веб-шрифтов (чуть ли не из IE4!). Они очень многого не умеют. В частности, не умеют объединять разные комбинации font-weight и font-style под общим font-family. И, ЕМНИП, поддерживали всего 4 варианта вообще (normal/italic/bold/bold italic).
Сейчас eot не нужны. IE9+ понимают современный синтакис с woff-шрифтами, а ископаемому старью лучше довольствоваться системными фолбэками.
То есть это только для того чтобы поддерживать ie 4 и выше ?
19 часов назад, AlexZaw сказал:ie6-ie8. т.е., в принципе, нужен только в исключительных случаях
Я сейчас видел на новых сайтах/проектах есть только woff,woff2, и ttf.
А почему svg нету, на сколько я знаю в старых продуктах Apple использовались как раз таки svg? или я что то не то читал ?20 часов назад, AlexZaw сказал:Потому что "SF Pro Display 500" это другой шрифт и в нем 500 уже указывает на жирность шрифта.
Нет, шрифт тот же самый, просто формат шрифта другой...
Вот мне и интересно почему в названии указывается, а не с помощью font-weight ? -
@font-face { font-family:'SF Pro Display'; font-style:normal; font-weight:500; src: local('☺︎'), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.woff2") format("woff2"), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.woff") format("woff"), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.ttf") format("truetype"); /* (C) 2015 Apple Inc. All rights reserved.*/ } @font-face { font-family:'SF Pro Display 500'; src: url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.eot"); /* (C) 2015 Apple Inc. All rights reserved.*/ }
1. Почему при подключении шрифта apple указывает имя шрифту такое font-family: 'SF Pro Display 500'; а где то без 500 font-family:'SF Pro Display'; ?
2. И почему при подключении eot не указывается font-style, и font-weight в то время как сверху указывается ? -
1 час назад, SnowSilver сказал:
Спасибо за информацию. Тогда понятно почему не работает:) Исходник приложил еще раз.
И еще попутно вопрос про шрифты. Я правильно понимаю, что правильнее подключать шрифты для разных начертаний?
Например для DymaxionScript
- обычный
- полужирные
- курсив
- полужирные
не зря же делают шрифту разные начертания отдельно, которые подключаются отдельно
так то по идеи можно было просто подгрузить один(например DymaxionScript c обычным начертанием) и свойсвами font-weight, font-italic задавать нужное начертание
я как то через font-face подключил нестандартный шрифт, задал ему font-weight: bold и применил свойство -webkit-text-stroke для задания контура тексту. И заметил, что полужирность в хроме и мазиле сильно отличаются.
Полагаю, если бы подключил этот шрифт с жирным начертанием, такой разницы скорей всего не было.
Для каждой начертании (font-style: normal/italic), и даже насыщенности (font-weight: 100-900) нужен свой шрифт (то есть отдельный файл).
Насчет отличии в Firefox и Chrome - каждый браузер по своему все делает.
Сайты не должны отображаться в каждом браузере одинаково!
-
51 минуту назад, SnowSilver сказал:
попробовал сконвертировать шритф здесь: http://www.font2web.com/
и действительно, заработало, ура!!! НО...после конвертации "dymaxionscript.ttf" мне в архиве выгрузилось аж в 4 форматах этот шрифт: otf, svg, ttf, woff
там даже html файл демонстрация есть шрифта, после конвертации...в css файле следующее:
@font-face { font-family: 'Conv_dymaxionscript'; src: url('fonts/dymaxionscript.eot'); src: local('☺'), url('fonts/dymaxionscript.woff') format('woff'), url('fonts/dymaxionscript.ttf') format('truetype'), url('fonts/dymaxionscript.svg') format('svg'); font-weight: normal; font-style: normal; }НО, если я закомментирую "url('fonts/dymaxionscript.woff') format('woff')", то отображение текста будет стандартным шрифтом... Почему??? я это стал проверять, чтобы убедиться, что в формате "ttf" - который изначально не работал, заработал... Да и "svg" шрифт получается тоже не работает, браузер даже не подгружает эти шрифты
И еще, там есть подключение src: url('fonts/dymaxionscript.eot'); - этого файла не оказалось, может ошибка какая возникла при конвертации и поэтому его нет...
Их на сколько я знаю нужно проверять на своем браузере (то есть что поддерживается).
Вот тут глянь:
Если я правильно понимаю:
svg - для старых apple продуктов
woff - для новых браузеров
eot - для ie начиная 6 версии
ttf - для старых AndroidЯ этим генератором пользуюсь:
https://www.fontsquirrel.com/tools/webfont-generatorЕще этим сайтом: (чтобы узнать поддержку)
https://caniuse.com/Ps: Я как раз сейчас шрифты изучаю, и все что с ними связанно, го залей куда нибудь вместе попробуем проверить.
-
20 часов назад, SelenIT сказал:
Читайте 2.2 плюс модули. Лучше в редакторских черновиках.
Ну да. Начал читать 2.2, там так и пишут... спасибо за отклик!
-
18 часов назад, SelenIT сказал:
CSS2.2 — та же CSS2, но с исправленными ошибками, найденным после выхода CSS2.1 (напр. в нем не забыт табличный контекст форматирования). Некоторые ошибки еще в процессе исправления/уточнения. В какой-то момент заменит CSS2.1.
CSS3 — неофициальное собирательное название для всего, что вышло после CSS2, независимо от уровня. Модули начинаются либо с 3 уровня (если дополняют то, что было в CSS2), либо с 1 уровня (если вводят что-то принципиально новое). Так что модули 4, 5 и т.д. уровней формально относятся к CSS3 (хотя это звучит дико, поэтому сейчас лучше говорить просто о "языке CSS", без цифр). "Версий" как таковых у CSS сейчас нет.
Получается, читать нужно css 2 + 2.2 (тут я в счет модули не беру) , или же нужно читать 2.2 + модули, а CSS 2, 2.1 не стоит читать ?
19 часов назад, Hasiev сказал:https://www.w3.org/TR/CSS22/ - Читайте на здоровье.
Ответ на Ваш вопрос в первом разделе (Abstract), два последних абзаца.
Вот это мне трудно понять, английский только начал изучать:
Цитата
Уровень 2 уровня CSS поддерживает листы стилей, специфичные для СМИ, чтобы авторы могли адаптировать представление своих документов к визуальным браузерам, слуховым устройствам, принтерам, устройствам Брайля, карманным устройствам и т. Д. Он также поддерживает размещение контента, расположение таблиц, функции интернационализации и некоторые свойства, связанные с пользовательским интерфейсом. -
Правильно ли я понимаю уровни CSS спецификации:
CSS 1 - Устаревшая спецификация.
CSS 2 - Содержит много ошибок.
CSS 2.1 - Та же CSS 2 но исправленными ошибками.
CSS 2.2 - Тут что ? Я не понимаю, объясните люди добрые.
CSS 3 - Модули CSS, с разными уровнями. Разные модули заменяют разный раздел в CSS 2.
CSS 4 - Консорциум говорит что не будет, но посмотрим что на самом деле будет.Для меня не совсем понятно, 2.2 для чего эта спецификация и что она делает ?
-
тогда тут посмотри: https://toster.ru/q/267732
-
1
-
-
2 часа назад, SnowSilver сказал:
Почему браузер не отображает шрифт 'Dymaxion Script' ? Скачивал несколько, но безуспешно
@font-face { font-family: 'Dymaxion Script'; src: url('../fonts/DymaxionScript.ttf'); } div { font-family: 'Dymaxion Script'; font-size: 50px; }Так пробуй:
@font-face { font-family: 'Dymaxion Script'; src: url('../fonts/DymaxionScript.ttf') format('truetype'); }-
1
-
-
В 09.11.2017 в 23:20, jonson92 сказал:
Super_Saimon, например, сайт https://www.kinopoisk.ru/ .Там на фоне картинка, которая плавно перетекает в сплошной черный фон. Вот такого эффекта я хочу добиться. За ресурс спасибо
эта картина сама такая а фон просто указан темным. танки так делали - если вы об этом... (но картинка большая будет)
-
В 06.11.2017 в 09:36, Svetlana_P сказал:
Да, это скроллом, вот статья на эту тему, правда, на английском https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu .И там пример https://codepen.io/stevemckinney/pen/yNBNKa , вам ведь так надо?
На сайте w3schools тоже про это есть, вот статья и тоже с примером https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.aspЕсли не хватает, можете еще поискать примеры по запросу "mobile horizontal scroll menu"
а как нижний скролл убрать ?
-
11 минуту назад, cyklop77 сказал:
а работать кода?
ну, без теории как хорошие сайты делать, верно ?
плохие - работодателю не нужны, заказчику тоже.
Если вам для тренировки - найдите другой макет, который влезет на ваш монитор 
. Так что нормально открывать в ней что-то новое снова и снова и спустя годы
Как верстать большие макеты ?
in HTML Coding
Posted
1. Ну я так понял, что все делить на 2 (макет).
2. А дизайнер нарисовал для ретины - чтобы картинка была для ретина дисплеев ?
3. И еще для ретины, это только изображение увеличивать х2, или еще что то нужно увеличивать ?