Метка «верстка» - 5

в 14:42, , рубрики: web-разработка, веб-дизайн, Веб-разработка, верстка, макет, метки: , , ,
Данный пост не претендует на полноценную статью и не является рекламным, а всего лишь небольшой lifehack, который может немного упростить жизнь верстальщикам

Наверное, каждый нормальный web-верстальщик задавался вопросом: «Как удобнее сверять макет с уже готовой вёрсткой», ну или что-то вроде этого. Сегодня я тоже задался этим вопросом.

Первая мысль, которая пришла в голову, это «Было бы неплохо быстро изменять прозрачность окон». Насколько я знаю, в Windows 7 нет такой функции. Немного погуглив я в этом окончательно убедился. Но поиски на этом не остановились. Позже я набрёл на замечательную программу, под названием: See Through Windows.
Читать полностью »

в 15:23, , рубрики: bem, css, css3, БЭМ, верстка, яндекс, метки: , , , ,

Про БЭМ (методология написания CSS от Яндекс — Блок__Элемент_Модификатор ← наиболее правильная запись расшифровки) нынче можно услышать на каждом шагу. Дело оказалось благим и покатилось по миру. Яндекс даже полез в W3C (связано это или нет — не знаю, но надеюсь, что да).

Думаю многие, кто ещё не пробовал, но прочитал описание БЭМ, задаются справедливым вопросом: «какая практическая польза от всего этого действа?» На самом деле, не смотря на то самое развёрнутое описание, конкретно уловить основную «фишку» довольно сложно. Описано конечно много плюсов и общее ощущение от методологии положительное, и кажется, что вроде как и не плохо бы попробовать, но нехватает чего-то конкретного. Прямо вот примера на живом что ли. Вот у меня сайт, вот вёрстка не по БЭМ, почему я должен всё менять? Особенно, если учесть тот факт, что БЭМ в принципе отметает все селекторы кроме классов, неужто за это время столько умных мужей в W3C не осознали, что всё настолько неправильно?

За сим возьму на себя смелость привести несколько примеров с которыми вы (конечно если вы каким-то образом связаны с вёрсткой) сталкиваетесь, не побоюсь этого слова, ежедневно. И что изменится в таких ситуациях если бы вёрстка была изначально выполнена в БЭМ.Читать полностью »

в 12:53, , рубрики: веб-дизайн, Веб-разработка, верстка, виртуализация, виртуализация приложений, тестирование, метки: , ,

Практическая виртуализация для верстальщиков на win* Я долго время искал инструмент благодаря которому можно было бы запускать различные версии браузеров без их фактической установки. Но т. к. я плохо искал единственный рабочий способ для меня посей день были виртуальные машины. Незнаю как вам, но по мне — не очень удобный способ тестировать верстку.

Буквально сегодня мне нужно было быстро проверить верстку сайта в Safari. Под рукой ничего подходящего не оказалось и пришлось как это говорится «гуглить». В результате «гугления» я попал на spoon.net/ и честно признаюсь, что сначала даже не придал особого значения этому сервису. Зарегистрировался и установил плагин.
Читать полностью »

в 14:54, , рубрики: css, html, анимация, веб-дизайн, верстка, маркетинг, промо-сайт, метки: , , , ,

Может быть, вы уже и видели промо сайт Nissan Note, но на мой взгляд он стоит того, чтобы веб-дизайнеры обратили на него внимание.

Очень простой, но элегантный и оригинальный прием: огромная простыня с картинками превращается в анимированную презентацию при быстрой прокрутке страницы.

Не открывайте ссылку на мобильном интернете! Размер страницы больше 20Мб.
Промо-сайт Nissan Note

Эффект отличный — сайт явно понравится запомнится посетителям, тем более с качеством японских сетей.

Немного технической статистики

По информации из Google Chrome:

  • общее число запросов: 289;
  • размер: 25.98Мб;
  • время загрузки на моём ноуте: 1,3 мин;
  • число «полезных» картинок: 46 (столько насчитал я);

Читать полностью »

в 22:16, , рубрики: bugs, css, html, Веб-разработка, верстка, ошибки на сайте, метки: , , , ,

Каждый, кому приходилось заниматься разработкой сайтов, знает об ошибках браузеров.

Однако до сегодняшнего дня я думал, что нужно хотя бы использовать хитрые конструкции CSS, вложенные иерархии DIV-ов и таблиц, всякие float-ы и коллапсирующиеся margin-ы, чтобы налететь на реальную ошибку.

Я был уверен, что существует хотя бы одна ситуация, когда можно не опасаться никаких засад и приколов: мы всегда можем обернуть фрагмент обычного текста обыкновенным DIV-ом (display:block; и float:none;) и быть уверенными, что наш текст останется внутри него:

<DIV>
Этот текст никогда не выйдет за пределы обычного DIV-а!
</DIV>

Но на самом деле нет пределов в этом жестоком мире браузерного маразма…
Читать полностью »

в 6:13, , рубрики: csv, Веб-разработка, верстка, верстка сайтов, Дизайн в IT, дизайн сайта, дизайн сайтов, интернет-магазин, метки: , , , , , ,

Не многие разработчики наполняют сайт реальными, или похожими на них, данными. В большинстве случаев все заканчивается созданием категорий Тест1, Тест2… и товаров Товар1, Товар2… Естественно, это не может отразить/показать настоящее поведение сайта/шаблона. Если с товаром еще не всегда все плохо, то с категориями почти всегда что-то не в порядке. Читать полностью »

в 9:39, , рубрики: css, float, html, Веб-разработка, верстка, метки: , , ,

О практических применениях свойства float
Каждый хороший верстальщик скажет, что только безукоризненное знание собственной работы способно принести позитивные результаты. Собственные наблюдения привели меня к выводу, что не только начинающие верстальщики не совсем понимают сути применения свойства float. На Хабре просмотрел имеющиеся публикации на данную тематику. Появилось желание поделиться некоторыми замечаниями и практическими применениями данного свойства. Приведенные ниже разъяснения в большинстве своем могут стать полезными для начинающего верстальщика.
Читать полностью »

в 8:23, , рубрики: css, css3, html, html5, internet explorer, web-разработка, Веб-разработка, верстка, сайты, метки: , , , , , , ,

Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).
Читать полностью »

в 8:48, , рубрики: css, html, верстка, Песочница, метки: , ,

Эта статья, является в первую очередь ответом на недавно вышедшую статью: «Простые правила простой вёрстки».
Автор пригласил написать ответ, высказать свой взгляд на эти примеры и рекомендации, этим приглашением ниже я и намерен воспользоваться. (Читать оригинальную статью перед тем, как зайти под кат — обязательно!)
Читать полностью »

в 12:22, , рубрики: Foundation, адаптивный дизайн, веб-дизайн, верстка, Мобильный веб, переводы, метки: , ,
Джонатан Смайли | Перевод Главмастера | Оригинал

 

Погружение в адаптивную вёрстку с Foundation

На свете уже толпа мобильных устройств с полным доступом в интернет. Все со своими возможностями и ограничениями, определяющимися стилем, размером и разрешением экрана, формой. Без вариантов одно — они набрали ход, по уровню жора трафика, оставивший позади стационарные компы. И для того, чтобы уже в следующем году не выкатывать вёрстку, вызывающую желание избегать возврата на сайт, вэбмастерам чесаться надо уже вчера.
Читать полностью »

1...456...7
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js