Дизайн Мания - блог о веб-дизайне
 

Верстка дизайна сайта, уроки html и css верстки

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

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

Фоновое слайдшоу изображений на весь экран с помощью CSS3

Технология CSS3 становится все более популярной, а вещи которые с ее помощью реализуются, все более впечатляющими и захватывающими. Сегодня пост об одном из таких приемов. Если вы помните, некоторое время назад я рассказывал про сервис красивых HD картинок для вдохновения Bepic.ru  – меня там очень сильно впечатлил вывод изображений на весь экран браузера. При выборке...
Нет комментариев
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(Пока без рейтинга, оцените первым!)  
Loading ... Loading ...

Категории: Верстка;

Теги: , , , , , , .

Фон для сайта с картинкой на весь экран (background-size)

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то новые фишки и нюансы для сайтов. Одним из подобных направлений можно назвать использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал как сделать большой фон...
Комментариев - 5
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 1, средний балл: 7.00 из 7)
Loading ... Loading ...

Категории: Верстка;

Теги: , , , , , , .

Кнопки в стиле Google+, скачать 200 иконок Google+

Социальная сеть Google+, даже находясь в стадии бета-тестирования, ураганом ворвалась в жизнь продвинутых пользователей, поэтому не стоит удивляться тому интересу который данная социальная сеть вызывает, в том числе и у веб-дизайнеров, разработчиков и seo оптимизаторов. Этот интерес достаточно велик и постоянно “подогревается” разработчиками Google, которые постоянно усовершенствуют проект и добавляют интеграцию с другим своими сервисами...
Комментариев - 2
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 2, средний балл: 7.00 из 7)
Loading ... Loading ...

Категории: Веб-дизайн; Верстка; Иконки; Статьи;

Теги: , , , , , , , .

Psd2htmlconverter – сервис автоматической верстки сайта

Процесс создания сайта можно разделить на несколько основных частей. Все начинается с создание дизайн-макета в одной из программ графического дизайна. Обычно в этой роли выступает Adobe Photoshop. Дальше происходит “нарезка” дизайн-макета и создание HTML/CSS верстки web-страницы. Последний этап – связывание верстки и движка сайта. Для каждого из них нужны определенные знания и навыки, но в...
Нет комментариев
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 2, средний балл: 2.00 из 7)
Loading ... Loading ...

Категории: Online сервисы; Верстка;

Теги: , , , , , , , .

Оформление текста с помощью CSS3 на практике

CSS3 дарит просто удивительные возможности оформления текста. Теперь в арсенале веб-мастера (или веб-дизайнера) появляются такие типографские приемы и уровень контроля о которых раньше можно было только мечтать. Все это как нельзя лучше демонстрирует руководство с блога EchoEnduring перевод которого я вам и предлагаю. В итоге получается просто нереально интересное оформление текста и даже не верится,...
Комментариев - 4
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 3, средний балл: 7.00 из 7)
Loading ... Loading ...

Категории: Верстка; Типографика;

Теги: , , , , , .

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

Как-то раз я уже публиковал обзор книги на страницах Дизайн Мании – это была история о том как же можно сделать сайты более удобными и простыми для пользователей. Книга называлась Юзабилити по методу Стива Круга и была любезно предоставлена издательским домом “Питер”. Но на этом наше сотрудничество не закончилось, в “Питере” всерьез заинтересованы в повышении...
Нет комментариев
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 4, средний балл: 4.25 из 7)
Loading ... Loading ...

Категории: Верстка; Уроки и книги;

Теги: , , , , .

Делаем градиентные кнопки средствами CSS3

Каждый веб-мастер давно наслышан, а кто-то уже виртуозно применяет на практике новые уникальные возможности CSS3. Не так давно мы разбирали несколько интересных текстовых эффектов, на этот раз речь пойдет о градиентных кнопках, созданных без использования графики (картинок), то есть, только средствами CSS3. Сам туториал я обнаружил здесь, вам же предлагаю перевод. (Демо страница) Итак основные...
Комментариев - 7
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 4, средний балл: 6.50 из 7)
Loading ... Loading ...

