Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Нестандартный градиент и текстура

Помогите приладить текстуру к градиенту
Захожу иногда
Verov
Сообщений: 72
628 дней назад
Добрый день.
После экспорта шаблона в CSS файле получился такой код:


background: #FFDBB3 url('../images/page.png') bottom center no-repeat fixed;
margin: 0 auto;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
position: relative;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
cursor: default;
overflow: hidden;

Fon 1

Мне понадобился градиент – радиальный, который я сгенерировал online и получил код:

background: rgb(255,236,154); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgb(255,236,154) 0%, rgb(255,198,133) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgb(255,236,154)), color-stop(100%,rgb(255,198,133))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgb(255,236,154) 0%,rgb(255,198,133) 100%), url('../images/page.png') bottom center no-repeat scroll; /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgb(255,236,154) 0%,rgb(255,198,133) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgb(255,236,154) 0%,rgb(255,198,133) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgb(255,236,154) 0%,rgb(255,198,133) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffec9a', endColorstr='#ffc685',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

После его вставки исчезает изображение текстуры: background: #FFDBB3 url('../images/page.png') bottom center no-repeat fixed;

Fon 2

Как увязать код нового градиента с изображением текстуры?! Как сделать, чтобы текстура легла поверх градиента?! Подскажите.
Прикрепленные файлы:
fon-1_53e362d4d6b26.jpg | 61.57 Кб | Скачали: 25 раз
fon-2_53e362d4dd5ba.jpg | 46.09 Кб | Скачали: 30 раз
Редактировалось: 2 раза (Последний: 7 августа 2014 в 16:04)
Постоянный участник
Evgenert
Медаль
Сообщений: 331
1 день назад
Вот рабочий пример градиента с картинкой, подставьте свое и будет счастье:

Код PHP:
  1.  
  2.  
  3. {
  4. background: #7993AF url('images/pageglare.png') top center no-repeat scroll;
  5. background: url('images/pageglare.png') top center no-repeat, -webkit-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  6. background: url('images/pageglare.png') top center no-repeat, -moz-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  7. background: url('images/pageglare.png') top center no-repeat, -o-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  8. background: url('images/pageglare.png') top center no-repeat, -ms-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  9. -svg-background: url('images/pageglare.png') top center no-repeat, linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  10. background-size: auto, 100% 110px, auto !important;
  11. background: url('images/pageglare.png') top center no-repeat, linear-gradient(to bottom, #587493 0, #587493 110px) no-repeat, #7993AF;
  12.  
  13. }
  14.  
Т.е первая строка у Вас будет без изменений (только Ваша) а начиная со второй, надо в каждой строке сначала:
условие 1, потом запятая, потом условие 2.
Редактировалось: 1 раз (Последний: 7 августа 2014 в 17:05)
Постоянный участник
MarikSV
Медаль
Сообщений: 111
9 дней назад
Это можно в программе сделать smile
Редактировалось: 1 раз (Последний: 7 августа 2014 в 17:09)
Захожу иногда
Verov
Сообщений: 72
628 дней назад
Evgenert:
Вот рабочий пример градиента с картинкой, подставьте свое и будет счастье:
Спасибо, буду пробовать.Добавлено спустя 1 минуту
MarikSV:

Это можно в программе сделать smile
Уточните в какой... Если в Artisteer то в какой версии?Добавлено спустя 15 минут
Evgenert:

Вот рабочий пример градиента с картинкой, подставьте свое и будет счастье:

Код PHP:
  1.  
  2.  
  3. {
  4. background: #7993AF url('images/pageglare.png') top center no-repeat scroll;
  5. background: url('images/pageglare.png') top center no-repeat, -webkit-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  6. background: url('images/pageglare.png') top center no-repeat, -moz-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  7. background: url('images/pageglare.png') top center no-repeat, -o-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  8. background: url('images/pageglare.png') top center no-repeat, -ms-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  9. -svg-background: url('images/pageglare.png') top center no-repeat, linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;
  10. background-size: auto, 100% 110px, auto !important;
  11. background: url('images/pageglare.png') top center no-repeat, linear-gradient(to bottom, #587493 0, #587493 110px) no-repeat, #7993AF;
  12.  
  13. }
  14.  
Т.е первая строка у Вас будет без изменений (только Ваша) а начиная со второй, надо в каждой строке сначала:
условие 1, потом запятая, потом условие 2.

Все получилось, но он линейный, а мне необходим радиальный, т.е. круглый... подскажите как переориентировать код?
Постоянный участник
Evgenert
Медаль
Сообщений: 331
1 день назад
В код вместо -moz-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;

Подставляйте Ваш -moz-radial-gradient(center, ellipse cover, rgb(255,236,154) 0%, rgb(255,198,133) 100%); /* FF3.6+ */

Т.е вместо linear-gradient нужно radial-gradient
Редактировалось: 1 раз (Последний: 7 августа 2014 в 17:38)
Захожу иногда
Verov
Сообщений: 72
628 дней назад
Evgenert:

В код вместо -moz-linear-gradient(top, #587493 0, #587493 110px) no-repeat, #7993AF;

Подставляйте Ваш -moz-radial-gradient(center, ellipse cover, rgb(255,236,154) 0%, rgb(255,198,133) 100%); /* FF3.6+ */

Т.е вместо linear-gradient нужно radial-gradient
Все получилось. Спасибо за опыт.
|
Перейти на форум:

Реклама