Блог счастливого веб-разработчика Голосов: 1 Адрес блога: http://ridler-fun.livejournal.com/ Добавлен: 2010-12-26 16:27:55

Вопрос дня: Праздничная суета

2010-12-15 08:32:24 (читать в оригинале)


 Для меня праздник это стрессовый отдых :)

---

Пошаговое руководство по созданию шаблона для Joomla

2010-12-14 11:43:07 (читать в оригинале)

 Если вы решили заняться созданием сайтов на Joomla, и по каким либо причинам не хотите пользоваться бесплатными и платными шаблонами, вы хотите создать свой шаблон, но не знаете с чего начать?! Тогда представляю вашему вниманию так сказать мною написаное пошаговое руководство по его созданию!

---

Подчеркивание ссылок (text-decoration)

2010-12-11 07:46:59 (читать в оригинале)

Еще с самого начала развития Сети ярко-синий подчеркнутый текст сигнализировал: "Нажмите сюда и перейдете туда". Однако стандартные атрибуты подчеркивания и цветового оформления ссылок - это то, что в первую очередь изменяет любой веб-дизайнер. Подчеркивание - слишком распространенный способ выделения, который уже очень надоел. У нас есть возможность изменить ситуацию, одновременно обеспечив хорошее оформление ссылок.

• Полное удаление подчеркивания. Чтобы убрать стандартное подчеркивание, используем свойство text-decoration со значением none:

          a : link { text-decoration: none; }
       
          Конечно полное удаление подчеркивания может смутить посетителей сайта. Если мы не предусмотрим каких то других визуальных подсказок, то наши ссылки будут выглядеть точно также, как и весь остальное текст веб-страницы. Если мы пойдем этим путем, то нужно обеспечить выделение текста ссылок каким-то другим способом, например, полужирным начертанием, цветом фона, подсказкой в виде рисунка или преобразованием ссылки в имитированную кнопку.

• Добавление подчеркивания только при наведении на ссылку указателя мыши. Некоторые веб-дизайнеры убирают подчеркивание для всех ссылок, выделяют их каким то другим способом, а затем включают атрибут подчеркивания только при наведении указателя мыши. Чтобы обеспечить такой эффект, просто удалим подчеркивание ссылок, а затем повторно введем его в псевдокласс :hover:

a : link, a : visited
{
      text-decoration: none;
      background-color: #f00;
}

a : hover
{
      background-color: transparent;
      text-decoration: underline;
}

• Использование свойства нижней границы. У нас есть возможность управлять цветом, толщиной или стилем стандартной линии подчеркивания ссылок, которое всегда отображается в виде линии толщиной 1 пиксел того же цвета, что и текст
• Большего разнообразия можно добиться путем использования вместо подчеркивания свойства border-bottom
• Скрыть обычное подчеркивание и добавить черту в виде пунктирной линии-границы можно следующим образом: 

a : link
{
     text-decoration: none;
     border-bottom: dashed 2px #f55;
}

Чтобы увеличить пустой промежуток между текстом и границей, применяйте свойство padding.

• Использование фонового изображения. Мы можем преобразить вид ссылок, добавив фоновый рисунок

a
{
    text-decoration: none;
    background: url(umages/underline.jpg) repeat-x left bottom
    padding-bottom: 5px;
}

---

Выборка отдельных ссылок

2010-12-10 18:22:37 (читать в оригинале)

 Стили, которые мы создавали в предыдущем посте, представляют собой простейшие стили ссылки <a>. Они производили выборку в определенном состоянии, но при этом стилизовали абсолютно все ссылки, независимо от их расположения на веб-странице. Допустим мы хотим отформатировать одни ссылки одним способом, а другие другим. Что делать в этом случае?! Есть хорошее решение этой проблемы - применить стилевые классы к нужным тегам.

Допустим, на веб-странице имеется набор ссылок, причем они указывают на разные разделы сайта. Давайте сделаем так чтобы посетители нашей веб-страницы заранее знали, что при щелчке кнопкой мыши на ссылке они перейдут с нашего сайта на какой-нибудь другой. В данном случае применим такой стилевой класс:

<a href=http://twitter.com/ridler_fun class="style"> Я в твиттере</a>

Для стилизации этой ссылки другим способом давайте создадим следующий стиль:

a.style : link { color: #f50; }
a.style : visited { color: #800; }
a.style : hover { color: #f44; }
a.style : active { color: #b3f611; }

Определения только имени стилевого класса, без указания названия тега a, будет достаточно:

.style : link { color: #f50; }
.style : visited { color: #800; }
.style : hover { color: #f44; }
.style : active { color: #b3f611; }

Теперь такое форматирование приобретут только ссылки, с классом 'style'.

Группирование ссылок с помощью селекторов потомков. Если набор ссылок располагается в одной области веб-страницы, то мы можем сэкономить время, применив селекторы потомков (они позволяют адресовать стиль к тегу, вложенному в другой тег). Предположим, у нас имеется пять ссылок, которые ведут на основные разделы нашего сайта.

Они представляют собой главную панель навигации, и мы хотим придать им соответствующий вид. Давайте просто заключим эти ссылки в тег <div> и применим к нему стилевой класс или стиль с идентификатором: <div id="navigation">. Теперь у нас появилась возможность произвести выборку и отформатировать только эти ссылки:

#navigation a : link { color: #f50; }
#navigation a : visited { color: #800; }
#navigation a : hover { color: #f44; }
#navigation a : active { color: #b3f611; }

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