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

Приветствую пользователей скромного блога Gtalk.kz. Сегодня я решил рассмотреть 2 самых популярных текстовых редактора для написания кода, не важно какого. Так как я не программирую, а могу верстать, могу не верстать, то я и хотел назвать топик программа для верстки сайта: Notepad++ vs Sublime Text, но потом передумал

Собственно перед вами два героя битвы всем известный старый добрый notepad++ и новый набирающий популярность Sublime Text.

Да начнется холивар:

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

Сравнение Notepad++ vs Sublime Text

Параметры	Notepad++ от Don Ho	Sublime Text от Sublime HQ Pty Ltd
Официальный сайт	notepad-plus-plus.org	sublimetext.com
Стоимость	Бесплатный – free	Условно-бесплатный*70$
Лицензия	GNU GPL	Proprietary software
Open Source	Да	Нет
Кроссплатформенность	Windows	Windows Mac Linux
Переведен на	Dutch English French German Italian Portuguese Russian и т.д. вплоть до казахского	English
Подсветка кода	Да	Да
Проверка орфографии	Через плагин	Да
Автосохранение	Да	Да
Миникарта	Да	Да
Макросы	Да	Да
Множественное выделение	Да	Да
Закладки	Да	Да
Плагины	Да	Да
Шпаргалка по редакторам	шпора	шпора

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

Что еще добавить особо не знаю, так как по возможностям они равны в принципе, а остальное решается с помощью плагина. Например, Dimox расхваливает Sublime Text, но все это есть и у Notepad++.

Единственное, кросcплатформенность sublime text может завлечь тех кто постоянно перебегает от одно оси к другой.

Мне Notepad++ хватает для редактирования и пока что не собираюсь переходить.

Время идет и я перешел на Sublime Text 2. Теперь понимаю почему многие перешли на него :). Так что советую всем ;).

Возможно, просто всем захотелось, что-то новое и старый редактор приелся?

А вы каким пользуетесь и почему??

с/у Талга УтБ

Кстати, если вы еще не видели отличный клип от Biting Elbows

В интернете есть такое понятие Responsive web design, т.е. “отзывчивый дизайн”. Сейчас данный термин на русском звучит как “Адаптивный веб-дизайн”, отсюда и название вида верстки.

Суть в двух словах: используя css media запросы по размеру экрана “подсовывать” нужные css стили. Подробнее можно почитать тут.

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

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

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

1. Изменение ширины браузера.

Казалось бы, ведь кто будет заниматься этим?! А зачем самому подбирать мышкой размеры?
Но ведь есть добрые люди и есть решения в виде плагинов для браузеров:

• Google Chrome – Плагин Window Resizer. Загляните в блок “Похожие”, если не понравился данный плагин.
• Opera - Resize Me

2. Закладки в браузер

Также суть в изменении размера окна браузера.
Я нашел 2 варианта:

1. - Resizer
   
   
   
2. - Responsive Design Test – настраиваемый. Можно сгенерировать необходимые размеры устройств на странице на свой вкус.

Для использования на страницах перетащите ссылку на свой браузер и все можно использовать.

3. Responsivepx

http://responsivepx.com

Вводим свой адрес сайта, выбираем нужные параметры: ширину и высоту.

4. Resize My browser

http://resizemybrowser.com/

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

5. Screenfly

http://quirktools.com/screenfly/

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

6. Screenqueri

http://screenqueri.es/

Интересный ресурс для проверки онлайн вашего сайта на разных планшетах и смартфонах.
При чем очень большой выбор: продукция от apple, samsung,htc,blackberry,LG,Nokia и др. Есть также возможность ручного изменения размеров экрана.

7. Responsinator

http://responsinator.com

Особенность ресурса в том, что вывод сайта осуществляется в виде устройства как на картинке. Вот так вот выглядит мой блог на galaxy.

8. Plastilin5

http://plastilin5.com/tools/

А вот так вот выглядит мой блог на айфоне с разрешение 320*480 на ресурсе plastilin5.

9.Mattkersley

http://mattkersley.com/responsive/

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

10. Использование iframe

