изображение кнопки - Свободное общение

Ципихович Эндрю · 03.09.2012, 20:11

здравствуйте, или я не вижу или такое вроде нужное свойство забыли добавить, вот здесь http://dabuttonfactory.com/
как кнопку сделать вертикально и надпись на ней тоже вертикально??

pu4koff · 03.09.2012, 20:55

В настройках ставим, чтобы генерировался CSS стиль, а не изображение. Смотрим код, анализируем параметры, потом смотрим как сделать вертикальный текст, объединяем эти две штуки.

Ципихович Эндрю · 03.09.2012, 21:05

раз они там элементарное не предусмотрели, придётся спросить:

Цитата:

Сообщение от pu4koff

В настройках ставим, чтобы генерировался CSS стиль, а не изображение. Смотрим код, анализируем параметры, потом смотрим как сделать вертикальный текст, объединяем эти две штуки.

КАК?

eval · 03.09.2012, 21:08

А никак, самому надо делать.

pu4koff · 03.09.2012, 21:26

В целом, получаем код CSS такой:

Код:

a.button {
   display: -moz-inline-stack;
   display: inline-block;
   width: 182px;
   height: 39px;
   background: url("http://dabuttonfactory.com/b.png?t=Your%20text%20here&f=Calibri-Bold&ts=24&tc=ffffff00&tshs=1&tshc=22222200&it=png&c=5&bgt=gradient&bgc=47c&ebgc=238&hp=20&vp=11") no-repeat;
   line-height: 39px;
   vertical-align: text-middle;
   text-align: center;
   color: #ffffff;
   font-family: Calibri;
   font-size: 24px;
   font-weight: bold;
   font-style: normal;
   text-shadow: #222222 1px 1px 0;
}
a.button > span {
   display: -moz-inline-block;
}

обращем внимание на:

Код:

   background: url("http://dabuttonfactory.com/b.png?t=Your%20text%20here&f=Calibri-Bold&ts=24&tc=ffffff00&tshs=1&tshc=22222200&it=png&c=5&bgt=gradient&bgc=47c&ebgc=238&hp=20&vp=11") no-repeat;

Методом тыка изменяем параметры и определяем что за что отвечает. Получаем в итоге:

Код:

http://dabuttonfactory.com/b.png?tshc=22222200&it=png&c=5&bgt=gradient&bgc=47c&ebgc=238&hp=50&vp=200

Эту фигню добавляем как ссылку на бэкграунд и осталось еще добавить вертикальный текст, а для этого есть яндекс.
Итого имеем стиль:

Код:

.MyButton {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
    writing-mode: tb-rl;
    width: 70px;
    height: 380px;
	background-image: url("http://dabuttonfactory.com/b.png?tshc=22222200&it=png&c=5&bgt=gradient&bgc=47c&ebgc=238&hp=70&vp=200");
	
	line-height: 24px;
   vertical-align: text-middle;
   text-align: center;
   color: #ffffff;
   font-family: Calibri;
   font-size: 24px;
   font-weight: bold;
   font-style: normal;
   text-shadow: #222222 1px 1px 0;
}

и подключаем его к нужному элементу, который будет типа кнопка:

Код:

<div class="MyButton">
<p>Кнопка</p>
</div>

Только уж проще градиент самому нарисовать.

Пепел Феникса · 03.09.2012, 21:30

а раздел по HTML/CSS отменили чтоль?

Naive · 03.09.2012, 21:39

Цитата:

Сообщение от Ципихович Эндрю

раз они там элементарное не предусмотрели, придётся спросить:

КАК?

Элементарно, сами же написали:

Код:

#mySuperButton {
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
	-webkit-transform:matrix(0,-1,1,0,0,0);
	   -moz-transform:matrix(0,-1,1,0,0,0);
	     -o-transform:matrix(0,-1,1,0,0,0);
	        transform:matrix(0,-1,1,0,0,0);
}

* добавил поворот для самого лучшего браузера в мире времен революции.

Ципихович Эндрю · 03.09.2012, 22:03

Цитата:

Сообщение от Пепел Феникса

а раздел по HTML/CSS отменили чтоль?

не хуже

Код:

<!DOCTYPE html>
<!--html5-->

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Вертикальные надписи css</title>

<style type="text/css">
#MyButton {
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
	-webkit-transform:matrix(0,-1,1,0,0,0);
	   -moz-transform:matrix(0,-1,1,0,0,0);
	     -o-transform:matrix(0,-1,1,0,0,0);
	        transform:matrix(0,-1,1,0,0,0);
}
</style>

</head>

<body>

<div id="MyButton">
<p>Кнопка</p>
</div>

</body>

</html>

спасибо!!!!!

03.09.2012, 20:11	#1
Ципихович Эндрю Старожил Регистрация: 24.01.2011 Сообщений: 3,068	изображение кнопки здравствуйте, или я не вижу или такое вроде нужное свойство забыли добавить, вот здесь http://dabuttonfactory.com/ как кнопку сделать вертикально и надпись на ней тоже вертикально??

03.09.2012, 21:30	#6
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	а раздел по HTML/CSS отменили чтоль? Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Изображение и кнопки для каждой строки таблицы БД	Sasha_S	Компоненты Delphi	4	03.05.2011 18:13
Изображение кнопки	Alex Cones	Свободное общение	28	27.12.2010 10:11
UCOZ: Кнопки кнопки на изображении	ReDuX	HTML и CSS	19	25.04.2008 02:39
триггерные кнопки и кнопки переключатели в DELPHI	MARGO	Помощь студентам	3	12.11.2007 17:35
Изображение	Artem	Мультимедиа в Delphi	10	13.07.2007 13:27

03.09.2012, 20:55	#2
pu4koff Старожил Регистрация: 22.05.2007 Сообщений: 9,068	В настройках ставим, чтобы генерировался CSS стиль, а не изображение. Смотрим код, анализируем параметры, потом смотрим как сделать вертикальный текст, объединяем эти две штуки. http://coub.com/view/2hhtg

03.09.2012, 21:08	#4
eval Подтвердите свой е-майл Регистрация: 29.08.2012 Сообщений: 4,011	А никак, самому надо делать.