Немного о веб-технологиях

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

LESS, Sass и другие CSS-препроцессоры — отличный способ для разработчика расширить возможности CSS. Переменные, операции с цветами, примеси (mixins) и многие другие инструменты LESS помогут разработчику почувствовать выгоду от написания меньшего количества кода при достижении равноценных результатов (без использования LESS).

Замена текста картинками применяется в процессе верстки макетов уже очень долгое время. Причина этого в том, что в начале 2000-х годов разработчики могли использовать на веб-страницах довольно ограниченное количество шрифтов. В основном это были «стандартные» шрифты, например, Verdana или Georgia. Для того чтобы как-то «оживить» страничку, веб-мастера создавали в графическом редакторе изображение с надписью каким-то «нестандартным» шрифтом и размещали его в качестве фона элемента (например, заголовка) на странице, а текстовое содержимое «прятали». 

В этой заметке мне хотелось бы описать один интересный эффект – создание тени внутри блока. На самом деле это не очень сложно, не отнимает много сил и не занимает много времени.

Используемые инструменты и технологии:

• HTML, CSS
• jQuery
• XML
• PHP

Описание:

Из PSD-макета была сверстана страница (landing). Созданы скрипты для обработки форм и сохранения данных, полученных от посетителя, а также вывода «горячих предложений». Для удобства работы с «горячими предложениями», данные о них хранятся в XML-файле.

Посетить страницу

Используемые инструменты и технологии:

• HTML, CSS
• jQuery
• PHP
• CMS “Joomla”

Описание:

Разработана структура сайта. Из PSD-макета был создан шаблон для системы управления. Размещены и настроены необходимые модули и компоненты системы. Созданы и наполнены содержимым разделы сайта.

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

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

Например, когда сайт закрыт для посетителей и нужно показать страничку с «заглушкой» или создать свою страничку, которую увидят посетители в случае ошибки 404 — объявление об отсутствии запрашиваемой страницы можно разместить в блоке в центре окна браузера.

Задача: создать блок с овальными уголками.

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

Задача: создать блочную верстку макета чтобы при любом количестве текста подвал всегда был внизу окна браузера.