Интересный вариант с использованием iframe’ов есть на github.
Суть: редактируем html файл с нужными значениями ширины экрана и закидываем в директорию с сайтом, загружаем наш файл и в фреймах должен появиться нужный нам сайт в вариантах на девайсах.

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

с/у УтБ

Если хотите что-нибудь продать из рук в руки, разместить объявление, то вам надо просто подать бесплатное объявление в Москве на сайте барахолки Sindom.ru

На десерт сегодня видео танцора-путешественника Мэта:

Сегодня мы поговорим о программе фотошоп, о том, как использовать его при верстке плюс маленькие хитрости, будем уменьшать время работы с данной программой. Ранее я писал в Урок 3. Верстка сайта: быстро вырезаем картинки в фотошопе, как делаю это я.

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

Не будет тянуть кота за хвост, и начнем, пожалуй :neutral:

Горячие клавиши Фотошопа.

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

Если Вам этого мало, то наберите в google горячие клавиши фотошопе и запоминайте их.

Необходимый набор.

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

Откройте фотошоп, создайте новый документ (ctrl + N), выберите размеры вашей превью картинки (у меня 200 на 200 пикселей), нажмите «Сохранить набор параметров…».

Теперь придумываем название: «200 пикс х 200 пикс», либо «Превью блога» и т.д. и жмите ok.

Теперь чтобы создать документ (ctrl + N) размеров 200 на 200 пикселей, мне достаточно выбрать соответствующий набор.

Расстояние и размеры элементов в фотошопе.

Есть несколько способов определения расстояния между блоками и блоков. Рассмотрим наиболее оптимальные.

Первый способ. Выбираем инструмент «Прямоугольная область» (М) и выделяем необходимый блок.  Смотрим во вкладку «Инфо» в Photoshop.

Таким же способом определяем расстояние между блоками.

Второй способ. Также расстояние можно измерить с помощью инструмента «Линейка». Не забывайте зажимать Shift для прямой линии линейки. Минус данного способа: необходимо определять ширину и высоту по отдельности.

Другие способы: Также можно выделить элемент, скопировать и при создании нового документа записать размеры. Узнать размер текущего документа можно в левом нижнем углу.

Цвет в фотошопе.

Узнать цвет очень просто.

Первый способ. Выбираете инструмент «Пипетка» и кликайте на необходимый элемент. В блоке «Инструменты»  появится выбранный цвет. Кликайте по квадрату с цветом.

И копируйте цвет в нужном формате.

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

Для текста. Можно использовать вышеописанные способы, но лучше активировать текст: выберите инструмент «Горизонтальный текст» (Т) и нажмите на текст, в блоке «Параметры» вы увидите цвет текста, а также другие параметры шрифт, размеры, жирность и т.д.

Рабочая среда в фотошопе.

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

Закройте все ненужные окна: нажмите на крестике соответствуюшего блока, либо Окно  ->Уберите галочку.

Нажмите на стрелочки в правом верхнем углу (показано на картинке) и выберите строку «Новая рабочая среда…». Придумайте название и сохраняйте. Теперь при щелчке на нужную среду будет изменяться настройки отображения блоков в фотошопе. Очень удобно.

Прозрачность слоев.

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

При сохранении непрозрачности слоя, я обычно создаю новый пустой слой и объединяю (ctrl +E) с необходимым. При этом сохраняются необходимые настройки слоя и растет КПД )).

Выбор необходимого слоя.

Для автоматического выбора слоя/элемента по которому вы кликаете необходимо сделать следующие действия в программе:

Установить галочку на «Автовыбор», и из выпадающего селекта «Группа слоев». Теперь по клику элемента в блоке «Слои» будет выделяться нужный вам слой.

Оптимизированное сохранение изображения

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

Запомните волшебную комбинацию: ctrl + shift +alt +s. Как бы длинно это не смотрелось, нажимается очень просто и легко. Конечно, вы можете переназначить данную функцию «Сохранить для Web и устройств».

