Твит

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

Твит

Твит

Сегодня мы бы хотели поделиться с вами интересным эффектом. Вы могли видеть такую реализацию на сайте Skybox или личном сайте Лотты Ниеминен. Эффект заключается в том, что мы видим главную секцию с контентом в центре экрана, а по бокам видны части предыдущей и следующей секций. Навигация также адаптирована под эту модель – мы видим только три её пункта, которые соответствуют видимым секциям. При нажатии на одну из сторон или на элемент навигации, контент будет переключаться, “скользить” в соответствующую сторону, тем самым показывая следующую или предыдущую секцию. То же самое будет происходить и с навигацией.

Твит

Благодаря дизайнеру под именем Justin Aguilar существует инструмент для реализации красивого появления объектов на странице - CSS3 Animation Cheat Sheet. Это набор plug-and-play анимаций для любых проектов. Всё, что Вам нужно сделать, это добавить таблицу стилей на Ваш сайт и применить готовые CSS классы для элементов, которые вы хотите анимировать.
CSS3 Animation Cheat Sheet использует правило CSS3 @keyframes и поддерживается всеми последними браузерами (включая и IE 10). Используя @keyframes Вам не придется беспокоиться о позиционировании элемента для размещения анимации – она будет анимирована на месте. Кроме того, для пользователей со старыми браузерами элемент будет успешно показан на странице, даже без использования самой анимации.

Твит

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

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

Твит

Салют, наш читатель! В рунете существует множество блогов, похожих на наш, и многие из них занимаются переводом статей с забугорных ресурсов по веб-дизайну и верстке. И вот я решил заняться тем же, переведя статью с сайта webstuffshare.com. Сегодня мы с вами создадим очень интересный 3D куб с картинкой, который при наведении переворачивается и показывает нам небольшое текстовое описание, выглядит очень впечатляюще! Итак, поехали!
Есть много способов представления информации о продукте, например, при наведении курсора на изображение, текст о продукте скользит в разные стороны или даже куда-то уплывает. В этом уроке я собираюсь рассказать Вам о том, как показать информацию о продукте в кубе с использованием CSS3 3D Transform.

Твит

Вам нужен красивый интересный загрузчик, воспользуйтесь flash? Нет? Тогда, может быть gif анимация? Нет!? А я знаю, что вам нужно! CSS! Если не знаете, как это поставить на свой сайт, вам поможет сервис о котором пойдет речь в этом посте.
У сервиса CSSLoad.net есть два вида предлагаемых анимаций: Графическая и Текстовая. Начнем с первой. Да, у сервиса присутствует русский интерфейс, что не может не радовать нас.

Твит

Блог Алексея Чваркова на тему веб програмирования доступен по адресу chvarkov.ru. А также о seo оптимизации, cms системах, хостингах, моетизации сайта и html, css, javascript уроки.
Блог Алексея Чваркова на тему веб програмирования доступен по адресу chvarkov.ru. А также о seo оптимизации, cms системах, хостингах, моетизации сайта и html, css, javascript уроки.
Блог Алексея Чваркова на тему веб програмирования доступен по адресу chvarkov.ru. А также о seo оптимизации, cms системах, хостингах, моетизации сайта и html, css, javascript уроки.

Твит

Все мы неоднократно видели на разных сайтах в сети потрясающие и, в тоже время, очень простые эффекты при наведении мышки на какие-нибудь иконки: плавно появляется рамка вокруг или, наоборот, исчезает; иконка начинает вращаться или вращается сама рамка… Да много каких разных эффектов.
Сегодня мы раскроем секрет этой чёрной магии. Всё будет только на CSS, без капли javascript.
Что нам понадобится:

псевдо-элементы :after и :before
свойства CSS3 transition и animation
шрифтовые иконки с сайта icoMoon

Твит

Хотели бы вы, чтобы те стили, которые вы задаете в Photoshop перекочевали в CSS? Думаю, что это риторический вопрос, который я не много не правильно задал. Речь в этом посте пойдет не о стилях фотошопа, а о сервисе, который копирует функционал настройки стилей фотошопа. Сервис Layerstyles — это находка для веб-мастера, это один из тех генераторов CSS, которые верстальщик будет использовать постоянно. И сейчас я вам это докажу.

Твит

Гуляя по просторам интернета можно найти очень много классных и интересных техник. Сегодня на повестке дня у нас просто бриллиантовый трюк от Lea Verou, который позволяет с помощью текста имитировать индикатор загрузки. Он настолько прост и изумителен, что я не смог пройти мимо. Давайте же его разберём!
Она состоит из одного тега заголовка первого уровня h1, которому добавили атрибут data-content, дублирующий содержание заголовка. Для эффекта загрузки нам понадобятся две одинаковые фразы, одну из которых мы будем хранить в псевдо-элементе :before.