Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

WebKit теперь понимает @font-face

Safari
В последней ночной сборке (скачать) KHTML-движка WebKit (который используется в Safari) появилась поддержка правил @font-face, так что Opera, — ранее единственный браузер (со своим движком), поддерживающий эти правила, — теперь не одинока. Это означает, что в WebKit теперь появилась необходимая функциональность для загрузки шрифтов, обозначенных в CSS.

В веб-дизайне всегда была проблема, связанная с ограничениями в выборе шрифтов, которые можно использовать. Теперь с помощью @font-face безопасные шрифты можно использовать в WebKit — это позволит веб-дизайнерам использовать шрифты, которые браузер будет скачивать из Сети, чтобы отображать текст уже с их применением. Конечно, при этом у веб-дизайнера (ну или у его заказчика) должны быть права на распространение этих шрифтов.

Кстати, вполне возможно, что Apple добавит эту сборку в Leopard, который вот-вот должен пойти в печать.

PS: Если вам интересно почитать об использовании, то вам стоит почитать эту статью на A List Apart.
Всего голосов 11: ↑9 и ↓2 +7
Просмотры 2.4K
Комментарии 2

Opera 9.24 / Opera 9.50

Софт
Норвежские разработчики выпустили новую версию шустрого и любимого многими браузера. В Opera 9.24 практически нет никаких изменений по сравнению с предыдущей версией, только исправления двух ошибок: одна могла позволить злоумышленникам запускать вредоносный код на пользовательских компьютерах при помощи сторонних клиентов электронной почты, а другая делала возможным подмену одним сайтом javascript функций с другого.

Скачать: Opera_9.24_International_Setup.exe, 6.25Mb

Если кому-то хочется более существенных обновлений, то сейчас в активной разработке находится версия Оперы под кодовым названием Kestrel (англ. «пустельга»). Она уже анонсировалась на Хабрахабре. В двух словах — это будет ещё более быстрая Opera 9.5 со значительно усовершенствованным встроенным почтовым клиентом M2, расширенной поддержкой SVG и CSS3 селекторов. На данный момент для опробования доступна версия Opera 9.50 build 9613 alpha (o950s_9613m.exe, 5Mb). Самые свежие тестовые версии Оперы со списком улучшений и исправленных ошибок всегда можно найти в официальном блоге разработчиков Desktop Team.
Всего голосов 37: ↑33 и ↓4 +29
Просмотры 852
Комментарии 36

Новое в CSS3: background-clip: text

CSS *
Пока вебмастера спорят о браузерах и стандартах, WebKit занимается делом :) На этой неделе разработчики CSS3 представили новое свойство, названное background-clip:text, которое позволяет наложить любой фон/изображение на текст, границы и даже тень, при этом не перекрывая их, а реализуя нечто похожее на функцию наложения «маски» в Photoshop.

Код выглядит так:



Hello, world!

Результат:
css3.jpg
Симпатично, неправда ли? :) Наверняка, скоро пользователи Safari и FireFox смогут применить это свойство.

Еще несколько скриншотов применения нового свойства можно посмотреть здесь:
текст с тенью
- текст с обводкой
текст с подчеркиваением

Источник

Кросс-пост Блог для вебмастеров
Всего голосов 50: ↑48 и ↓2 +46
Просмотры 9.1K
Комментарии 41

Будущее CSS

CSS *

В связи с участившимися сообщениями о том, что в CSS хотят добавить переменные, анимацию, трансформацию и прочая, хотелось бы немного отстраненно порассуждать на эту тему.
CSS, которому уже 12 лет, изначально был задуман и разрабатывался как средство для описания внешнего вида документа. С тех пор утекло много воды и технология претерпела значительные изменения и дополнения. На данный момент, рабочая версия по стандарту W3C, принятая в 2006 году — Уровень 2.1. Уровень 3 находится в состоянии разработки (есть черновик), и ожидается с нетерпением многими разработчиками.
Вокруг будущего CSS ходит много слухов и предположений, коротые муссируются и множатся, выливаются в дискуссии и споры. Ведь по сути, если хотя бы половина предлагаемых изменений будет осуществлена, то CSS превратится в (полноценный?) язык программирования визуальной составляющей веб-документов.
Читать дальше →
Всего голосов 48: ↑43 и ↓5 +38
Просмотры 1.5K
Комментарии 72

Opera Dragonfly

Разработка веб-сайтов *

Браузер Opera, один из немногих на данный момент, имеет очень хороший уровень поддержки CSS3 (и других стандартов), превращаясь в идеальную платформу для тестирования различных техник, которые предлагаются существующими и будущими стандартами. Однако, эти факты всегда уходили на второй план из-за отсутствия в браузере наглядных инструментов для тестирования, как FireBug или Web Developer Toolbar.