Предварительный просмотр картинки у меня стоит на 4 вариантах. Одна область для исходного изображения, остальные можно поменять для gif, jpeg и png форматов. Посмотреть какой весить легче и при этом качество не теряется (для этого сравниваем с исходным изображением). Если в общем то png и gif для мелких и прозрачных элементов, для простых картинок можно jpeg в высоком или среднем качестве. Понажимайте и выберите, что получше.Если вас не устраивают размер, то вы тут же можете их поменять (справа внизу). При изменении непропорционально нажмите на значок справа от размеров.

Нажимайте «Сохранить» и пользуйтесь оптимизированными картинками для вашего сайта.

А какие фишками вы поделитесь? Отписывайтесь в комментариях и делитесь с друзьями через социальные кнопки. :???:

с/у УтБ

***

Думаете над созданием собственного бизнеса? Магазин готовых бизнес планов предлагает свои услуги по разработке и знакомству с бизнес планами разных сфер.

На десерт сегодня девушка читает rap

Сегодня давайте уже разберемся с азами блочной верстки окончательно. Надеюсь, Вы читали, что такое блочные элементы. В данной статье Вы узнаете, что такое встроенные элементы и встроенный блок. Конечно, вы могли слышать и другие названия: инлайновые, линейные и т.д. В английском варианте это  inline  и  inline-block  соответственно.

Порой у вас бывало такое, что меняешь стили, меняешь, а ничего не происходит с элементом. Выстраиваются друг за другом в линию, на отступы не откликается и в таком веселом духе. Знакомо? Отлично, давайте разбираться.

            «Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения» htmlbook.ru

Давайте рассмотрим основные свойства встроенных элементов.

1. Встроенные элементы это все те элементы, которые не относятся к блочным, т.е это a, br, img, em, small, span, strong и т. д.
2. Встроенные элементы могут содержать:
   1. Только другие встроенные элементы (!) Нельзя вложить во встроенный элемент блочный (!)
   2. Разные данные (текст)
   3. Быть пустыми
3. Встроенные элементы выстраиваются друг за другом в одну линию (т.е. не переносятся на новую строку)
4. Можно использовать вертикальное выравнивание элементов (vertical-align)
5. Занимают ширину по их содержанию. (как узнать ширину блока мы говорили в уроке 2.1)

По умолчанию встроенные элементы имеют свойство display:inline; (его не нужно писАть в css), но ведь вам никто не запрещает сделать следующее:

span {display:block;}

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

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

Встроенный блок.

Сразу же рассмотрим его свойства.

1. В чистом виде не встречается, поэтому задается через стили свойством display:inline-block; (ie7 и ниже работает для встроенных элементов)
2. Внутрь встроенного блока можно помещать данные (например, текст), строчные и блочные элементы. (советую следовать логике использования вложений)
3. Можно выравнивать элементы по вертикали (vertical-align)
4. Имеют ширину по содержимому + границы и отступы. (как у блочных), высота рассчитывается исходя из содержимого.
5. Выстраиваются друг за другом в одну линию.
6. Можно задать ширину и высоту.

Что дают нам данные свойства? Во-первых, они фактически универсальны, во-вторых, нет необходимости использовать обтекание (float).

Рассмотрим пример, Интернет-магазин. Вывод товаров друг за дружкой блоками в один ряд. Если каждый товар с описанием выводить как блок (списком), то они не будут стоять в ряд. Посмотрим:

</pre>
<ul>
	<li><img src="images/1.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/2.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/3.jpg" alt="" /><a href="#">Товар</a></li>
</ul>
<pre>

Теперь добавим стиль display:inline-block; для ul li – для выравнивания списка. Посмотрите, что получилось. Вуаля, немного волшебства с css и товары будут выглядеть отлично.

В internet explorer 7 и ниже для блочных элементов display:inline-block; отображается не корректно. Поэтому добавим zoom:1; и выставим display:inline; для данных браузеров через условные комментарии:

<!--[if lte IE 7]>
<style type="text/css">
ul li {
display: inline;
zoom: 1;
}
</style>
<![endif]-->

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

с/у УтБ

***

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

***

Не знаю как вам, но такие флешмобы очень даже интересно смотреть

