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