Все про Web

Наборы иконок для E-commerce (Часть 4)

2011-08-15T18:32:00.000+04:00

Электронная коммерция всё больше и больше набирает обороты. Соответственно появляется всё больше интернет-магазинов, платформ электронной торговли и различных сервисов. Поэтому всегда есть потребность в качественных иконках для создания интерфейса. Для вас собрана коллекция иконок для электронной коммерции. (Состоит из 4ех частей)

ЧАСТЬ 4

28. Credit-card pixel icons

29. Cult icons

30. Robbery icons

31. Vector diagram icons

32. Sleek XP icons

33. Shopping cart icon

34. Glossy E-commerce icons

35. Passenger and pedestrian symbol icons

36. E-commerce payment icons

Часть 1
Часть 2
Часть 3

Наборы иконок для E-commerce (Часть 3)

2011-08-15T18:27:00.001+04:00

ЧАСТЬ 3

19. Pixel-mixer

20. Playground icons

21. Payment icons

22. Free icons

23. Payment options

24. Office icons

25. Hand cursor icons

26. Payment type icons

27. Mail Icons

Часть 1
Часть 2
Часть 4

Наборы иконок для E-commerce (Часть 2)

2011-08-15T17:58:00.002+04:00

ЧАСТЬ 2

10. Project Iconset

11. Silk Companion

12. Credit-card logos

13. 365 psd

14. Credit card icons

15. Iconarchive

16. Titan icons

17. Luke pensa

18. Macthemes

Часть 1
Часть 3
Часть 4

Наборы иконок для E-commerce (Часть 1)

2011-08-15T17:53:00.001+04:00

ЧАСТЬ 1

1. Iconeden

2. On Stage Icon

3. E-Commerce Icons

4. Visual Pharm

5. Weby Iconset

6. Iconset

7. Chalkwork

8. Informerchant

9. Credit cards

Часть 2
Часть 3
Часть 4

Красивые русские или кириллические шрифты

2011-08-15T17:39:00.000+04:00

Шрифт — одна из важнейших деталей сайта. От того, как будет выглядеть шрифт во многом будет зависеть и весь будущий облик сайта. Но где найти нужный шрифт? Тот, который идеально впишется во внешний вид сайта? Теперь вы знаете где!

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

XFont

Fontstruct

iFont

The Gliphmaker

Фонтов.нет

Fontora

Fonta

Fontodrom

Бесплатные наборы иконок

2011-08-15T17:33:00.001+04:00

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

В этой коллекции вы увидите 10 красивых и бесплатных наборов иконок. Лишь некоторые могут иметь ограничения на коммерческое использование, поэтому сначала мы советуем прочитать описание и только потом использовать какой-либо значок из набора. Всего в этом обзоре вы найдете более 1500 разнообразных иконок, которые вы можно использовать как для web-сайтов, так и для украшения своего рабочего стола.

Rounder png — 43 иконки — Скачать (PNG)

Eico 1 year — 17 иконок — Скачать (PNG, ICO, и ICNS)

3D Cartoon Icons Pack — 111 иконок — Скачать (PNG, ICO, и ICNS)

3D Cartoon Icons Pack III — 205 иконок — Скачать (PNG, ICO, и ICNS)

Scrap Icons — 18 иконок — Скачать (PNG)

Black Neon Agua — более 270 иконок — Скачать (PNG)

Feedicons 2 — 33 иконки — Скачать (PNG)

Function Icon Set — 128 иконок — Скачать (PNG)

Mini Pixel Icons — 320 иконок — Скачать (GIF)

Silk Icons — 700 иконок — Скачать (PNG)

Инструменты для проверки сайта

2011-08-15T17:24:00.000+04:00

Инструменты для проверки кода и текста страниц сайта

Проверка html (html валидатор)
Проверяет html код, как заданный с помощью ссылки на страницу, так и просто в виде загруженного файла или скопированного текста. Дает список замечаний с рекомендациями по их исправлению.
http://validator.w3.org/

Проверка css (css валидатор)

Проверяет стили документа или таблицу стилей, расположенную в отдельном файле.
http://jigsaw.w3.org/css-validator/

Проверка html (html валидатор)Проверяет html код, как заданный с помощью ссылки на страницу, так и просто в виде загруженного файла или скопированного текста. Дает список замечаний с рекомендациями по их исправлению.
http://validator.w3.org/

Проверка css (css валидатор)
Проверяет стили документа или таблицу стилей, расположенную в отдельном файле.
http://jigsaw.w3.org/css-validator/

Проверка лент (feed) RSS и Atom
Проверяет правильность работы фидов RSS и Atom.
http://validator.w3.org/feed/

Проверка доступности с мобильных устройств

Оценивает возможность просмотра страницы с мобильных устройств и выдает список замечаний и ошибок.
http://validator.w3.org/mobile/

Проверка орфографии на веб странице
Подсвечивает ошибки на заданной URL странице.
http://webmaster.yandex.ru/spellcheck.xml

Проверка контента на уникальность
В бесплатной версии показывает до 10 страниц в инете с частичным совпадением текста с вашей страницей.
http://www.copyscape.com

Поиск похожих сайтов
Показывает сайты с похожим содержанием и схожей внутренней структурой
http://similarsites.comПроверка html (html валидатор)

Инструменты для проверки ссылочной структуры, кодов ответа сервера, технических характеристик сайта

Проверка битых ссылок

Показывает список исходящих ссылок для URL и проверяет их отклик. Может проверять рекурсирвно, то есть переходить от одного документа к другому самостоятельно.
http://validator.w3.org/checklink

Freeware инструмент для проверки битых ссылок. Для работы нужно установить его на свой компьютер. Рекурсивно сканирует сайт, делает отчеты, может быть полезен для составления карты сайта.
http://home.snafu.de/tilman/xenulink.html

Проверка ссылочной структуры и веса внутренних страниц

Программа сканирует сайт, строит матрицу внутренних ссылок, добавляет внешние ссылки с заданных URL и, на основании этих данных, рассчитывает внутренние веса страниц сайта.
http://www.design-sites.ru/utility/link-analyzer.php

Проверка HTTP заголовков сайта

Проверяет коды ответа сервера. Дает возможность проверить редиректы (коды ответа 301, 302), заголовок Last-Modified и др.
http://www.rexswain.com/httpview.html

Большая коллекция инструментов для проверки сайта, в том числе и по датацентрам Google. Есть инструмент проверки ответа на запрос 'IfModifiedSince'.
http://oyoy.eu

Проверка информации о домене и об IP адресе

WHOIS-сервис центра регистрации доменов RU center. Дает информацию по IP адресам и доменам по всему миру. Иногда зависает.
https://www.nic.ru/whois/?wi=1