Блочная верстка – сегодня однозначно популярней табличной, о чем мы уже с Вами говорили в Уроке 2 Блочная верстка. Но как обычно есть всегда свои спецификации, которые должен знать и учитывать каждый начинающий html верстальщик в своем нелегком деле.

Давайте сегодня поговорим об особенностях блочных элементов.

Для начала выделим для себя три большие группы блоков (не учитывая блочную таблицу и ее производные):

• Блочные элементы (block)
• Строчные (встроенные) элементы (inline)
• Строчный (встроенный) блок (inline-block)

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

Блочные элементы – block.

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

Важно запомнить основные свойства для блочных элементов:

• Блочные элементы – это div, h1 – h6, p, blockquote, hr, pre, address, fieldset, <orm,  ol, table, ul (еще несколько не используемых/устаревших) + все те элементы которые имеет в свойствах display:block|list-item|table|run-in(не всегда);
• В блочные элементы можно вложить как блочные, так и строчные элементы;
• Блочные элементы занимают все доступное пространство;
• Высота рассчитывается исходя из содержимого блока;
• Ширина для блочных элементов есть: width + margin + padding + border (аналогично с высотой);
• Блочные элементы начинаются с новой строки;

В принципе, это основные свойства данных элементов, которые необходимо запомнить. Рассмотрим подробнее.

Вложенность

В блочные элементы можно вложить как блочные, так и строчные элементы:

Пример:

</pre>
<div>
<h1><a href="”#”"><span>Ссылка</span></a></h1>
</div>
<pre>

Т.е. в блочные элементы можно вложить бесконечное количество других элементов как блочных, так и строчных. Изменение стилей для других элементов (типа display:block;) не должно нарушать последовательность вложенности.

Нарушение вложенности типа <a href=”http://site.kz”><h2>ссылка</h2></a> приводит к невалидному коду и ошибке типа:

Пространство блочных элементов

Что значит все доступное пространство? Давайте рассмотрим пример:

</pre>
<div>
Текст</div>
<pre>

Если не задавать параметры для блоков, то они занимают всю ширину в браузере, и Вы не увидели зеленый фон у элемента div. Почему? Вспомните, что мы говорили о ширине блочных элементов:

«Ширина блочного элемента есть все доступное пространство»

Объясняю: элемент абзаца (р) занял все пространство элемента div. Отсюда мы и не видим зеленый фон. По мере добавления текста блоки будут увеличиваться, а это есть одно из свойств элементов – высота рассчитывается исходя из содержимого блока.

Вот еще один пример для разбора:

</pre>
<div>
<h1>Текст</h1>
</div>
<pre>

Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.

Ширина для блочных элементов

Как говорилось выше, ширина для блоков есть width + margin + padding + border;

На картинке все показано, что есть что.

Давайте посмотрим на исходный код примера:

</pre>
<div>
<div>Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.</div>
</div>
<pre>

Давайте посчитаем ширину блока div. qwe:

width: 300px + border:5px; (граница проходит слева и справа! = 10px) + margin:10px 50px 10px 50px; (для ширины необходимы отступ слева и справа) + padding:5px 5px 5px 5px; = 420px;

Получается фактическая ширина блока div.qwe равна 420 px, что необходимо учитывать. Особенно когда делаете макет сайта.

C новой строки.

Каждый блочный элемент по умолчанию начинается с новой строки. Все просто, смотрим пример:

</pre>
<div>текст</div>
<h1>Текст</h1>
<pre>
текст

В не зависимости от ширины, блоки выстраиваются друг под другом вертикально вниз.

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

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

Если Вы ждете новых статей по верстке, то советую подписаться на обновления блога

На десерт сегодня матч 2010 года 11 человек против 200(!), в такой команде опасно забивать гол

Приветствую вас на своем блоге. Сегодня подготовлена невероятно полезная статья из множества фрагментов CSS кода. Точнее из 20 полезных css вкусностей.

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

Теперь я собираю css сниппеты в 1 месте

Давайте начнем.

Сброс стилей от html5doctor.com специально для на html5.

