Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Ответить
1 2

Очень сложная задача по вёрстке

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#1
Да. Очень сложная.
Есть div блок, нужно его залить цветом только на половину или только на треть, в общем нужно иметь возможность менять соотношение на сколько он залит.
Есть возможность применять CSS. Новые блоки создавать нельзя.
Какие есть идеи?

TYNGO

  • Свой человек
  • Юзер
  • 91
  • Репутация:4 
  • Предупреждения: 0 
  • Регистрация:
    17 Авг 2011
#2
http://www.linedmk.com/page32.html

Думаю здесь есть что ты хотел, также можно задавать в процентах

Помогу с оптимизацией вашего сайта на AtomX. Дам советы. Скайп blook93

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#3
Нет, похоже это не то, т.к. есть только один блок и внутри его нужно менять заполняемость

TYNGO

  • Свой человек
  • Юзер
  • 91
  • Репутация:4 
  • Предупреждения: 0 
  • Регистрация:
    17 Авг 2011
#4
а разве нельзя внутри одного блока создать другие блоки, покажи хоть суть задачи, что ты хочешь

Помогу с оптимизацией вашего сайта на AtomX. Дам советы. Скайп blook93

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#5
В Qt можно стилизовать элементы с помощью CSS. Хочу кнопку заполнять на некоторые проценты типо прогрессбар.
Сейчас попробовал использовать градиенты со специфичным для Qt синтаксисом:
Code:
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0.558659 rgba(51, 204, 12, 255), stop:0.564246 rgba(255, 255, 255, 0));
но обводка кноки перестаёт быть нативной (верхняя кнопка)

если просто залить бэкграунд то нормально (средняя кнопка)
ну а нижняя кнопка это стандартная

Добавлено2013.01.07 11-51

Думаю, можно попробовать как то с помощью изображения заполнять кнопку

TYNGO

  • Свой человек
  • Юзер
  • 91
  • Репутация:4 
  • Предупреждения: 0 
  • Регистрация:
    17 Авг 2011
#6
посмотри как работает рейтинг в DLE, Там сделано при помощи изображения

Помогу с оптимизацией вашего сайта на AtomX. Дам советы. Скайп blook93

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#7
там тоже 2 блока

Добавлено2013.01.07 12-47

ладно, сделаю замену кнопки на прогрессбар.
тему закрывайте

jevgenj

  • Истенный Атомовод
  • Пользователь
  • 344
  • Репутация:24 
  • Предупреждения: 0 
  • Регистрация:
    4 Фев 2012
#8
вот тебе прикол проверь может подойдёт



сдесь менять больше меньше
Code:
box-shadow:inset -80px

Code:
<style type="text/css">
.classname {
    -moz-box-shadow:inset -50px 0px 4px -6px #ffffff;
    -webkit-box-shadow:inset -50px 0px 4px -6px #ffffff;
    box-shadow:inset -80px 0px 4px -6px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:1px solid #00ff33;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:5px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.classname:active {
    position:relative;
    top:1px;
}
</style>
вывод кнопки
Code:
<a href="#" class="classname">my button</a>

Отредактировано автором 7 Янв 2013
шаблоны потихоньку адаптирую
хостинг для сайта идеальный вариант за бесплатно http://api.3owl.com/redir/3710254/

Gambler

  • Заглянувший
  • Юзер
  • 11
  • Репутация:0 
  • Предупреждения: 0 
  • Регистрация:
    19 Окт 2012
#9
Code:
<!DOCTYPE html>
<html>
 <head>
  <style>
  .progress {
    width: 500px;
    height: 25px;
    background-image: url(https://dl.dropbox.com/u/68669164/progress/1.png),
       url(https://dl.dropbox.com/u/68669164/progress/2.png);
    background-repeat: no-repeat, no-repeat;
    background-size: 70% 100%, 100% 100%;
   }
  </style>
 </head>
 <body>
  <div class="progress">
  </div>
 </body>
</html>

Отредактировано автором 7 Янв 2013

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#10
похоже в qt box-shadow не поддерживается

1 2
Сейчас online: 41. Зарегистрированных: 0. Гостей: 41.