Как создать свой сайт самому http://super-css.com/ Сайт о создании сайтов. Видео уроки по созданию, раскрутке и монетизации сайта. Sat, 19 Sep 2015 09:08:06 +0300 en-ru MaxSite CMS (http://max-3000.com/) Copyright 2019, http://super-css.com/ Как покрасить буквы в слове? http://super-css.com/page/kak-pokrasit-bukvy-v-slove http://super-css.com/page/kak-pokrasit-bukvy-v-slove Sat, 19 Sep 2015 09:08:06 +0300 Письмо от подписчика:

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

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

Заголовок моего сайта из 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 таблицы - примеры и видео http://super-css.com/page/html-tablicy-polnyj-kurs http://super-css.com/page/html-tablicy-polnyj-kurs Fri, 17 Jul 2015 19:18:15 +0300 Друзья! На этой странице Вас ждёт полный практический курс по изучению таблиц. Посмотрите его, и создание таблиц больше не будет для Вас проблемой. На самом деле их создавать очень легко.

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

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

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

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

Обсудить]]>
WOW.js + Animate.css – скрипт анимации для сайта http://super-css.com/page/wowjs http://super-css.com/page/wowjs Tue, 21 Apr 2015 18:44:14 +0300 Сегодня мы будем учиться анимировать объекты сайта легко и быстро, при помощи двух скриптов. Название которых вы можете наблюдать выше, в заголовке этой статьи. Но в начале, давайте я вам расскажу, для чего нужен каждый из них.

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

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

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

Обсудить]]>
Animate.CSS + анимация при прокрутке http://super-css.com/page/animatecss http://super-css.com/page/animatecss Tue, 10 Feb 2015 21:31:13 +0300 Приветствую, уважаемые друзья. Сегодня я подготовил для вас еще один интересный урок, в котором вы научитесь задавать красивую анимацию для элементов вашего сайта. Мы не будем изучать создание анимации с нуля, а будем использовать готовый скрипт.

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

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

Обсудить]]>
Filter CSS 3 – фильтры изображений http://super-css.com/page/css3filter http://super-css.com/page/css3filter Wed, 04 Feb 2015 17:27:22 +0300 Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.

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

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

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

Обсудить]]>
Необычный фиксированный фон для блока http://super-css.com/page/fixedfon http://super-css.com/page/fixedfon Tue, 15 Apr 2014 17:03:58 +0300 Привет уважаемые подписчики. На связи Сергей и я подготовил для вас новый интересный урок. В этом уроке вы создадите прикольный фиксированный фон для блока. Эту фишку я сам только недавно увидел, и сразу же взял на вооружение. Так как смотрится такой фон ну просто "отпадно" cool smile

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

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

Обсудить]]>
Видеокурс "Настройка редактора SublimeText 3 - верстай с душой!" http://super-css.com/page/nastroika-sublimetext3 http://super-css.com/page/nastroika-sublimetext3 Thu, 03 Apr 2014 13:04:06 +0300 Привет дорогие друзья. Ни для кого не секрет, что хороший инструмент для верстки сайтов - значительно повышает как ее качество, так и скорость работы. А инструмент, про который пойдет речь сегодня - замечательный редактор кода SublimeText 3 cool smile

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

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

Обсудить]]>