Служба Whois от РосНИИРОС (RIPN). Дает информацию для доменов в зоне RU и IP адресам из базы RIPE (Европа).
http://www.ripn.net:8080/nic/whois/

Служба Whois для доступа с мобильных телефонов.
http://www.whos.mobi

Определяет, где у домена хостинг и также показывает IP адрес сайта.
http://www.whoishostingthis.com

Анализ robots.txt для Yandex

Проверяет доступность для индексации страниц сайта роботом Yandex.
http://webmaster.yandex.ru/robots.xml

Техосмотр сайта

Проверяет работу сайта, сервера на котором расположен сайт и DNS сервера для сайта. Для сайтов, расположенных на хостинге hc.ru, также сообщает о найденных неисправностях и состоянию работ по их исправлению.
http://to.hc.ru

Проверка скорости загрузки сайта
http://webo.in

Проверка скорости загрузки страниц сайта
http://pagespeed.googlelabs.com/

Проверка индексации и отображения сайта поисковиками

Список ключевых слов из Top 20 google для домена
Сервис, показывающий ключевые слова для сайта, по которым он находится в ТОП 20 (первой двадцатке) выдачи Google во времени.
http://www.semrush.com/

Положение сайта по запросам в Yandex и Google

Сервис, показывающий ключевые слова для сайта, и позицию по ним в Yandex и Google. Кроме того сервис оценивает число посетителей сайта.
http://sitehistory.ru/

Экспресс анализ сайта
Видимость в поисковых системах, анализ трафика, обратные ссылки, трастовость, техническое состояния сайта.
http://www.design-sites.ru/utility/express-analys.php

Тиц сайта и PR главной страницы, наличие в важных каталогах, видимость в топе по ВЧ запросам.
http://pr-cy.ru/

Проверка уровня доверия (трастовости) сайта
Сервис, утверждающий, что он измеряет траст для Яндекса (проверить все равно никто не может :).
http://xtool.ru/

Проверка истории развития сайта
Показывает историю развития сайта и дает возможность посмотреть скриншоты старых страниц.
http://www.archive.org/web/web.php

SEO плагины для проверки сайтов
SEO Doctor - дополнение к Firefox. Показывает ссылки на странице и дает удобный интерфейс к различным SEO сервисам.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/

SeoQuake - дополнение к Firefox. Показывает важнейшие характериситки сайта: ТИЦ, PR, обратные ссылки, Alexa Rank. Работает как с выдачей Google, так и с выдачей Yandex. Дает возможность быстрого анализа конкурентов.
http://www.seoquake.com/

Список работающих бесплатных прокси серверов
Обновляемый список бесплатных прокси серверов, в том числе и Российских
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php

Проверка позиций в Yandex и Google - PrjSoft
Сервис дает возможность глубокой проверки (до 500) позиции сайта по регионам в Yandex.
http://www.design-sites.ru/utility/search-xml.php

Web 2.0 генераторы

2011-08-15T17:01:00.000+04:00

Если вы хотите сэкономить время на создании CSS стиля, кнопки или иконки, то без этой подборки генераторов мы не сможете обойтись. Итак, 20 генераторов которые помогут вам в создании сайта.

