Добавление эффекта градиента для заголовков на страницах сайта (кивок в сторону Web 2)

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем doctorgrif, 05.08.2008.

  1. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    Добавление эффекта градиента для заголовков на страницах сайта

    Интересно бывает пощупать joomla на предмет возможностей. Вот одна из них.
    PS: исходный текст переработан и приведен к нормальному виду по пожеланию AmmiAk :)

    Добавление эффекта градиента для заголовков
    По сути это придание обычному шаблону достаточно симпотичного вида. Есть 2 варианта реализации данного эффекта - простой и второй :). И третий - использовать в качестве заголовков просто изображения с текстом - "но это же не наш метод" ( (с) Приключения Шурика)
    Потребуется
    - стилевой файл шаблона = templates_css.css (но в некоторых шаблонах он может иметь другое название - смотрим индексный файл шаблона и сверяемся),
    - content.html.php этот файл распологается по пути /cocmponents/com_content/ присутствует по умолчанию во всех сборках джумлы,
    - index.php шаблона (присутствует во всех шаблонах),
    - текстовый редактор (любой, от notepade до dreamviewer),
    - PhotoShop (Gimp, etc) (в принципе, любой графический редактор, позволяющий работать с png, слоями, градиентом, прозрачностью),
    - фтп-клиент

    Простой.
    1. доработка файла content.html.php
    ищем конструкцию:
    Код (PHP):
    1. <?php
    2.                         if($mosConfig_title_h1 or ($task=='view')and($mosConfig_title_h1_only_view))
    3.                             echo '<h1>'.$row->title.'</h1>';
    4.                         else
    5.                             echo $row->title;
    6. ?>
    7.                     </a>
    8.                 </td>
    9.                 <?php
    10.             } else {
    11.                 ?>
    12.                 <td class="contentheading<?php echo $params->get( 'pageclass_sfx' ); ?>" width="100%">
    13.                 <?php HTML_content::EditIcon( $row, $params, $access ); ?>
    14. <?php
    15.                         if($mosConfig_title_h1 or ($task=='view')and($mosConfig_title_h1_only_view))
    16.                             echo '<h1>'.$row->title.'</h1>';
    17.                         else
    18.                             echo $row->title;
    19. ?>
    и меняем ее на
    Код (PHP):
    1. <?php
    2.                         if($mosConfig_title_h1 or ($task=='view')and($mosConfig_title_h1_only_view))
    3.                             echo '<h1><span></span>'.$row->title.'</h1>';
    4.                         else
    5.                             echo $row->title;
    6. ?>
    7.                     </a>
    8.                 </td>
    9.                 <?php
    10.             } else {
    11.                 ?>
    12.                 <td class="contentheading<?php echo $params->get( 'pageclass_sfx' ); ?>" width="100%">
    13.                 <?php HTML_content::EditIcon( $row, $params, $access ); ?>
    14. <?php
    15.                         if($mosConfig_title_h1 or ($task=='view')and($mosConfig_title_h1_only_view))
    16.                             echo '<h1><span></span>'.$row->title.'</h1>';
    17.                         else
    18.                             echo $row->title;
    19. ?>

    т.е. мы добавляем к выводу заголовка span. С этим файлом все
    2. доработка templates_css.css:
    добавляем в стилевой файл
    Код (CODE):
    1. h1 {
    2.   position: relative; /* в этом суть - добавте в существующий h1 эту строку - просто эту строку -  position: relative; */
    3. }

    дописываем ниже
    Код (CODE):
    1. h1 span {
    2.     background: url(../images/gradient.png) repeat-x; /* указываем путь к изображению с градиентом */
    3.     position: absolute; /*позиционируем абсолютно */
    4.     display: block;
    5.     width: 100%; /*отображаем блоком на всю ширину заголовка */
    6.     height: 31px; /*это высота градиентного изображения, можно изменить*/
    7. }

    3. создание градиентного изображения
    создаем градиентное изображение в формате png (png-24) шириной 1px и высотой 31px (см h1 span - height: 31px;), но, в принципе, высоту можно задать и свою, тогда в h1 span изменяем height: 31px; на нужное. Градиентную заливку в изображении делайте по своему желанию - цвет, % и прочее. Заливаем в папку /templates/vash_shablon/images/
    4. доработка index.php шаблона
    у IE он есть проблема с отображением изображений в png-24, поэтому добавляем между <head> и </head> следующий код
    Код (CODE):
    1. <!--[if lt IE 7]>
    2. <style>
    3. h1 span {
    4.     background: none;
    5.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $mosConfig_live_site; ?>/templates/ваш_шаблон/images/gradient.png', sizingMethod='scale');
    6. }
    7. </style>
    8. <![endif]-->

    *Прим.: Вот это - <?php echo $mosConfig_live_site; ?>/templates/ваш_шаблон/images/ в разных шаблонах может отличаться - сверьтесь с синтаксисом шаблона
    5. все:) соответственно заливаем измененные файлы обратно в соответствии с их первоначальным местоположением.
    6. Перегружаем браузер (в опере может потребоваться чистка кэша). Градиент начинает отображаться либо при полном просмотре текста, либо в интро части в блоге, для создания такого эффекта в модулях вывода последних новостей/востребованных статей необходимо по аналогии доработать эти модули и либо их стилевой файл, либо класс в основном стилевом файле шаблона

    Второй способ
    если вы не хотите в коде пустой <span> тэг, то можно осуществить подобное действие через jQuery (библиотеку актуальную на сей момент берем тут),
    1. заливаем в шаблонную папку (можно создать отдельную папку для js)
    2. подключаем:
    Код (CODE):
    1. <script type="text/javascript" src="путь до скрипта в соответствии с синтаксисом вашего шаблона/jquery.js"></script>
    2.  
    3. <script type="text/javascript">
    4. $(document).ready(function(){
    5.  
    6.   //prepend span tag to H1
    7.   $("h1").prepend("<span></span>");
    8.  
    9. });
    10. </script>


    Для примера www.hospsurg.ru - осуществлен вывод заголовков через данный механизм (css)

    Данная методика - адаптация для джумлы оригинальной статьи http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

    Возможно осуществление подобного действия, для придания изображениям подложки ака рамки, но проблема в фиксированном размере изображения (т.е. 100*100 если задать - градиентная рамка будет, а на > или < размерах уже нет). Попытаюсь на тестовом сайте настроить mosimage для этого, результат и механизм внедрения выложу
     
    Последнее редактирование: 08.08.2008
  2.  
  3. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Что я могу сказать, doctorgrif, довольно основательно ты подошел к теме градиентных заголовков в модулях - побольше содержательности и литературности твоим комментариям и можно открывать собственный дизайнерский блог! Молодец! [!]

    P.S. Добавление строчных блоков span в заголовки открывает большие возможности по персонализации последних. ?:\
     
  4. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    каюсь:) стиль Достоевского или Тючева не выдержан, но, право слово, исправлюсь:)
    завтра перепишу пост в правильном склонении и тонком стиле

    В принципе по поводу "Добавление строчных блоков span в заголовки открывает большие возможности по персонализации последних" - если поковыряться, то можно эти спаны засунуть в интро, и тогда будет гламурное отображение вводной части статьи/новости (прям как на ipod сайтах), но тут будут сложности с во-первых фильтрацией количества символов (графика хоть и тянется, но...), во-вторых, я пока не пробовал - теоретизирую, не выпадет ли эта гламурщина и хованщина при полном просмотре.
    То же самое можно провернуть и с модулями кратких новостей - привести к web 2 (что проще, так как он стиль берет из своего файла, ну по крайней мере не дефолтный модуль)
     
    Последнее редактирование: 05.08.2008
  5. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Знаем, проходили:) Такой эффект ооочень здоро смотрится на сайтах, где типографика хорошая. Где размер шрифта хороший :)

    Добавлено через 16 минут
    И кстати, такой эффект ОЧЕНЬ здорово смотрится на mosimage ;)
     
    Последнее редактирование модератором: 06.08.2008
  6. sectus
    Offline

    sectus специалист

    Регистрация:
    19.04.2006
    Сообщения:
    1 210
    Симпатии:
    46
    Пол:
    Мужской
    Простите, возможно меня сейчас закидают... что тут есть, чем тут можно закидать?... но в общем при чем тут web2.0?
     
  7. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    если простите, то хз:), но типа градиент и прочие гламурности на контенте почему то (ну не я) относят к web 2
    если что пинать не меня, а других девелоперов:( мне просто формулировка понравилась, но, если хотите, смените название на "Добавление эффекта градиента для заголовков на страницах сайта" без Web 2
     
    Последнее редактирование: 06.08.2008
  8. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    пробовал я его подключить - ну, если картинки ВСЕ одного размера, - срабатывает, если размер раазличается - не работает
    вот сейчас и пытаюсь выявить алгорить подключения либо css либо jquery.js к mosimage
    пока ...ну musculus gluteus :) - если админы простят, то переведу - жопа, короче
     
  9. sectus
    Offline

    sectus специалист

    Регистрация:
    19.04.2006
    Сообщения:
    1 210
    Симпатии:
    46
    Пол:
    Мужской
    Конечно трудно спорить о том чего на самом деле нету... но все же я думал, что увеличение интерактивности есть главная черта web 2.0
     

Поделиться этой страницей

Загрузка...