Хаки и хитрости CSS » Блог DINa

5 простых CSS хаков и хитростей

03.03.2008
ReTweet

Пять несколько простых приемов оживить ваш блог, обойти некоторые ограничения в работе.

1.Создаем ошеломляющие 3D кнопки…

Сегодня мы видим, 3d кнопки, почти везде. Большинство из них работают с помощью JavaScript. Основная проблема использования этих сценариев заключается в том, что много шансов на то, что сценарии могут быть заблокированы в браузере. А с появлением многочисленной ненужной рекламы, использование блокаторов стало серьезной проблемой. В этой ситуации, CSS поможет вам.
Мы можем создать базовые 3d кнопки с помощью CSS.

Вам потребуются основные CSS команды:

a.pushbut {
color:#26a;
display:block;
border:1px solid;
border-color:#aaa #000 #000 #aaa;
text-decoration:none;
width:8em;text-align:center;
height:2em;line-height:2em;
background:#fc0;font-weight:bold
}
a.pushbut:hover {
color:#26a;
background:#ffd633;
position:relative;
top:1px;
left:1px;
border-color:#000 #aaa #aaa #000
}

Это д.б. внутри тегов < style >…< /style >. Конечно, Вы можете изменить настройки CSS, изменить цвет, выравнивание т.д.

Теперь, чтобы создать кнопку, мы должны определить класс объекта, как кнопку нажатия в пределах тега < body > … < /body > и это все,

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

2. CSS шрифт сокращенной нотации

Когда устанавливаются стили шрифта в CSS вы, возможно, делают это, как:

font-family:Times New Roman,serif;
line-height:1.3em;
font-weight:bold;
font-style:italic;
font-size:0.9em;
font-variant:small-caps;

Можно, конечно написать и так, но есть более короткое описание стилей font. Это следующие синтаксисы

font:size/line-height weight style variant family;

Например, в вышеупомянутом случае мы можем просто написать

font: 0.9em/1.3em bold italic small-caps Times New Roman, serif;

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

3. Хак Вставки

Это необходимо для исправления проблемы IE6, где границы и отступы, включены в ширину элемента, а не добавленs.

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

padding:4em;border:1em solid red;width:30em;width:25em;

4. Команда преобразования текста через CSS

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

используем:

txttrans{text-transform: uppercase}

Это должны быть заключено в теги < style >…< /style >, вы можете изменить название “txttrans”.

А сейчас, чтобы использовать это, просто включите < div class=”txttrans” > где хотите, чтобы начать преобразование текста внутри тегов < body >…< /body > и до < /div >, где завершается преобразование.

Заметьте, что это будет относиться ко всем текстам на странице.

5. Создаем фотогалерею.

Хотите создать веб-страницу фотогалереи, используя css? Все, что вам нужно сделать, это вставить следующее из файла между тегами < style >…< /style >.

Загрузить файл Примера

Теперь, чтобы создать фотогалерею и просмотреть ее, вы должны включить код Примера между тегами < body >…< /body >

Для того чтобы добавить несколько изображений, вы должны следовать той же схеме…. Просто меняете местоположение картинки в img src вариант. Вот и все.

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

Коротко о сайте.

Блог meganfoxstar.ru поможет вам в Установке и настройке cms Vamshop, PHPProBid, Esyndicat, закрепит и расширит имеющиеся знания. Создание сайтов, продвижение сайтов, оптимизация информации. Теория и практика seo. CSS-верстка, веб-мастеринг, интернет-технологии, манимейкинги – все это и намного больше вы сможете найти на страницах нашего проекта!.

Основной        Дополнит         Twitter
RSS фид основной    RSS фид дополнительный    Всего Фолловеров блога
1028
RSSПодписка на обновления по RSS

Обновления блога по почтеОбновления блога на почтовый ящик