Stripe Generator 2.0 — Вы создали свой CSS и подключили его к XHTML, но Вы хотите полосатый фон. Нет проблем. Воспользуйтесь stripe generator 2.0. Вы можете генерировать любые виды полосы, которые вы захотите с большим количеством опций. Кроме того, есть возможность просмотреть и загрузить свои варианты полос.
Tabs Generator — Удобный web генератор для создания кнопок с закругленными углами. Изменение размера, цвета фона, толщины рамки, изменение стилей и другие опции. Все просто.
Web 2.0 Badges — Если вам нужен значок в стиле Web 2.0 — этот генератор то, что вы искали. Измените тип или цвет, чтобы создать значок, который вам понравиться.
Favicon — Создайте иконку для своего сайта. С этим генератором вы можете видеть favicon в своем браузере в режиме реального времени и редактировать, как захотите.
Ajaxload Web 2.0 — Прекратите тратить впустую ваше время на создание pre loaders. Вместо этого используйте этот генератор. Большое количество видов загрузчика, цветов и фонов. Так же стоит отметить приятный дизайн сайта.
3D Box — Мы все видели 3D изображения блока с небольшим отражением от него. Это можно сделать в Photoshop’e или любом другом графическом редакторе. Но почему бы не использовать что-то попроще. Только передайте 3 изображения (лицевое, верхнее и боковое изображения) и меньше чем за минуту, у Вас будет 3D блок с любым нужным для вас форматом.
Picmarker — Если Вы используйте большое количество изображений на Вашем сайте и хотите защитить их с помощью водяного знака, то воспользуйтесь Picmarker. Вы можете нанести любой водяной знак на ваши изображения.
CSS Rоunded Corner — Легко создавайте закругленные углы с помощью HTML и CSS.
BGPatterns — Редактор для создания фонов с символами.
Website Ribbon Generator — Генератор для создания надписей на ленте, которая помещается в правый верхний угол экрана.
Free Post it Note Generator — Генерируйте рукописный тест, какой пожелаете.
XHTML/CSS Markup Generator — Возможно вы иногда забываете тэги, используйте эти инструментальные средства, чтобы генерировать разметку.
Reflection Maker — Если у Вас есть изображение, и Вы хотите создать его отражение, передайте картинку и выберите необходимый размер. Все просто (:
Web 2.0 logo creator — Простой генератор логотипов.
Tartan Generator — Забудьте, что полосы используют клетчатую материю. Эта утилита поможет Вам генерировать хорошую клетчатую материю.
Free Footer Generator — Простой и быстрый инструмент, который упрощает создание нижнего блока сайта.
Fresh Badge — Генератор Кистей.
Cool Text — Бесплатная Графика и Генератор Кнопок.
Color Scheme Generator — Приложение для создания любого цвета, большое количество опций и удобный интерфейс.
Dotetemplate — Настройте целый вебсайт с помощью этого генератора.

Цветовые инструменты для веб-дизайнеров

2011-08-15T16:57:00.000+04:00

Определение основных цветов для веб-проекта достаточно тяжелое занятие, нужно найти цвета которые хорошо сочетаются друг с другом и «приятны» глазу. Вот где цветовые инструменты или редакторы играют свою роль. Они помогут вам найти подходящие цвета или даже предложить наборы цветовых палитр, когда вы сомневаетесь в выборе. Здесь собрано лучшие web-сервисы в Интернете, которые могут подобрать нужные цветовые сочетания для вашего сайта.

Colour Lovers

Color Hunter

Color Blender

Color Schemer Online v2

Colr.org

Color Palette Generator

Color Harmony

Color Palette

GenoPal

Color Schemer

4096 Color Wheels

ColorJack

Mетоды и ресурсы по выбору цветовых схем

2011-08-15T16:47:00.001+04:00

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

Получение цвета из имеющегося макета

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

В ситуациях, когда вы не работаете с клиентом и делаете собственные проекты, подбор цветовых сочетаний вы делаете по своему усмотрению и вкусу.

Цветовые on-line ресурсы и инструменты

Есть несколько сайтов и on-line средств, на которых вы можете выбрать цветовую палитру. Многие из этих сайтов позволяют пользователям загружать уже готовые палитры цветов и дорабатывать их. Большинство ресурсов позволяют искать и сортировать цветовые схемы по определенным оттенкам или ключевым словам. Это может быть полезно, если у вас есть один цвет и вы хотите использовать его с другими близкими к нему цветами.

Вот краткий перечень самых лучших ресурсов для поиска цветовых схем.

ColoRotate

COLOURlovers

ColorCombos

Adobe Kuler

Если этих ресурсов вам не достаточно, то посмотрите прошлую статью о цветовых инструментах для веб-дизайнеров.

Следующие on-line инструменты помогут вам разместить и создать палитру цветов в группе. Вот некоторые из лучших.

Copaso

Color Scheme Designer

Toucan

ColorMunki

The Color Wizard

Color Explorer

Снятие цветов с фотографий

Фотографии являются отличным источником цвета. Вы можете легко и быстро просмотреть любую из ваших собственных фотографий или фотографии с сайтов (например Flickr или DeviantART), и найти подходящий вариант, который включает красивую цветовую палитру. Затем загрузить этот снимок в один из on-line инструментов и определить цвета (они предоставляются в шестнадцатеричном значении) для последующего использования их в работе.

Вот некоторые ресурсы такого рода.

ColorSuckr

What’s Its Color

Pictaculous

Palette Generator from Big Huge Labs

Цвета из журналов и других печатных материалов

Но не только в интернете можно найти нужные цветовые сочетания и схемы. Журналы, книги, листовки, плакаты, брошюры, карты и любые другие виды печатных материалов могут стать источником вдохновения. Вы можете найти цвет, который вам нравится, и попытаться определить его «на глаз», или же отсканировать и посмотреть цвет нужного элемента в графической программе, например в Photoshop’e.

Просмотр дизайнерских галерей

Еще одним из способов найти цветовые схемы, которые хорошо будут сочетаться в вебе — это просмотреть дизайнерские галереи. Когда вы это сделаете, то столкнетесь с огромным сочетанием цветовых схем. А понравившиеся могут дать вам отличные идеи для вашей работы. Но, что хорошо для одного сайта может абсолютно не подходить для другого. Поэтому при просмотре дизайнерских галерей, иногда, удобнее искать цвета в разных проектах, потом объединять их и смотреть какие будут лучше смотреться в вашей ситуации.

Вы так же можете найти схему, которая будет более удобна для вас и доработать ее в Photoshop’e. Но чтобы ваша схема стала уникальной и интересной, а не просто скопированной, ее необходимо внимательно и бережно дорабатывать.

Психология цвета

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

Природа

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

А какой у вас подход к выбору цвета? Есть ли у вас свой собственный метод?

Бесплатные векторные шаблоны

2011-08-15T16:33:00.001+04:00

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

Всего этом списке мы собрали 10 ресурсов, на которых вы найдете разнообразные шаблоны на любые темы. Их выбор просто огромен. И вы точно найдете то, что искали.

Dinpattern

Squidfingers

Pattern8

Alice-grafixx

Kollermedia

Everydayicons

Ava7patterns

Webdesignledger

Dreamstime

PatternHead

Ресурсы с векторными шаблонами

2011-08-15T16:29:00.001+04:00

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

Теперь в вашем распоряжении 20 качественных сайтов с отличным набором шаблонов. Надеемся, что с помощью этих подборок поиск и выбор нужных шаблонов для фона станет удобнее, проще и быстрее.

Shizoo Design

Bg Patterns

Fractured Sanity

Huge Magazine

Seamless Tiles

PixelDecor

Patterrific

Portfelia

Pattern Cooler

Hybrid Genesis

Веб-операционная система онлайн

2011-08-15T16:22:00.002+04:00

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

Сейчас количество веб-систем очень велико, что показывает заинтересованность сегодняшних пользователей интернета в онлайн «операционках». Выбор использования онлайн аналога обусловлен несколькими факторами или, если так можно выразиться, плюсами, которые предлагают системы. WebOS позволяют использовать свой рабочий стол на любом компьютере, где есть доступ в интернет. Системы не зависят от аппаратной части компьютера, на котором вы работаете. Большинство из них имеют очень красивый внешний вид и минимально необходимый функционал для работы (почта, rss, файловый менеджер, калькулятор, офисные пакеты, контакты календарь, чат, mp3-плеер и т.д.). Кроме этого, каждая система предоставляет дополнительные возможности, такие как, например, увеличение дискового пространства, а работа в WebOS ничем не отличается от работы в простой операционной системой.

Ниже мы составили список из 10 самых функциональных и удобных веб-операционных систем.

Eye OS

Icloud

Silve OS

Pip

Startforce

CorneliOS

Peepel

Glide

Cloudo

Kidoz

Метод Hover на jQuery

2011-08-09T17:45:00.000+04:00

При создании меню навигации, или любого другого jQuery скрипта, довольно часто появляется необходимость в надежном методе определения положения мышки над объектом или вне его зоны. И тут на помощь приходит hover() метод.
И вот как он используется:

Пример Скачать

$('.selectorClass').hover(
function(){
	$(this).stop().fadeTo('slow',0.4);
},
function(){
	$(this).stop().fadeTo('slow',1);
});

Первая функция работает, когда мышь перемещается над элементами на странице, в которых есть имя класса selectorClass, а вторая, когда мышь покидает зону элементов.

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

Hover на самом деле связывает первую функцию с событием mouseenter, а вторую с
mouseleave, чтобы можно было для альтернативы написать следующее:

$('.selectorClass').mouseenter(function(){
	$(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
	$(this).stop().fadeTo('slow',1);
});

Начиная с версии jQuery 1.4, можно пользоваться одной функцией для hover, которая вызывает оба события mouseenter и mouseleave. Таким образом, можно сократить код еще и в письменном виде только для одной функции:

$('.selectorClass').hover(function(){
	this.check = this.check || 1;
	$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});

В приведенном выше примере каждый раз когда выполняется функция, увеличивается this.check. Кроме того, можно выбрать уровень прозрачности, для fadeTo() (1 — полностью видна).

Это также прекрасное место для использования jQuery функций-переключателей, таких как .SlideToggle() и .ToggleClass() .

Меню на jQuery

2011-08-09T17:32:00.000+04:00

В этом руководстве мы рассмотрим, как можно сделать меню с помощью jQuery. Мы будем использовать сторонний патч на вращение и масштабирование, который можно скачать здесь.

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

Пример Скачать

Разметка

Для этого меню мы не будем создавать список, но будем использовать элементы div для каждого элемента меню. Мы расположим элементы меню так, что главный div наименовался, как menu. У каждого элемента будет иконка, как ссылка, и контент div с заголовком и параграфом, где мы и разместим поисковую форму:

<div class="menu">
	<div class="item">
		<a class="link icon_mail"></a>
		<div class="item_content">
			<h2>Contact us</h2>
			<p>
				<a href="#">eMail</a>
				<a href="#">Twitter</a>
				<a href="#">Facebook</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_help"></a>
		<div class="item_content">
			<h2>Help</h2>
			<p>
				<a href="#">FAQ</a>
				<a href="#">Live Support</a>
				<a href="#">Tickets</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_find"></a>
		<div class="item_content">
			<h2>Search</h2>
			<p>
				<input type="text"></input>
				<a href="">Go</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_photos"></a>
		<div class="item_content">
			<h2>Image Gallery</h2>
			<p>
				<a href="#">Categories</a>
				<a href="#">Archives</a>
				<a href="#">Featured</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_home"></a>
		<div class="item_content">
			<h2>Start from here</h2>
			<p>
				<a href="#">Services</a>
				<a href="#">Portfolio</a>
				<a href="#">Pricing</a>
			</p>
		</div>
	</div>
</div>

Изначально, элемент div окружает лишь иконку, но после наведения, раскрывается, показывая контент.

CSS

Общий стиль меню определяется следующим образом:

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}

Элементы внутри меню будут прижиматься вправо, потому как, мы хотим, чтобы они раскрывали контент влево:

.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

Затем определим стили иконок (класс ссылки) следующим способом:

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/photos.png) no-repeat top left;
}

