Серёга, привет. Написал в теме письма, что вопрос по материалам сайта, просто потому, что не нашел другой подходящей категории.

Мой вопрос касается стилей css, ты же мастер У меня есть сайт на вордпресс (знаю, ты ими не занимаешься), но мой вопрос по стилям.

Заголовок моего сайта из 12 букв, мне надо чтобы он был трехцветным, то есть первые три буквы - белые (#ffffff), следующие пять букв - синие (#0060ff), и последние четыре - красные (#ff0000).

Как мне все это изобразить, ниже вставил в письмо код заголовка в файле style.css шаблона темы:

.site-title {
 font-family: Georgia, 'ubuntu', sans-serif;
 font-size: 44px;
 font-weight: bold;
 margin: 30px 0 0 16px;
}
.site-title a {
 color: #cc0000;
 text-decoration: none;
}
.site-title a:hover {
 color: #ffd700;
}

Что мне надо там прописать, и можно ли вообще прописать каждую букву своим цветом? Искал информацию в сети по этой теме, ничего не нашел.

Раньше у меня была темка шаблона, где одна буква (первая) прописывалась своим цветом:

/*заголовок сайта*/
.logo a{font-size:50px;width:600px;height:40px;line-height:36px;display:block;margin:30px
0 0 165px;padding:0;float:left;color:#ff000;font-family:Century Gothic,Verdana,Monotype
Corsiva,Garamond,Tahoma;font-weight:normal;font-style:normal;text-shadow:3px 3px 3px
#000000;text-decoration:none}
.logo a:first-letter {color:#ff0000;}

Может мой вопрос и лоховский... я не спец... Поможешь, скажу СПАСИБО.

Ответ на вопрос:

Привет Юра. В стилях можно задать отдельные значения как для первого символа так и для первой строки. Но если тебе надо покрасить в разный цвет буквы или слова в предложении. Рекомендую использовать парный тег <span> </span> <SPAN> - это так сказать "пустой" тег строчного типа. То есть оформление у него по умолчанию отсутствует и он идеально подходит для таких вот задач. Вот пример:

Исходный код:

<!-- Красим надпись www.Master-CSS.com -->
<style>
 .blue {color: blue;}
 .red  {color: red;}
 .green{color: green}
</style>
<span class="blue">www.</span>
<span class="red">Master-CSS</span>
<span class="green">.com</span>

В итоге получаем вот такую надпись (шрифт увеличил, что бы было лучше видно):

www.Master-CSS.com

Если остались вопросы - задавайте в комментариях.

Раньше HTML таблицы использовались для вёрстки сайтов. Она так и называлась – табличная вёрстка. Потом на смену ей пришла вёрстка дивами (при помощи тегов div ) которая оказалась намного удобнее и проще. А сейчас наступает эра вёрстки сайтов по технологии flexbox, которая призвана еще больше упростить жизнь web-мастерам.

Однако, несмотря на всё выше сказанное, таблицы в html по-прежнему современны, актуальны и вовсю используются на сайтах. Правда уже не как структура, а как элемент статей сайта.

Создание таблиц в html примеры

Читать полностью »

WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.

Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки. А там их несколько десятков.

Читать полностью »

Animate.CSS – именно так он называется. В нем собрано множество уже готовых к “употреблению” анимаций. Всё, что нам останется сделать – это подключить их в нужном месте и в нужное время!

Читать полностью »

Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.

Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.

Читать полностью »

Сразу же предлагаю посмотреть его "в живую". Нажмите ниже на кнопку Демо и мотайте страничку вниз, уверяю вас - вы сразу же узнаете, про что я говорил выше

Читать полностью »

Более года назад я случайно наткнулся на его. И знаете что: после первого же запуска этой программы я понял - вот это именно то, что мне нужно! С тех самых пор я ни разу ему "не изменил ему". И верстаю сайты только на редакторе SublimeText. Он понравился мне в первую очередь своим минимализмом и удобством. В делать в нем сайты - сплошное удовольствие! Поверьте мне

Читать полностью »