Категории: Верстка;

Теги: , , , , .

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

Существует много способов научиться вебмастерсткому делу, освоить, так сказать, основы веб-разработки. Если нет рядом в распоряжении опытного специалиста (и что немаловажно грамотного) который мог бы помочь в обучении, можно поискать обучающие сайты и справочные материалы в интернете. Другое дело — далеко не каждая статья, заметка или книга способна научить делать сайты правильно, по самым современным...
Комментариев - 3
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 6, средний балл: 6.17 из 7)
Loading ... Loading ...

Категории: Верстка; Полезные сайты;

Теги: , , , , , , , .

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

Раньше создать интересные текстовые эффекты, например, сложную тень (самая банальная тень не в счет) можно было только силами графического редактора, вроде Adobe Photoshop, и то, как понимаете на выходе можно было получить только картинку в формате .gif, .png или .jpg. Но с развитием стандартов ситуация меняется. Уже сейчас CSS3 открывает головокружительные возможности оформления для веб-мастера,...
Комментариев - 5
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 5, средний балл: 6.60 из 7)
Loading ... Loading ...

Категории: Верстка;

Теги: , , , , , .

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

Гиперссылка — базовый, основополагающий элемент не только любого сайта, но и Интернета в целом (без ссылок Интернет был бы чем-то иным). Гиперссылки окружают нас везде, наверное, поэтому веб-мастера начали относиться к оформлению ссылок халатно, а ведь гиперссылка — важнейшая, требующая к себе внимания вещь. В данной статье я решил подготовить для вас ряд советов и...
Комментариев - 11
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 1, средний балл: 5.00 из 7)
Loading ... Loading ...

Категории: Верстка;

Теги: , , , , , , .

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

Последние несколько лет наметились положительные сдвиги в вопросе веб-стандартов. Сейчас уже не тот разброд и шатания что на заре интернета. Браузеры подравниваются в плане совместимости, современные CMS так же в большинстве своем так же прислушиваются к рекомендациям W3C. В общем, потихонечку дело идет к тому что когда-нибудь (возможно через много лет) мы, может быть, будем...
Комментариев - 3
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 1, средний балл: 7.00 из 7)
Loading ... Loading ...

Категории: Верстка;

Теги: , , , , , .

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

Давно в Дизайн Мании не было статей по тематике верстки, которая весьма и весьма актуальна для многих вебмастеров. Сегодняшний пост можно назвать в какой-то степени “обучающим” и полезным не только для начинающих верстальщиков, но и бывалых работников, которые не застрахованы от таких простых, но ненужных ошибок при HTML верстке. Вообще правильнее сказать даже не ошибки,...
Комментариев - 8
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(голосов - 3, средний балл: 6.33 из 7)
Loading ... Loading ...

Категории: Верстка;

Теги: , , , , .

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

Продолжаем уроки верстки. Захотелось мне как-то для своего литературного блога сделать красивый, оригинальный заголовок. Понятно, что реализовать такое было реально только с использованием красивых шрифтов, я взял подборку, опубликованную когда-то на Дизайн Мании – красивые русские шрифты. Разместил на сайте без проблем. Но меня слегка смутило отсутствие текстового заголовка, в частности с точки зрения поисковых...
Комментариев - 7
Оцените статью:
1 балл2 балла3 балла4 балла5 баллов6 баллов7 баллов
(Пока без рейтинга, оцените первым!)  
Loading ... Loading ...

Категории: Верстка;

Теги: , , , , , .
Страница 1 из 212

Интересные новости
Облако тегов
сооружения и архитектура советы и рекомендации видео бесплатное веб-дизайн промышленный дизайн работы дизайнеров дизайнеры иконки для блога разработка сайта photoshop фотографии дизайнеру интересное шрифты иконки для сайта скачать иконки полезные сайты креатив для сайта оригинальная реклама вдохновение креативные дизайнерские решения полезное иконки красиво online-сервисы создание сайта шаблоны наружная реклама