Другие элементы контента будут определены так:

.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

С помощью белой тени от текста, мы получим эффект гравировки.

Теперь добавим немного магии.

JavaScript

Во-первых, нам нужен jQuery и два скрипта-патча от Zachary.
Затем, добавляем следующие функции:

$('.item').hover(
	function(){
		var $this = $(this);
		expand($this);
	},
	function(){
		var $this = $(this);
		collapse($this);
	}
);
function expand($elem){
	var angle = 0;
	var t = setInterval(function () {
		if(angle == 1440){
			clearInterval(t);
			return;
		}
		angle += 40;
		$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
	},10);
	$elem.stop().animate({width:'268px'}, 1000)
	.find('.item_content').fadeIn(400,function(){
		$(this).find('p').stop(true,true).fadeIn(600);
	});
}
function collapse($elem){
	var angle = 1440;
	var t = setInterval(function () {
		if(angle == 0){
			clearInterval(t);
			return;
		}
		angle -= 40;
		$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
	},10);
	$elem.stop().animate({width:'52px'}, 1000)
	.find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

Чтобы все было проще, мы создали две функции. Одна отвечает за разворот элемента, вторая — за его сворачивание. Функция разворота поворачивает иконку вокруг себя 4 раза (360 градусов умножить на 4, будет 1440 градусов). Мы также добавили анимацию разворачивания, с помощью плавного увеличения ширины элемента. Затем, появление контента.

Функция сворачивания поворачивает иконку в обратную сторону, уменьшая ширину элемента и пряча контент.

8 шрифтов, которые вы не используете в CSS, хотя должны

2011-08-09T17:11:00.000+04:00

CSS принес нам много возможностей в плане типографии, но мы как обычно ограничены 4-5 основными шрифтами, используя их снова и снова.

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

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

1. Palatino Linotype / Palatino

WINDOWS 97.09% / MAC 78.86%

Это симпатичный шрифт серии Serif, и хорошо распространен на Mac и Windows (97,09% под Windows, и 78,86% под Mac). Однако немногие люди используют его по умолчанию и вместо Palatino предпочитают Georgia или Times. Как вы можете видеть, этот шрифт поддерживает большие заголовки, и его также можно использовать в сносках . В худшем случае вы всегда сможете вернуться к прежнему Georgia, Times и т.д.

2. Tahoma

WINDOWS 96.09% / MAC 72.02%

Признаться, это один из наших любимых шрифтов, потому что для него можно найти много эффективных применений. Вряд ли нужно использовать Tahoma очень часто, несмотря на то, что является шрифтом-копией. И опять выбираем Arial или Helvetica, если он не установлен.

3. Impact

WINDOWS 95.85% / MAC 88.08%

Правда, этим шрифтом, часто злоупотребляют в dev-разработках. Так как он один из самых ’частых’ шрифтов на большинстве компьютеров, то есть вероятность, что он будет и самым используемым. Несмотря на это, есть много ’хороших’ мест, кроме заголовков, где можно использовать Impact, и он отлично будет работать.

4. Century Gothic

WINDOWS 85.44% / MAC 42.50%

Очень приятный элегантный шрифт, которым ранее, часто злоупотребляли дизайнеры. Но он был запрещен, и поэтому им не пользовались некоторое время. Может быть это и есть идеальный шрифт для вашей целевой аудитории. Если вы беспокоитесь по поводу низкой поддержки компьютерами на Mac, вы всегда можете выбрать Futura, который имеет очень высокую поддержку у Macов.

5. Arial Black

WINDOWS 97.73% / MAC 96.18%

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

6. Arial Narrow

WINDOWS 87.08% / MAC 91.01%

И снова старый добрый Arial. Так же, как и Arial Black, Arial Narrow шрифт для больших заголовков. Вместо Arial Black, вы можете использовать шрифт Arial Narrow, если хотите, чтобы заголовок выглядел более элегантным и легким.

7. Copperplate / Copperplate Gothic Light

WINDOWS 58.13% / MAC 85.85%

Мы ненавидим этот шрифт, в основном потому, что он выглядит слишком широким. Но были времена, когда он эффективно использовался, и кроме того, сейчас он имеет очень хорошую поддержку на новых компьютерах с Windows и большинстве компьютеров с установленным Mac. Скорее всего его применение это — обычные и крупные заголовки, потому что он ужасно неразборчив при маленьких размерах.

8. Gill Sans / Gill Sans MT

WINDOWS 43.09% / MAC 90.82%

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

Прокачиваем таблицы с помощью CSS3

2011-08-09T16:57:00.000+04:00

Как использовать некоторые полезные свойства CSS3, чтобы облагородить вид ваших таблиц? Это возможно, благодаря новым селекторам, которые могут обращаться к конкретным записям, ячейкам, столбцам. Таким образом, можно создавать уникальные стили таблиц, без использования дополнительных классов в верстке.

Пример Скачать

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

Но сначала разметка.

Разметка

В начале идет стандартная структура таблицы:

<table class="table1">
	<thead>
		<tr>
			<th></th>
			<th scope="col" abbr="Starter">Smart Starter</th>
			<th scope="col" abbr="Medium">Smart Medium</th>
			<th scope="col" abbr="Business">Smart Business</th>
			<th scope="col" abbr="Deluxe">Smart Deluxe</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th scope="row">Price per month</th>
			<td>$ 2.90</td>
			<td>$ 5.90</td>
			<td>$ 9.90</td>
			<td>$ 14.90</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="row">Storage Space</th>
			<td>512 MB</td>
			<td>1 GB</td>
			<td>2 GB</td>
			<td>4 GB</td>
		</tr>
		<tr>
			<th scope="row">Bandwidth</th>
			<td>50 GB</td>
			<td>100 GB</td>
			<td>150 GB</td>
			<td>Unlimited</td>
		</tr>
		<tr>
			<th scope="row">MySQL Databases</th>
			<td>Unlimited</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
		</tr>
		<tr>
			<th scope="row">Setup</th>
			<td>19.90 $</td>
			<td>12.90 $</td>
			<td>free</td>
			<td>free</td>
		</tr>
		<tr>
			<th scope="row">PHP 5</th>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
		</tr>
		<tr>
			<th scope="row">Ruby on Rails</th>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
		</tr>
	</tbody>
</table

У нас есть все элементы, что используются в таблицах: заголовок (header), тело (body), и подвал (footer). В примере будем использовать данные тарифов одной хостинговой компании. И так, три разных стиля.

Таблица №1

Первая таблица будет в зеленых тонах с градиентом в заглавных ячейках (элементы “th”). Давайте начнем с основного стиля таблицы:

table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    border-collapse:separate;
}