Подробнее о файле сброса стиле можно почитать в статье Урок 5.1 Сброс стилей: reset.css

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {

margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{
 display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Clear хак – удаление обтекания блоков

/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
} 

Согласованный и предсказуемый размер шрифта в Rem (единица размера шрифта в css3)

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Полный стиль для @face-font

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Хак для IE6-8

Хаки для каждого браузера Ie с 6 версии до 8 :).

body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

Кроссбраузерная прозрачность

selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5;      /* khtml, old safari */
-moz-opacity: 0.5;       /* mozilla, netscape */
opacity: 0.5;           /* fx, safari, opera */
}

Удаление контура вокруг ссылок для webkit браузеров

input[type="text"]:focus {
outline: none;
}

Кроссбраузерная минимальная высота (min-height)

Аналогично можно поступить с шириной

#div {
min-height: 500px;
height:auto !important;
height: 500px;
}

Краткий стиль селекта font

/*font: font-style font-variant font-weight font-size/line-height font-family;*/

font: italic small-caps bold 15px/30px Helvetica, sans-serif;
 

Заглавная буква

Помните эту первую красивую букву в сказках? Так вот как это можно сделать:

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Вертикальное выравнивание по центру

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

Кроссбраузерный text-shadow (включая IE)

Делайте тень у текста для всех браузеров.

p {
text-shadow: #000000 0 0 1px;
zoom:1;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
}

Кроссбраузерный box-shadow (включая IE)

.shadow {
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
box-shadow: 0 0 4px #000;
}

Скрыть текст над картинкой с помощью text-indent

h1 {
background: url(img/image.jpg) no-repeat;
height: 100px;
width: 500px;
display: block;
text-indent: -9999px;
}

Исправляем баг в IE6-7: двойной отступ

ul li {
float: left;
margin-left: 5px;
*display: inline; /*IE7 and below*/
_display: inline; /*IE6 and below*/
}

Удалить полосы прокрутки textarea в IE

textarea {
overflow:auto;
}

Изменения стиля выделенному тесту

::selection {
color: white;
background-color: red;
}

::-moz-selection {
color: white;
background-color: red;
}

Стиль для ссылок: внещних, mail и pdf-файлов

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

Стили для разных девайсов (по ширине экрана)

Как сделать мобильный вариант сайта? Да, просто подмените css файл для каждого устройства.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Пк и ноутбуков ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Больших экранов ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Можно прописать разные стили в отдельные файлы для каждого девайса, например:

<head>
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

</head>

Шрифты с помощью Google Font API

Вставьте код между тегами <head></head>

/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> */
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
 

Используйте стиль шрифта в css

/*CSS selector {
font-family: 'Font Name', serif;
}*/

font-family: 'Tangerine', serif;

по мотивам

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

Не забудьте поделиться с друзьями ;).

с/у УтБ

Спонсор статьи:  Продвижение и раскрутка сайтов от веб-студии Z-studio.
На десерт сегодня Guitar Hero в парламенте Великобритании :mrgreen:

Приветствую вас, пользователь. Сегодня я хотел бы начать эстафету на тему «Как я верстаю сайты» или просто «как я верстаю». Любой желающий может принять участие. В конце статьи я составлю список всех тех, кто принял участие, т.е. от меня для Вас совершенно бесплатная ссылка. Кстати, не забудьте напомнить в своей статье зачинщика. :???:

Сегодня давайте разберемся с таким часто встречающимся термином сброс стилей для сайта. Думаю, Вы часто встречали такой файл как reset.css, либо в css что то подобное * {margin:0; padding:0; } (вспомните Урок 5. Блочная верстка сайта: css файл. ) Если Вы хотите заниматься версткой сайта, то думаю надо также разобраться что это и с чем его едят. А если не хотите заниматься версткой , то для понимая что к чему также будет полезно.

Давайте для начала рассмотрим пример без использования сброса стилей и со сбросом каскадный таблиц стилей. Увидели разницу?

Да, браузер для каждого html тега имеет стиль по умолчанию и что еще радостнее так они еще могут отличаться. Это с одной стороны плохо, потому как мы все знаем, что браузеры, как маленькие дети – за ними не уследишь, каждый имеет свои характер стили. Поэтому сбрасывая стиль, мы начинаем с чистого листа. Единственным минусом, наверное, дополнительный файл/строки в css файле, а значит увеличение размера.

