CSS3 box-shadow, border-radius .........

Прислано: starcomputer@drupal.org

пт, 19/03/2010 - 08:58

Другие статьи по теме:

Поставил себе модуль Views Fluid Grid
И столкнулась с неприятной штукой.
В стилях можно задать закругление углов рамки и "тень". Но задаются они через свойства border-radius и box-shadow, которые большинство броузеров не понимают.
Конечно, можно исправить модуль или .....tpl.php файл, но это уже крайние меры.
Порылся в инете и наткнулся на вот такую статью:
Используем CSS3 прямо сейчас!
Там все эти эффекты (плюс еще многие недоступные CSS свойства) задаются путем создания дополнительных стилей и небольшого скрипта Modernizr

Поскольку в яве я не очень, то вопрос к понимающим людям:
Можно этот скрипт как-то установить на сайте, чтобы пользоваться его возможностями и как это сделать ?
Надеюсь, что это интересно не только мне сирому. :)

‹ Новый регион в форум Модуль-фильтр для авто расстановки ссылок на термины по найденному контексту ›

Комментарии


Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Применить"
Опубликовано wolfXXXL в пт, 19/03/2010 - 10:01.
wolfXXXL

Спасибо, в закладки для изучения может пригодиться.

"starcomputer@drupal.org" написал(а):

Можно этот скрипт как-то установить на сайте, чтобы пользоваться его возможностями и как это сделать ?

drupal_add_js();


Опубликовано starcomputer@dr... в пт, 19/03/2010 - 10:18.
starcomputer@drupal.org

Кстати с тенью есть способ БЕЗ скрипта:
Так было, тени ес-но не было:

ul.views-fluid-grid-items-box-shadow li.views-fluid-grid-item {
  -webkit-box-shadow: 2px 2px 2px #ccc;
   -khtml-box-shadow: 2px 2px 2px #ccc;
    -icab-box-shadow: 2px 2px 2px #ccc;
     -moz-box-shadow: 2px 2px 2px #ccc;
       -o-box-shadow: 2px 2px 2px #ccc;
          box-shadow: 2px 2px 2px #ccc;
}

Так стало, тень есть:
ul.views-fluid-grid-items-box-shadow li.views-fluid-grid-item {
  -webkit-box-shadow: 2px 2px 2px #ccc;
   -khtml-box-shadow: 2px 2px 2px #ccc;
    -icab-box-shadow: 2px 2px 2px #ccc;
     -moz-box-shadow: 2px 2px 2px #ccc;
       -o-box-shadow: 2px 2px 2px #ccc;
          box-shadow: 2px 2px 2px #ccc;
 
filter:
progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}


Опубликовано starcomputer@dr... в пт, 19/03/2010 - 10:16.
starcomputer@drupal.org

"wolfXXXL" написал(а):

drupal_add_js();

И где это нужно прописать ? Я ж говорил, что я ламер полный в этих вопросах :)


Опубликовано starcomputer@dr... в пт, 19/03/2010 - 11:35.
starcomputer@drupal.org

Нашел еще один способ делать закругленные углы, более удобный, но поскольку не спец, то не получается его запустить :(
Делаю так:
Скопировал файл скрипта DD_roundies.js в каталог с темой.
В файл .info темы добавляю:
scripts[] = DD_roundies.js
В файле /public_html/modules/views_fluid_grid/theme/views-fluid-grid-plugin-style.tpl.php
добавляю в начало файла:

<script type="text/javascript">
DD_roundies.addRule('ul.views-fluid-grid-items-border-radius li.views-fluid-grid-item', '5px');
</script>

Сами стили вот:
ul.views-fluid-grid-items-border-radius li.views-fluid-grid-item {
  -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;
    -icab-border-radius: 5px;
     -moz-border-radius: 5px;
       -o-border-radius: 5px;
          border-radius: 5px;
}

Не работает зараза.....
Что я не так делаю, подскажите плиз :(


Опубликовано wolfXXXL в пт, 19/03/2010 - 12:27.
wolfXXXL

"starcomputer@drupal.org" написал(а):

И где это нужно прописать ?

http://www.drupal.ru/node/24474 почитайте там написано


Опубликовано starcomputer@dr... в пт, 19/03/2010 - 12:31.
starcomputer@drupal.org

"wolfXXXL" написал(а):

почитайте там написано

Да. Читал, и сделал так (см. пост выше) - не работает :(


Опубликовано starcomputer@dr... в пт, 19/03/2010 - 13:03.
starcomputer@drupal.org

Зы...
Заработало в таком виде:

<script type="text/javascript">
DD_roundies.addRule('ul.views-fluid-grid-items-border-radius, li.views-fluid-grid-item', '5px');
</script


Новое на сайте

Ссылки партнёров