Ответить
1 2
Очень сложная задача по вёрстке
Отправлено: 7 Янв 2013#1
Да. Очень сложная.
Есть div блок, нужно его залить цветом только на половину или только на треть, в общем нужно иметь возможность менять соотношение на сколько он залит.
Есть возможность применять CSS. Новые блоки создавать нельзя.
Какие есть идеи?
Есть div блок, нужно его залить цветом только на половину или только на треть, в общем нужно иметь возможность менять соотношение на сколько он залит.
Есть возможность применять CSS. Новые блоки создавать нельзя.
Какие есть идеи?
Отправлено: 7 Янв 2013#2
http://www.linedmk.com/page32.html
Думаю здесь есть что ты хотел, также можно задавать в процентах
Думаю здесь есть что ты хотел, также можно задавать в процентах
Помогу с оптимизацией вашего сайта на AtomX. Дам советы. Скайп blook93
Отправлено: 7 Янв 2013#3
Нет, похоже это не то, т.к. есть только один блок и внутри его нужно менять заполняемость
Отправлено: 7 Янв 2013#4
а разве нельзя внутри одного блока создать другие блоки, покажи хоть суть задачи, что ты хочешь
Помогу с оптимизацией вашего сайта на AtomX. Дам советы. Скайп blook93
Отправлено: 7 Янв 2013#5
В Qt можно стилизовать элементы с помощью CSS. Хочу кнопку заполнять на некоторые проценты типо прогрессбар.
Сейчас попробовал использовать градиенты со специфичным для Qt синтаксисом:
но обводка кноки перестаёт быть нативной (верхняя кнопка)
если просто залить бэкграунд то нормально (средняя кнопка)
ну а нижняя кнопка это стандартная
Добавлено2013.01.07 11-51
Думаю, можно попробовать как то с помощью изображения заполнять кнопку
Сейчас попробовал использовать градиенты со специфичным для 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
Думаю, можно попробовать как то с помощью изображения заполнять кнопку
Отправлено: 7 Янв 2013#6
посмотри как работает рейтинг в DLE, Там сделано при помощи изображения
Помогу с оптимизацией вашего сайта на AtomX. Дам советы. Скайп blook93
Отправлено: 7 Янв 2013#7
там тоже 2 блока
Добавлено2013.01.07 12-47
ладно, сделаю замену кнопки на прогрессбар.
тему закрывайте
Добавлено2013.01.07 12-47
ладно, сделаю замену кнопки на прогрессбар.
тему закрывайте
Отправлено: 7 Янв 2013#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>
.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/
хостинг для сайта идеальный вариант за бесплатно http://api.3owl.com/redir/3710254/
Отправлено: 7 Янв 2013#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>
<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
1 2
Зарегистрируйтесь или авторизуйтесь что бы писать
Сейчас online: 7. Зарегистрированных: 0. Гостей: 7.