Для того, чтобы начать работу с чистого листа, необходимо «обнулить» все стили по умолчанию, так? Ок, если Вы вспомните урок 5 по верстке сайтов, то вспомните как мы это делали, с помощью универсального кода:

* {
margin:0;
padding:0;
}

Есть? Отлично, теперь Вы понимаете для чего эта строчка там.

Давайте взглянем на нашу демо страницу с универсальным сбросом стилей сайта.

Заметили отличия? Совершенно верно мы сбросили только отступы, у таблиц осталась рамка, у заголовков стили font, а если углубляться то много еще чего. Но на первой демке был полный сброс, давайте теперь посмотрим как его сделать.

Reset.css

Плавно мы пришли к файлу reset.css. Самым популярным сбросом стилей для сайта (тот самый, что мы видели в примере) и одновременно наиболее полным является т. н. reset файл от Эрика Мейера. В статье CSS Tools: Reset CSS можете почитать о его достижении при создании данного кода:

/*
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

Обычно данные стили выделяют в отдельный файл — reset.css. Зачем спросите Вы, для того чтобы по 100 раз не прописывать его на всех сайта, можно просто добавлять на разных проектах ссылку на данный файл:

<link href="http://site.kz/css/reset.css" rel="stylesheet" type="text/css" />

Согласитесь удобно. Но если у вас один блог/сайт, добавляйте в общий файл (style.css, template.css и т. д.), ничего страшного.

Еще одно общее условие для всех сбросов стилей — размещение в самом начале в стилях. Тут очевидная ситуация: для начала необходимо обнулить все стиле, а затем уже задавать тегам свои стили.

Css файл сканируется сверху вниз! Поэтому из 2-х одинаковых классов при равных условиях приоритетным будет тот, что находится ниже.

Мой файл reset.css

Смотря на файл от Эрика Мейера, Вам может в голову прийти такая мысль. У меня на сайт не используется и половина таких тегов, можно ли их не использовать? Сам Э. Майер говорит о том, что каждый может и должен его изменять под себя. Так что обязательно меняйте, модернизируйте экспериментируйте и пользуйтесь.

Если Вы не используете html 5, удалите данный блок /* HTML5 display-role reset for older browsers */ …. { display:block; }

Yahoo reset.css

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

Вот поэтому и у Yahoo есть свое видение на данную тему.

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

Подключиться к стилям Яхуу можно добавив данную строку:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

Можно сохранить себе на хостинг.

Конечно, существуют и другие reset файлы, но напомню. Что самым часто используемым среди html верстальщиков является сброс стилей от Э. Майера, обычно, конечно, измененный. Для первых шагов, думаю, будет достаточно простого его использования, либо есть всегда универсальный метод.

Теперь в комментариях прошу поделиться своим опытом по использованию сброса стилей, каким Вы пользуетесь?

Надеюсь данная статья была вам полезна. Подписывайтесь на обновления Уроков по блочной верстке сайтов.

с/у УтБ

Постовой: coding4.net – разработка игр на XNA и Silverlight

На десерт сегодня трейлер к фильму “Социальная сеть 2″, что то мне кажется, что это очередное псевдопродолжение, а как Вы думаете?

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

Что же такое юникод, utf-8, преимущества и минусы можно почитать на Wikipedia, так и на других сайтах, например, мне понравилась статья Дмитрия, в ней интересно описано откуда и почему появились кодировки ASCII, юникод и UTF 8, расширенная ASCII (Windows 1251, CP866, KOI8-R).

Давайте, перейдем к нашей теме и начнем разбираться с проблемами во время нашей верстки сайта.

Основной проблемой неправильной кодировки это отображение текста как кроказябли, непонятные символы и т.д.  Так же в кодировке window-1251 отсутствуют специальные символы (что-то типа копирайтов §, ©, ‰) и другие пинтограммы (♥, ☺).

