Вверх

Блог
RSS лента

CSS

шариковые направляющие и доводчик azt.ua

Привет всем интересующимся, находящимся в поиске и влюбленным в создание качественных путей по сети интернет!

Знаете, я иногда слышу фразы, смысл которых заключается в том, что для продвинутого веб-мастера или крутого программиста не может быть белых пятен в изучаемых темах. Вот, допустим, понадобилась верстка css. Если вникнуть в нее и постоянно заниматься этой темой, то любая проблема разрешится без труда.

С одной стороны я согласен, что решение даже самой сложной задачи придет непременно. Конечно, неизвестно, сколько это займет по времени, но придет. С другой стороны я бы не стал тратить время на поиски того, что уже найдено другими. Не раз полученные мной подсказки от друзей помогали справиться с удачным размещением фото, текста, модуля рекламы на сайте практически в несколько кликов.

Так вот, html css можно назвать некогда изобретенным «колесом», применение которого возможно в самых неожиданных ракурсах. В этой категории блога вы найдете тонкости использования Cascading Style Sheets для быстрого и не только качественного и привлекательного, но и – самое главное! – желаемого оформления страниц ресурса.

Я выкладываю собственные наработки, а также сделанные мне подсказки с подробным объяснением. Просмотрите различные css примеры, чтобы увидеть ответ на возникшую в процессе работы над сайтом проблему.

Уверен, что совместное преодоление сладких мук веб-творчества станет движущей силой оригинального и удобного представления ресурсов на просторах интернет. Пользователю должно быть комфортно на посещаемом портале, не правда ли? Так почему бы не реализовать креативную идею, воспользовавшись обкатанным «колесом»?

Предлагаю не только читать публикации, но и оставлять свои комментарии. Очень хочется почувствовать виртуальную руку сотоварища по общему делу :)

Нижнее подчеркивание текста пунктиром...

Доброго времени суток читатель. Если ты зашел сюда и читаешь эту статью значить тебе не подходит text-decoration:underline;
И ты хочешь красивое подчеркивание и может даже другого цвета в отличии от ссылки.
А сделать такое можно таким способом:

  1. a {
  2.        color:#fff;
  3.        border-bottom:1px dashed #fff;
  4.        text-decoration:none;
  5. }
  6. a:hover {
  7.         text-decoration:none;
  8.         border-bottom:0px;
  9. }

Строчка border-bottom:1px dashed #fff;, означает что мы делаем нижнее подчеркивание пунктиром и белого цвета, color:#fff; это цвет ссылки, text-decoration:none; ставим что бы невзначай где то не вылезло стандартное подчеркивание.
При наведении я убераю подчеркивание, но можно его сделать например другим шрифтом, или приминив нижний паддинг увеличть ростояние мужду словом и подчеркиванием. В общем способов использования много, экспериментируйте.
В общем то вроде и всё. Пользуйтесь на здоровье.

Clear

Очень полезное свойство при блочной верстке да и просто при использовании плавающих элементов. Например если у вас картинка которая выравнивается по левому или правому краю, почему то налазит на ниже следующие элементы. В этом случае вам нужно присвоить в стилях нижним элементам clear: both, что значит отмену обтекания.

И немножко теории:
Clear - устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью атрибута float, то атрибут clear отменяет его действие для указанных сторон.

clear: both | left | none | right

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

Как убрать рамку на картинке и ссылке в Mozille и Safari

В Mozille и Safari при нажатии на ссылку появляется граница вокруг ссылки. Так вот это можно убрать прописав в стиль следующее:

  1. a, img {
  2.  outline: none;
  3.  outline: 0;
  4. }

Изменение картинки при наведении с помощью сдвига фона css

Например у вас есть какое то меню. Пункты меню сделаны картинками. И вы хотели бы что бы при наведении на пункт меню картинка менялась, например был эффект "вдавливаемости" или светлела, не важно, что нарисуете то и будет.
Пишем следующее:

Создам картинку, в таком виде что бы сверху была картинка такая как она должна быть до наведения, ниже рисуем картинку после наведения. Смысл такое рисовать в том что у вас будет видна сначала неактивная зона, а потом с момощью CSS мы сделаем что бы картинка подымалась и становилась видна активная часть.
_____________
| без наведения |
---------------------
| с наведением |
--------------------
Одна картинка, два эффекта.

В CSS пишем:

  1. a.but {
  2.  background: url(images/but.gif); /* картинка фона или ваш пункт меню */
  3.  display: block;
  4.  width: 138px; /* ширина вашей картинки */
  5.  height: 36px; /* высота картинки, ровно половина (в моем случае картинка высотой 72px) */
  6. }
  7. a.but:hover {

Курсоры

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


  P {cursor:default}


  P {cursor:crosshair}


  P {cursor:help}


  P {cursor:move}

Как сделать текст заглавными буквами

Например вам нужно что бы ссылки или заголовки текста были только заглавными буквами, тоесть верхний регистр. А так же можно сделать нижний регистр или только первые буквы заглавными. А делаеться это все просто. С помощью text-transform

Синтаксис:
text-transform: capitalize | lowercase | uppercase | none

Аргументы:

capitalize - Каждое слово в предложении будет начинаться с заглавного символа.
lowercase - Все символы текста становятся строчными (нижний регистр).
uppercase - Все символы текста становятся прописными (верхний регистр).

Пример:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5.   <title>text-transform</title>
  6.   <style type="text/css">
  7.    H1 {

Делаем первую букву абзаца выделенной

Есть в каскадных таблицах стилей такое замечательное свойство как :first-letter
Так вот если вы хотите сделать первые буквы абзаца выделенными, то делаем следующие

  1.  p:first-letter {
  2.  color:#000000;
  3. font-weight:bold;
  4.  font-size:16px;
  5. }

Большая часть цмс разбивает абзацы именно через тег p
В выше приведенном случае буква будет жирной и больше шрифтом чем все остальные.
Если по экспериментировать можно прибить её к левому краю и сделать отступы, как обычно делают с обтекаемой картинкой. В общем должно получиться что наподобие как здесь http://knights.orgfree.com/?q=node/8

CSS: max/min Height и Width в Internet Explorer

Свершилось чудо: оказывается, что max/min-height и max/min-width можно использовать в Internet Explorer!
В частности, используя преимущество атрибутики CSS в IE - возможность использования expression, - Вы можете заставить IE выводить нужную Вам высоту и ширину. CSS атрибут expression позволяет использование JavaScript команд в IE.

JavaScript и CSS вместе? Благодарим Мелкомягких!

Почему же это так замечательно? Да потому, что в других, стандартно-компилируемых браузерах (в отличие от IE), параметры max/min-height и max/min-width выполняются стандартами CSS..

CSS:hover для любого элемента

Экспериментируя с псевдо-классом :hover и анализируя его преимущества, я расстроился когда узнал о том, что Internet Explorer не поддерживает :hover естественным путем. В этом браузере данный селектор можно использовать только для элементов ссылок, то есть <a> и все. Современные же браузеры могут отображать эффект выделения для любого элемента CSS. Как же добавить эту функцию и для IE?

Существует так называемый whatever:hover - способ, который дает веб-разработчикам использовать селектор :hover в Internet Explorer. Версия 1.11.040203 (последняя на сегодняшний день) имеет несколько незначительных недостатков, но люди, которые разобрались с этим методом, не жалуются.

Главная | Портфолио | Услуги | Контакты | Блог