Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.
Для начала собственно сам пример — на codepen.io или на cssdesk.сom
Рад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.
Emmet — это инструмент для ускорения работы с HTML и CSS. В основе проекта лежит механизм динамических аббревиатур, которые разбираются «на лету» и из которых генерируется готовый фрагмент кода. Для написания аббревиатур используется синтаксис, похожий на CSS-селекторы, но с некоторыми дополнениями, специфическими для создания кода. Например, вот такая аббревиатура:
section>h2+ul.nav>li.nav-item$*5>aпростым нажатием клавиши превращается в:
<section>
<h2></h2>
<ul class="nav">
<li class="nav-item1"><a href=""></a></li>
<li class="nav-item2"><a href=""></a></li>
<li class="nav-item3"><a href=""></a></li>
<li class="nav-item4"><a href=""></a></li>
<li class="nav-item5"><a href=""></a></li>
</ul>
</section>
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
Спецификации CSS3 позволяют фронтэнд-разработчикам создавать сложные визуальные эффекты, чтобы сделать сайты красивее. Я собрал более 10 новых приёмов CSS3, подходящих для того, чтобы украсить ваш сайт и придать ему более профессиональный вид.
Calc() позволяет выполнять расчеты по определению размеров и формы объектов. Она может быть использована в любом месте!
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №45 (16 — 21 февраля 2013)")
/* 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);
}
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
Сегодня я хочу рассказать о том, почему и как мы пришли к использованию препроцессора Stylus в разработке Яндекс.Почты, а также описать используемый нами метод работы со стилями для IE. Он очень легко реализуется именно с помощью препроцессоров и делает поддержку IE простой и удобной. Мы разработали для этого специальную библиотеку, которой тоже поделимся — if-ie.styl.
Это только первая статья из серии статей об использовании препроцессора Stylus в Яндекс.Почте, которые мы готовим к публикации.
Всем привет!
Постоянные читатели онлайновой Компьютерры наверняка заметили изменения в дизайне и работе сайта — теперь у них новый движок. Мне лично он жутко понравился, и я нарадоваться не мог, читая статьи и новости. Но радость продлилась только до вчерашнего дня. Случилось грустное: в топе главной страницы появился огромный рекламный баннер шириной от края до края и высотой 350 px. Выглядит это всё вот так:
В прошлом году, я сделал демо, которое показывает как можно использовать CSS 3D transforms для создания 3D пространства. Демо было технической демонстрацией того, чего можно достичь при помощи CSS на то время, но я хотел увидеть насколько далеко я могу зайти, поэтому последние несколько месяцев я работал над новой версией с еще более сложными моделями, реалистичным освещением, тенями и определением столкновений. Этот пост документирует то, как я это делал и какие техники применял.
Хочу сразу оговориться данная статья что отображает мое собственное мнение по этому вопросу основанное на личном опыте и не претендует на абсолютную точность. Написана она для тех, кто или только задумывается на карьерой php программиста или думает что бы изучить дальше.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №44 (9 — 15 февраля 2013)")
