Search
Write a publication
Pull to refresh
1
0
sslord @sslord

User

Send message

Введение в CSS3 Grid Layout. Работаем с сетками

Reading time10 min
Views113K
Update: Часть сведений в данной статье устарели. Рекомендую свежие материалы на css-live.ru.

Введение


intuition game grid

Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

Зачем нужен Grid Layout?


Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна любому веб-верстальщику (да и не только ему): предоставить удобный механизм расположения контента по виртуальной сетке.

В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания. В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float'ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js-библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.

Сплошное удовольствие! Осталось только дождаться широкой поддержки :) Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.
Читать дальше →

Чёртова дюжина советов начинающим верстальщикам. Часть первая

Reading time6 min
Views32K
Доброго времени суток!

Введение


Я являюсь фрилансером. Раньше я не особо задумывался над тем, как и что делают верстальщики. Я делал серверную часть, а мой друг верстал и набивал контент. Совсем недавно мне захотелось попробовать «что и как». Пару дней назад мне на глаза попался материал, который мне очень понравился. Он наглядно обЪяснял, что и как нужно писать. К сожалению, сылку дать не могу, так как я не запаомнил, где располагался сей мануал, но… Казалось бы, можно это и запомнить, но я пошёл ещё одним путём — законспектировал это дело. Собственно, добро пожаловать в мою записку.
Читать дальше →

Float'омания: разъяснение как работает css свойство float

Reading time2 min
Views149K

После того как меня шестьдесят восьмой раз спросили почему блок с float отображается неправильно, я решил написать эту заметку, которая объяснила бы типичные ситуации, с которыми сталкивается начинающий верстальщик, а так же для того, чтобы в следующий раз просто дать ссылку на эту статью.
Читать дальше →

Выбор цветовой палитры по фотографии

Reading time1 min
Views43K
Дизайнер Джессика из компании Seed Design Consultancy занимается подбором оригинальных цветовых палитр для сайтов и предлагает несколько методов, в том числе по произвольному цвету, по рубрикатору тем (осень, минералы, природа). Сейчас она придумала ещё один способ, который несложно реализовать самостоятельно методом статистического анализа.

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


Читать дальше →

Сканируем в 3D с помощью фотоаппарата или 123D Catch

Reading time3 min
Views134K
В современном мире трехмерные технологии стали очень популярны. 3D стремительно и разнообразно входит в жизнь даже обычного человека. Начиная от 3D телевизоров, 3D сканеров и даже принтеров. Хотя последние два устройства в большей степени пока доступны только специалистам. Но технологии не стоят на месте. Появляются трехмерные принтеры стоимостью около $2000, что уже приближает время, когда они появятся, если не у каждого школьника/студента на столе, то как минимум, у каждого инженера или дизайнера. Что касается методов получения трехмерной модели с реального физического объекта, то тут тоже не все однозначно. Требуются наличие либо дорогостоящего лазерного сканера, либо можно попытать счастье с помощью лазерного строительного уровня, веб-камеры и специального программного обеспечения. Наличием всех этих вещей тоже не может похвастаться абсолютно любой человек.
Однако есть очень простой способ “сканировать” объект в 3D модель, используя обычный цифровой фотоаппарат. Как это сделать? Об этом и пойдет речь далее.
Читать дальше →

10 примеров меню для web страниц

Reading time1 min
Views19K
image Эти способы не являются ноу-хау или чем-то в этом духе. Тем не менее, они могут помочь начинающим дизайнерам и web технологам в реализации задуманных ими идей. Каждый из предложенных вариантов можно обыграть по-своему.

Проверял лично и убедился в том, что исправно работает под следующими браузерами:

IE7+, Opera 10.5+, FF 3.6+, Chrome 12+ (linux), Chrome 13+ (windows), Safari 5+(win) исходя из личного опыта, предполагаю о том, что работать исправно будет во всех свежих версиях Safari, FireFox, Opera и Chrome.

С помощью CSS можно построить вот такие вот симпатичные варианты:


Читать дальше →

Опытные мелочи-9, или «Вы больны! Как лечить будем?»

Reading time5 min
Views6.1K
image Продолжение «опытных мелочей». Предыдущие части можно почитать тут.

Время от времени у каждого системного администратора возникает необходимость проверить «подозрительный» компьютер на предмет вредоносного ПО. Или странный трафик с него идет, или странные окошки вылезают, или того хуже какой-нибудь WinLock словили. Я расскажу о простой, почти пошаговой экспресс-методике, которую мы предлагаем нашим саппортерам-новичкам. Кому-то, возможно, она покажется неполной или слишком простой, тем не менее многие проблемы с ее помощью определить можно. А понять проблему — уже половина решения. В любом случае, буду рад прочитать в комментариях ваши дополнения и полезные советы по этому вопросу.

Читать дальше →

Cufón – используйте шрифты, какие душа пожелает

