Здравствуйте уважаемые посетители blog-in.ru! С каждым днем скорость передачи информации возрастает, а качество ее улучшается. Также современные Web-технологии идут семимильными шагами. И что недавно мы делали с помощью громадных кодов, сегодня выполняется несколькими строками. Сегодня я хотел бы поделиться интересными свойствами CSS3. А если точнее, то рассказать вам, как сделать "резиновый" фон на свой сайт.
Сегодня я хочу рассказать о необычном способе выделения ссылок, который я уже использую в своём новом шаблоне.
Такое выделение смотрится довольно красиво и подвижно, и реализовывается при помощи CSS. Будет очень не плохо, если вы уже владеете первоначальными знаниями в области CSS, ну а если нет, ничего страшного, я разъясню подробнее, какие свойства и псевдоселекторы используются для этого. Для начала нам нужно определить стили для ссылок на странице:
Новые свойства CSS3 позволяют делать очень много всего интересного. Сегодня мы рассмотрим несколько примеров, в котором создадим 10 разных эффектов при наведении курсора мыши на изображение. Мы будем показывать поверх изображения описание. Следует учесть, что данный эффект будет работать только в современных браузерах, которые поддерживают нововведения CSS3.
Эффекты при наведении для изображений с использованием CSS3
Прошли те времена, когда веб-разработчику были доступны всего несколько шрифтов. Сегодня есть хранилище Google Web Fonts, есть скрипты, основанные на javascript, поддержка собственных шрифтов внедрена в CSS3 — можно использовать любой метод. Но какой подходит именно в вашем случае? В статье — обзоры, плюсы и минусы каждого из сервисов. Два последних — устаревшие методы, поэтому описаны в образовательных целях.
Сегодня мы будем разбираться с псевдо-селекторами, а заодно создадим довольно интересное слайд меню. Для начала мы создадим меню используя техники CSS3. Потом мы реализуем то же самое без использования псевдо-селекторов, дабы пример был кроссбраузерным. И в самом конце мы заменим все новые штучки из CSS3 на старый добрый jQuery. Одна из основных целей этой статьи показать реальный пример использования псевдо-селекторов.
С типографикой на сайте можно экспериментировать бесконечное количество раз. Одним из инструментов, который помогает это делать является свойство CSS3 text-shadow. На первый взгляд свойство text-shadow достаточно простое, но при должном внимании и сообразительности можно добиться потрясающих эффектов. Сегодня я хочу вам показать несколько таких примеров, которые вы легко сможете использовать в своих проектах.
Сегодня мы рассмотрим простые примеры создания меню для сайта с эффектом размытия. Все это мы достигнем с огромными возможностями CSS3. В этом уроке показаны эксперименты с тенями текста и трансформациями для достижения эффекта размытия, который будет использоваться для создания элегантного меню. Основная идея заключается в размытии других пунктов при наведении курсора мыши на определенный пункт меню. Вот так все выглядит на примере..
В предверии конференции HTML5 Camp, которая состоится 30го ноября, на сайте фриланса проводится конкурс. Суть конкурса очень проста, необходимо ответить на 5 из 15 вопросов на тематику HTML5 и CSS3. Тогда вы получаете футболку с логотипом HTML5, не плохо. Так же среди тех кто ответит на все 15 вопросов, будет разыгран телефон на базе Windows Phone. Таймера на тесте нету, так что я думаю тем кто не знает эти стандарты, можно воспользоваться поиском.Ну а так же тест можно перепройти, если результат Вас не устраивает.
Здравствуйте все! Извините за эти огромные паузы в постах, осенью нападает на меня какая-то лень. Просто не могу писать, и всё! Постараюсь превозмочь себя! А сегодня я расскажу вам об анимации в CSS3.
Сначала поговорим о том, как сдвинуть объект красиво, но без jQuery. Затем мы рассмотрим способ поворота различных объектов на CSS3. После этого, мы с вами, дорогие читатели, поговорим о том, как увеличивать или уменьшать объекты на CSS3.
На cегодняшний день многие современные браузеры поддерживают некоторые свойства СSS3, одним из самых интересных, на мой взгляд, из них является свойство transition. Это свойство имеет префиксы для работы в разных браузерах, например, свойство -о-transition поддерживается последними версиями Оперы, -moz-transition поддерживается Мозилой и т.д. В дальнейшем, я буду опускать для краткости эти префиксы, как в описании, так и в коде. Полную версию кода вы можете посмотреть в исходниках.
|