Так получилось (и прошу считать это удачным совпадением), именно сегодня на Хабре опубликован топик про практическое применение теней из CSS3 для создания интересных эффектов, а мы в свою очередь подготовили топик про основы для этого творчества.

Мы попробуем разобраться в том, как работают тени в новых модулях CSS3. С практической точки зрения, мы рассмотрим два правила: box-shadow и text-shadow, определенные соответственно в модулях CSS3 Backgrounds and Borders и CSS3 Text.

Оба правила работают схожим образом (вплоть до соответствующей отсылки в спецификации), поэтому имеет смысл рассматривать их вместе. Вместе с этим есть некоторые различия, о которых тоже нельзя не сказать.

Первая часть посвещена работе с box-shadow, во второй мы пройдемся по теням для текста.

Привет, Хабр!

Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

После того, как с классическим (от слова класс) наследованием в JS стало вроде-бы все понятно, я решил разобраться с реализацией другого способа повторного использвоания кода — примесями. Несмотря на довольно непривычное название, способ этот чертовски прост.

_{большое разрешение — по клику}

Снова здравствуй, Хабр!

В этом посте я бы хотел рассказать о великолепной программе под названием Nuke от компании The Foundry, которая уже затрагивалась вот в этом посте, но вызвала много вопросов читателей, далеких от 3д графики в общем, и от 3д-композитинга в частности.

Если описать в двух предложениях, то Нюк является мировым стандартом в композитинге и пост-обработке, и был одним из ключевых инструментов в подавляющем большинстве голливудских фильмов с бюджетом, отличным от кустарного.
Да что вообще говорить — Аватар, Трон: Наследие, Трансформеры, Watchmen, Властелины Колец, и большинство остальных голливудских блокбастеров были сделаны именно в Нюке.

Познакомился я с ним примерно три года назад, и сразу же в него влюбился: это одна из самых гениальных программ, что я когда-либо видел — как в плане используемых подходов, так и в плане юзабилити.

В этом посте не урок, а объяснение на пальцах концепций и принципов, на которых он построен — что это за зверь, для чего он нужен, с чем его едят, и насколько он вкусный.

В процессе написания поста я понял, что все, что я хотел бы описать, просто не уместится ни в один пост, ни в цикл статей. Хоть пост и получился длинным, но это вершина айсберга — в нем описывается чуть менее 0.01% всего, чем хочется поделиться.

Интересно?
Добро пожаловать под кат! Осторожно! Много трафика, Джобса, чайников, и надкусанных НЛО.

При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.

С началом существования HTML 5 возможности веб-приложений в браузерах возросли фантастически. Один из примеров – canvas элемент, который позволяет, с помощью JavaScript, рисовать 2D и 3D модели, равно как и растровую графику (bitmaps).

Благодаря этим возможностям, статистические графики могут быть нарисованы прямо в браузере. Типы графиков могут быть различными. В прошлом, чтобы изобразить график, использовались различные подходы. Если внешний вид графика позволял, использовался стандартный HTML и CSS. Однако, подходы для более сложных графиков использовали различные технологии встроенных в браузеры HTML, CSS и JavaScript. Популярным было использование Flash, или графики вычерчивались на сервере, с последующей передачей их изображения клиенту. Эти подходы требовали много времени для поддержки, нарушали консистенцию приложений, вынуждали клиента устанавливать дополнительное ПО и дополнительно нагружали сервера.

По мотивам топика Chosen: сделай выпадающие списки более дружественными.

Довольно симпатичный виджет, иногда даже может быть полезен (допустим когда есть определенные требования к дизайну). Но в данный момент виджет не позволят добавлять позиции динамически, что возмутило товарища alexsrdk, да и меня тоже :) Сейчас попробуем это дело исправить.

Я прилично времени провожу в поездках. Ноутбук всегда с собой, но творчески работать удается не всегда. А вот заниматься монтажом оказывается самое то. В монтаже больше всего времени отнимает просмотр материала и проработка стыков сцен. Особенно это касается «сырого», «стихийного» материала. Когда много дублей, в дублях много брака и приходиться сшивать ролик буквально единственно возможным образом.

