javascript / jQuery / CSS - вертикальный текст? - PullRequest
Новая
       1

javascript / jQuery / CSS - вертикальный текст?

1 голос
/ 28 октября 2010

как сделать так, чтобы текст рисовался вертикально, как на этом сайте: http://cure.org/help-now/? Я вижу, что это сделано с помощью jQuery + SlideDeck, потому что я вижу их загруженными, но как именно это делает плагин?

Firefox имеет css -moz-transform, но другие браузеры не имеют таких свойств, и вертикальный текст с этого сайта отображается во всех браузерах

Ответы [ 5 ]

5 голосов
/ 28 октября 2010

Этот ответ предоставляет решение, которое работает в IE, Firefox, Opera и Webkit.

3 голосов
/ 28 октября 2010

Это сделано с помощью CSS3.

CSS3 имеет много новых свойств, хотя не все из них поддерживаются во всех браузерах. На веб-странице они используют 

/* webkit browsers */
-webkit-transform: rotate(270deg);
-webkit-transform-origin-x: 25px;
-webkit-transform-origin-y: 0px;

/* firefox */
-moz-transform:rotate(270deg);
-moz-transform-origin:25px 0;

/* internet explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Как вы видите, они используют фильтр для Internet Explorer (это немного глупо)

2 голосов
/ 02 мая 2011

на то есть 9 работ: 

margin-bottom:0;margin-left:0;z-index:5;
/* Safari */ -webkit-transform: rotate(-90deg); 
/* Firefox */ -moz-transform: rotate(-90deg);
-moz-transform-origin: 20px 0px;  
/* Internet explorer 7 */  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* Internet Explorer 8*/  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-ms-transform: rotate(0deg);
/* opera*/ -o-transform: rotate(-90deg);  
/* opera tmb*/ -o-transform-origin:150px 150px;
1 голос
/ 28 октября 2010

Используются разные стили для разных браузеров: 

-moz-transform: rotate(270deg);
-moz-transform-origin: 25px 0px;

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

-webkit-transform: rotate(270deg);
-webkit-transform-origin: 25px 0px;

-o-transform: rotate(270deg);
-o-transform-origin: 25px 0px;
1 голос
/ 28 октября 2010 
<dt class="spine spine_1 previous" style="position: absolute; z-index: 3; display: block; left: 0px; width: 330px; height: 50px; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 10px; -webkit-transform: rotate(270deg); -webkit-transform-origin-x: 25px; -webkit-transform-origin-y: 0px; text-align: right; top: 335px; margin-left: -25px; ">
  GIVE
  <div class="index" style="position: absolute; z-index: 2; display: block; width: 50px; height: 50px; text-align: center; bottom: -25px; left: 20px; -webkit-transform: rotate(90deg); -webkit-transform-origin-x: 25px; -webkit-transform-origin-y: 0px; ">
    1
  </div>
</dt>

Глядя на код, кажется, что они полагаются на -webkit-transform: rotate(270deg);

И, открыв его в IE8 и изучив его с помощью инструментов разработчика, я вижу 

z-index: 3; position: absolute; text-align: right; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); PADDING-BOTTOM: 0px; padding-left: 10px; width: 330px; padding-right: 20px; display: block; height: 50px; margin-left: 0px; top: 0px; padding-top: 0px; left: 0px; rotation: 270deg; webkittransform: rotate(270deg); WebkitTransformOrigin: 25px 0px; moztransform: rotate(270deg); MozTransformOrigin: 25px 0px; otransform: rotate(270deg); OTransformOrigin: 25px 0px;

Где это выскакивает у меня: filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

...