Для того, чтобы было некоторое расстояние между ячейками, будем использовать свойство border-collapse со значением separate.
Можно использовать стили для шрифта с сайта Typechart. Это очень полезный ресурс с хорошими примерами шрифтов и готовым CSS кодом.
Элементы th в заголовке будут описаны следующим образом:

.table1 thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

Мы используем свойство градиента для браузеров Firefox и Webkit (Safari и Chrome), чтобы создать красивый градиент из трех цветов. Свойство border-radius скругляет верхний левый и верхний правый углы ячеек.
Теперь нам нужно позаботиться об элементе th, являющимся пустым. С помощью селекторов CSS3 мы можем делать невероятные вещи, и одна из них — это выбор элементов, являющихся пустыми. Делается следующим образом:

.table1 thead th:empty{
    background:transparent;
    border:none;
}

Подвал таблицы оформляется так:

.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}

Усилим отображение контента с помощью свойства text shadow.

Внутренние ячейки таблицы оформлены следующим образом: светло-зеленый фон и белая тень текста для получения эффекта гравировки:

.table1 tbody td{
    padding:10px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

Добавим очень тонкий бордюр и скругления для ячеек. Получим небольшой светящийся эффект. Можно использовать свойство box shadow для получения подобного эффекта.

Теперь, нужно добавить иконку для всех ячеек, у которых есть элемент span с классом
check. С помощью следующего CSS кода получим:

.table1 tbody span.check::before{
    content : url(../images/check0.png)
}

Это свойство позволит добавить контент (в нашем случае это изображение) внутрь элемента. Также можно добавить текст. Можно использовать свойства ::before или ::after, которые и будут определять, куда вставлять контент.

На этом все. Теперь посмотрим вторую таблицу.

Таблица №2

Вторая таблица выглядит немного элегантней первой, благодаря черному заголовку и подвалу.

В этой таблице нет свободного расстояния между ячейками:

table.table2{
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.2em;
    border-collapse:collapse;
    text-align:center;
}

Так как стили у заголовка и подвала похожи, пропишем их вместе:

.table2 thead th, .table2 tfoot td{
    padding:20px 10px 40px 10px;
    color:#fff;
    font-size: 26px;
    background-color:#222;
    font-weight:normal;
    border-right:1px dotted #666;
    border-top:3px solid #666;
    -moz-box-shadow:0px -1px 4px #000;
    -webkit-box-shadow:0px -1px 4px #000;
    box-shadow:0px -1px 4px #000;
    text-shadow:0px 0px 1px #fff;
    text-shadow:1px 1px 1px #000;
}

Элемент th в футере имеет свой стиль:

.table2 tfoot th{
    padding:10px;
    font-size:18px;
    text-transform:uppercase;
    color:#888;
}

Ячейки в подвале сейчас такого же стиля, что и в заголовке, нам нужно немного другое свойство box shadow. В заголовке тень указывает наверх, в подвале — вниз. Также меняем цвет текста:

.table2 tfoot td{
    font-size:36px;
    color:#EF870E;
    border-top:none;
    border-bottom:3px solid #666;
    -moz-box-shadow:0px 1px 4px #000;
    -webkit-box-shadow:0px 1px 4px #000;
    box-shadow:0px 1px 4px #000;
}

Вернемся наверх и укажем для пустой ячейки стили:

.table2 thead th:empty{
    background:transparent;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

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

С помощью селектора :nth-last-child мы можем указать на последний элемент ячейки в заголовке и указать, что у него нет правого бордюра:

.table2 thead :nth-last-child(1){
    border-right:none;
}

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

.table2 thead :first-child,
.table2 tbody :nth-last-child(1){
    border:none;
}

Теперь добавим немного оформления для элементов th в теле таблицы:

.table2 tbody th{
    text-align:right;
    padding:10px;
    color:#333;
    text-shadow:1px 1px 1px #ccc;
    background-color:#f9f9f9;
}

И еще немного для остальных ячеек:

.table2 tbody td{
    padding:10px;
    background-color:#f0f0f0;
    border-right:1px dotted #999;
    text-shadow:-1px 1px 1px #fff;
    text-transform:uppercase;
    color:#333;
}

Теперь добавим иконку в элементы span с классом check:

.table2 tbody span.check::before{
    content : url(../images/check1.png)
}

Таблица №3

В третьей таблице будет немного больше CSS свойств, в основном, из-за разноцветных столбцов в заголовке. И то можно сделать, использя только селекторы (т.е. без дополнительных классов).
Основной стиль таблицы следующий:

table.table3{
    font-family:Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.7em;
    text-align:center;
    border-collapse:collapse;
}

Стиль для ячеек th в заголовке:

.table3 thead th{
    padding:6px 10px;
    text-transform:uppercase;
    color:#444;
    font-weight:bold;
    text-shadow:1px 1px 1px #fff;
    border-bottom:5px solid #444;
}

Пустые ячейки:

.table3 thead th:empty{
    background:transparent;
    border:none;
}

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

.table3 thead :nth-child(2),
.table3 tfoot :nth-child(2){
    background-color: #7FD2FF;
}
.table3 tfoot :nth-child(2){
    -moz-border-radius:0px 0px 0px 5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table3 thead :nth-child(2){
    -moz-border-radius:5px 0px 0px 0px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
}
.table3 thead :nth-child(3),
.table3 tfoot :nth-child(3){
    background-color: #45A8DF;
}
.table3 thead :nth-child(4),
.table3 tfoot :nth-child(4){
    background-color: #2388BF;
}
.table3 thead :nth-child(5),
.table3 tfoot :nth-child(5){
    background-color: #096A9F;
}
.table3 thead :nth-child(5){
    -moz-border-radius:0px 5px 0px 0px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
}
.table3 tfoot :nth-child(5){
    -moz-border-radius:0px 0px 5px 0px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
}

Мы также добавили скругление на ячейки, располагающиеся на углах таблицы.
Основной стиль для ячеек td в подвале:

.table3 tfoot td{
    font-size:38px;
    font-weight:bold;
    padding:15px 0px;
    text-shadow:1px 1px 1px #fff;
}

Добавим немного воздуха для ячеек в теле таблицы:

.table3 tbody td{
    padding:10px;
}

Нам нужно, что колонка цен была с жирным шрифтом:

.table3 tbody tr:nth-child(4) td{
    font-size:26px;
    font-weight:bold;
}

Столбцы в теле таблицы будут с измененными стилями. Для этого мы будем использовать селекторы :nth-child, но со значениями even и odd:

.table3 tbody td:nth-child(even){
    background-color:#444;
    color:#444;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(189,189,189)),
        color-stop(0.7, rgb(224,224,224))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 39%,
        rgb(224,224,224) 70%
        );
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td:nth-child(odd){
    background-color:#555;
    color:#f0f0f0;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(85,85,85)),
        color-stop(0.7, rgb(105,105,105))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(85,85,85) 39%,
        rgb(105,105,105) 70%
        );
    text-shadow:1px 1px 1px #000;
}

Также добавим правый бордюр в последние ячейки в теле таблицы:

.table3 tbody td:nth-last-child(1){
    border-right:1px solid #222;
}

Описание в заголовке будем выглядеть следующим образом:

.table3 tbody th{
    color:#696969;
    text-align:right;
    padding:0px 10px;
    border-right:1px solid #aaa;
}

Слева прописываем иконку:

.table3 tbody span.check::before{
    content : url(../images/check2.png)
}

Вот и все стили!

Источник: Pimp Your Tables with CSS3

Стикеры на CSS3

2011-08-06T16:22:00.002+04:00

В этой статье мы попробуем построить на CSS3 стикеры-заметки и стикеры-таблички.

Пример для стикеров-заметок

Пример для стикеров-табличек

Посмотрите примеры, чтобы поиграть с кодом с помощью jsFiddle. Как вы видите, реализация очень проста. CSS3 реально хорош. Изображений нет (кроме kiwi или dodo).

HTML разметка

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'>

<ul id="notes">
    <li>
        <p>Push new feature to Kiln for code review</p>
    </li>
    <li class="kiln">

        <p>Browse hacker news for a bit</p>
    </li>
    <li>
        <p>Read JavaScript: The Good Parts by Douglas Crockford</p>
    </li>
</ul>

Обратите внимание, что уникальные шрифты вытягиваются прямо из Google CDN.

Немного CSS3 магии:

body {
    background: #B2CCCC;
}

#notes li {
    position: relative;
    width: 300px;
    min-height: 100px;
    margin: 25px auto;
    padding: 60px 15px 15px 15px;
    background: #fff url(http://our.fogbugz.com/images/tbKiwiLogo.gif) no-repeat 4px 8px;
    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #000;
    -webkit-transform: rotate(-.5deg);
    -moz-transform: rotate(-.5deg);
    -o-transform: rotate(-.5deg);
}

#notes li:nth-child(even) {
    -webkit-transform: rotate(.5deg);
    -moz-transform: rotate(.5deg);
    -o-transform: rotate(.5deg);
}