И теперь, разработчики Opera решили, наконец-то, внедрить свой инструмент. Сегодня было проанонсировано о том, что в версии Opera 9.5 beta 2, под названием Opera Dragonfly, будут встроены инструменты для веб-разработчиков. Релиз версии «alpha» намечается на 6е мая. Статус версии говорит сам за себя — мы не увидим всех возможностей инструмента, но это непременно будет хорошим стартом.

Разработчики также будут надеяться и на отзывы пользователей, чтобы, прежде всего, сделать новый инструмент как можно более полным и полезным для веб-разработчиков.

На данный момент на сайте Opera доступна версия Opera 9.5 beta 2 (Kestrel), имеющая поддержку CSS3, так что уже сейчас можно протестировать новые свойства и стандарты в ожидании релиза 6-го мая.

Источник css3.info
Всего голосов 49: ↑40 и ↓9 +31
Просмотры 1.6K
Комментарии 80

CSS-константы: первые тесты уже на ваших экранах

CSS *
Несколько дней назад Daniel Glazman опубликовал на своем блоге новость о том, что он вместе с David Hyatt успешно реализовали идею о CSS-константах (статья в моем блоге). Уже сегодня каждый может увидеть CSS-константы в действии. Для этого нужно установить свежую версию WebKit Nightly Builds.

Собственно, вот мой маленький тест: стили блока div я задала константами.
CSS-константы
Читать дальше →
Всего голосов 37: ↑33 и ↓4 +29
Просмотры 3.6K
Комментарии 51

Закругленные уголки с помощью VML и CSS3

Разработка веб-сайтов *
jsdhfksdfsd

Наткнулся на очень интересный вариант решения очень популярной проблемы многих веб-мастеров — закругление блоков.
Для этого варианта закругления используются VML и CSS3.

Решение без картинок, работает во всех Internet Explorer’ах включая 5ый, в Firefox, в Safari, но к сожалению в старых версиях Opera не работает.
Читать дальше
Всего голосов 112: ↑76.5 и ↓35.5 +41
Просмотры 2K
Комментарии 80

@font-face в Firefox

CSS *
Сотрудник Mozilla, Джон Даггет подготовил сборку Firefox’а с поддержкой @font-face из спецификации CSS3 (часть «web font»). На данный момент она доступна только для Windows и Mac — для Linux пока нет. Есть нюансы которые описаны в комментарие на баг 70132, один из которых заключается в том, что по умолчанию скачиваются лишь те шрифты, что располагаются на просматриваемом сайте (домене), что бы исправить это нужно оключить опицию gfx.downloadable_fonts.same-site-origin.enabled на странице about:config.

Для тех, кто не знает эта вещь из CSS позволяет разработчику задавать на сайте тот шрифт, который ему нужен
Читать дальше →
Всего голосов 34: ↑30.5 и ↓3.5 +27
Просмотры 1.9K
Комментарии 28

IE5+ и CSS3 — есть способ подружить!

Разработка веб-сайтов *
Уверен, что найдутся на Хабре люди, которые уже знают о этом замечательном способе заставить «ненавистный» ИЕ понимать такие вещи, как min-width и ::after. Но лично я об этом способе не знал, и испытал настоящий восторг, когда наткнулся в сети на очень элегантное и эффективное на мой взгляд решение данной проблемы.
Читать дальше →
Всего голосов 83: ↑65 и ↓18 +47
Просмотры 1.1K
Комментарии 80

Наглядное тестирование поддержки CSS3-свойств вашим брузером

CSS *
imageПредлагаю всем интересующимся небольшую страницу с наглядным сравнением того как реагирует ваш браузер на CSS3-свойства, поддерживает их либо нет. Страница будет развиваться и наполняться другими свойствами, кроме того, планирую добавить в нее ссылки на описание свойств и дополнительную информацию. На данный момент в тесте участвует 10 свойств, но если вы хотите расширить его, пожалуйста напишите в комментариях про желаемое CSS3-свойство.

Посмотреть тест.

PS: opacity в тесте не будет.

UPD: тест обновлен: добавлено 5 тестов, исправлена ошибка в css
Всего голосов 46: ↑45 и ↓1 +44
Просмотры 836
Комментарии 87

WebKit научился стилизовать скроллбары

Чулан
Пример
Незамеченной прошла новость недельной давности о том, что в последних сборках WebKit добавлена возможность переопределять внешний вид скроллбаров во всех элементах, где они могут встречаться:
  • контейнерах со стилями overflow
  • выпадающих списках
  • мульти-списках (<select multiple>)
  • текcтовых полях ввода (<textarea>)


Нововведение пока не реализовано в других движках (что может свести его распространённость к нулю), но тем не менее, уверен, оно будет работать на общее благо, показывая хороший пример для подражания и помогая разработчикам не сидеть на месте. Ниже — перевод оригинальной публикации.

