Рубрика «css» - 107

LESS? — мнение обывателя-верстальщика или дизайнера со стажем

2014-08-15 в 10:35, admin, рубрики: css, less, web

Приветствую всех! Меня зовут Сергей, я живу в Самаре, мне 37 и я бородат, но только тогда, когда сила созидания побеждает во мне все остальные физиологические процессы… Сегодня я поделюсь с вами своим опытом практического использования LESS. Что уж говорить, LESS моден и, как известно, в IT среде используется всеми, кому не лень… иногда даже вопреки здравому смыслу.

Что же такое LESS? Less — язык! Но язык ли это? Говоря словами обывателя-верстальщика: пишем некий код, компилируем его, а на выходе получаем все тот же CSS.
… и тут мне почему-то сразу вспомнилось выражение коллеги-программиста Феди, с которым мы в шутку каждый раз испытываем мировоззрения друг друга. Так вот, он говорил: «Долой рюшечки! Вперед функционал!» Понятно, что для дизайнера эти слова — просто «ножом по сердцу».

Но мы немного отвлеклись и, в общем, суть не в этом.
Читать полностью »

Несколько интересностей и полезностей для веб-разработчика #25

2014-08-11 в 19:59, admin, рубрики: css, html, javascript, веб-дизайн, Веб-разработка

Доброго времени суток, уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Tracking.js

Крошечная библиотека ( всего 7 кб ) содержит в себе различные техники компьютерного зрения в вебе. Tracking.js уже позволяет отслеживать различные объекты, цвета, лица как на фотографиях, так и с помощью веб-камеры. Проект собрал уже почти 2000 звезд на GitHub.

  var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors.on('track', function(event) {
    if (event.data.length === 0) {
      // No colors were detected in this frame.
    } else {
      event.data.forEach(function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
      });
    }
  });

  tracking.track('#myVideo', colors);

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

Советы front-end разработчику

2014-08-01 в 9:58, admin, рубрики: css, front-end разработка, html, Веб-разработка, верстка, советы начинающим

Привет, читатель хабра.
Ты наверное сразу спросишь меня: «Да кто ты такой, чтобы давать мне советы?». Итак, немного обо мне.
Первое мое общение с HTML и CSS было 10 лет назад, еще в школе, когда у меня только появился интернет, и я понял что тоже хочу делать странички, которые сможет увидеть весь мир. С тех пор у меня есть как минимум 5 полных лет опыта разработки сайтов по-взрослому. Сейчас я могу без лишней скромности сказать, что сверстал я уже пару сотен сайтов, большинство из которых, как ни странно, совершенно не совпадают с моими текущими требованиями к верстке.
Я не хочу рассказывать как надо делать, эта статья результат моего опыта и попытка написать рекомендации тем, кто только начинает, хотя и для матерых верстальщиков (слово режущие слух) здесь могут найтись интересные идеи.
Если ты заинтересовался прошу под кат…
Читать полностью »

Голые пятницы #1

2014-08-01 в 8:14, admin, рубрики: css, html, Блог компании Wargaming.net, верстка

голые пятницы

Всем доброго времени суток. Сегодня мы поговорим о том, как красиво оформить выделенный текст, совладать с отступами в кнопках, прокачать скролл в мобильных браузерах, скрестить цвет текста с цветом границ, а также рассмотрим интересные новые единицы измерения.
Читать полностью »

Как мы делали FrontTalks

2014-07-28 в 11:34, admin, рубрики: css, javascript, Веб-разработка, фронтенд

С чего всё началось / Идея

На дворе стоял холодный январь 2013 года. За окном было где-то -30. Все, чего хотелось — закинуться чашкой-другой кофе, закутаться в плед и сидеть у камина. Но возбужденный взгляд Миши Давыдова и уверенность в победе долго томиться не дали:

— Олег, есть идея! Давай организуем встречу по типу MoscowJS, почитаем докладов, будет круто!
— Хм… давай!

В итоге решили, что для встреч по JS контента будет слишком мало, и взяли весь frontend. Так и началась история одной из ведущих на сегодняшний день frontend-тусовок Екатеринбурга – FrontTalks.

Как мы делали FrontTalks

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

Sass maps: отзывчивый дизайн без рутинных вычислений

2014-07-28 в 10:47, admin, рубрики: css, responsive web design, sass

Предисловие

