Записи с меткой «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.

(далее…)

Основы 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.

(далее…)

Пуленепробиваемый обозреватель.

15.02.2010

jQuery

Из этого учебника мы узнаем, как легко можно создать привлекательный компактный обозреватель содержимого, который работает даже при отключенном JavaScript. Мы построим простое ядро семантического HTML , немного стилизуем его простым CSS, а затем используем jQuery для придания дальнейших усовершенствований в виде переходов анимации.

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

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

jQuery
(далее…)

Анимация с jQuery: 7-шаговая программа.

15.02.2010

jQuery

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

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

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

Предисловие автора

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

Заинтересованы? Давайте начнем прямо сейчас! Пожалуйста, заметьте, все адресовано исключительно новичкам, поэтому я буду заострять внимание на некоторых моментах. Шагайте вместе со мной. Если вам интересно, посмотрите в первой части демо-ролика простой эффект, который мы сегодня построим.

(далее…)

Создайте легкую анимированную навигацию при помощи CSS и jQuery.

23.01.2010

css меню

Анимация и визуальная обратная связь – прекрасные способы помочь пользователю в навигации и взаимодействии с веб-сайтом. Наряду с тем, что традиционно Adobe Flash был «безусловным переходом» для всей анимации, в наши дни при использовании волшебных возможностей javascript можно вообще обойтись без Flash’а. Сегодня мы создадим действительно классное анимированное навигационное меню, используя только CSS и jQuery.

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

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

(далее…)

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

05.11.2009

css верстка

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

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

css верстка

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

(далее…)