Верстка \ HTML&CSS

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

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

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

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

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

Верстка \ HTML&CSS

Верстка макета (табличная верстка)

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

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

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

Верстка \ HTML&CSS

Загрузка изображений по запросу с помощью CSS

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

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

Верстка \ HTML&CSS

Создайте анимацию переворота в CSS

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

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

Верстка \ HTML&CSS

Верстка макета (табличная верстка)

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

Актуальность указанных проблем подтверждается неоднократными обращениями на нашем форуме с просьбой помочь решить их. Итак, давайте попробуем для начала сформулировать суть обоих проблем.

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

Верстка \ HTML&CSS

Создайте анимированный 3D Sidebar

От автора: Кристиан Хайлманн (Christian Heilmann) из Mozilla – это ярый миссионер, который умеет и сказать, и подтвердить свои слова. В своем блоге и великолепном Mozilla Hacks он часто создает отличные демо-примеры . Одна из моих любимых штучек от Кристиана – это не демо, а используемый у него в блоге эффект 3D боковой колонки. Я решил препарировать ее, чтобы показать вам, как он это делает!

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

Верстка \ HTML&CSS

Плагин Google Translate

От автора: бывает, что тематика Вашего сайта предполагает мультиязычную аудиторию, и Вам, конечно же, не хотелось бы терять пользователей, которые не поймут (хотя бы приблизительно) о чем идет речь в той или иной статье. Как же быть в этом случае?

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

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

Верстка \ HTML&CSS

50 фрагментов CSS полезных каждому дизайнеру

От автора: так много новых направлений, усовершенствуется каждый год, что совсем нелегко поспевать за индустрией. Дизайнеры вебсайтов и разработчики пользовательских интерфейсов глубоко прониклись новейшими свойствами CSS3, устанавливая максимальную браузерную поддержку и находя необычные хаки. Но все еще существуют не получившие должного внимания великолепные фрагменты кода CSS2.

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

Верстка \ HTML&CSS

Подсказка: Помните о стилях альтернативного текста

От автора: атрибут alt внутри тэга img обеспечивает альтернативный контент для пользователей, которые не могут скачивать изображения, или тех, у кого они отключены. Мы все время пользуемся этим атрибутом, чтобы сделать свой контент более доступным, но вы задумывались когда-нибудь, как на самом деле это смотрится?

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

Верстка \ HTML&CSS

Примеры анимации и переходов псевдоэлементов

От автора: творческие эксперименты с применением анимации и переходов к псевдоэлементам для создания интересных эффектов.

Сегодня мы собираемся поэкспериментировать с анимацией и переходами применительно к псевдоэлементам (:before и :after) и раскрыть их потенциал. Мы немного поговорим об анимации псевдоэлементов и рассмотрим четыре примера, где применяются специальные техники достижения многих эффектов. Сначала давайте рассмотрим преимущества и недостатки применения к псевдоэлементам анимации и переходов.

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