Для начала хотел бы вам сказать, что моя специализация — это Backend, но версткой и клиентской частью приходится заниматься постоянно, особенно в своих проектах, которые я делаю в одиночку. Уже давно стало негласным правилом то, что сайт должен быть удобен на всех устройствах, включая всё их разнообразие, особенно в век популяризации мобильного интернета. Благо, CSS3 позволяет это делать при помощи медиа-выражений (media queries). Но есть еще один способ, показавшийся мне более удобным. В зависимости от размера экрана, его ориентации, типа устройства, устанавливать глобальные стили тегу html (можно и другим элементам). А в CSS, отталкиваясь от этих классов, задавать особые стили для разных случаев. Так CSS станет более понятным и мы избавимся от использования медиа-выражений. Для этого нам и понадобится Restive.JS. Так как я человек-практик, да и полное описание лучше читать на сайте плагина, то в статье я ограничусь созданием адаптивной мини-страницы, в процессе которого, надеюсь, станет понятно, для чего всё это необходимо.
Читать полностью »
Рубрика «css3» - 9
Адаптивная верстка с Restive.JS
2014-07-10 в 6:42, admin, рубрики: css3, html, javascript, restive.js, адаптивная вёрсткаДаем анимации жизнь
2014-07-08 в 12:30, admin, рубрики: css3, html, javascript, анимация, Анимация и 3D графика Я люблю анимацию. Именно поэтому была создана библиотека Bounce.js, инструмент для создания красивых анимаций. В этой статье я покажу примеры использования Bounce.js, а также некоторых классических способов анимации. Начнем со скучной формы авторизации Tictail.
Читать полностью »
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №114 (15 — 21 июня 2014)
2014-06-21 в 20:12, admin, рубрики: api, css, css3, html, jquery, JS, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, Новости, плагины, ресурсы, ссылки, ссылки на сми, метки: api, css, css3, html, jquery, браузеры, веб-дизайн, Веб-разработка, новости, плагины, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Бесплатный CSS3 генератор EnjoyCSS
2014-03-17 в 16:12, admin, рубрики: css, css3, web-разработка, Блог компании EnjoyCss, метки: css, css3, web-разработкаEnjoyCSS — это бесплатный онлайн CSS генератор, который предназначен для быстрого создания богатых графических стилей и мгновенного получения их кода. Этот инструмент позволяет добавлять к элементам тени, 3D и 2D трансформации, многочисленные сложные переходы, линейные и радиальные градиенты, тени текста, шрифты из Google Fonts, CSS3 код которых вы можете скопировать и вставить в ваш проект.
Кроме того, пользователь может получить как CSS для всех стилей элемента, так и для отдельных его аспектов (например, код только конкретного градиента или тени).
Вы также можете добавлять и изменять стиль для :hover, :active, :focus, :after, :before псевдосостояний.
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №99 (2 — 8 марта 2014)
2014-03-08 в 20:02, admin, рубрики: css, css3, html, html5, jquery, JS, Kickstarter, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, html, html5, jquery, Kickstarter, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
.jpg "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю №99 (2 — 8 марта 2014)")
Набор кроссбраузерных CSS3 свойств
2014-02-16 в 10:02, admin, рубрики: border-radius, box-shadow, css, css selectors, css3, html, inline-block, linear-gradient, multiple backgrounds, selectivizr, transition, Веб-разработка, метки: border-radius, box-shadow, css, css selectors, css3, inline-block, linear-gradient, multiple backgrounds, selectivizr, transitionДобрый день, союзники!
Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.
Возможно опытным представителям нашей профессии данный пост будет не интересен, но более молодым и неопытным он может пригодиться. От старших товарищей, в свою очередь, хотелось бы получить комментарии, по недочетам, которые, возможно, тут присутствуют, и важным моментам, которые, наоборот, могут тут отсутствовать.
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю № 90 (29 декабря — 4 января 2014)
2014-01-04 в 19:45, admin, рубрики: 2013, 2014, css, css3, html, html5, jquery, JS, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, итоги года, Новости, ресурсы, ссылки, ссылки на сми, тренды, метки: 2013, 2014, css, css3, html, html5, jquery, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, итоги года, новости, ресурсы, ссылки, ссылки на сми, трендыПредлагаем вашему вниманию последнюю в этом году подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
.jpg "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю № 90 (29 декабря — 4 января 2014)")
Большая книга CSS3
2013-12-23 в 13:23, admin, рубрики: css3, Блог компании Издательский дом «Питер», книга, формы, метки: css3, книга, формыВсем привет! Сегодня в продаже появилась "Большая книга CSS3", которую многие из Вас ждали. Чем она может вас заинтересовать?
- информация подается интересно
- подкрепляется практическими занятиями
- приводится много ссылок на сторонние статьи и ресурсы по изучаемой теме
- автор постоянно делится своими советами и наработками
- уделяется много внимания именно дизайну
- Современный взгляд на дизайн и верстку
- Верстальщиков научит дизайну, дизайнеров научит верстке.
Это третье издание книги, до этого у Макфарланда были изданы книги по CSS достаточно крупными тиражами, но в этой книге, которая вышла со значительными изменениями, некоторые из которых я и сам применил на сайте books.piter.com
C помощью технологии CSS3 (каскадные таблицы стилей) можно создавать уникальные, современные оформления веб-сайтов. Но даже самый опытный веб-разработчик может не знать всех приемов применения CSS3. Прочитав в этой книге множество практических примеров, а также советов, вы перейдете на новый уровень создания сайтов с помощью HTML и CSS. Вы узнаете, как разрабатывать веб-страницы, которые одинаково быстро работают и одинаково выглядят, как на ПК, так и на смартфонах и планшетах.
В книге рассмотрены следующие темы:
- написание HTML5-, CSS3-тегов, которые распознаются во всех браузерах;
- форматирование текста, добавление на страницы навигации;
- создание таблиц и форм;
- приемы веб-дизайна для создания уникального оформления сайтов;
- создание сайтов для любых устройств с помощью адаптивного дизайна.
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю № 87 (7 — 14 декабря 2013)
2013-12-14 в 18:48, admin, рубрики: bitcoin, css, css3, html, html5, jquery, JS, WebGL, адаптивный дизайн, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, игры, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: bitcoin, css, css3, html, html5, jquery, WebGL, адаптивный дизайн, браузеры, веб-дизайн, Веб-разработка, дайджест, игры, интересное, новости, ресурсы, ссылки, ссылки на сми.png "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю № 87 (7 — 14 декабря 2013)")
CSS-битмапы и CSS3-видео
2013-12-01 в 23:18, admin, рубрики: css, css3, CSS3 animation, html, Веб-разработка, метки: css3, CSS3 animation 
Пару месяцев назад на сайте HtmlBook.ru был проведён мини-конкурс «Хэллоуин», на который необходимо было представить художественное произведение на тему праздника, исполненное только с помощью html-разметки и css-правил, не задействуя фоновые картинки. Представленные на конкурс 20 работ, прямо сказать, порадовали. Все они относятся к отдельному направлению CSS-графики: построение задуманной картинки послойно размещёнными стандартными html-контейнерами (как правило тегами <div>), соответствующим образом стилизованными и спозиционированными в нужные места на экране-холсте.
Хочу показать примеры другого направления CSS-графики — imperacms.ru/examples/css-image/index.php — воспроизведение растра исходной картинки последовательно размещёнными стандартными html-контейнерами (как правило тегами <hr> для уменьшения размера генерируемой разметки) и стилизованными в размер 1х1 px плюс окрашенными в цвета пикселей, которым соответствует каждый контейнер. В простейшем случае это последовательное размещение одноточечных контейнеров линия за линией, в другом, более сложном случае — вычисление множества разноокрашенных и разноразмерных полигонов с послойным наложением и позиционированием до приближения к оригиналу.
По указанной выше ссылке демонстрируются такие примеры:
- капча, отрисованная не картинкой, а HTML-CSS-разметкой;
- картинка, загруженная из файла и преобразованная в HTML-CSS-разметку;
- «видео» — это битмап на HTML-CSS-разметке и CSS3-анимации пикселей.