Твит

Благодаря этим типам Вам больше не нужно писать код на javascript для проверки формы. Это не все возможности HTML5, но и этого достаточно, чтобы Вы поняли, что изучать HTML5 обязательно нужно. А что же нового в CSS3? Появились новые селекторы, которые упрощают выборку. Например, простая задача - сделать особый стиль у последнего пункта меню (например, у всех пунктов внизу есть рамка, а у последнего пункта её нет). Раньше нужно было задавать отдельный класс для последнего пункта, а в CSS3 есть новый селектор, который поможет сразу вытащить этот последний элемент. Это сократит время работы и уменьшит размер кода. И таких полезных мелочей в CSS3 очень и очень много благодаря новым селекторам.

Твит

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

Открыте модального окна как известно весьма тривиальное действие: щелкнили на кнопку быстрого просмотра, открылось модальное окно с доп. информацией и возможно кнопкой для последующих действий. В данной же статье, изобретать велосипед конечно никто не стал, но вот улучшить переход из состояния А в сотояние Б, мы попробовали.

Твит

Сегодня я покажу Вам, как можно придать индивидуальный стиль для каждой кнопки навигации при этом не присваивая каждой кнопке отдельный класс. Сделать это становится возможным при помощи псевдокласса, появившегося в CSS3 – nth-child(). При этом Ваш html-код останется не загроможденным большим количеством классов, а реализация самой задачи становится до смешного простой.
Между прочим, этот прием можно применять не только для кнопок навигации, но также таким образом можно легко стилизовать любое сочетание чередующихся дочерних элементов. Сейчас Вы и сами увидите насколько все просто у нас получится.

Твит

Приветствую всех свои посетителей и читателей, на своем seo блоге. Недавно, в свое отчете за март, я сказал что хочу запустить серию уроков, по создаю блога с нуля. Возможно Вы сейчас подумали что уроки будут про wordpress, но нет. Движок блога, мы с Вами создадим с нуля, с админ панелью, и прочими разными полезными функциями. И первый урок из серию, будет посвящен созданию шаблона для блога. Шаблон сделан только на HTML и CSS3, из графики только фон, иконка автора, иконка комментариев. Думаю хватит писать лишних строк, и начнем создание шаблона для блога.

Твит

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

Твит

В спецификации CSS3 существует свойство для закругления углов. Это свойство border-radius. Из названия видно, что при использовании этого свойства задаётся радиус скругления угла/углов в блоке. Может иметь от одного до четырёх значений, перечисленных через пробел. Если значение свойства border-radius задаётся через слэш, то первым значением является значение по оси X, а вторым - по оси Y. Пишется так: border-radius:5px/10px;

Твит

В спецификации CSS3 существует свойство для закругления углов. Это свойство border-radius. Из названия видно, что при использовании этого свойства задаётся радиус скругления угла/углов в блоке. Может иметь от одного до четырёх значений, перечисленных через пробел. Если значение свойства border-radius задаётся через слэш, то первым значением является значение по оси X, а вторым - по оси Y. Пишется так: border-radius:5px/10px;

Твит

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

Твит

Всем привет. Знаете ли вы, что сделать модальное окно на CSS без использования javascript или jQuery вполне возможно? Недавно я показывал пример модального окна на jQuery, но сегодня будем делать такое окно на CSS3 и HTML5. С развитием этих спецификаций стало возможно делать простые модальные окна без подключения внешних библиотек и что больше всего радует, так это поддержка подобных эффектов практически всеми браузерами, естественно последних версий. Но об этом немного позже. Сейчас давайте посмотрим пример и разберемся, где можно использовать модальное окно на CSS..

Твит

Здравствуйте. Читая один из зарубежных сайтов, обнаружил, что ссылки на нем очень интересно оформлены, с использованием трехмерного эффекта. Сначала я подумал, что это сделано с использованием javascript, но заглянув в код обнаружил, что все это написано на CCS3. Если кому-то приглянулась эта забавная фишка, то установить ее себе на сайт не составит особого труда.
Как вы уже заметили, в CSS3 появились такие свойства, как перспектива и 3D. Очень надеюсь, что не за горами тот день. когда все браузеры научатся понимать все свойства и значения CSS3. Но а пока приходится довольствоваться тем, что у нас есть сейчас и это тоже достижение, если не сказать больше.

Твит

В статье описан один из псевдоклассов, который был введен только приходом CSS3 - :first-of-type.
Описан его принцип действия и самое главное в сравнении с очень похожим псевдоклассом - :first-child, котрый был введен еще в стандарте CSS2.1. В статье представлен вариант использования этого псевдокласса для старых браузеров. таких как IE6-IE8 с помощью добавления нескольких javascript библиотек. Все просто и понятно.