#html #css
#HTML #css
Вопрос:
Я хочу создать большое поле травы, используя только серию маленьких блоков или срезов, которые будут повторяться продуманным образом. Я думаю, что для достижения этой цели можно было бы использовать принцип cicada, но я не уверен, как применить его для эффекта травы.
В качестве конкретного примера рассмотрим это изображение:
Может ли кто-нибудь воссоздать это, используя фрагменты или квадраты небольших размеров (например, фрагменты шириной всего в несколько пикселей или высотой всего в несколько пикселей, если они были горизонтальными, или квадраты 5×5 или меньше)? Конечный продукт не обязательно должен в точности соответствовать оригиналу, достаточно чего-то похожего. Решение должно быть способно создавать поле травы, способное заполнить div любых необходимых размеров. Любое повторение в поле должно быть плавным, и его трудно обнаружить с первого взгляда (как в примере curtain по ссылке выше).
Спасибо за любую помощь.
Комментарии:
1. Пытались ли вы решить эту проблему самостоятельно? Мы помогаем с проблемами, а не делаем их за вас.
2. Вероятно, самым простым вариантом было бы создать изображение в Photoshop, чтобы его можно было легко выложить плиткой. Я не уверен, почему вы хотите создать это с помощью CSS.
3. Я думал об этом и не знаю, с чего начать. Да, создание фрагментов в photoshop, очевидно, будет частью решения. Вопрос в том, как должны выглядеть срезы (или квадраты) и как они должны повторяться?
4. Вот образец травы на странице проекта cicada. Это должно помочь вам начать.
5. Спасибо topek. Если вы хотите продолжить и добавить это в качестве своего ответа, я приму его.
Ответ №1:
Начните с создания бесшовного изображения шаблона для использования в качестве фона. Посмотрите, например, это руководство.
Когда у вас будет изображение бесшовного шаблона, просто используйте его в качестве фона в div и повторите его с помощью css-свойства background-repeat.
.your-div
{
background-image:url('seamless-pattern-image.png');
background-repeat:repeat;
}
Ответ №2:
Если вы откроете свое изображение в PhotoShop, просто обрезайте изображение в 3 размерах и примените нижеприведенную структуру в качестве маски.
Для лучшего результата размывайте маску, чтобы у нее не было жестких краев.