Читать дальше →
Всего голосов 20: ↑17 и ↓3 +14
Просмотры 2.1K
Комментарии 20

Новое предложение в W3C/CSS — Flexible Flow Module

CSS *HTML *
Все кто профессионально работают с CSS знают что означенный инструмент достаточно беден на предмет layout management. Например в современном CSS (2.1 и 3) технически невозможно воспрозвести все возможности HTML таблиц.

В Java/AWT/Swing например с самого начала были заложены всяко разны Layout Managers. В CSS такого в чистом виде нет. Непорядок.

Собственно это и явилось причиной нашего предложения в W3C CSS WG.

Читать дальше →
Всего голосов 30: ↑29 и ↓1 +28
Просмотры 2.8K
Комментарии 20

Демонстрация свойства border-radius

CSS *
Нет-нет, я не буду вам показывать простые закруглённые прямоугольники, которые порядком приелись. Но те же самые простые закруглённые прямоугольники могут складываться во вполне осмысленные фигуры. У меня они сложились в слово «twitter».

Работает только в браузерах на движках Gecko и Webkit.

Выглядит так:
image
Читать дальше →
Всего голосов 81: ↑64 и ↓17 +47
Просмотры 4K
Комментарии 54

В Firefox 3.6 добавится вырезание фонов

CSS *
Перевод
Tutorial
Вдобавок ко всем новым возможностям CSS, ранее нами упомянутым, Firefox 3.6* обретает свежайшее новое значение свойства: image-rect. Это позволит вам вырезать область фонового изображения, чтобы показать только часть от целого.

Оно использует собственническую приставку Мозиллы (то есть «-moz-» — прим. перев.) и берёт пару входных значений — URI изображения и границы вырезаемой области (в виде четырёх значений, разделённых запятыми, как во свойстве clip):

foo { background-image: -moz-image-rect(
    url(<uri>),
    <top>,<right>,<bottom>,<left>
); }

Вот пример:

.aside {
    background-image: -moz-image-rect(
    url('link.png'), 0, 32, 26, 0);
}

Наиболее незамедлительным применением этого будет изготовление картинок-спрайтов, но я уверен, что созидательное CSS-сообщество будет способно удумать и другие тому применения.

Читать дальше →
Всего голосов 31: ↑22 и ↓9 +13
Просмотры 535
Комментарии 25

«The news in Russian» или «Буду иначе против оно мы»

Чулан
На сайте dev.opera.com есть статья Seven Web Fonts showcases, в которой собраны семь отличных примеров использования веб-типографики с учётом новых возможностей css 3 в Opera 10. Среди прочего там есть «The news page in Russian». Это все, кто не знают русского, видимо, пребывая в блаженном неведении так считают — что там новости.

Сотрудник Opera Software, Вадим Макеев (на хабре известен как pepelsbey), изготовил шикарный образчик главной страницы газеты «Подзаборная Правда». Я ещё весь выпуск не прочитал, но материал дивный, назову лишь заголовки: «Буду иначе против оно мы», «Ошибками работать страдаете», «Вы кажется основам» и «Биг мирам программном». Вадиму однозначно зачёт!
Всего голосов 13: ↑8 и ↓5 +3
Просмотры 204
Комментарии 5

Динамичные веб-презентации без использования Flash

Разработка веб-сайтов *
Недельку назад Крис Миллс (Opera Software) сказал, что он «планирует серию статей показывающую, что возможно делать „флешеподобные“ вещи, используя только открытые веб-стандарты». Мне показалось это интересным, и, когда я наткнулся на небольшую флеш-презентацию фото-портфолио в журнале Ньюйоркер, то решил проиллюстрировать идею Криса, переделав презентацию. Мне показалось, что с применением JavaScript это будет сделать довольно легко, и я решил не искать лёгких путей, и сделать презентацию только используя возможности CSS. Так же мне было интересно попробовать на практике вкусные новинки CSS3, такие как переходы (transitions).
Если вы хотите просто просмотреть демонстрацию (вторая ссылка), то вам понадобится один из этих браузеров:
  • лучше всего, на данный момент: Google Chrome 4 или Apple Safari 4
  • Firefox 3.7 (полуношные сборки)
  • Opera 10 Mobile (Presto 2.3) или, если вы инсайдер, то Opera (Presto 2.4)
Так же прошу извинить за глупый экран параноидальной MyOpera, требующий подтверждения, что вы действительно хотите посмотреть файл. Обещаю не нанести вам или вашему компьютеру вред. :)
Далее следуют некоторые детали имплементации
Всего голосов 57: ↑51 и ↓6 +45
Просмотры 1.7K
Комментарии 39

Поддержка CSS3 в Opera 10.50

CSS *
С поддержкой CSS3, браузером Оперой, всегда было не особо густо.

