В сегодняшнем уроке хочу вам раскрыть некоторое удобство из секретов которые используются на нашем сайте при использование стиля CCS2, CCS3. Урок повествует то что как можно красиво оформить постер, скриншот или картинку к вашей новости в виде материалов вашего сайта, если вы заметили на странице главной сайта ucozon.ru сам скриншот обрезается независимо от его размера, вот об этом будет идти речь в данном видеоуроке.
Я вам предлагаю два варианта обрезание скриншота, первый это обрезание с уменьшением по ширине, и второй вариант, это обрезание как есть в размерах своих картинка в 100%. На сайте
ucozon главной страницы я использую первый вариант так как его считаю более оптимальным, потому что бывают постеры к примеру шаблонов так имеют в ширину более 1000px и при выводе в виде материалов на 200px мы не увидим толком что представлено на данном рисунке.
Для решения такого оформления дизайна, я использую стиль свойства
overflow он управляет показом содержания блока в нашем случае div массива блочного элемента, при условие что если скрин цельным не вмещается и выходит за пределы обозначенной области то дается само значение
hidden - Это уже работает и отображается только сама область внутри элемента, остальное будет скрыто, и не препятствовать другим элементам для построения страницы, и выглядеть будет таким образом к любому определению стильности
{ overflow: hidden; }
Этот вариант удобства поддерживается браузерами
Chrome | Opera | Safari | Firefox, всеми кроме
Explorer что для пользователей не важно, которые используют сайты ucoz.
В общем что я вам буду рассказывать, давайте лучше посмотрим данный видео урок, который позволить научится малому и сделать выводы для большего, данный стиль не только для этого можно использовать.
Видео урок как создать обрезание картинки стилем на сайте
Для просмотра в качестве разложите плеер на весь экран
Данный материал копировать и распространять строго запрещено!