foto1
foto1
foto1
foto1
foto1
Cайт Муслимовой Земфиры М.

Творческая студия

  • Творчество студентов
  • Творчество студентов
  • Творчество студентов
  • Творчество студентов

Что такое адаптивный дизайн? В двух словах, это использование одного HTML-кода для экранов разных размеров. Элементы сайта меняют внешний вид по правилам, прописанным в файле CSS, исходя из ширины экрана. Азы и подробности изложены в видеоуроках  ниже.
На ранних этапах создания адаптивного дизайна возникает искушение оформить три разных таблицы стилей CSS для гаджетов, планшета и монитора стационарного компьютера. Однако смысл адаптивного дизайна заключается в оптимизации сайта под все размеры экранов, а не только под самые популярные.


Изменяются размеры не всего сайта как монолитной системы, а отдельных его элементов. Если открыть любой сайт и постепенно уменьшать масштаб страницы в настройках браузера, некоторые элементы на определенном этапе исчезают. Этот нежелательный эффект устраняется перемещением исчезающего элемента в видимую колонку, а правила этого действия прописывают в таблице стилей. Влияет ли сжатие ключевых изображений на их распознавание? Если влияет, стоит поэкспериментировать с обрезкой (обе функции настраиваются в css с учетом ширины экрана). Вообщем смотрите лучше видеоуроки. Для нормального восприятия этих уроков вы должны быть знакомы с основами html и css.

Добро остается бесплатным!!!

CSS3 стили

Предлагаю вашему вниманию эффектные стили в CSS3 для сайтов, как в этом модуле. Скачать архив

Подробнее

Круговые эффекты

Предлагаю очень красивые css круговые эффекты, как на нашем сайдбаре слева. Скачать архив

Продолжить

Меню для сайта

Подборка очень красивого анимированного меню для вашего сайта. Скачать

Смотреть примеры

Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3.

Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.

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

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

Вот вам ссылка с множеством причудливых эффектов

Теперь эффект такого вида как на картинке внизу. При наведении картинка выпрямляется. Пример смотрите прямо под этим блоком. Нравится? Еще бы. Пользуйтесь!

Скачать архив по ссылке

  • Iron Man 2

    Клипарт для творчества

    Большой выбор отличного бесплатного клипарта для выполнения ваших творческих работ по Photoshop и не только...

    Перейти
  • The Last Airbender

    Файлы к лабораторным

    Файлы для выполнения лабораторно-практических работ по всем изучаемым программам в СКАТК...

    Перейти
  • Tron Legacy

    Музыка к праздникам

    Здесь собраны лучшие музыкальные композиции для проведения студентчесих вечеров и для творческих работ при видеомонтаже...

    Перейти

Разработка и сопровождение сайта Муслимовой З.М. и Муслимова З.О

© 2020 Сайт преподавателя СКАТК Муслимовой Земфиры Мурадалиевны. Все права защищены.
Joomla! - бесплатное программное обеспечение, распространяемое по лицензии GNU General Public License.