#notes li.kiln
{
    background-image: url(https://rob.kilnhg.com/Content/Images/kiln_focus.gif);
}

#notes li p {
    text-align: center;
    font: normal normal normal 40px/48px 'Reenie Beanie', Helvetica, Arial, sans-serif;
    color: #000;
    text-shadow: white 1px 1px 0px;
    overflow:hidden;
}

#notes li::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 115px;
    top: -15px;
    width: 75px;
    height: 25px;
    z-index: 2;
    background-color: rgba(243,245,228,0.5);
    border: 2px solid rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    box-shadow: 2px 2px 2px #000;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
}
#notes li:nth-child(even)::before {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
}

У каждой записки есть градиент на фоне, придающий стикеру цвет. Каждый стикер немного наклонен с помощью свойства transform и имеет небольшую тень, выполненую с помощью
box shadow для придания 3D эффекта.

Липучка выполнена с помощью ::before, также имеет box shadow, абсолютного cпозиционирована, немного наклонена и имеет полупрозрачный фон (использована альфа-прозрачность).

Источник: Sticky Notes with CSS3

Маска контента под углом на CSS

2011-08-06T16:10:00.002+04:00

В этой статье мы вам покажем, как можно создать маску контента, расположенную под углом, используя только CSS. Идея очень проста и заключается в использовании свойства CSS transform ( rotate (поворот) более точно). Конечно же, эффект будет только в тех браузерах, которые поддерживают этой свойство.

Пример Скачать

Идея, как уже упоминалось, довольно проста. У нас есть 3 вложенных элемента. На верхнем уровне контейнер определенного размера, как основа. Второй элемент будет повернут на X градусов (по часовой стрелке) и третий элемент будет повернут на -X градусов (против часовой стрелки). Посмотрите на изображение ниже, чтобы лучше понять идею.

HTML верстка выглядит вот так:

<div class="box">
<div class="inner">
<div class="content"><img src="img.jpg" alt="my bike" /></div>
</div>
</div>

Старый добрый CSS

Отметим наиболее важные моменты. Свойство overflow необходимо на всех 3 элементах (в прочем, вы можете не ставить его на 3 элементе). Первый элемент не поворачивается и у него фиксированные ширина и высота. Второй элемент поворачивается по часовой стрелке и третий против часовой стрелки на то же значение градусов. Да, вам прийдется поиграть со свойством margin, чтобы все выглядело идеально. В примере показаны основы, не дизайн, так что вы можете оформить этот блок на свой вкус.

/* angled box styles */
.box{
 width:700px;
 height:300px;
 background:#ccc;
 overflow:hidden;
 margin:1em 0;
 }
.box .inner{
 -moz-transform:rotate(20deg);
 -webkit-transform:rotate(20deg);
 -o-transform:rotate(20deg);
 width:300px;
 height:450px;
 margin-top:-70px;
 margin-right:100px;
 overflow:hidden;
 background:#aaa;
 float:right;
 border:3px solid #fff;
 }