Reading time4 min
Views91K
Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:
  1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
  2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
  3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
  4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
  5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.
Читать дальше →

Стремимся к минимализму (подборка сайтов, где можно черпать вдохновение)

Reading time1 min
Views33K
image
Ни для кого не секрет, что в настоящее время многие стремятся к минимализму в дизайне чего бы то ни было. Действительно, когда нет ничего лишнего, то повышается и восприимчивость информации. Но это все лирика. Сказано было это еще до меня и много. Предлагаю вашему вниманию подборку сайтов, посещение которых может направить ваши мысли по поводу разрабатываемого дизайна в нужное русло.
Читать дальше →

Выбор системы управления задачами, часть 2

Reading time9 min
Views113K
Обзор и сравнение предложенных хабралюдьми систем

Краткое содержание первой части: автор рыщет в поисках системы, которая поможет вдохнуть новую жизнь в отношения между работниками и задачами. Формулирует требования, жалуется на недостатки опробованных систем. Те, кто в теме, советуют автору, чего бы помучить еще.

Вторая часть длинная (да еще и со скриншотами), если тема не интересна — лучше и не начинить читать :)

Мы опробовали в нашей команде некоторые предложенные системы управления задачами, и я отчитываюсь о результатах. Может кому-то будет интересно и полезно, а может кто-то посоветует систему лучше всех остальных (только прошу написать хотя бы несколько слов, о том почему и чем предлагаемая система интересна).
Читать дальше →

Можно ли скрыться от закона «О персональных данных»?

Reading time7 min
Views26K
27 июля 2006 года был принят закон «О персональных данных». Его принятие было связано с ратификацией Россией «Конвенции совета Европы о защите физических лиц при автоматизированной обработке персональных данных». Закон этот был призван установить те требования защиты персональных данных, которые были описаны в этой конвенции. По замыслу законодателей, те компьютерные системы, которые были созданы до даты вступления закона в силу, нужно было привести в соответствие с его требованиями к 1 января 2010 года. Однако, по мере приближения этого срока все очевиднее становилось то, что множество компьютеровладельцев с этим не справятся. Поэтому в самом конце 2009 года, когда до «дня икс» оставалось совсем немного, его сдвинули еще, до 1 января 2011 года. А когда и до этого срока тоже оставалось совсем немного, «полноценное» вступление в силу закона отодвинули еще раз, теперь всего на полгода.

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

Что такое ПД?
Читать дальше →

Анализируй это, или почему я каждый день опаздываю и получаю премию

Reading time5 min
Views23K
Мысль написать эту статью родилась около недели назад, именно тогда, в фирму, где я работаю около 3-х лет мне взяли помощника.

Через пару дней после его выхода на работу, краткого экскурса и небольшой теории, от него прозвучал вопрос: «- А почему тебе так мало платят? Ведь доступность всех служб и сервисов у тебя не менее 99,98% в рабочее время уже как больше года…»

Если честно, то именно этого вопроса я и не ожидал, и ответить в ту же секунду был не готов, но после пяти минут раздумий, все мысли встали на место, я постарался сформулировать ответ, и выдал нечто следующее:
— Во первых, мне нравится моя работа, и я работаю в свое удовольствие.
— Во вторых, я прихожу на работу когда высплюсь (обычно это около обеда), ухожу не позже 18.00, и в любое время могу уйти на 2-3 часа по своим личным делам.
— В третьих, 1500$ не такая уж и маленькая сумма для третьего по величине города России.

А теперь я хочу рассказать о том, как добился этого, и чего мне это стоило. Кому интересно-прошу под кат:
Читать дальше →

Зачем же нужна виртуализация?

Reading time8 min
Views224K
Слово «виртуализация» в последнее время стало какой-то «модой» в ИТ-среде. Все вендоры железа и ПО, все ИТ-компании в один голос кричат, что виртуализация – это круто, современно, и нужно всем. Но, давайте, вместо того, чтобы идти на поводу у маркетинговых лозунгов (а иногда бывают такими, что сам Геббельс умер бы от зависти), попытаемся посмотреть на это модное слово с точки зрения простых «технарей» и решить, нужно нам это или нет.

Читать дальше →

Избавление от нового Winlock`ера

Reading time1 min
Views10K
Вчера мне довелось выковыривать новый Winlock`ер с компьютера коллеги-дизайнера.
Увидев знакомый развод с просьбой отослать смс на номер 3116, я отправился на сайт DrWeb за кодом разблокировки. Но увы — локер оказался новый. Быстро на форумах толком ничего найти не удалось. Решил что будет проще выковырять его вручную.