Получив в свое распоряжение очередной psd файл, я уже знал список требований к будущему сайту, в одном из пунктов которых числился отзывчивый дизайн. Работу над ним начал с разметки главной страницы и в тот же момент подумал как было бы хорошо не использовать большинству известную формулу (target / context * 100 = result) приведенную в книге Итана Маркотта «Отзывчивый веб-дизайн», а сразу писать ширину каждого блока в пикселях, предварительно замерив ее в Photoshop, при этом получать все в процентах. Мысль мне показалась неплохая и я решил погуглить и попытаться найти что то по интересующему меня вопросу, но, к сожалению, мне не удалось разыскать что либо полезное. Ну, что ж, подумал я, раз нет ничего готового, способного мне помочь, тогда нужно сделать это самому. В данном вопросе я полагался на препроцессор Sass, который уже не раз помогал мне избежать лишней головной боли и строчек кода. К тому же я уже знал о существовании в Sass новых типов данных таких как lists и maps. Первый мне был не интересен, а вот без последнего моя затея потерпела бы краха. Основная идея состояла в том, что мне известна ширина каждого блока и сумма ширин блоков с одним уровнем вложенности равна 100% и если препроцессор позволит мне нужным образом обработать эти данные, то задавая ширину в пикселях, я мог на выходе получить ее в процентах не заботясь о вычислениях.
Читать полностью »

Изображения в верстке. Хватит это терпеть

2014-07-28 в 8:06, admin, рубрики: css, highdpi, retina display, svg, web-разработка, веб-дизайн, Веб-разработка, верстка, ретина

Изображения в верстке. Хватит это терпеть

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

Несколько интересностей и полезностей для веб-разработчика #24

2014-07-27 в 13:50, admin, рубрики: css, html, javascript, веб-дизайн, Веб-разработка

Webhook

Webhook — это платформа для создания сайтов. Важно не путать со статическими генераторами, потому что это именно «CMS builder». Проект успешно завершил кампанию на Kickstarter 14 мая этого года, где смог собрать сумму в два раза большую, чем было необходимо. А буквально недавно состоялся релиз первой версии продукта. Webhook построен с использованием NodeJS, Grunt и Firebase для реалтайма, работает на Windows, Linux и Mac, внутри целая система виджетов со множеством вариаций на выходе, «Django-like templating» с помощью Swig JS, кроссплатформенная админ панель и еще целый ряд плюсов.

# Install Webhook through npm
npm install grunt-cli wh

# Create your first site
wh create my_awesome_site

# Load the local runserver
cd my_awesome_site
wh serve

# Make your website live
wh deploy

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

CSScomb 3.0: красивый код одной командой

2014-07-23 в 7:17, admin, рубрики: css, Веб-разработка

На этой неделе вышла новая версия CSScomb — инструмента, который делает CSS-код красивым. О том, как «расчёску» используют в Яндексе, недавно писал Beyondtheclouds. Я же расскажу, что нового появилось в третьей версии и что делать, если базовой функциональности не хватает. Например, как написать свой плагин или даже постпроцессор.
Читать полностью »

Использование элементов, в качестве фоновых изображений при помощи -moz-element

2014-07-19 в 16:22, admin, рубрики: css, css3, html, mozilla, vendor prefixes, web-разработка, Веб-разработка, верстка

Перевод статьи «Use Elements as Background Images with -moz-element», David Walsh

Все мы знаем, что все браузерные вендоры по своему определяют многие CSS и JavaScript фичи, и я благодарен им за это. Mozilla и WebKit предлагают свои интересные проприетарные свойства, и хотя, как мы знаем, утверждение стандартов происходит годами, намного дольше чем стоило бы, мы все должны быть за это благодарны. Есть одно интересное CSS свойство о котором вы наверняка еще не слышали — -moz-element, это реализованное Mozill'ой CSS свойство, которое позволяет разработчикам использовать HTML элементы в качестве фонов для других элементов!

Смотреть демо

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

Информация

Комментарии

Рекомендуем

Рубрика «css» - 107

LESS? — мнение обывателя-верстальщика или дизайнера со стажем

Несколько интересностей и полезностей для веб-разработчика #25

Tracking.js

Советы front-end разработчику

Голые пятницы #1

Как мы делали FrontTalks

С чего всё началось / Идея

Sass maps: отзывчивый дизайн без рутинных вычислений

Предисловие

Изображения в верстке. Хватит это терпеть

Несколько интересностей и полезностей для веб-разработчика #24

Webhook

CSScomb 3.0: красивый код одной командой

Использование элементов, в качестве фоновых изображений при помощи -moz-element

Смотреть демо