.box .inner .content{
 -moz-transform:rotate(-20deg);
 -webkit-transform:rotate(-20deg);
 -o-transform:rotate(-20deg);
 width:500px;
 height:320px;
 margin-top:60px;
 margin-left:-80px;
 overflow:hidden;
 background:#f1f1f1;
 }

Такой трюк очень хорошо работает на изображениях, но и текстовое содержание не запрещено.

Еще раз напомним, что прийдется поработать со свойством margin, чтобы получить наилучший
результат. Также не забывайте про браузеры, которые не поддерживают повороты на CSS.

Источник: Angled content mask with CSS

Боке с помощью градиентов на CSS3

2011-08-04T22:47:00.002+04:00

Давайте попробуем реализовать эффект Боке вместо фонового изображения с помощью CSS3.

Дизайн Боке
Были изучены несколько фото с эффектом боке и, как результат, были найдены следующие особенности:

Должны присутствовать группы кругов похожих цветов. В каждой группе, круги могут перекрывать друг друга.

Цветовой переход от одной группы в другую может быть выполнен с помощью наложения радиального градиента второго цвета группы на первую.

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

Каждая группа имеет 2 или более маленьких кругов или один большой, используемые, как основы.

Используемые фоны кругов, как правило, полупрозрачные. Нужно для эффекта наложения.

Реализация

На картинке представлена «единица» нескольких групп кругов с координатами:

Черный бэк определяет размер «единицы» с помощью свойства background-size. В демо это квадрат с размерами 300px. Каждый из этих кругов является фоновым изображением, со свойством background-size.

Затем, мы используем свойство background-position для установки координат центров кругов в этой «единице». Как вы видите, точка отсчета находится в центре квадрата.

Используя свойство background-repeat, мы можем повторять эту «единицу» на экране! Вы можете
поиграть размером единицы, чтобы получить свои эффекты боке.

Также напоминаем, что градиенты работают только в Firefox 3.6+, Safari 4+, Chrome 10+ и во всех других браузерах, поддерживающих радиальные градиенты CSS3.

Источник: Bokeh with CSS3 Gradients

Создание сайта: на что обратить внимание?

2011-08-04T22:09:00.001+04:00

Итак, вы, наконец, решились на такое дело, как создание сайта. Рано или поздно к пониманию этого приходит большинство из нас. Ведь развитие современных Интернет-технологий не стоит на месте, сейчас в виртуальное пространство постепенно переносятся практически все сферы жизнедеятельности человека: учёба, работы, досуг и многое, многое другое.

А в связи с этим вопрос, иметь ли собственный «участок» в глобальной сети, уже не стоит. Очевиден ответ: создание сайта – это вопрос не только престижа, но и эффективности работы, а также дальнейшего развития любой уважающей себя компании.
Между тем, необходимо заметить, что создание сайта не является таким уж лёгким делом, как это может показаться на первый взгляд. Разумеется, речь идёт исключительно об эффективных, качественных и «работающих» на своего владельца сайтах.

Прежде чем приступить к web-разработкам, необходимо уяснить для себя, какой объём знаний, навыков, инструментов и средств нам понадобится для этой работы. Создание сайтов, которые будут красиво оформлены, уникальны, но в то же время удобны в работе и использовании требуют знания основ web-дизайна, языка HTML, языка PHP и языков Интернет-программирования для написания скриптов и сценариев– JavaScript и PHP Script, а также необходимо уметь применять CSS. С помощью всех этих инструментов вы сможете освоить структуру html-документа, поймёте, что такое теги и атрибуты, научитесь управлять рисунками, создавать и форматировать таблицы, освоите стилевой класс и псевдокласс, фреймы и многое другое.

Очевидно, что создание сайта оказалось не таким уж и простым делом, эффективно справиться с которым в состоянии лишь профессионалы. Однако это отнюдь не означает, что и рядовой пользователь, без специального образования, не сможет преуспеть в таком нелегком деле. Но такой сайт будет «непрофессиональным», недостаточно качественным и функциональным, тем не менее выполнять функции «визитной карточки» он будет в состоянии. Если же вы стремитесь сделать сайт, который бы приносил вам прибыль, то здесь уже необходимо немного «попотеть», или обратиться за помощью к специалистам.
Создание web-сайта – это целый процесс, и как любой другой процесс, он состоит из отдельных этапов. Что сюда входит?

1. Прежде всего, создание сайта невозможно осуществить без его первоначального планирования и проектирования. На этом этапе происходит постановка целей и задач сайта, определяется его целевая аудитория в сети. В соответствии со всем этим проектируется структура, отдельные функциональные модули и, собственно, дизайн будущего сайта. Отдельно стоит обратить внимание на регистрацию и выбор доменного имени.

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

3. После того, как создание сайта завершено, начинается его «сопровождение», включающее регулярное обновление текстовой информации и контента, поддержание их актуальности, обеспечение «обратной связи».

4. Затем начинается продвижение сайта, включающее в себя целый комплекс действий, направленных в конечном итоге на увеличение целевой аудитории посетителей сайта.

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

Анимированные пузырьковые кнопки на CSS3

2011-08-04T21:58:00.001+04:00

В этой статье мы попробуем создать полезный набор анимированных кнопок, используя всю мощь CSS3. С этим набором вы сможете просто странсформировать любую ссылку на вашем сайте в анимированную кнопку, назначив ей всего лишь имя класса(ов). В JavaScript нет необходимости. В наборе реализовано четыре цветовых схемы и три типоразмера кнопок.

Пример Скачать

HTML

Для того, чтобы сделать ссылку кнопкой, ей нужно назначить класс .button и один из поддерживаемых цветов. Смотрите пример ниже:
<a href="#" class="button blue big">Download</a>
<a href="#" class="button blue medium">Submit</a>
<a href="#" class="button small blue rounded">Submit</a>

Доступны четыре класса цветов : blue (голубой), green (зеленый), orange (оранжевый) и gray (серый). Остальные классы, как вы видите, не являются обязательными. Вы можете выбрать размер кнопки среди маленького, среднего и большого и можете сделать кнопку более скругленной. Имена классов подобраны таким образом, чтобы их легко было запоминать, но при этом могут возникнуть проблемы с совпадением имен классов на вашей странице.

Давайте теперь посмотрим на классы более подробно...

CSS

Весь CSS код находится в buttons.css. Просто привяжите этот файл к своему проекту и используйте нужные вам классы.
Обратите внимание, что в коде использованы свойства стилей, характерные для определенных браузеров. В этом нет ничего страшного, если браузер видит не знакомое ему свойство, он просто его пропускает.

