Капли дождя

Демка 1, Демка 2

Демку выложил Marek Brodziak в своем блоге, там же можно почитать рассказ о разработке. Жалко не сделал такой скринсейвер. 

Читать далее »

Планы на Twitter Bootstrap 3.0


  • Removed all i18n tags from Mustache templates. No more {{_i}} and {{/i}} in the docs templates, just raw HTML.
  • Consolidated the Scaffolding and Base CSS pages into a new CSS page. Helps simplify where to find CSS-related things and removes a bunch of overhead in the docs.
  • ❑ Add full gallery showcase page to expand on homepage highlights.
  • ❑ Add variables to dictate page titles for docs pages (rather than abstract from file name). Would improve capitalization, enable more accurate titles, etc.

Global CSS

  • Dropped support for IE7. Removed all * hacks, such as *zoom: 1;, and other IE7-specific lines of CSS.
  • Dropped support for Firefox 3.6. Removed -moz-box-shadow instances and button inner padding hacks.
  • All variables now use dashes instead of camelCase. For example, it's now @body-background instead of @bodyBackground.
  • Responsive CSS is no longer separate. All responsive features are now compiled into the core bootstrap.css file. Separate files are no longer required, and have thus been removed.
  • Removed all color variables (e.g., @blue@orange, etc). New, more meaningful variables are on their way (such as@state-warning-text).
  • Removed .border-radius() and .border-*-*-radius mixins. As only Android 2.1, iOS 3.2, and older desktop browsers require a prefixed version, we've removed the base mixin. Since we no longer require prefixes for independent corners, we've dropped those mixins as well. Mixins for a single side, however, are still in use.
  • Removed layouts.less. Since it only held styles .container and .container-fluid, and the fluid container has been removed (see next section), we move the default .container styles to grid.less.
  • Changed name of clearfix mixin. Mixin itself is now .clear_float() and class is .clearfix. Currently Less doesn't support using a class with the same name as the mixin, thus the change to support the "no classes in mixins.less" attitude.
  • ❑ Standardize use of .*-important and .*-danger classes. Includes buttons, labels, badges, text, alerts. and progress bars.
  • ❑ Update clearfix docs to reflect CSS changes.

Layout and grid system

  • Dropped all things fluid. We removed the fluid grid system, fluid container, and fluid layout.
  • Overhauled default grid system. Now uses percentage widths, padding, and box-sizing: border-box instead of pixel widths and margins. Nesting and offsets remain the same.
  • Removed dedicated table grid system classes.
  • .container now uses max-width instead of width. Helps resolve some issues with containers in components like navbars.


  • Dropped the @altFontFamily variable.


  • Updated box modal for inputs. Switched to box-sizing: border-box; and width: 100%; by default for all textual inputs. This means you'll need to specify a size for inputs, whereas before 3.0 inputs had a set width (around 220px) to start.
  • Deprecated .input-prepend and .input-append for .input-group.
  • ❑ Finish implementing new input groups with segmented button dropdowns.
  • ❑ Separate single button dropdowns from segmented button dropdowns with unique classes.
  • ❑ Rename button group to segmented controller.
  • ❑ Allow form field states to apply to individual inputs.


  • Converted to Glyphicons v1.7 @font-face, dropping the old PNGs.

Buttons and button groups

  • ❑ Refactor to allow dropdowns within button groups
  • ❑ Separate classes for regular button dropdown and segmented button dropdown

Labels and badges

  • ❑ Consolidate down to a single component with a modifier.

Hero unit

  • ❑ Convert class to .jumbotron.


  • Removed the .nav-list option to simplify nav offerings.
  • ❑ Instead, .nav-stacked will be a modifier class for tabs and pills to achieve virtually the same component.
  • ❑ Improve collapsed navbar behavior for better handling of dropdowns and other content.


  • Dropped the .thumbnails meta component. Instead of special HTML and CSS for grid sizing, just use the grid system itself.
  • Individual .thumbnail styles are still available, but for sizing, require a parent with a set width (e.g., grid columns).


