Първо, необходимо е да се намери правилният картинката:

След това намерете рамка на снимка с износени ръбове и тъмно монотонно център. Мрежата е пълна с модели за Photoshop, като този:

Практически курс по адаптивно оформление Кацане от нулата!

Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни

За да се постигне най-добър ефект обикновено е плътното прилягане на компресиран образ в нюанси на сивото, 16 или 32-битова PNG формат.

фоновото изображение за по-голям

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

Определяне на режима на правилното съчетание е малко объркващо и варира в зависимост от фона на контейнера. Ако на фона и рамката са бели, а след това най-добрият вариант би бил да се екран:

Резултатът е същият, както в новините заглавки.

други начини

Има и други начини, въпреки че и двете имат своите недостатъци:

За -webkit- браузъри имат функция образ-маска, но тя работи само в Chrome и Safari.

гранично-образ перфектно поддържа от всички браузъри, но най-подходящ за конвенционалните граници плоски изображения.

Редакция: Екип webformyself.

Практически курс по адаптивно оформление Кацане от нулата!

Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни

Най-IT новини и уеб разработки на нашия канал Телеграма