Вот незадача: мой ноутбук ASUS UL30A, не тащит хайресное видео в любимом Sony Vegas'e, при работе от батарей. Я молчу о FullHD.

Небольшой, но полезный трюк под катом.

Проблема: При настройке переключения раскладок на ctrl+shift горячие клавиши вида ctrl+shift+ отказываются работать.
Оказывается совсем недавно (буквально месяц назад) Илья Муравьев написал патч, исправляющий данное недоразумение. Суть сводится к тому что переключение языка после патча срабатывает не на нажатие, а на отпускание кнопок ctrl+shift.

Тема про баг четырехлетней давности на лаунчпаде и на фридесктоп.орг. Сам патч.

Перевод статьи 8 Excellent Tools for Optimizing Your Images
К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!

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

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

Простой способ защиты от HTTP DDoS — включить syn-cookies и заблокировать подонков. Но что делать если атакует 5к-10к хостов да еще и с динамическими IP? Тут нам на помощь придет frontend-backend архитектура c промежуточным кэшированием! Почему с промежуточным кэшированием? А потому что в моем случае от шквала запросов от frontend'а backend умирал унося за собой систему.

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

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

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

Что-то никогда я не писал нигде о своем проекте BBZ.RU — портал о breaks музыке, а ведь ему уже почти 5 лет. Все дело в том, что для меня проект никогда не был стартапом, это было хобби, которое началось с того, что мне нравилась музыка в стиле breaks, breakbeat. На тот момент как-то не было в рунете ресурсов, где можно было что-то интересное и актуальное найти по этой тематике.

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

Однажды на форум пришел известный зарубежный музыкант Elite Force и разогнал всю нашу братию нелестными словами о России и пиратстве. Дискуссию так же подняли на нескольких зарубежных тематических сайтах. Пришлось в экстренном порядке убирать с сайте все ссылки на нелегальный контент, вводить новые правила и общаться со всеми участниками дискуссии на всех сайтах, убеждая их, что Россия не так уж плоха, как они думают. Проблему решили, авторитет восстановили.

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

И так узкое место при запуске это загрузка .sqlite, базы данных вашего профиля. При интенсивной работе с Фоксом, базы разрастаются, в них появляются «пустые места», ну и главный недостаток, файл базы данных становится сильно фрагментированными. Для решения подобной проблемы существует специальная команда «очистки», точнее операция пересоздаёт файл базы, но уже без пустых мест. Для этого нужно проделать следующее:

Задача

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

Каждая веб-студия имеет собственные приемы и «фишки» при работе с заказчиком, которые позволяют ей минимизировать риски при разработке интернет-проекта и снижать издержки на каждом этапе работы. По роду своей деятельности в Юмисофт я часто общаюсь с владельцами веб-студий, и вот сейчас у меня наконец дошли руки, чтобы поделиться некоторыми интересными рецептами, услышанными в неформальных беседах. Надеюсь, они будут вам полезны :)

Бат-файлы лишены возможности передавать по сети какую-нибудь полезную информацию друг другу.

Возможности JavaScript в 95% случаев позволяют решить любую задачу для Web 2.0. Но иногда хочется чуточку больше, чуточку красивее, возможно, чуточку быстрее. В этой статье на примерах я хочу показать, как восполнить этих 5% недостающего функционала средствами Flash.
Эта статья будет полезна разработчикам, которые пишут в основном на JavaScript и имеют минимальные знания ActionScript 3.

Для вдохновения

Вдохновил меня на написание этой статьи пример из пакета FancyUpload, реализующий одновременную загрузку нескольких файлов на сервер с симпатичным прогресс-баром в стиле gmail (обратите внимание: можно сразу выбирать несколько файлов).

Этот пример интересен тем, что дизайн и управление контролируется средствами CSS и JavaScript. JavaScript при необходимости использует необходимый функционал из Flash.

Если Вам понравилось, идем дальше: мы рассмотрим как это работает на более простом примере.

Хочется раз и навсегда решить проблему определения языка пользовательского ввода на сайте. Представьте, что я делаю многоязычный Habrahabr :-) и не хочу спрашивать у пользователя, на каком языке он пишет. Думаю, компьютер должен справится с такой проблемой.

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


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