"CSS Live". Сверстай свой мир

Сегодня я проснулся с каким-то странным чувством. Мне как будто казалось, что что-то должно произойти. Я вошёл в скайп и не ошибся! Меня уже поджидал Илья Стрельцын (@SelenIT2) с неожиданным решением одной известной задачи, связанной с очисткой потока.

Я полагаю, многие верстальщики уже догадались – о чём идёт речь, а если нет, то перед тем, как переходить к решению Ильи, давайте немного освежим память и вкратце рассмотрим несколько известных методов, а так же их достоинства и недостатки.

Я попробовал много вещей, которые вы можете сделать с CSS свойством "mask". С помощью этого свойства вы сможете наложить маску или обрезать любой элемент. В роли маски может выступать как PNG, так и SVG.

Я связывал маски со свойствами transform и transition и добился крутого эффекта для галереи изображений. Я сделал демо для Chrome и ночных сборок Webkit. Firefox тоже поддерживает свойство mask, но не очень хорошо отображает вращающиеся изображения с масками, поэтому я использовал только префикс -webkit для этого демо.

Я думаю, что вы уже видели, анимированные меню с эффектом LavaLamp (на основе плагина JQuery). Сегодня я хотел бы вам рассказать, как повторить то же поведение только на чистом CSS3 (без JavaScript). В нашем меню я буду использовать CSS3 transitions (для анимации элементов). Итак, если вы готовы, давайте начинать.

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

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

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

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

В общем что говорить, это нужно увидеть!