Верстка \ HTML&CSS

Эффекты загрузки элементов сетки с помощью анимации CSS

От автора: вдохновляемся эффектами загрузки элементов сетки с помощью анимации CSS.

Сегодня мы хотели бы поделиться с вами эффектами загрузки элементов сетки. Идея в том, чтобы показывать элементы в сетке с анимацией, когда те оказываются в окне просмотра. Эти возможности бесконечны и мы хотели бы немного вдохновить вас. Некоторые эффекты взяты из великолепных эффектов прокрутки CSS3 Хакима эль Хаттаба (Hakim El Hattab), а идея навеяна мозаичной анимацией, подсмотренной в приложении Google Plus.

Так как Masonry является популярной библиотекой разметки сеток, мы подумали, что в этом демо-примере использовать ее было бы неплохо. Если хотите применить другую, или вообще обойтись без библиотеки, вам придется удалить инициализацию из скрипта и отрегулировать селекторы и т.д. Это очевидно.

Продолжить чтение

Верстка \ HTML&CSS

Галерея 3D-изображений-перевертышей

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

Продолжить чтение

Верстка \ Адаптивная верстка

Разбираем растяжение поля поиска

От автора: Учебник о том, как создать адаптивное растяжение поле поиска с хорошей поддержкой сенсорного ввода.

Возможно, вы заметили те маленькие усовершенствования, которые в последнее время появились здесь, на Codrops. Одной из тех вещей, которые мы решили изменить, стало поле ввода для поиска. Оно было перенесено из боковой колонки в верхний колонтитул и применен простой эффект, при котором нужно щелкнуть, чтобы поле ввода увеличилось. Мы получили множество просьб объяснить, как это сделано, и сегодня хотели бы показать вам, как «с нуля» создать подобный input для поиска. Нашей целью стало максимальное увеличение совместимости мобильных устройств и старых браузеров (вплоть до IE8). Хотя это может показаться очень легкой задачей, нам придется применить несколько хитростей, чтобы все заработало должным образом.

Продолжить чтение

Премиум \ PHP \ Регулярные выражения

Регулярные выражения

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

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

Продолжить чтение

Верстка \ CSS 3

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

Продолжить чтение

Верстка \ HTML&CSS

Стильные эффекты модальных окон

От автора: несколько месяцев назад я нагло украл идею Чарли Глисона (Charlie Gleason). В его презентации на MelbJS за текстом на многих слайдах были показаны полноэкранные анимированные GIF’ы (в том числе его собственного лица) в оттенках серого. Я обнаружил, что он усердно отредактировал и оптимизировал каждый GIF в Photoshop’е, чтобы те хорошо смотрелись за текстами слайдов.

Мне захотелось сделать то же самое, но не занимаясь таким трудом.

Продолжить чтение

Web-программирование \ PHP

Файл htaccess

От автора: в этом уроке мы с вами познакомимся еще с двумя полезными директивами сервера, которые можно использовать в файле htaccess.

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

Продолжить чтение

Премиум \ PHP \ Создание доски объявлений на PHP

Создание доски объявлений

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

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

Продолжить чтение

Премиум \ PHP \ Cоздание каталога товаров с помощью PHP, MySQL и jQuery

каталог товаров

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

При этом данный каталог можно считать вполне готовым продуктом для использования на собственном сайте. К тому же, каталог будет обладать всеми теми «плюшками», которые зачастую и присущи любому каталогу продуктов.

Продолжить чтение

Верстка \ HTML&CSS

Стильные эффекты модальных окон

От автора: набор экспериментальных эффектов появления модальных окон с помощью переходов и анимации CSS.

Сегодня мы хотим поделиться с вами идеями эффектов модальных окон. Они предлагают бесконечные возможности переходов появления диалоговых блоков, и мы хотели бы подсказать вам некоторые мысли о том, как показывать диалоги, и немного подстегнуть ваше воображение.

Идея состоит в необходимости кнопки запуска (или любого другого элемента), которая при щелчке заставит появиться модальное окно, применив простой переход (или анимацию).

Продолжить чтение