buttons/buttons.css
.button{
font:15px Calibri, Arial, sans-serif;

/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);

/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;

display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;

background-repeat:no-repeat;

/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */

background-position:bottom left;
background-image:url('button_bg.png');

/* CSS3 background positioning property with multiple values. The background
images themselves are defined in the individual color classes */

background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;

/* Applying a default border radius of 8px */

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

/* A 1px highlight inside of the button */

-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;

/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */

-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
-o-transition:background-position 1s;
transition:background-position 1s;
}

.button:hover{

/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}

Первое, что нужно сделать — это определить класс кнопки. Основой кнопки является позиционирование, шрифт и стили заднего плана.
Сначала идут настройки шрифтов, потом отображение блока кнопки. Устанавливаем свойство ссылки inline-block, которое позволит ей быть и текстовым элементом и блочным.
Как вы видите, каждой кнопке можно назначить одно из четырех изображений на заднем плане, но при этом с сервера запрашивается только один файл изображения. Здесь применена технология спрайтов, когда используется только часть одного большого файла. Это хорошо видно на картинке.

Используя свойство CSS «смещение фонового изображения», мы добьемся эффекта анимации пузырьков, меняя фон, когда наводим мышкой на кнопку.
Осталось сказать несколько слов о размерах и закруглениях.

/* The three buttons sizes */

.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}

/* A more rounded button */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

Есть три класса размеров: small, medium и big и rounded (класс закругления). Кнопки масштабируются в зависимости от их размера текста. Нет привязки к ширине и высоте кнопки.
Рассмотрим цветовые схемы на примере синей кнопки. Остальные цвета выполнены по аналогии с этой.

/* BlueButton */

.blue.button{
color:#0f4b6d !important;

border:1px solid #84acc3 !important;

/* A fallback background color */
background-color: #48b5f2;

/* Specifying a version with gradients according to */

background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);

background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
background-color:#63c7fe;

background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

Только Mozilla и Webkit браузеры поддерживают CSS градиенты на данный момент времени, и у каждого свой синтаксис. Еще стоит добавить, что нет официально принятого синтаксиса определения градиентов, и те браузеры, которые не являются выше названными, будут отображать резервный фон.
В фрагменте кода видно, что мы определяем линейный градиент и радиальный на нем, причем, чтобы смесь градиентов была более плавной, мы назначаем радиальному градиенту свойство прозрачности.

CSS3 анимированные пузырьковые кнопки полностью готовы!

Источник: CSS3 Animated Bubble Buttons

Изображение в градациях серого на HTML5

2011-08-04T21:24:00.000+04:00

Давным-давно, чтобы перевести изображение в градацию серого, приходилось делать это в графическом редакторе. В настоящее время, изображения можно конвертировать без стороннего ПО с помощью canvas HTML5. Мы
вам покажем, как все это работает на HTML5 & jQuery. Надеемся, что, этот сниппет будет полезен в таком непростом деле, как разработка сайта портфолио или галерея.

Пример

В примере показано, как работает изображение в градациях серого цвета с hover эффектом HTML5 и jQuery. До HTML5, для реализации данного эффекта понадобилось бы два изображения: цветное и черно-белое. Но в HTML5 нужно всего одно изображение, потому, как черно-белый вариант может быть сгенерирован автоматически из исходника.

jQuery

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

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

// On window load.
$(window).load(function(){

// Fade in images so there isn't a color "pop" document load and then on window load
$(".item img").fadeIn(500);

// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});

// Fade image
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});

// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>

Как это использовать

Проверьте:

включение в код jquery.jsналичие кода, представленного выше

установить целевое изображение (например, .post-img, img, .gallery img, и т.д.)

скорость анимации (например, 1000 = 1 секунда)

Совместимость

Работает с любыми браузерами, поддерживающих HTML5 и Javascript, таких, как: Chrome, Safari и Firefox. Если HTML5 не поддерживается, то будет показано по умолчанию цветное изображение.
Примечание: не работает локально на Firefox и Chrome. Нужно положить HTML файл на веб-сервер.

Источник: HTML5 Grayscale Image Hover

Создание вращающихся лучей с помощью CSS3 анимации и JavaScript

2011-08-04T18:17:00.001+04:00

Томас Фукс, создатель script2 (Scriptaculous «вторая итерация») и Zepto.js (мобильный JavaScript фреймворк), создает выдающиеся анимационные элементы на JavaScript. Он легенда по праву, и не зря. Его работа вдохновила веб-разработчиков во всем мире отказаться от Flash и сделать свой выбор в пользу JavaScript. Из его проектов нам понравились вращающиеся лучи.

Пример

CSS

#rays {
background:url(rays.png) 0 0 no-repeat;
position:absolute;
top:0;
left:0;
width:490px;
height:490px;
-webkit-transform:scale(1) rotate(16.768rad);
-moz-transform:scale(1) rotate(16.768rad);
}

Лучи должны быть выполнены через background, потому что в CSS проще управлять размерами и трансформацией изображений.

JavaScript

Вращающиеся лучи выполнены с помощью JavaScript и CSS3. Первый шаг — определить браузер:

var cssPrefix = "";
switch(Browser.name) {
case "safari":
cssPrefix = "webkit";
break;
case "chrome":
cssPrefix = "webkit";
break;
case "firefox":
cssPrefix = "moz";
break;
case "opera":
cssPrefix = "o";
break;
case "ie":
cssPrefix = "ms";
break;
}

Для определения браузера была использована библиотека MooTools Browser object, но, в принципе, можно использовать и сторонние JS библиотеки. Как только браузер определен, устанавливаем setInterval переменную, используемую, как интервал периодического обновления вращаемого элемента:

// Spin them rays!
if(cssPrefix) { // Skip IE!
var rays = document.getElementById("rays"), degrees = 0, speed = 0.05;
setInterval(function() {
degrees += speed; // degree adjustment each interval
rays.setAttribute("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
},20);
}

На MooTools это выглядит так:

// Spin them rays!
if(cssPrefix) { // Skip IE!
var rays = $("rays"), degrees = 0, speed = 0.05;
(function() {
degrees += speed; // degree adjustment each interval
rays.set("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
}).periodical(20);
}

Устанавливаем на 20 милисекунд, чтобы движение было плавным. Если хотите немного повеселится, то можно поиграть со скоростью. Например, если навести на элемент курсором мыши, то скорость вращения увеличится в 5 раз:

rays.addEvents({
mouseenter: function() { // 5x! Warp speed!
speed = 0.25;
},
mouseleave: function() { // Back to normal;
speed = 0.05;
}
});

Также отметим, что Safari и Chrome справляются с анимацией лучше остальных браузеров.

Источник: davidwalsh.name

Шпаргалка для HTML5

2011-08-04T17:35:00.001+04:00

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

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

Источник: testking.com