Каскадные Таблицы Стилей → Бьющееся сердце на CSS3
Доброго времени суток, уважаемый хабражитель! Сегодня я покажу Вам безграничные возможности CSS и научу при их помощи создать красивое пульсирующее сердце.
Каскадные Таблицы Стилей → Дизайн логотипа на CSS3 из песочницы
Ранее мы использовали для графического дизайна программное обеспечение, например, Photoshop для разработки логотипов и иконок. Но теперь мы можем спроектировать почти все, используя возможности CSS3. Разработка логотипов и иконок с использованием CSS увеличит скорость загрузки вашего сайта.
Сегодня обсудим, как создать логотип, используя основные свойства CSS3.
Сегодня обсудим, как создать логотип, используя основные свойства CSS3.
Каскадные Таблицы Стилей → Оформляем тултипы с помощью CSS3
Всем привет!
Уже несколько раз меня просили сделать обычные тултипы, которые со стрелочками такие. Все бы было хорошо: состряпал блок с круголками, взял треугольники отсюда и вуаля. Однако, не все так просто. Ведь полет фантазии дизайнеров велик. То им стрелочки с наклоном, то им рамки, то тени. Можно, конечно, все запилить на картинках, но ведь это
Всё это оказалось абсолютно решаемым с помощью CSS, если включить немного фантазии.
От слов к делу.
Каскадные Таблицы Стилей → Cтреловидные формы элементов с помощью CSS3
В веб-дизайне элементы неправильной формы всегда вызывают интерес. Стреловидные формы и диагональные линии могут создать интересный визуальный поток и дать приятный результат. Я был вдохновлен проектами, в которых используются неправильные формы, и теперь хочу показать пару простых примеров с их использованием.
Nginx → Трансформация и перевод на другие языки web-сайтов на лету при помощи Nginx
В моем первом посте я описал применение Apache Traffic Server в качестве кеширующего reverse-proxy. В отзывах меня спрашивали почему не nginx? Поскольку в ATS все равно не нашлось удобного способа трансформировать контент сайта, то я решил изучить возможности Nginx. Для решения задачи пришлось углубится в дебри документации, и вот что получилось…
HTML5 → Canvas-трансформации доступным языком
Доброго времени суток, хабравчане! В этой статье я подробно расскажу вам о трансформации и вращении в javascripte. Матрица трансформаций, на первый взгляд, штука непонятная и многие ею пользуются даже не осознавая, что она делает на самом деле, используя готовые значения из интернета. На MDC об этом рассказано скудненько, а информацию в английской Википедии тяжело назвать общедоступной. Постараемся разобраться в этом вместе.Firefox → Firefox 4 значительно ускорится и получит поддержку inline SVG
Вечером 30 июня «Мозилла» явилась в Лондон в Англии, чтобы поведать про дополнения («Mozilla Add-Ons») и показать некоторые новые клёвые особенности грядущего Файерфокса 4.
Вероятно, наиболее впечатляющими (если не считать средства создания дополнений«Add-Ons Builder», основанного на «Беспине») оказались следующие будущие возможности Firefox 4:
→ отображение HTML5-видео (<video>)
→ рисование на холсте (<canvas>)
→ манипулирование изображениями на холсте (анализ пикселов, распознавание лиц с помощью opencivitas)
→ технологии «зелёного экрана» (хромакей) в иллюстрациях и видео, достигаемые анализом цвета пикселов
→ HTML5, встраиваемый внутрь SVG (ура!)
→ SVG как <img>
→ SVG как CSS-фон
→ SVG-фильтры, SVG-маски, SVG-контуры обрезки
→ SVG-анимация
→ inline SVG (то есть SVG внутри HTML5)
→ CSS3: селекторы,@font-face, 2D-преобразования (transforms), переходы (transitions), тени, градиенты, вычисления — calc(2em-10px)
→ API: геопозиция (geolocation), оффлайн (IndexDB, localStorage, AppCache, FileAPI: чтение двоичного содержимого из файла, перетаскивание файлов),веб-труженики (web workers) и сокеты (websockets)
→ контроллер на вебсокетах, запускающий презентацию с мобильника
→ WebGL
Некоторые из этих способностей подтверждались демонстрациями:
→ фильтры CSS3 и маски SVGна HTML5-видео:
Вероятно, наиболее впечатляющими (если не считать средства создания дополнений
→ отображение HTML5-видео (<video>)
→ рисование на холсте (<canvas>)
→ манипулирование изображениями на холсте (анализ пикселов, распознавание лиц с помощью opencivitas)
→ технологии «зелёного экрана» (хромакей) в иллюстрациях и видео, достигаемые анализом цвета пикселов
→ HTML5, встраиваемый внутрь SVG (ура!)
→ SVG как <img>
→ SVG как CSS-фон
→ SVG-фильтры, SVG-маски, SVG-контуры обрезки
→ SVG-анимация
→ inline SVG (то есть SVG внутри HTML5)
→ CSS3: селекторы,
→ API: геопозиция (geolocation), оффлайн (IndexDB, localStorage, AppCache, FileAPI: чтение двоичного содержимого из файла, перетаскивание файлов),
→ контроллер на вебсокетах, запускающий презентацию с мобильника
→ WebGL
Некоторые из этих способностей подтверждались демонстрациями:
→ фильтры CSS3 и маски SVG
Персональные блоги → [C++] Сравнение структур по набору полей
Вступление
Вероятно, всякий сталкивался с ситуацией, когда нужно написать operator== или operator< для своей структуры. Раньше я делал это как-то так:
struct data
{
unsigned int a_ ;
int b_ ;
int c_ ;
int d_ ;
} ;
bool operator<(const data & a1, const data & a2)
{
// Сравнение по a_, b_ и d_
if (a1.a_ != a2.a_)
return a1.a_ < a2.a_ ;
if (a1.b_ != a2.b_)
return a1.b_ < a2.b_ ;
return a1.d_ < a2.b_ ;
}
Копипаст меня удручал, но придумать ничего путного я не мог.
JavaScript → Кросс-браузерный CSS transform (даже в IE)
CSS свойство transform позволяет масштабировать, наколнять и поворачивать HTML-блоки с помощью CSS. Движки Firefox, Opera и Webkit имеют встроенную поддержку свойства, чего нельзя сказать об Internet Explorer.
Но не все так печально, в IE есть фильтр DXImageTransform.Microsoft.Matrix который реализует такую функциональность.
Один замечательный человек по имени Zoltan Hawryluk разработал небольшую библиотеку под названием cssSandpaper, с помощью которой можно создавать интересные эффекты.