Трюки

Очень простые CSS3-подсказки со стрелками. Ключём к созданию этих подсказок являются псевдо-элементы (:after и :before). Псевдо-элемент :after получает текст из атрибута "title" с помощью функции "attr()" в качестве своего контента и соответственно стилизуется так, как нам надо. Чтобы создать сами стрелки, используется псевдо-элемент :before, а треугольнички внизу подсказки делаются с помощью границ.

Подсказки становятся видимыми в тот момент, когда пользователь наводит указатель мыши на ссылку. Здесь мы используем псевдо-класс :hover. В итоге получается классный и полезный эффект.

Классные уведомления на CSS3. Их автором является Peter Viszt. 

Я сделал несколько изменений в CSS и HTML, а также добавил Предупреждающие уведомления (блок с жёлтым оттенком). Сами они создавались с помощью нескольких базовых свойств CSS3, например, таких как box-shadow для границ и внутреннего блеска и linear-gradient для фона и т.д.

Простые ссылки вперёд/назад для навигации с закруглеными стрелками на CSS3. В создании стрелок использовался обычный элемент div и два псевдо-элемента  :after и :before. А сами закругления сделаны с помощью border-radius для псевдо-элементов.

Простые и свежие CSS3 Яйца сделаны с помощью border-radius и прямоугольного элемента div. В создании фигуры яйца использованы два значения свойства border-radius, разделённые слешем. Для примера: border-radius: 50% 40% / 50% 80%; будет создана искажённая овальная фигура (посмотрите этот пример на тестовой площадке).

Настоящие CSS-ниндзя не используют JavaScript, когда им необходимо соорудить дерево меню. А вместо этого они используют некоторые псевдо-классы CSS3 и кое-какие псевдо-селекторы из CSS2. 

Разметка HTML заполнена неупорядоченными списками (ul) для формирования структуры дерева, флажков для всех неконцевых нод, радио кнопки для концевых нод и элементов <label>. Как вы можете заменить, элементы <ul> размещаются справа после элементов <input> (которые в свою очередь размещаются справа после элементов <label>) и затем ul легко выбирается в CSS, используя сестренский селектор "+" вместе с CSS3 селектором :checked (чтобы помочь нам открыть различные ноды папки/деревья). CSS-код действительно мал, что просто замечательно.

Я сделал некоторые изменения в оригинальном дереве меню. Смотрите оригинальную статью и демо здесь. Кроме того проверьте этот документ для получения информации о всех CSS селекторах.

Простые CSS3 кнопки в стиле Github! Главный трюк заключается в использованием свойства border-radius наряду с линейным градиентом из CSS3.

Эти кнопки не будут отображаться в Internet Explorer 8 и ниже, т.к. в этих браузерах нет поддержки CSS3 градиентов, закругления углов и теней для текста. А в IE9 нет поддержки CSS3 градиентов, хотя в нём можно воспользоваться специальным градиентным фильтром, который работает именно в IE6-9.

Пара Милых Круглых Светящихся Кнопок сделаных на CSS3!  Для левой кнопки мы использовали плавную анимацию с помощью CSS3 свойства transition, которое создаёт плавный переход между двумя состояниями :hover и  :active. 3D эффект достигается благодаря правильному использованию таких свойств, как box-shadow, border и gradient.

С помощью свойства border-radius мы предал кнопкам круглую форму.  Анимация не будет работать в браузерах IE 6-9, т.к. в них нет её поддержки.

Приветствую, дорогие друзья!

Сегодня пишу эту статью для Вас (как всегда среди ночи), чтобы рассказать занимательную историю о маленьком браузере. О его плохом воспитании и — как следствие — плохом поведении. Действия которого, нарочно или нет, приносят массу проблем разработчикам. По совету Макса (a.k.a Psywalker) разделю сие повествование на три части:

• Проблема
• Решение
• Пикантные подробности

Итак, поехали!

Кнопки из фреймворка от Twitter'а — Bootstrap, которые выглядят довольно таки интересно и современно. Прекрасно поддерживаются в IE7 и выше. 

Для создания кнопок используются многие вещи из CSS3, например, такие как: border-radius, linear-gradient, box-shadow, text-shadow, rgba и т.д, для достижения удивительного эффекта.

Последнее обновление: 05.10.2012 

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

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

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

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

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

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

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

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