Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
Рубрика «css3» - 14
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №46 (23 февраля — 1 марта 2013)
2013-03-01 в 20:12, admin, рубрики: css, css3, emmet, Firefox OS, html, html5, ie10, jquery, JS, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, emmet, Firefox OS, html, html5, ie10, jquery, yandex store, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на сми.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №46 (23 февраля — 1 марта 2013)")
Пример — часы на СSS3 без изображений и JavaScript
2013-02-28 в 0:45, admin, рубрики: css, css3, CSS3 animation, css3 transform, html, Веб-разработка, демонстрация, метки: css3, CSS3 animation, css3 transform, демонстрация 
Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.
Для начала собственно сам пример — на codepen.io или на cssdesk.сom
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №45 (16 — 21 февраля 2013)
2013-02-22 в 21:57, admin, рубрики: chrome, css, css3, HTC One, html, html5, jquery, JS, tizen, webkit, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №45 (16 — 21 февраля 2013)")
Несколько интересных приёмов на CSS3
2013-02-21 в 8:10, admin, рубрики: css, css3, html, html5, Веб-разработкаСпецификации CSS3 позволяют фронтэнд-разработчикам создавать сложные визуальные эффекты, чтобы сделать сайты красивее. Я собрал более 10 новых приёмов CSS3, подходящих для того, чтобы украсить ваш сайт и придать ему более профессиональный вид.
CSS функция Calc()
Calc() позволяет выполнять расчеты по определению размеров и формы объектов. Она может быть использована в любом месте!
/* basic calc */
.simpleBlock {
width: calc(100% - 100px);
}
/* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}
Какой браузер поддерживает полнее css3, html5, какой из них быстрее по Javascript
2013-02-18 в 12:23, admin, рубрики: css3, CSS3 animation, css3 transition, javascript, браузеры, тесты, тесты производительности, метки: css3, CSS3 animation, css3 transition, javascript, тесты, тесты производительности Предлагаю широкой общественности для тестов следующую страницу vsandy.16mb.com/hs3nplus1/
Наведя на Limitations слева, активируется css3, можно будет визуально оценить качества прорисовки наклоненных букв. По итогам моего тестирования, Опера справляется с этим тестом лучше остальных браузеров.
size of variable — стресс-тест максимальной длины переменной в Javascript
size of array — стресс-тест максимальной длины массива в Javascript
Тесты The 3n+1/direct
classics from 90-s
modern
fast
Chrome killer
покажут быстродействие и стабильность работы Javascript с массивами и хэшами. Последний тест легко доводил предыдущие версии хрома до падения.
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №44 (9 — 15 февраля 2013)
2013-02-15 в 19:49, admin, рубрики: css, css3, harlem shake, html, html5, jquery, JS, opera, WebGL, webkit, Блог компании Zfort Group, браузеры, веб-аналитика, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, harlem shake, html, html5, jquery, opera, WebGL, webkit, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №44 (9 — 15 февраля 2013)")
Облака на CSS3 3D Transitions
2013-02-10 в 4:55, admin, рубрики: clouds, css, css3, html, javascript, не тегов, облакоПример, как нарисовать красивые 3D облака используя CSS 3D Transformations
Случайно набрел сегодня на еще одну интересную статью об интересных эффектах и решил, что мою любимую Хабра-аудиторию этот пример тоже может заинтересовать. Английский у меня такой-же, как у Азарова украинский, по-этому перевод будет авторский.
Для нетерпеливых: То, что получится в итоге
Вступление
В этой статье, автор попытаеся рассказать и показать как создать красивые 3D облака используя CSS3 Transformations. Автор так-же считает, что иметь базовое понятие о том, как работают эти самые CSS 3 Transformations не будет лишним. Ссылка на туториал здесь
Данный туториал разбит на несколько простых шагов. Каждый шаг основан на коде из предыдущего и содержит ссылки на примеры.
- Создаем мир и камеру
- Добавляем объекты в мир
- Добавляем спрайты к облакам
- Магия
- Пролог
Поооеехааали!
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №43 (2 — 8 февраля 2013)
2013-02-08 в 21:22, admin, рубрики: css, css3, Facebook, html, html5, jquery, JS, microsoft, Блог компании Zfort Group, браузеры, будущее, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, Facebook, html, html5, jquery, microsoft, браузеры, будущее, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №43 (2 — 8 февраля 2013)")
Интерактивная инфографика с анимациями CSS и SVG
2013-02-07 в 17:39, admin, рубрики: css, css3, html, svg, Веб-разработка, ИнфографикаОдной из наименее обсуждаемых функций, все чаще появляющейся в последних браузерах, является поддержка файлов формата SVG. Этот формат характеризуется абсолютной свободой в отображении: легко изменяется в размере, может быть отображен в любом разрешении без потери качества. Во многих случаях SVG весят гораздо меньше, чем, например, PNG или JPG.
Но самое клевое свойство SVG, о котором многие разработчики не знают, это то, что этот формат построен на спецификации XML. C помощью этого мы можем манипулировать элементами SVG файла используя технологии вроде CSS или JavaScript, с которыми разработчики уже знакомы.
С правильным применением технологий и современным браузером, разработчики могут создавать впечатляющие анимации и эффекты с помощью SVG. Сегодня мы рассмотрим возможности SVG и создадим интерактивную векторную инфографику, демоверсию которой можно посмотреть здесь.
Читать полностью »