Раздельчики: AppleApple SEO Smashing JournalSmashing Journal ДизайнДизайн Для вдохновениеДля вдохновение НовостиНовости Социальные сетиСоциальные сети СтартапыСтартапы ТехногретТехногрет

Ситуация, в которой стоит использовать абсолютное позиционирование

абсолютное позиционирование

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

На рисунке 1 изображен наш список, в котором вместо цены используется изображение в формате GIF, обозначающее оценку (от 1 до 4 звезд). Чтобы задать расположение, заключим изображение в тег (так же, как мы делали это для цены).
Читать далее →

Оставить комментарий

Метки: ,

Опубликовал: Дизайнер от 06 Авг 2014 в 10:33

IE и его далеко не совершенная реализация CSS — сидели на трубе…

ie6

Как вы, возможно, уже знаете, версии Internet Explorer до версии 7 не поддерживают свойство max-width. И как бы нам ни хотелось вообще забыть о существовании IE6, на сегодняшний день этот браузер все еще занимает существенную долю рынка. Но означает ли отсутствие поддержки max-width, что мы, образно говоря, оказались в лодке без весел?

Читать далее →

Оставить комментарий

Метки: , ,

Опубликовал: Дизайнер от 05 Авг 2014 в 11:59

Все сводится к статистике

Все сводится к статистике

Какой фактор является самым важным, когда вы решаете, стоит ли использовать свойства CSS, которые не поддерживаются всеми браузерами? Естественно, статистика. Вы могли бы задать такие вопросы: «Когда можно использовать CSS3 для создания закругленных углов? Когда можно полагаться на RGBA при работе с альфа-прозрачностью цвета? Когда можно перестать думать о том, как элементы дизайна будут выглядеть в IE6?» Все зависит от конкретного сайта (пример: вибер на компьютер), над которым вы работаете.
Читать далее →

Оставить комментарий

Метки: ,

Опубликовал: Дизайнер от 04 Авг 2014 в 11:19

Движущийся фон (многоуровневый скроллинг для ленивых)

Silverback

Напоследок мы совершим «невидимое прикосновение» (привет Филу Коллинзу) к тому, что является своего рода приятным обобщением понятия тонкостей мастерства.

Для кого-то эффект так и останется незамеченным, а у остальных непременно вызовет улыбку… «Многоуровневый скроллинг» фона — простой способ сделать подвижность Сети ее же ин- струментом. Хотя, безусловно, добавление движения к тому, что кажется статичным, требует дополнительных затрат времени.
Читать далее →

Оставить комментарий

Метки: ,

Опубликовал: Дизайнер от 01 Авг 2014 в 9:56

Стили, которые создают кнопку

css кнопки

Теперь мы готовы создать таблицы стилей, которые соберут из этих элементов глянцевую закругленную кнопку в форме пилюли.

Сначала добавим отступ и белый фон, а также сделаем цвет ссылки белым (рис. 1).
Читать далее →

Оставить комментарий

Метки: ,

Опубликовал: Дизайнер от 30 Июл 2014 в 11:49

Встраивание шрифтов с помощью CSS

Встраивание шрифтов с помощью CSS

До этого я говорил о творческом подходе к выбору шрифтов, которые, возможно, были установлены некоторыми пользователями. Но как было бы здорово, если бы мы, дизайнеры, могли сами распоряжаться тем, какие шрифты мы хотим использовать, и встраивать их в макет!

Успешными были уже первые попытки sIFR (http://wiki. novemberborn. net/sifr3/) — технологии, использующей CSS/Flash/ JavaScript и позволяющей встраивать шрифты, заменяя гипертекст на странице. А совсем недавно появилась технология Cufón (http://wiki.github.com/sorccu/cufon/about), которая переводит шрифты в специальный формат, а отрисовка производится с помощью JavaScript.
Читать далее →

Оставить комментарий

Метки: , ,

Опубликовал: Дизайнер от 29 Июл 2014 в 13:58

Как закруглить конкретные углы

закруглить конкретные углы

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

Чтобы закруглить только левый верхний угол (рис. 1), можно написать такой код.
Читать далее →

1 Комментарий

Метки: ,

Опубликовал: Дизайнер от 28 Июл 2014 в 16:35

Вёрстка и подготовка макета к вёрстке

советы по веб-верстке

В этом посте я собрал подборку советов, которые будут полезны для веб-дизайнеров, которые верстают или собираются передать макеты для верстки «верстакам».

Совет №1: Не стоит сливать все элементы дизайна в один слой
Вместо слития слоёв раскладывайте их по группам, которые называйте соответственно общей структуре документа: шапка, меню, контент, подвал и т. д.
Читать далее →

Оставить комментарий

Метки: , , ,

Опубликовал: Дизайнер от 22 Июл 2014 в 12:39

Обзор сервиса Transparent Textures

Сегодня я хотел бы вам рассказать об одном интересно веб-сервисе Transparent Textures, который представляет из себя что-то вроде конструктора текстур. Вы сами выбираете текстуру, придаете ей цвет, смотрите как она будет смотреться и потом скачиваете. В общей сложности на сайте можно создать тысячи или даже миллионы различных вариантов фона для сайта.

Transparent Textures

Читать далее →

Оставить комментарий

Метки: , , , ,

Опубликовал: Дизайнер от 16 Апр 2014 в 11:58

Typekit такой Typekit

bitfoundry.ca

Typekit (https://typekit.com) – это служба для обеспечения шрифтов, которая принадлежит компании Adobe. Она полностью основана на методике @font­face для вложения шрифтов. Ее поль­зователи просто присоединяют СSS­ файлы к страницам. Присоединен­ные СSS-файлы размещаются на Typekit-cepвepax. Затем эти файлы обеспечивают загрузку нужных шриф­тов, делая их доступными в обычных СSS-файлах, создаваемых на сайте.

Вложение шрифтов таким образом – самый простой способ, так как ничего не нужно скачивать: просто скопируйте строку кода и используйте соответству­ющий шрифт, подобно любому другому шрифту в ваших СSS-файлах.

Читать далее →

Оставить комментарий

Метки: , ,

Опубликовал: Дизайнер от 10 Дек 2013 в 14:15

Страница 1 из 3
1 2 3