Сделал справочник CSS в виде мобильного приложения для Андроида. Справочник платный и если вы хотите поддержать сайт и получать в дальнейшем новые бесплатные уроки, то считайте это вложением в своё обучение.
Наряду с «Основами HTML» сделал мобильное приложение для Андроида «Основы CSS» с уроками от Джереми Томаса. Каждый урок сопровождают разноплановые интерактивные задания для закрепления материала. Так что теперь учить HTML и CSS стало ещё проще.
На webref.ru появился новый учебный курс от Джереми Томаса, посвященный псевдоклассам, градиентам, анимации и переходам. Как обычно, после каждого урока идут интерактивные задания для закрепления материала.
Вот и всё. Книга Шэя Хоу полностью переведена и выложена для всеобщего обозрения. Это обзор веб-технологий, которые применяются при разработке сайтов и ориентированы они на тех, кто уже освоил HTML5 и CSS3.
Очередная глава из книги Шэя Хоу «Уроки по HTML и CSS». На этот раз речь идёт о том, как задавать цвет фона, устанавливать фоновые картинки и градиенты. Как обычно, всё показано на готовых примерах, которые вы можете посмотреть на JSFiddle и поиграть с кодом.
Начал переводить замечательную книгу Шэя Хоу Уроки по HTML и CSS. Книга довольно объёмная, состоит из 12 глав, так что решил выкладывать её постепенно, по мере перевода каждой главы, а не ждать завершения работы целиком.
Сейчас можно ознакомиться с первыми главами, в которых рассказывается что такое HTML и CSS на примере вёрстки сайта.
Появилось новое руководство по HTML5 и CSS3 от Дамиана Вельгошика. Ориентировано на новичков, которые вообще знать не знают ничего о вёрстке. Остальным рекомендую заглянуть в последнюю главу, где приведены полезные ссылки.
На сайте webreference.ru добавлено руководство HTML5 и CSS3 на примерах. Более 70 материалов охватывающих популярные темы по вёрстке. Кое-что из них уже публиковалось ранее, но часть написана специально для этого сайта, особенно это касается новых тем вроде анимации, переходов и трансформации. Из-за большого объёма пришлось выбросить ряд тем, они будут оформлены позже в виде отдельных руководств. Потому что под формат сайта больше подходят небольшие руководства охватывающие узкую тему.
Руководство ориентировано на тех, кто уже знаком с основами HTML и CSS и теперь хочет знать, что с этим делать дальше. Читать можно как последовательно, так и по отдельным интересующим темам.
Также вы можете купить руководство за 40 рублей в формате CHM. Удобно тем, что не требует выхода в сеть и всё хранится в одном файле. Заодно поддержите тем самым сайт.
Сегодня мы хотели бы поделиться некоторыми мыслями по добавлению гибкости к элементам. Идея в том, чтобы интегрировать SVG элемент в компонент, а затем оживить переход одной кривой в другую с помощью анимации. Использование SVG для таких вещей как меню, кнопки и другие элементы делает их более интересными, а взаимодействие с ними естественным и органичным. Конечно, важно сохранить в них изящество без чрезмерной упругости. Приятно то, что мы можем дать более «реалистичную» интерактивную обратную связь с пользователем. Особую выгоду от такого эффекта можно извлечь при взаимодействии с сенсорным экраном. Опираясь на эту идею мы создали несколько впечатляющих примеров, в которых анимированное изменение формы имеет смысл.
В последнее время новые классные интерактивные эффекты были созданы, чтобы следовать принципам Google Material Design. Один из таких великолепных небольших эффектов похож на расходящиеся кругами волны при щелчке. Пока эти эффекты связаны с тем местом, куда щёлкнули или нажали, но сама идея добавить небольшой эффект обратной связи довольна интересна. Как правило, едва заметные индикаторы используются в приложениях, чтобы визуально показать место прикосновения к экрану мобильного устройства. Но подобные эффекты в действительности могут оказаться полезными, когда задействуется любой щелчок или прикосновение. Индикатор означает, что действующий элемент был нажат и, если это сделано правильно, то время отклика кажется меньшим.
Сегодня мы хотели бы поделиться с вами некоторыми стилями и эффектами для создания всплывающих подсказок. Они обычно используется для вывода какой-то дополнительной информации и встречаются практически на каждом сайте. Эти маленькие помощники предлагают широкие возможности для добавления изысканных и уникальных эффектов к любому дизайну. Так что сегодня мы покажем вам некоторые возможности по стилизации всплывающих подсказок.
Сделайте блок с фиксированным положением, который не будет изменять свою позицию при прокрутке страницы. Изначально блок практически полностью скрыт, но при наведении на него курсора мыши он плавно выезжает вправо (рис. 1). Если курсор убрать, то блок плавно возвращается в исходное положение.
Рис. 1. Положение блока при наведении на него курсора
С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border, как наиболее универсальное, а также outline и, как ни удивительно, box-shadow, основная задача которого — создание тени. Далее рассмотрим эти методы и их различия между собой.
Стремительное развитие программного обеспечения, а параллельно с ним ещё более резвый рост производительности компьютерного оборудования, растворяют в себе злободневность полемики об эффективном коде. И вот уже в очередном проекте 2-3-страничного сайта нам проще использовать нечто типа jQuery('.spoiler').show(), чтобы оживить статичный сайт. Ведь за мощью компьютера совсем не заметно расточительство ресурсов, вызванное цепочкой внутри библиотечных действий от такой команды, и только ради организации простейшей бизнес-логики на клиентской стороне.
Нынче в том нет ничего зазорного, ведь эволюция ПО и техники позволяет программисту решать задачу, не заботясь о цене и вникании в тонкости процесса. Однако для повышения кругозора и как замечательный экспонат в кунсткамеру, дам ссылку на пример того, что определённая часть бизнес-логики сайта, посвящённая оживлению статики, в принципе могла бы быть реализована вообще без применения скриптовых технологий.
Любителям сначала поразгадывать ребус — как же мне удалось запрограммировать такой интерфейс на CSS — следуйте на страницу примера. Если не отгадаете, загляните за подсказкой в исходный код примера. Там всё прокомментировано и разложено по секциям. Остальным рекомендую читать дальше, где изложена суть этого механизма.
Существует несколько методов создания колонок равной высоты. Один из самых популярных и простых заключается в имитации колонок с помощью фонового рисунка. Код HTML при этом остаётся исходным, а в стилях добавляется только свойство background. Естественно, колонки будут иметь разную высоту, которая зависит от их содержимого, но за счёт одного фона создаётся иллюзия одинаковых по высоте колонок.
У этого метода есть следующие недостатки.
В целом, минусы не очень существенны и многие разработчики готовы с ними мириться. Но есть решение изящнее — использовать CSS3, в частности, градиенты. Хотя никаких градиентов в данном случае не видно, они подходят как нельзя лучше из-за того, что позволяют делать не только плавные, но и резкие переходы цветов.