Локер оказался довольно примитивный.
В безопасном режиме локер также загружался. Следовательно, автозагрузка как место его запуска отпала.
Локер закрывал собой весь экран и перекрывал открываемые, горячими клавишами, окна.
Однако зажав Ctrl+Shift+Esc удалось вызвать мерцание диспетчера задач поверх локера на очень короткие промежутки времени. Видимо из за неторопливости работы в безопасном режиме. При обычной загрузке так не вышло.
В задачах нагло висел один единственный процесс nvcvc32.
Грузился он тоже довольно небрежно — открывалось окно командной строки и очень быстро закрывалось, заменяясь на окно локера. Ловкость рук помогла ткнуть в крестик этого окна до его загрузки. Так я получил чистый рабочий стол. Explorer не загрузился.
Ну а дальше всё по примитивному сценарию. Из папки windows удалил этот nvcvc32.exe.
Оставалось найти загрузчик.
Поиск по реестру места где запускается explorer.exe Вывел на HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Winlogon\Shell.
В этот параметр к explorer.exe был приписан запуск некого rundll.bat, который также лежал в папке windows.

После удаления его и перезагрузки о локере больше ничего не напоминало.

Сегодня он уже появился сайте DrWeb под именем Trojan.Winlock.2925.

На инфицированной машине был установлен Windows XP (родной, это ноутбук).

Веб-дизайн тренды 2011

Reading time6 min
Views13K
Между дизайном и разработкой существует тонкая грань, которая, с переходом в новое десятилетие, становится всё более размытой. Достаточно ли просто нарисовать красивый макет в Фотошопе? Может быть пять лет назад этого и было достаточно. В наши дни среднестатистический пользователь интернета требует большего. Весь лоск сайта со временем надоедает, если в нем нет никакой сути. Если ваша единственная цель поразить дизайнерское сообщество вашими яркими работами долго на плаву вы не продержитесь. 2011 год характеризуется не красотой, а функциональностью. А теперь собственно тренды нового года и ближайшей декады: виртуальная реальность, постоянная связь и интерактивный дизайн.

Как остаться релевантным дизайнером в 2011? Главная цель дизайнера не ослепить, а завлечь. Любой дизайнер может получить «охи» и «ахи», которые легко забываются. Величайший дизайнер способен создать среду, которая чарует и пленяет пользователя так, что он даже и не думает о том, чтобы искать кнопку «назад». Несколько элементов собраны воедино, чтобы создать прекрасный мир в котором есть все: гармония цвета, интуитивный дизайн, легко доступная информация и быстрый отклик. Кроме того, никогда нельзя недооценивать силу простоты. Конечно это всегда было так, но в 2011 вы не только под всепрощающей эгидой десктопов и лэптов. Сейчас ваш дизайн должен справлятся с нетбуками, смартфонами и таблетками. Вы готовы?

Взглянем на ТОП 11 трендов в 2011 году.

Читать дальше →

Свежая подборка jQuery плагинов

Reading time2 min
Views15K
Для меня jQuery ассоциируется с мощной и главное кросс-браузерной JavaScript библиотекой. Можно долго перечислять ее достоинства, холиварить по поводу и без, но думаю, никто не будет против посмотреть подборку интересных плагинов и уроков:
для удобства – каждая картинка ведет на демо

Hover Slide Effect



Демо | Урок
Галерея состоит из нескольких картинок, при наведении на одну из них она эффектно меняется на другую, а при клике на любую картинку — меняются все одновременно.

Остальные плагины

iCamp 2010

Reading time1 min
Views516
iCamp мы посещали уже второй раз. Если кто не знает — это такая неформальная конференция с участием стартаперов, инвесторов и различных экспертов. Встреча эта длится несколько дней (22-25 июля).


Дальше будет много фотографий.
Читать дальше →

10 HTML5 примеров, чтобы вы забыли о Flash

Reading time1 min
Views60K
В последнее время Вы, наверное, много слышали о том, что Flash является умирающей технологией и о том, как она будет вскоре заменена на HTML5. Лично я считаю, что HTML5 будет постепенно заменять Flash лишь для некоторых вещей, но Flash всегда будет иметь место, особенно при разработке сложных игр и насыщенных интернет-приложений. Если вы еще не видите, что можно сделать с помощью HTML5, я ограничусь десятью примерами, чтобы показать некоторые из возможностей HTML5.

image

Так что же вы думаете – HTML5 заменит Flash?

Читать дальше →

Еще один прибитый футер. Переменная высота, блочная верстка, JS опционально

Reading time2 min
Views3.2K
Задача прибивания футера к низу страницы обмусолена с ног до головы. Она неплохо решается для футера фиксированной высоты. А вот для случая, когда высота футера зависит от его содержимого, методов не так много. Либо это очевидное решение на javascript. Либо подгонка для этого элементов, изначально для того не предназначенных. Я, конечно, о таблицах. Хочу предложить способ, который тоже имеет свои недостатки (обо всем ниже), но недостатки эти другие, и, следовательно, может подойти тем, кому первые два не подходят.
Читать дальше →

Information

Rating
Does not participate
Location
Россия
Date of birth
Registered
Activity