Еще статьи раздела Верстка

Продолжение статей из категории Верстка.

Книга «Изучаем HTML5. Библиотека специалиста»

Как-то раз я уже публиковал обзор книги на страницах Дизайн Мании — это была история о том как же можно сделать сайты более удобными и простыми для пользователей. Книга называлась Юзабилити по методу Стива Круга и была любезно предоставлена издательским домом «Питер». Но на этом наше сотрудничество не закончилось, в «Питере» всерьез заинтересованы в повышении моих технических навыков, предложив почитать что-то еще. Мне сразу же приглянулась книжечка по HTML5. Технология, можно сказать, революционная в какой-то степени и являющаяся актуальной в […]

Нет комментариев

Создаем красивые кнопки для сайта на CSS3 (с градиентами)

Каждый веб-мастер давно наслышан, а кто-то уже виртуозно применяет на практике новые уникальные возможности CSS3. Не так давно мы разбирали несколько интересных текстовых эффектов, на этот раз речь пойдет о градиентных кнопках, созданных без использования графики (картинок), то есть, только средствами CSS3. Сам туториал я обнаружил здесь, вам же предлагаю перевод. Итак основные качества будущей кнопки (кнопок): Масштабируемость (в зависимости от размера шрифта и количества текста); Функциональность, юзабилити (предусмотрены состояния кнопки — hover эффект при наведении, а также normal и […]

комментариев 8

Школа W3 Schools для веб разработчиков

Существует много способов научиться вебмастерсткому делу, освоить, так сказать, основы веб-разработки. Если нет рядом в распоряжении опытного специалиста (и что немаловажно грамотного) который мог бы помочь в обучении, можно поискать обучающие сайты и справочные материалы в интернете. Другое дело — далеко не каждая статья, заметка или книга способна научить делать сайты правильно, по самым современным стандартам. Всем известно — чем лучше и авторитетнее «школа», тем более качественные знания она способна дать! Один из таких «эталонных» портов для веб-мастеров и разработчиков […]

комментария 3

Текстовые эффекты с помощью свойства text-shadow в CSS3

Раньше создать интересные текстовые эффекты, например, сложную тень (самая банальная тень не в счет) можно было только силами графического редактора, вроде Adobe Photoshop, и то, как понимаете на выходе можно было получить только картинку в формате .gif, .png или .jpg. Но с развитием стандартов ситуация меняется. Уже сейчас CSS3 открывает головокружительные возможности оформления для веб-мастера, нужно только знать как использовать эту мощь. Давайте рассмотрим некоторые классные текстовые эффекты которые можно получить используя лишь один простое свойство текста в CSS3 — […]

комментариев 5

Оформляем гиперссылку, советы по оформлению ссылок

Гиперссылка — базовый, основополагающий элемент не только любого сайта, но и Интернета в целом (без ссылок Интернет был бы чем-то иным). Гиперссылки окружают нас везде, наверное, поэтому веб-мастера начали относиться к оформлению ссылок халатно, а ведь гиперссылка — важнейшая, требующая к себе внимания вещь. В данной статье я решил подготовить для вас ряд советов и рекомендаций по оформлению ссылок (на основании оригинальной заметки про Designing Hyperlinks. Но, вначале немного справочной информации: Базовые «состояния» гиперссылки Элемент <a> может принимать несколько «состояний», […]

комментариев 11

Полезные советы по HTML верстке. Часть 2

Последние несколько лет наметились положительные сдвиги в вопросе веб-стандартов. Сейчас уже не тот разброд и шатания что на заре интернета. Браузеры подравниваются в плане совместимости, современные CMS так же в большинстве своем так же прислушиваются к рекомендациям W3C. В общем, потихонечку дело идет к тому что когда-нибудь (возможно через много лет) мы, может быть, будем жить в хорошо стандартизированном и всецело совместимом интернет-мире. Ну, а пока до этого еще далековато, я хочу продолжить разговор о «правилах хорошего тона». В первой […]

комментария 3

Вредные привычки HTML верстки

Давно в Дизайн Мании не было статей по тематике верстки, которая весьма и весьма актуальна для многих вебмастеров. Сегодняшний пост можно назвать в какой-то степени «обучающим» и полезным не только для начинающих верстальщиков, но и бывалых работников, которые не застрахованы от таких простых, но ненужных ошибок при HTML верстке. Вообще правильнее сказать даже не ошибки, а типичные вредные привычки и, то что называется, «плохая школа». Веб-дизайн — такая штука где до сих пор не существует 100% стандартов. Уже одно это […]

комментариев 9

Уроки верстки – CSS подмена текста картинкой

Продолжаем уроки верстки. Захотелось мне как-то для своего литературного блога сделать красивый, оригинальный заголовок. Понятно, что реализовать такое было реально только с использованием красивых шрифтов, я взял подборку, опубликованную когда-то на Дизайн Мании — красивые русские шрифты. Разместил на сайте без проблем. Но меня слегка смутило отсутствие текстового заголовка, в частности с точки зрения поисковых систем. Да, я не использую h1 для заголовка блога на всех страницах, там у меня в этот тег попадают лишь тайтлы постов. Но на главной […]

комментариев 7

Программы для верстки и отладки под Internet Explorer

Могу поспорить, что Internet Explorer — самый любимый браузер всех веб-разработчиков и верстальщиков на земле! Именно поэтому мы так часто проверяем как в нем отображается тот или иной дизайн. Ведь знаем — любимый браузер может интерпретировать написанный код так хорошо, что мы уже привыкли видеть самые неожиданные результаты:) Ок, шутки в сторону, вернемся к теме статьи. Предлагаю ознакомиться с наиболее часто используемыми инструментами (программами), которые помогут вам лучше понять и отладить код под Internet Explorer. IETester IETester — бесплатный веб-браузер, […]

комментариев 7

Как сделать большой фон для сайта через CSS

В последнее время большие фоновые изображения в блогах или сайтах стали достаточно популярными. Оно и не удивительно — классно подобранный фон может послужить основным источником восприятия того или иного проекта, ведь давно известно, что посетитель составляет свое впечатление о сайте в первые 10 секунд. Предлагаю ознакомиться с несколькими CSS техниками для создания большого фонового изображения с использованием одного или двух изображений. Перед тем, как начать, взгляните на наиболее распространенную ошибку: Если у вас есть большое фоновое изображение, которое отлично выглядит […]

комментария 52

Кликабельный логотип или ссылка поверх изображения

Сегодня расскажу немного о верстке, HTML и CSS. Товарищи, верстальщики просьба не судить строго, поскольку я сам таковым не являюсь, а лишь немного знакомлюсь с теми или иными нюансами этого нелегкого дела по мере необходимости. Задача следующая. В шапке сайта имеется цельное изображение, на котором располагается логотип сайта. Требуется сделать его кликабельным, чтобы при клике мы переходили на главную страницу. Хочу заметить, что следующие действия пригодятся, если вы не верстали шаблон с нуля, а просто хотите внести некоторые правки уже […]

комментариев 49

Фон для сайта (свойство CSS background)

Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки. Итак, с помощью […]

комментария 82