Все это от того, что в cp1251, например, всего 256 символов (что в принципе достаточно для кирилицы), а в Unicode более 100 000 символов. Поэтому я советую создавать html каркас (как html верстальщик) и вообще сайты с кодировкой utf-8. Вы скажите мне достаточно window-1251, так как я использую кириллицу. Полностью согласен с Вами, но если Вы захотите использовать специальные символы, или сделать мультиязычный сайт? Ну, а в связи с тем, что я верстаю для Казахстана, то кодировки cp1251 изначально не подходит, так как обычно используется казахский, русский и английский языки. Лучше запостись символами .

Как сохранить файл в кодировке utf-8 без BOM? (utf-8 without BOM)
Именно так и надо сохранять без BOM (Byte Order Mark или— сигнатура – три символа, которые все портят).
Не все программы способны сохранять файлы в кодировке utf-8 без BOM. Яркий пример – Блокнот от Windows.

Программа Notepad++

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

Откройте файл и выберите преобразовать в utf-8 без BOM.

Если нажмете кодировать в utf-8 без BOM, то произойдет следующее.

Если сомневаетесь и, чтобы не рисковать всегда делайте backup – резервное копирование!

Программа PhpDesigner

PhpDesigner – удобный редактор. Программа платная.

Немного сложней будет. Для начала проведем настройки для браузеров:

1.    Откройте выпадающее меню: Создать новый файл -> Изменить шаблон (Edit template) либо Файл -> Новый… -> Edit templates

2.    Выберите Html и вставьте туда следующий код и поставьте галочку на «Использовать данный шаблон для HTML/XHTML»  (Use this template for HTML/XHTML):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Документ Без Имени</title>
</head>
<body>
</body>
</html>

Установка кодировки:
– Пройдите: Инструменты -> Установки (или вызовите через CTRL + E) и выставите соответствующую кодировку.

Для преобразования отдельного файла используйте:
Файл -> Кодировка файла -> utf-8

Текущую кодировку можно увидеть в нижней части программы слева.

Можно, конечно, пойти другим путем. Создать файл, после открыть файл в Notepad++ и сделать соответствующие настройки.

Программа PSpad

Pspad - еще один неплохой текстовый редактор. Кстати, полностью бесплатный. Функций больше чем у Notepad++.
Поменять кодировку текущего файла в Pspad очень просто: Вкладка Формат -> Выбрать необходимую кодировку (например, utf-8)

Кодировка для браузеров по умолчанию:
Создать новый файл (Ctrl + N) -> Из шаблона -> Html ->  Html 4.01 Transitional -> Правка…

В charset впишите необходимую кодировку, например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="cs">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title>Untitled</title>
 </head>
 <body>

</body>
 </html>

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

Программа Rapid PHP (2010)

Rapid PHP – платный текстовый редактор.
Для настройки кодировки сделайте следующее:

Опции -> Настройки… -> Файл -> utf-8 без BOM (либо другая кодировка)

По умолчанию файл html создается без meta данных. Вставить кодировку (charset) для браузеров можно так:
Вставка -> Кодировка -> Unicode (utf-8) (либо другая необходимая)

Кодировка с помощью  .htaccess

С помощью файла .htaccess можно заставить браузер отобразить нужную кодировку. Не советую пользоваться данным методом на работающих сайтах (я обычно использую только для html на локалке, ), но все же метод работающий. Добавьте в файл:

AddDefaultCharset utf-8

Внимание! Ваш хостинг может не поддерживать данные настройки.

Сообщение кодировки для браузеров

Как браузеры понимают, в какой кодировке Вы писали свой файл? Для этого и существует строка (мета данные):

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Т.е. браузер по умолчанию «читает» страницу в кодировке utf-8. Это Вы в принципе, должны знать еще из школьной программы.

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

Надеюсь информация была полезной. Спасибо за Ваши like и ретвиты.

с/у УтБ

Постовой: Если Ваш интернет магазин не приносит доходы, то пора сделать полный  анализ интернет магазина. Хватит терять потенциальных клиентов!

На десерт сегодня вирусное видео про Светлакова. Но все же мне понравилось, обязательно надо сходить на его фильм