50 бесшовных фактур
Автор: Артем Помельников
- Просмотров: 77596
В подборке вы найдете фактуры металла, стекла, дерева, бумаги и картона, штукатурки, несколько текстур узоров. Текстуры имеют прозрачный фон, поэтому для их применения достаточно наложить фактуру сверху любого изображения. Я рекомендую применять к векторным элементам, так как они чаше всего абсолютно плоские. Ниже в виде анимации представлены все текстуры на одинаковом фоне. Скачать
Примеры применения для web сайтов
Далее представлены примеры применения фактур для web сайтов, для удобства я разместил примеры в виде html и css кода, все текстуры лежат на моем сервере в открытом виде, поэтому можно использовать фактуры напрямую, ссылками на этот сайт использовав имя файлов фактур Facture1.png - Facture62png.
Заливка фона цветом + фактура.
Самый простой пример, использую цвет фона и заливку фона фактурой.
See the Pen OMaRrw by seetvael (@seetvael) on CodePen.
Заливка фона градиентом + фактура.
В этом примере вложенные блоки, во внешнем градиент, во внутреннем фактура. Градиент можно сделать на сайте http://www.colorzilla.com/gradient-editor
See the Pen bEQBLb by seetvael (@seetvael) on CodePen.
Заливка фона векторным узором + фактура.
Векторный узор в этом примере генерированный при помощи градиентов, поэтому способ применения такой же как у примера выше, Образцы узоров можно посмотреть на сайте http://lea.verou.me/css3patterns
See the Pen YwRpzY by seetvael (@seetvael) on CodePen.
Векторное изображение в формате .svg + фактура.
Для этого примера я использовал векторный узор с сайта http://www.patterncooler.com и к тому же свойству добавил фактуру
See the Pen VeVKyp by seetvael (@seetvael) on CodePen.
Примеры применения в Photoshop
Для photoshop нужно скачать фактуры в формате .pat и установить их в ваш список паттернов. В photoshop можно применять фактуры к отдельным слоям тем самым создавая интересные сочетания. Ниже несколько таких примеров. я взял за основу векторные изображения и наложил фактуры и тени.
