Архив рубрики «HTML&CSS»

10 Многообещающих, но внушающих уважение техник CSS.

25.04.2010

css техника

От автора:

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

В этом посте мы собираемся наметить в общих чертах 10 превосходных техник CSS для тех веб-разработчиков, которые знают свое дело.

Для начинающих дизайнеров есть множество техник CSS и хаков. Все знают такие общепринятые приемы, как:

скругленные углы

изображения в качестве маркеров списков

как придать стили клавишам ввода

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

(далее…)

Как спроектировать и кодировать гибкий сайт.

21.04.2010

как создать сайт

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

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

Также скачайте исходники себе на компьютер!

(далее…)

10 правил CSS от мастеров.

04.04.2010

советы css

От Автора: Касаемо CSS в Сети полно ресурсов и мнимых “полезных советов экспертов”. Они от непроверенных, самопровозглашенных “гуру”, не признанных в мире веб-дизайна. Так как они могут быть похожими на правду, то откуда нам узнать, что совет по CSS – это надежный источник или непроверенное, на «скорую руку» слепленное решение?

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

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

(далее…)

Из PSD в HTML, создание дизайна вебсайта шаг за шагом.

17.03.2010

как создать сайт

От автора: Сегодня я проведу вас через весь процесс получения из Photoshop HTML. Мы собираемся построить из 4 PSD макетов веб-сайт, который в конечном итоге станет темой WordPress. Это большая статья, поэтому, если вы собираетесь идти до конца, убедитесь, что у вас есть несколько свободных часов!

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

Также скачайте исходники себе на компьютер!

Демо

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

Скачать Файлы

Дополнительно вы можете скачать файлы download the full HTML/CSS/Image source files here.

(далее…)

Создание хорошего портфолио-сайта с нуля.

25.02.2010

создание сайта

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

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

Также скачайте исходники себе на компьютер!

(далее…)

15 и более самых лучших методов написания суперчитаемого кода.

24.02.2010

код

От автора: Читаемость кода – универсальный предмет в мире компьютерного программирования. Это – самое первое, о чем мы узнаем в качестве разработчиков. Читаемый и легко поддерживаемый код в законченном продукте – это нечто, чем можно гордиться. Им можно поделиться с друзьями, внести в другие проекты, использовать снова и снова из приложений, которые были написаны месяцы и даже годы назад.

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

(далее…)

Основы CSS: вмещаем дочерние элементы.

24.02.2010

overflow

От автора:Сегодня мы рассмотрим overflow: hidden и clearfix, которыми можно заставить родительский тэг div вмещать все свои дочерние элементы.

Overflow: Hidden

Вы когда-нибудь замечали, что когда вы делаете плавающими все дочерние узлы в div, родитель занимает нулевое пространство? Например, в редакторе кода добавим в тэг body следующее:

(далее…)

Тайна свойства float CSS.

22.02.2010

float

Пару лет назад, когда разработчики впервые начали переходить к HTML- разметке без таблиц, свойство float внезапно взяло на себя очень важную роль. Причина того, что свойство float стало так распространено, состояла в том, что по умолчанию, блочные элементы не выстраивались в линию рядом друг с другом в формате на основе столбца. Так как столбцы необходимы фактически в каждой схеме CSS, к этому свойству начали привыкать — и даже злоупотреблять им.

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

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

(далее…)

5 способов писать CSS лучше в одно мгновение.

05.11.2009

css верстка

Конечно, каждый может написать CSS. Сейчас, даже программы это могут сделать за Вас. Но любой ли CSS хорош? Вот 5 советов по мгновенному улучшению Вашего CSS.

1. Сделать файл сброса

css верстка

Серьезно, всегда используйте сброс. Возможно, Вы используете сброс Эрика Мейера или YUI сброс или Ваш собственный пользовательский сброс. Так или иначе, используйте.

(далее…)

Классный дизайн и верстка сайта с нуля. Часть I.

26.10.2009

веб дизайн

Доброго времени суток. На связи Рог Виктор.

Пока наш Андрей Бернацкий безумно занят своими Новогодними приготовлениями. Да, да Вы не ошиблись именно новогодними, я для Вас перевел первую часть одной великолепной статьи, которая покажет нам создание дизайна проекта в Photoshop. Это первая часть. А во второй части, которая пока на доработке, мы Вам покажем непосредственно верстку сайта.

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

Дмитрий Есин – фрилансер. (Можете посмотреть его аккаунт по ссылке http://www.free-lance.ru/users/Skipirich). Замечательный талантливый человек. Именно он создал справочник по HTML&CSS, с которым я Вас уже знакомил, но Вы без проблем можете прочитать описание справичника по ссылке: http://webformyself.com/html-spravochnik-dlya-novichka/

Дмитрий очень активный участник нашего проекта.

Если Вы хотите проявить себя как Дмитрий и принять непосредственное участие в проекте webformyself.com, то ознакомьтесь с разделом «Политика Сайта». Там Вы сможете поближе познакомиться с теми тезисами, которые могут быть Вам весьма и весьма интересными!

Что ж теперь переходим непосредственно к первой части нашей статьи.

(далее…)