Но сегодня, в пре-альфе версии 10.5, Опера анонсирует поддержку интересных и давно ожидаемых фич CSS3, в частности это — CSS3 Transitions и 2D Transform. Правда пока, это еще далеко не рабочее решение, и поэтому, для того что бы посмотреть как это работает в Опере, используем префикс -o. Подробности по ссылке

Все это стало возможно, не без помощи движка Opera’s Presto 2.5

И наконец-то, долгожданная поддержка CSS3 Backgrounds и Borders. И кстати, Опера первый браузер, который позволяет использовать эти прелести без префиксов -moz или -webkit

Читая новость, дойдя до слова префикс -o, я подумал, блин, еще один префикс, но за это (см. абзац выше) — я готов простить Опере новый префикс и сказать, а ведь не зря, используя CSS3 в своих проектах, я писал еще и просто border-radius (помимо -moz и -webkit)

P.S. Опубликовал этот топик именно в этот блог, так как фанаты Оперы еще явно что-то напишут в блог Оперы.
Всего голосов 47: ↑38 и ↓9 +29
Просмотры 1.9K
Комментарии 26

Нюансы употребления плагина jQuery.LocalScroll совместно с CSS-селектором «:target»

jQuery *
Tutorial
На HTML-страницах многих сайтов существуют гиперссылки наподобие <a href="#idName">...</a>, которые ведут не на другую страницу, а к некоторому месту на той же сáмой странице, где и ссылка. Это обычное дело для обширных статей с оглавлением (если каждый пункт оглавления является такой гиперссылкою, которая ведёт к названному в нём заголовку) или с примечаниями (если надстрочный знак примечания служит гиперссылкою и ведёт к примечанию в конце текста, а от примечания стоит гиперссылка в обратном направлении). Таких статей немало в сетевых энциклопедиях (вики, например) или в серьёзных сетевых журналах.

К сожалению, переход по такой внутренней гиперссылке в большинстве современных браузеров Паутины совершается мгновенно, ничуть не заметно для читателя. Это совсем не то, что проматывание страницы вручную, которое происходит плавно и занимает некоторое (заметное взору) время, так что даёт читателю некоторое представление об объёме того текста, мимо которого он пролетает.

Досадно, не правда ли?

К счастью, существует плагин для jQuery, который позволяет невозбранно достичь желаемого, то есть без труда обратить всякий переход по внутренней гиперссылке документа именно в такое проматывание, во всём подобное ручному, но только совершаемое автоматически и за достаточно краткое время (по умолчанию — за секунду), так что читатель как раз успевает осознать происходящее и оценить направление проматывания и пройденное расстояние, но ещё не успевает заскучать.

Этот плагин называется jQuery.LocalScroll, и он, окромя jQuery, потребует для своей работы ещё другой плагин (jQuery.ScrollTo), обёрткою для которого является. Так что достаточно установить jQuery и оба эти плагина — и тогда в дальнейшем вызов функции, включающей автоматическое проматывание для всех внутренних гиперссылок, станет можно записывать как нельзя проще:
$($.localScroll());
Вроде бы всё хорошо. Но проблема в том, что по умолчанию такое проматывание является просто проматыванием: документ прокручивается в окне у читателя, и больше ничего.

Читать дальше →
Всего голосов 31: ↑14 и ↓17 -3
Просмотры 5.5K
Комментарии 19

12 советов по созданию макетов в браузере

Веб-дизайн *
перевод статьи: 12 Killer Tips for Designing in the Browser
image

Как Вы создаете макет сайта?

Обычный проект начинается с создания макета в Фотошопе и потом с использованием HTML и CSS максимально приближается к виду исходного PSD файла. Не смотря на это, развивается направление в веб-дизайне пропускающее этап Фотошопа в пользу создания первоначальной композиции прямо в браузере с использованием вашего любимого редактора. Я уверен, что прямо сейчас Ваша голова шумит от причин, по которым этот подход ограничит ваш дизайн, но есть огромное количество вещей, которые Вы можете делать в браузере. Эта статья познакомит с инструментами и приемами, которые понадобятся для создания великолепных работающих макетов на первом же этапе работы.

Основная идея


Meagan Fisher на 24ways.org представил неотразимый довод проектирования в браузере. Хотя я и не разделяю его презрение к Фотошопу (Я люблю Фотошоп больше любого другого ПО на планете), я согласен с некоторыми другими его пунктами. Фишер говорит, что статическое изображение не дает по настоящему ощутить, как сайт будет работать и что проектирование в браузере направляет твои силы на организацию контента до дизайна, что гарантирует большее удобство и создание правильной структуры

Мы будем использовать статью Фишера как затравку для наших заметок по превращению в профессионала в создании фантастических in-browser макетов готовых к работе сразу по получению одобрения от клиента.

Читать дальше →
Всего голосов 49: ↑40 и ↓9 +31
Просмотры 7.3K
Комментарии 19