Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
CSS и Верстка /

Градиент текста при помощи CSS

  • Вторник, 5 октября 2011, 03:15 |
  • Автор: karpovi4 |
  • Просмотров: 3378 |
  • Комментарии: 7 |
  • В закладки:
Хотите создать офигенски красивый заголовок без использования фотошопа?? Вот простой CSS пример. который покажет вам как без особого труда применить к вашему тексту эффект градиента.Этот прием был испытан на большинстве браузеров: Firefox, Safari, Opera и даже Internet Explorer 6.

Довольно простая и удобная в использовании доска объявлений в Буйнакске. Врочем, такая же как и в Бобруйске или Екатеринбурге.


Как это работает?
Градиент текста при помощи CSS

Способ очень простой. Мы просто добавляем однопиксельную PNG-картинку (с прозрачностью) над текстом.

HTML разметка
<h1><span></span>CSS Gradient Text</h1>


CSS
Ключевым моментом здесь является:
h1 { position: relative } and h1 span { position: absolute }

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}


Вот и все) Готово!
Теперь заставим работать в IE6
<!--[if lt IE 7]>
<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->


Кстати, именно поэтому комманда takein.ru и ненавидит ie6)

jQuery
(версия для любителей семантики)

Если вы не хотите чтобы у вас был пустой , вы можете использовать этот яваскрипт. Вот пример работы этого метода:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //prepend span tag to H1
  $("h1").prepend("<span></span>");
});
</script>


Изменение курсора с помощью CSS просто и оказывается очень легко.
  • Тэги публикацииcss, jQuery
  • Пишет: Jacklyn (Гости) |
  • Сообщений: 0 |
  • 20 сентября, 08:09
  • #1
This site is like a clsasorom, except I don't hate it. lol
Добавить комментарий