We might punt this to a 3.1 release, but I want to record this here for a heads up to keep momentum going after 3.0.

  • ❑ Realigned aesthetics
  • ❑ No more inner modal scrolling. Instead, modals will grow to house their content and the page scroll to house the modal.
  • ❑ Maybe: Three size options (normal, large, and small).
  • ❑ Maybe: Improved vertical and horizontal positioning.

What's being punted

  • Redesigned carousel. Should ideally include new next/prev controls, vertical option, and indicators
Читать далее »

W3C объявили о завершении работы над спецификациями HTML 5 и Сanvas 2D, а также о начале работы над HTML 5.1

Как сегодня заявил председатель W3C HTML Working Group Пол Коттон: «Новые функции не будут включены в итоговые рекомендации HTML5 или Canvas2D. Некоторые функции отмечены 'группой риска', но разработчики и компании могут рассчитывать на то, что все остальные оcтанутся в финальных рекомендациях HTML5 и Canvas2D».

«Чем шире охват web-технологии, тем больше заинтересованных сторон требует стабильных стандартов», – сказал генеральный директор W3C Джеф Джейф сегодня утром. «На сегодняшний день компании знают, что они могут возложить на HTML5 и что будет востребовано в ближайшие годы. Кроме того, разработчики будут иметь в виду, какие навыки развивать, чтобы работать со смартфонами, автомобилями, телевизорами, электронными книгами и другими устройствами».


Читать далее »

Как сделать стрелочки для всплывающих сообщений

Треугольнички на чистом CSS

Где-то на просторах интернета мной был честно подсмотрен оригинальный способ создания прямоугольных треугольничков с помощью CSS-свойства border.

Вот пример направленного вверх треугольника высотой 10 пикселей и шириной 20 пикселей.

.triangle { position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #e0e0e0; }

В данном случае у нас получился блок нулевого размера с видимой нижней рамкой и прозрачными боковыми. Но у этого способа есть недостаток — в некоторых браузерах (например, Firefox) в месте перехода нижней рамки в боковую будет наблюдаться неприятная темная окантовка, так как истинный цвет боковых рамок будет черным. Поэтому заменим transparent на rgba(224, 224, 224, 0).

.triangle { position: absolute; border-left: 10px solid rgba(224, 224, 224, 0); border-right: 10px solid rgba(224, 224, 224, 0); border-bottom: 10px solid #e0e0e0; }

Полученный результат будет без указанного выше недостатка.


Читать далее »

CSS версии для печати

Правила страницы для печати

1. Современные браузеры умеют удалять фоновое изображение. Однако желательно добавлятьbackground-image: none, чтобы старые браузеры тоже умели это.

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


Читать далее »

Советы по увеличению производительности

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

Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.

Топ-10 советов о том, как увеличить скорость загрузки страницы

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

Читать далее »

Какие функции HTML5 использовать?

Иногда не совсем понятно какие функции HTML5 уже поддерживаются всеми современными браузерами и их можно использовать безо всяких дополнительных интрументов, а какие надо использовать аккуратно, попутно встраивая в сайт напильник для браузера, чтобы модная фишка могла нормально отображаться в нем. Нашел недавно сайт https://html5please.us/, в котором просто и понятно расписано что и как. Есть функция, для нее отображается можно ли ее использовать просто так, или надо обязательно использовать с ней дополнительный интрумент. Удобно. 

Читать далее »

Статья про LESS на Хабре


LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в CSS. Он вводит переменные, операции, function-like элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.

LESS: программируемый язык стилей

Для тех, кто хочет разобраться в LESS - самое оно!

Читать далее »

Twitter bootstrap

Twitter bootstrapКогда надо по-быстрому сделать что-нибудь красивое, то очень помогает Twitter Bootstrap. Что это такое? Это файлики .css и .js, которые помогут сделать ваши элементы интерфейса как у твиттера. То есть кнопки, списки, поля ввода и так далее станут выглядеть круто, современно и красиво при минимальных усилиях с вашей стороны.

Подробное описание на английском, вместе с примерами: https://twitter.github.com/bootstrap/ 

Также имеется поддержка Less. 

Читать далее »
Scroll To Top