ВХОД/РЕГИСТРАЦИЯБЛОГИЛЮДИ
интересное общение, дискуссии

→ → → →

ИТ Сила CSS, или Новые технологии в интернете

    Денис Загорский
    Денис Загорский 6 мар 2012
    С помощью CSS (каскадные таблицы стилей) можно творить интереснейшие вещи. Все знают, что обычный рисунок при увеличении сильно теряет в качестве. Это потому, что он состоит из пикселей, квадратных точек. Но если задавать именно форму и цвет объекта, его можно увеличивать до бесконечности — он никогда не ухудшится. Это называется векторной графикой. Она сложнее в освоении, у нее есть свои ограничения, но для некоторых задач она подходит просто превосходно, ибо рисунок, получающийся с помощью нее может «весить» в несколько раз меньше, а качество — выше.
    Вот яркий пример ее потенциального применения:
    css.jpg
    Это процесс разработки одного сайта. Глаза сделаны просто для веселья.:)
    Делается сайт полностью на CSS, почти без обычных картинок, из-за чего масштабирование просто фантастическое, а весит совсем мало. Чем быстрее все перейдут на CSS-графику, тем скорее сайты будут выглядеть замечательно на любом устройстве, даже на замечательных iPhone 4 и 4S, новом iPad (3-е поколение) и на любых других устройствах с экраном высокого разрешения, а также страницы будут грузиться быстрее.
    Ну, а пока многие еще ленятся/не могут изучать новые технологии, у меня есть некоторая фора перед другими веб-дизайнерами. :p
    Макарчук Юрий и Анна Затонская нравится это.
    Макарчук Юрий
    Макарчук Юрий 16 мар 2012
    Чем быстрее все перейдут на CSS-графику, тем скорее сайты будут выглядеть замечательно на любом устройстве
    Чем быстрее мы сделаем сайт, тем быстрее люди будут приучаться к СSS, особенно если проект будет иметь хороший успех (на что я очень надеюсь) ;)
    Анна Затонская и Денис Загорский нравится это.
    Денис Загорский
    Денис Загорский 16 мар 2012
    Макарчук Юрий:↑
    Чем быстрее мы сделаем сайт, тем быстрее люди будут приучаться к СSS, особенно если проект будет иметь хороший успех (на что я очень надеюсь) ;)
    Все, пошел делать 3D-движок для наших тучек! ;)
    ЗЫ. На CSS. :p
    Eugene
    Eugene 11 фев 2013
    Что значит "Чем быстрее все перейдут на CSS-графику, тем скорее сайты будут выглядеть замечательно"?
    В смысле что создаются маленькие векторные изображения и потом их масштабировать?
    И что такое ксс-графика?
    Денис Загорский
    Денис Загорский 12 фев 2013
    Это имитация различных форм средствами только CSS. Например, овал — с помощью border-radius и т.д. Иногда получаются очень эффективно: весит мало, а выглядит очень четко и качественно. Но чаще всего выгоднее использовать комбинацию векторной графики и CSS-оформления.

    Eugene:↑
    Что значит "Чем быстрее все перейдут на CSS-графику, тем скорее сайты будут выглядеть замечательно"?
    В смысле что создаются маленькие векторные изображения и потом их масштабировать?
    Векторные рисунки безразмерны (как и CSS). Их можно масштабировать до любого размера без потери в качестве, а обычные растровые — нет.
    А замечательно выглядеть они будут потому, что даже на экранах ультра-современных ноутбуков от Apple с разрешением 2800х1800 (модель еще совсем новая) твой дизайн сохранит задуманный внешний вид и даже лучше — ведь он использует преимущества новых экранов.
    Eugene
    Eugene 12 фев 2013
    Насколько я знаю, все так и делают. То что можно изобразить средствами ксс, делается. По-крайней мере я других не видел. Да и это легче, чем вставлять, например, овальные изображения
    Денис Загорский
    Денис Загорский 12 фев 2013
    Да, но я продемонстрировал самый примитивный пример. :) Есть и более сложные. :)
    ЗЫ. Например, пальму я хотел рисовать на CSS по-началу, но не получилось сделать реалистично и компактно по размеру. Поэтому — супер-оптимизированный SVG, векторный формат.
    Eugene
    Eugene 13 фев 2013
    Разве возможно такую пальму в ксс сделать?
    Денис Загорский
    Денис Загорский 15 фев 2013
    Да. :) Очень сложно, но возможно. Вероятно, нужно будет попробовать еще раз как-нибудь, хотя я нынче стал изучать до самых деталей специфику формата SVG и уже готов разработать систему супер-сжатия векторов без потерь. И все сугубо на JavaScript. :)
    Денис Загорский
    Денис Загорский 15 фев 2013
    Eugene:↑
    Насколько я знаю, все так и делают. То что можно изобразить средствами ксс, делается. По-крайней мере я других не видел.
    Кстати, все, да не все. Например, на Фейсбук до сих пор спрайтовые растровые скругления миниатюр аватарок. Хотя, может уже что-то и изменил господин Цукерберг, но еще какой-то месяц-другой назад я этому искренне удивлялся. Павел Дуров в этом смысле пошустрее.
    Eugene
    Eugene 15 фев 2013
    А пальму не одним же "дивом" делать? Если не одним то на словах сделать довольно легко. А если одним, то не понимаю как это возможно.
    Кстати, ты знаешь про "box-sizing:"? Какой тип ты предпочитаешь: content-box или border-box?
    Денис Загорский
    Денис Загорский 15 фев 2013
    Eugene:↑
    А пальму не одним же "дивом" делать? Если не одним то на словах сделать довольно легко. А если одним, то не понимаю как это возможно.
    Конечно не одним... :)
    Я тоже думал будет довольно легко. Попробуй. :) В процессе вылазит куча веселых моментов.
    Eugene:↑
    Кстати, ты знаешь про "box-sizing:"? Какой тип ты предпочитаешь: content-box или border-box?
    Конечно знаю, но мне это свойство не доводилось использовать. Всегда юзаю дефолтное значение, которое от границ — border-box. Просто учитываю рамки при разработке. А как тут можно предпочитать? :)
    Eugene
    Eugene 15 фев 2013
    Дефолт - content-box. Тут расчет полей ведется от контента
    А если поставить border-box, то от границ. Это типа "Ты, ксс, как хочешь, а размеры дива не менять". Такой мысли придерживается IE а по Стандарту W3C, правильным является content-box.
    При content-box, когда ставишь padding то он отсчитывается от контента и прибаляет размеров самому диву. А border-box отсчитывает padding от границ дива
    Денис Загорский
    Денис Загорский 16 фев 2013
    Тю, значит я не до конца врубился. Я думал это касается точки отсчета для позиционирования блока. :) В любом случае, я его не юзаю, ибо считаю стандартный вариант приемлемым и правильным.
    Кстати, у Експлорера вечно какая-то хрень с border. Все не как у людей.
    Eugene
    Eugene 16 фев 2013
    Кстати, у Експлорера вечно какая-то хрень с border. Все не как у людей.
    Это да. Но так как они предлагают делать, легче немного.
    Денис Загорский
    Денис Загорский 16 фев 2013
    Сложно сказать. Это не труднее и не легче, мне кажется. Это просто так, данность. Но логичнее все-таки у остальных, ибо позиционирование должно идти от начала бокса, а рамка — часть бокса, по любому. Также и контент-бокс: мне важно, чтобы сохранился внутренний размер бокса, ибо там и происходит вся «магия», если его размер изменится, собьется все позиционирование. Что, для каждого изменения рамки переписывать размеры или позиционирование?.. И как раздражает, что приходится подстраиваться под таких «выскочек», которые считают, что их правила чем-то лучше общих стандартов — Internet Explorer. Чего ребятки из Мелкософта так решили?..
    Денис Загорский
    Денис Загорский 16 фев 2013
    Хорошо, что есть выбор свойств. :)

    ЗЫ. Доля ИЕ уже низка, слава Богу! :)
    Eugene
    Eugene 16 фев 2013
    ЗЫ. Доля ИЕ уже низка, слава Богу!
    Но и про них не нужно забывать. Нужно оптимизировать под IE для солидности
    Денис Загорский
    Денис Загорский 17 фев 2013
    Моя позиция на этот счет: у тебя старый браузер или ИЕ менее 8-й версии — не увидишь красоты, но контент просмотреть сможешь.
    Eugene
    Eugene 18 фев 2013
    Нужна помощь
    Ситуация:
    У меня есть 3 блока с информацией. Информация разная (В каждом блоке разный контент). Контент может меняться, по-этому фиксированной высоты нет. Эти 3 блока должны быть одинаковы (высота, (ширина)).
    Как сделать, чтобы высота 3 блоков определялась по самому большому из них?