26 читателей,
68 топиков
Все, что связано с версткой и каскадными таблицами стилей CSS, а также с новым стандартом CSS3.
- Создан 28 мая 2011
- Топиков 68
- Подписчиков 26
- Рейтинг 5.65
Администраторы (1)
Ma3oBblu
Модераторы (0)
Модераторов здесь не замечено
Всю магию drop-down меню можно описать при помощи трёх строк.
1. Скрываем вложенные пункты используя свойство display:none
2. Показываем скрытые пункты при наведения на родителя использую псевдоклас :hover и знакомое уже свойство Display:block.
3. Распологаем открывшиеся вложенные пункты в нужном месте используя позиционирование.
Дальше идут мелкие доработки, которые зависят от вида меню. Самое простое на мой взгляд это вертиальное меню. Распологается в левом или правом сайдбаре. Имеет чётко определённую ширину, что облегчает нам позиционирование.
Горизонтальное меню нужно прежде всего сделать горизонтальным float:left. Дальнейше действия зависят от количества уровней вложенности. Для одного уровня можно сделать вот такой вариант
При этом нужно ширину второго уровня сделать равной ширине первого. Иначе может возникнуть ситуация когда пользователь не сможет добраться до нужного пункта.
Многоуровневое горизонтальное меню должно открываться следующим образом — первый уровень вниз остальные вправо. Здесь, в отличии от предыдущего горизонтального меню, вложенные пункты позиционируем относительно родительского пункта и задаём для них ширину. Ширина нам нужна для второго и последующих уровней вложенности.
Код и примеры можно посмотреть на сайте webonlife в статье
горизонтальное меню на CSS и HTM. Все представленные меню протестированны в последнихверсиях браузеров.
Сегодня мы бы хотели поделиться с вами интересным эффектом. Вы могли видеть такую реализацию на сайте Skybox или личном сайте Лотты Ниеминен. Эффект заключается в том, что мы видим главную секцию с контентом в центре экрана, а по бокам видны части предыдущей и следующей секций. Навигация также адаптирована под эту модель – мы видим только три её пункта, которые соответствуют видимым секциям. При нажатии на одну из сторон или на элемент навигации, контент будет переключаться, “скользить” в соответствующую сторону, тем самым показывая следующую или предыдущую секцию. То же самое будет происходить и с навигацией.
Здравствуйте, сегодня хотелось бы показать примеры создания анимации с помощью CSS3 – будем вращать картинку по часовой стрелки, научимся вращать ее с замедлением и ускорением, а также двигать катринку по клику, наведению и другие примеры анимации.
Пример анимации 1: Непрерывно вращающаяся картинка:
...
Пример анимации 5: Движение объекта при наведении на него мышкой.
...
Благодаря дизайнеру под именем Justin Aguilar существует инструмент для реализации красивого появления объектов на странице - CSS3 Animation Cheat Sheet. Это набор plug-and-play анимаций для любых проектов. Всё, что Вам нужно сделать, это добавить таблицу стилей на Ваш сайт и применить готовые CSS классы для элементов, которые вы хотите анимировать.
CSS3 Animation Cheat Sheet использует правило CSS3 @keyframes и поддерживается всеми последними браузерами (включая и IE 10). Используя @keyframes Вам не придется беспокоиться о позиционировании элемента для размещения анимации – она будет анимирована на месте. Кроме того, для пользователей со старыми браузерами элемент будет успешно показан на странице, даже без использования самой анимации.
При работе с элементами, которые были как-то преобразованы в 3D, можно заметить, что они не имеют никакого затенения и смотрятся очень плоскими. В реальном мире все объекты преломляют свет и имеют тени. Их поверхности могут быть какими угодно – матовыми, отражающими и т.д.
Есть несколько вариантов для того, чтобы направить свет на сложную геометрию, например библиотека Photon, но такие решения сильно нагружают процессор. В этой статье я покажу вам одну технику, которую можно применить к объектам с несколькими гранями. Наш пример будет галереей с 3D-постерами фильмов и, если повернуть постер, другая его сторона будет содержать информацию о фильме.
В этом коротком уроке мы будем создавать интересный выезжающий слайдер. Посмотрите демо, скачайте архив с файлами по кнопке выше, откройте его в своём любимом редакторе и читайте дальше.
Идея
Эффект, которого мы хотим достичь, заключается в создании впечатления, что страница фиксирована на одном месте и при скролле поднимается вверх, чтобы показался футер. Чтобы достичь этого, нужно выполнить следующие условия:
Вся страница и её содержимое, за исключением футера, должно находиться внутри одного элемента-контейнера (в нашем случае это элемент <div id="main">). У этого элемента будет задано свойство z-index со значением 1.
У футера значение свойства z-index должно быть отрицательным. Это нужно, чтобы задать цвет фона, а также обеспечить место для фиксированной части футера (ссылки и цветные заголовки).
Также нам нужен элемент с фиксированным позиционированием относительно нижней части окна браузера и он должен иметь значение z-index меньше, чем элемент #main, но больше, чем футер.
В этом уроке я покажу вам, как создать круговую навигацию с помощью преобразований CSS. Я проведу вас через все этапы создания этих стилей, один за другим, объясню необходимые математические вычисления и их логику, так что вы получите чёткое понимание, как работает эта техника.
Как я уже сказал, нам потребуются некоторые математические вычисления вместе с преобразованиями CSS, чтобы создать все нужные стили.Волноваться не нужно, т.к. вся математика очень проста и я всё подробно расскажу.
Итак, давайте начнём!
В данной статье я хочу разобрать самые основы языка CSS, без знания которых не обойтись при настройке оформления любого блога.
В предыдущей статье мы уже рассмотрели основы языка HTML, который используется для написания каркаса любой веб-страницы. Ну а теперь разберем как происходит настройка ее оформления.
Я считаю, что эти вещи должен знать любой уважающий себя блоггер для того, чтобы иметь возможность вносить простейшие изменения в структуру своего блога.
Сегодня мы научимся делать очень классные кнопочки и переключатели, используя только силу CSS. Никаких картинок, никаких скриптов. Поможет нам научиться потрясающая статья на сайте Tympanus.net, которую я частично переведу, ибо важна только суть.
Здравствуйте, уважаемые читатели. Сегодня рассмотрим вариант изменения дизайна картинок на сайте, а именно, будем делать рамку вокруг изображения при помощи CSS. Прописав необходимый CSS код, можно добиться, чтобы все загружаемые на сайт изображения, имели красивую рамку. Для чего это бывает нужно, спросите вы? К примеру, если вы размещаете на сайте фотографии, то с рамкой они будут смотреться гораздо лучше и красивее. Вместо того, чтобы редактировать каждую отдельно взятую фотографию в графическом редакторе, мы создадим CSS правила и облегчим себе жизнь.
