Рисуем красивый вихрь в GIMP
Создаем изображение 1000x1000px. Затем идем в Фильтры->Визуализация->Облака->Сплошной шум и настраиваем как-нибудь так:
Теперь выбираем инструмент кисть, устанавливаем масштаб в 6 и степень дрожания - 1.4
После этого закрашиваем часть изображения примерно так:
Теперь настала очередь использовать инструмент "палец";) Размер ставим примерно равным 5 и смешиваем черное и серое изображение вот таким образом:
Теперь идем в фильтры->искажения->вихрь и щипок и ставим примерно такие параметры (можете изменять, как вам больше нравится):
С помощью пальца, штампа или кисти убираем образовавшиеся по краям небольшие белые области.
Теперь настала пора разукрасить наш вихрь. Первым делом сделаем его цветным. Для этого идем в Цвет->Цветовой баланс и придаем вихрю начальный цвет:
Теперь пора разукрашивать наш вихрь. Алгоритм раскраски нашего вихря очень прост:
- создаем прозрачный слой
- заливаем его каким-либо градиентом
- экспериментируем с режимом смешивания и прозрачностью, чтобы результат выглядел красиво
- При желании повторяем все, начиная с пункта 1
Например, создайте слой, установите режим смешивания "Рассеянный свет" и проведите градиент "Full saturation spectrum CW" из правого верхнего угла в левый нижний и посмотрите, как изменится раскраска вашего вихря. Таким образом, экспериментируя с различными градиентами, слоями, прозрачностью и режимами смешивания, можно придавать вихрю различные раскраски.
У меня в результате получился такой вихрь:
Прижимаем footer (подвал/футер) к низу экрана
Достаточно часто при дизайне сайта появляется необходимость прижать футер к низу экрана. Есть множество способов это реализовать, вот один из них:
Вот наш HTML-файл. Футер в нем должен быть выненес за пределы основного содержимого.
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="style.css"> </link></head> <body> <div id="content"> Контент </div> <div id="clear"></div> <div id="footer"> Ну а это наш подвал </div> </body> </html>
Нам нужно загнать подвал вниз экрана. Напишем CSS для этой страницы:
html,body { margin:0; padding:0; color:#000; background:#fff; height:100%; } #content { position:relative; margin:0 auto; width:980px; min-height: 100%; height: auto !important; height: 100%; background:#999; margin-bottom:-50px; } .clear { clear:both; } #footer { background:red; width:980px; position:relative; margin:0 auto; height:50px; }
Что мы здесь сделали?
Все очень просто. Мы задали высоту страницы без подвала равной 100% (это все, что находится в блоке с id=content). Затем мы сдвинули весь блок на 50px вверх, чтобы освободить место под подвал. После этого мы установили высоту подвала равной 50px. Теперь подвал будет прижат к нижнему краю, а до него будет растягиваться блок с контентом, в том числе и фон.
Вот и все. Подвал прижат к футеру. Как-нибудь потом напишу еще пару вариантов прижатия футера к подвалу.
Блочная верстка сайта (верстка с помощью DIV и CSS)
Обычно, когда разрабатывается дизайн сайта, он сначала рисуется в Photoshop, GIMP или любом другом графическом редакторе и только после этого с макета дизайн переносят на html и css (иногда на flash, но у нас не тот случай). Вот этот перенос и называется версткой сайта, о которой я сегодня начну рассказывать.
Я расскажу, как верстать шаблон на примере простого макета:
Как видите, наш макет ужасно приметивен. Он состоит из двух сайдбаром, шапки, подвала и места под текст.
Теперь начнем его верстать.
Первым делом создаем html-файл, в котором будут храниться эти блоки и ссылка на CSS нашего шаблона. Первым делом создаем div с id="main" (или любым другим, который вы будете использовать в вашей таблице стилей). В этом блоке будут хранится все остальные блоки (шапка, подвал, сайдбары и текст). Теперь, внутри этого тега, создаем еще 5 div`ов и каждому присваеваем свой уникальный id (например: header, sidebar1,sidebar2,text,footer). Между первыми 4 блоками и подвалом добавьте еще один блок, у которого class="clear"
В результате у вас должен быть примерно такой html-файл:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="style.css"> </link></head> <body> <div id="main"> <div id="header"> Шапка </div> <div id="sidebar1"> Сайдбар 1 </div> <div id="sidebar2"> Сайдбар 2 </div> <div id="text"> Это будет центральный блок с текстом </div> <div class="clear"></div> <div id="footer"> Ну а это наш подвал </div> </div> </body> </html>
Сохраняем файл и открываем наш файл стилей (style.css)
В нем первым делом создаем пустые описания наших классов и id:
#main { } #header { } #text { } #sidebar1 { } #sidebar2 { } #footer { } .clear { }
Теперь начнем все это заполнять.
Сначала пропишем стандартные настройки тега , вдруг есть браузера, у которых фон по умолчанию черный:
body
{
margin:0;
padding:0;
color:#000;
background:#fff
}
У div с id=main у нас ширина должна быть 980px (т.к. на макете, с которого мы верстаем, она 980). Также он должен быть у нас по центру, если ширина экрана пользователя больше 980px. Поэтому мы это и напишем в полу #main { }:
#main
{
position:relative; //сообщаем браузеру, что мы хотим позиционировать элемент
margin:0 auto; //выравниеваем блок по центру
width:980px;
background:#000; //мы же хотим увидеть результат наших действий;)
}
Сохраняем CSS и открываем html-файл в каком-нибудь браузере. Все, что у нас написано, должно быть выравнено по центру.
Отлично, теперь настраиваем шапку. Она у нас имеет высоту в 300px и зеленый фон. Напишем это:
#header
{
background:green;
height:300px;
width:100% //шапка занимает все 980px в ширину
}
Установим наш блок с текстом по центру:
#text
{
background:#999; //серый фон
position:relative; //опять выравниеваем по центру
margin:0 auto;
width:600px;
}
Теперь настраиваем сайдбары. Они оба шириной 190px c желтым фоном. Первый должен плавать слева, второй справа. Напишем это:
#sidebar1
{
width:190px;
background:yellow;
float:left;
}
#sidebar1
{
width:190px;
background:yellow;
float:right;
}
Теперь нам осталось настроить только подвал и класс clear, который нам нужен, чтобы "сообщить" браузеру о том, что у нас закончились блок с текстом и сайдбары
.clear
{
clear:both;
}
Вместо div`а с этим классом можно использовать тег
, но так делать не рекомендуют.
Теперь подвал:
#footer
{
background:red;
width:100%;
height:100px;
}
В результате должна получится вот такая css:
body { margin:0; padding:0; color:#000; background:#fff } #main { position:relative; margin:0 auto; width:980px; } #header { height:300px; background:green; } #text { margin:0 auto; background:#999; width:600px; } #sidebar1 { width:190px; background:yellow; float:left; } #sidebar2 { width:190px; background:yellow; float:right; } #footer { background:red; width:100%; height:100px; } .clear { clear:both; }
Вот, вроде, и сверстан сайт. Но вот незадача, у нас сайдбары не прижаты к подвалу, а сам подвал не прижат к низу страницы. О том, как это поправить расскажу в следующий раз.
Текст с тенью при помощи CSS
Еще одно замечательное свойство CSS3 text-shadow. Оно позволяет создавать тень для текста.
Это свойство имеет 4 параметра:
Первый параметр отвечает за смещение тени по горизонтали. Положительное значение - смещение влево, а отрицательное - вправою
Следующий, второй параметр, указывает смещение по вертикали. Положительные значение - смещение вниз, отрицательное - наверх.
Третий параметр определяет размывание тени.
И последний параметр указывает на цвет тени.
Последние два параметра не обязательны.
Примеры:
Размытый текст:
Текст с зеленым свечением:
Также можно создавать двойную тень:
А вот, наример, текст с 25 тенями, в Firefox, Chrome, Konqueror отображается нормально, в Opera не правильно
Вот так быстро, просто и легко можно создавать красивые эффекты при написании текста
P.S. Хотите больше знать про Unix-системы? Тогда можете посмотреть бесплатные курсы Linux
Рамки с круглыми краями и прозрачность в CSS.
Круглые края с помощью CSS
Существует множество способов создания рамок с круглыми краями. И в CCS3 наконец-то включили такую возможность. Разумеется, всеми любимый MS Internet Explorer об этом до сих пор не знает, ну и пошел лесом, все равное его у меня нет;)
Создание рамок в CSS3 очень просто. Правда пока приходится писать 3 варианта кода, ну это не страшно.
Вот CSS свойства для создания закругленных рамок:
| CSS | Gecko (Mozilla...) | WebKit (Safari, Konqueror, Arora, Google Chrome и т.д.) |
| border-radius | -moz-border-radius | -webkit-border-radius |
| border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
| border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
| border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
| border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
Если у вас нормальный браузер, то таблица выше должна быть в рамке с закругленными углами. Я думаю, объяснять значения свойств не надо, в них и так все написано. Радиус рамки можно задавать в px, em, pt и т.д.
Прозрачность с помощью CSS
Еще одно свойство CSS3 - прозрачность. Позволяет делать элемент прозрачными и полупрозрачными. Как уже говорилось, MS Internet Explorer об этом свойстве не знает и его не поддерживает.
Задается свойство очень просто:
opacity: значение от 0 до 1;
1 - полная непрозрачность, 0 - полная прозрачность
А ниже полностью прозрачный текст:
Можете попробовать выделить строчку выше, скопировать ее в блокнот и убедиться в этом;)
P.S.
Хотите сделать сайт, а хостинг еще не выбрали. Этот хостинг для сайтов специально для вас.
P.P.S.
Вот здесь вы сможете узнать все про социальные сети России
Снова CSS. Шрифты, форматирование, позиционирование
Шрифты
Для настройки шрифтов существует свойство font:
font-family: шрифты или их семейства.
Пример:
font-family:arial, serif; //делает основным шрифт Arial, если он отсутствует, то шрифты из группы serif
font-size - устанавливает размер шрифта
font-size:12pt; // устанавливаем размер шрифта в 12pt
font-size:50px;
font-style: style; // стиль шрифта
font-style:normal - обычный текст
font-style:italic - курсив
- font-style: oblique - наклонный шрифт.
Как всегда, все это можно задавать сразу в font:
font: times 16pt italic;
Форматирование
text-align: выравнивание. Может быть center, left, right, justify (по ширине)
text-decoration - "украшения" текста. Различные подчеркивания, мерцания и т.д.
blink - мигание текста
underline - подчеркнутый текст
line-through - перечеркнутый текст
overline - надчеркнутый текст (линия сверху)
none - отсутствует.
Позиционирование
float - устанавливает обтекание элемента
right - элемент выравнивается по правому краю, обтекание слева
left - наоборот
inherit - по умолчанию
none - обтекание отсутствует
clear - убирает обтекание
both - со всех сторон
right - справа
left - cлева
width и height:
Устанавливает ширину и высоту блока. Кроме этого возможны:
min-width & min-height - минимальная ширина и высота
И
max-width & max-height - максимальные ширина и высота
position: как позиционировать.
Устанавливает, как позиционировать элемент.
absolute - позиционировать относительно окна, а не родительских элементов
fixed - почти тоже самое, при прокрутке остается на месте
relative - позволяет позиционировать элемент. По умолчанию элементы нельзя позиционировать
static - по умолчанию, элементы не позиционируются
z-index - устанавливает виртуальный слой, в котором находится элемент. Больший номер слоя соответствует более верхнему слою
overflow - сообщает браузеру, что делать, если содержимое элемента не влезает
visible - делает его видимым, границы объекта игнорируются
auto - при переполнение появляются полосы прокрутки
hidden - все что не влезло идет лесом, т.е. исчезает
scroll - все время есть полосы прокрутки
Другое
Если вы хотите, чтобы какое-то свойство использовалось при возникновление конфликтом, то можно использовать ключевое слово !important. Пишется оно после задания свойства до ;
color: red !important;
Можно задавать специальные свойства для элементов, если на них навели мышь. Для этого после имени класса, id, имени тега надо написать :hover
a:hover
{
}
P.S. Любите ужастики? Тогда вам будет интересен фильм человек-волк
Рисуем сердце в GIMP
Сегодня я расскажу, как можно нарисовать сердце в GIMP.
Как всегда, первым делом создаем квадратное изображение 400x400 пикселей. Затем выбираем инструмент контуры (или нажимаем B). Отмечаем точку с координатами 200 по X и 50-75 по y. Затем отмечаем вторую точку с координатами 200 и 340-360. Должна получиться ровная линия. Теперь берем линию и придаем ей очертания половинки сердца (хватаем за точку на линии и уводим влево):
Теперь создаем выделение из контура (в меню контура) и заливаем его любым цветом (не белым) и отражаем выделение. После этого заливаем новое выделение тем же цветом и с помощью инструмента выделение по цвету выделяем все "сердце".
Теперь берем два схожих оттенка красного (например, как на рисунке выше) и заливаем градиентом черное сердце. С формой градиента можно поэкспериментировать, я выбрал очертания (сфера). В результате получается такое изображение:
Теперь применяем Гаусово размывание. Дублируем слой, устанавливаем смешивание "Затемнение" и прозрачность процентов на 60. Еще раз дублируем слой. Выделение не снимаем. Идем в фильтры->визуализация->облака->сплошные облака. Настраиваем как-нибудь так:
С параметрами можно поэкспериментировать..
Смешивание устанавливаем в "Рассеянный свет", прозрачность 100%. Дублируем еще раз слой. Параметры смешивания не трогаем. Должно получится что-то типа этого:
Теперь можно применить к изображению различные фильтры. Я применил, как всегда, Гауссово размывание, сглаживание, имитацию масляной краски. Сводим изображение. Надеюсь у вас выделение сердца все еще сохранено, иначе выделяем по белому цвету и инвертируем. Теперь последний шаг. Идем в фильтры->свет и тень->отбрасываемая тень. Получаем тень. При желании, тень можно нарисовать и вручную. Для этого дублируем слой, рисуем круг под сердцем и заполняем его черным цветом, затем настраиваем прозрачность, чтоб появилась тень.
После всего этого я еще раз применил Гауссово размывание, повысил резкость, и немного подкорректировал кривые. Получилось вот такое сердечко:
P.S. А вы уже познакомились с web 2.0?
Еще немного CSS. Поля и отступы.
С помощью CSS можно задавать поля и отступы в документе.
Отступы:
Отступы необходимы для того, чтобы сообщить, насколько необходимо сдвинуть данный блок относительно родительского элемента (если таковой отсутствует, то относительно края окна).
Способы задания отступа:
Можно задать отступ от каждой стороны по отдельности:
margin-top: n px; - отступ сверху на n пикселей (кроме пикселей можно задавать проценты, пункты и т.д.)
margin-bottom: n px; - аналогично, снизу
margin-right: n px; - отступ справа
margin-left: n px; - отступ слева.
Кроме того, можно задавать просто с помощью свойства margin:
margin: n px; - отступы со всех четырех сторон
margin: y px x px; - отступ снизу и сверху на y px, отступ справа и слева на x px
margin: a b c d; - установка отступа от верха, затем права, затем низа, затем лева
Поля
Поля задают внутренние отступы в элементе. Такие поля аналогичны полям в книге или тетрадке.
Задание полей ничем не отличается от задание отступов, за исключением замены слова margin на слово padding
Примеры задания отступов и полей:
.text
{
margin: 10px; //отступы в 10px
padding: 5px; // поля 5 пикслей
}
p
{
margin-left:5px;
margin-top:1px;
padding: 5px 15px;
}
Продолжение про CSS следует
P.S. Нашел сайт, откуда скоро можно будет скачать фильм “Алиса в стране чудес”
UPD.
Основные свойства CSS.
Фон
- background-color: цвет - задает цвет фона. Может быть задан в формате RGB (#XXXXXX или #XXX), или именем цвета (black, green, gray)
- background-image: url('link_for_image') - устанавливает фоновое изображений.
- background-attachment: fixed or scroll - сообщает браузеру, надо ли прокручивать фоновое изображение или оно должно оставаться на месте
- background-position: выравнивание по горизонтали (left,right,center) выравнивание по вертикали (top,bottom)
- background-repeat: как повторять. Может быть repeat-x, repeat-y, no-repeat, repeat (повторять по горизонтали, по вертикали, не повторять, повторять по горизонтали и вертикали)
- background: параметры. Объединяет предыдущие свойства. То есть, вместо задания их по отдельности можно задать все параметры сразу через пробел. Например, background: url('aaaa.jpg') #FFE repeat;
Границы (Край)
Задание границы в css состоит из нескольких частей. Во-первых, граница может быть правой (right), левой (left), верхней (top) и нижней (bottom). Также любая граница имеет несколько свойств: цвет (color), стиль границы (style), толщина границы (width).
Имя свойства строится из всего вышеперечисленного:
border-положение-свойство:
Если пропустить положение, то свойство будет применяться ко всем границам. Кроме этого, можно как в фоне задавать сразу несколько свойств. Тогда значения свойств перечисляются через пробел:
border-top:1px solid black; - верхняя граница имеет толщину в один пиксель, она черного цвета и непрерывная
Возможные значения свойств:
color - как всегда, цвет в RGB формате или в виде имени цвета.
color:red; color:#FED; color:#13F29E; - три варианта задания цвета.
width - тоже не особо интересный параметр. Определяет ширину границы. Задается в пикселях.
style- самый интересный параметр, определяет вид границы
- style:dotted - пунктирная граница
- style:dashed - тоже пунктирная, пунктир чуть больше
- style:solid - непрерывная линия
- style:double - двойная непрерывная линия
Примеры:
border:2px solid green; - задает зеленую границу в 2 пикселя
border-left-style: dotted; - делает левую границу пунктирной
border-right: double 10px #666; устанавливает ширину правой границы в 10px, стиль - двойная линия и цвет #666 (если не ошибаюсь, то серый)
Продолжение следует!!!
UPD:
Что такое CSS?
Что такое CSS?
CSS, или каскадные таблицы стилей (Cascading Style Sheets) - это способ описания внешнего вида документа. Обычно используется вместе с html и xml. Основой задачей CSS является придание документу\странице\сайту своего собственного стиля, начиная от цвета и размера шрифта и заканчивая всевозможными эффектами, типа прозрачности, закругленных углов таблицы и т.д. Причиной к создание CSS послужила необходимость управлять внешним видом web-страниц и теперь эта технология используется в большинстве сайтов.
Синтаксис CSS очень прост. Любой CSS состоит из правил. Правило состоит из селектора и описания.
Селектор отвечает за то, к чему будут применены свойства в правиле. Селектор может быть именем тега, специальным классом или уникальным идентификатором. Также один селектор может зависеть от другого. Например, у нас есть тег <em>. С помощью CSS можно указать, что, например, жирный текст внутри этого тега должен быть не жирным, а красным. Это реализуется вот таким образом:
селектор селектор2 селектор3
{
//стиль
}
Стиль, описанный здесь, будет применяться только для элементов, соответствующих всем трем селекторам одновременно. Также можно перечислять, к каким селекторам нужно применить стиль. Тогда селекторы разделяются запятой, а не пробелом.
В стеле описываются свойства и их значения. Синтаксис выглядит так:
свойство: значение;
Например, запись color:red задает свойству "цвет текста" значение красный.
Еще немного про селекторы:
Селектор, означающий имя тега пишется также, как и имя тега:
Например, селектор тега <a> пишется a:
a
{
color:green;
}
Здесь, для текста внутри тега <a> устанавливается зеленый цвет.
Селектор-класс должен начинаться с точки:
.myclass
{
font-size:14pt;
color:#FFF;
}
В этом примере я создал свой класс с белым цветом шрифта и размером в 14 пунктов.
Для указания какому-либо экземпляру тега, что он должен использовать определенный класс для отображения своего содержимого, нужно в атрибутах тега прописать class="myclass":
<p class="myclass> Здесь будет белый текст в размером шрифта в 14 пунктов</p>
Кроме классов существуют еще ID, уникальные идентификаторы. В любом документе может быть только один тег, использующий ID. Чтобы указать тегу, что он должен для отображения использовать стиль с таким-то ID надо прописать в атрибут тега id="myid". Любой ID в CSS начинается с #:
#myid
{
background:grey; //установка фона в серый цвет.
}
-----------------------------------
<div id="myid">
Текст с примененным стилем myid. Этот текст будет на сером фоне
</div>e
Способы подключения CSS к HTML:
Подключить CSS к HTML-файлу можно несколькими способами:
- Записать весь CSS внутри тега <style> в заголовке документа (тег <head>)
- Подключить внешнюю таблицу стилей.Опять таки внутри тега <head>:
<link rel="stylesheet" type="text/css" href="style.css" />
- Третий вариант не позволяет подключить таблицу стилей, но позволяет прописать стили внутри самого тега. Для этого используется атрибут style: style="свойства:значение;свойство 2:значение 2;".Например:
<span style="color:green background: black">зеленый текст на черном фоне</span>
Вот и все на сегодня, подробнее о CSS и о "свойствах и значения" я расскажу как-нибудь в следующий раз
P.S. Нужен реферат? Вот вам рефераты на заказ.
Добавляем отражение к изображению в GIMP (а-ля зеркало)
Сегодня я расскажу как можно сделать отражение изображения в GIMP
Сначала откройте изменяемое изображение. Затем уменьшите размер слоя в 2 раза и затем еще на 5px. Теперь вам надо, с помощью инструмента выравнивание, выравнять изображение по верхнему краю и по центру. После этого продублируйте слой, выровняйте его по нижнему краю и, используя инструмент зеркало, отразите его по вертикали и горизонтали. Затем создайте слой с черным фоном и установите его в самый низ. Должно получиться вот так:
Теперь нажмите на нижний слой и добавьте маску слоя:
Теперь установите прозрачность зеркального слоя на 80%, и проведите от начала слоя к его концу градиент из белого в прозрачный (можно из немного серого) Должно получится так:
Сейчас надо создать новый прозрачный слой под слоями с изображениями и над слоем фона и выделить в этом слое пространство примерно между серединой первого и второго изображений:
И Выделение->растушевать с значением 15. Затем заполняем выделенное градиентом из белого в черный и устанавливаем прозрачность слоя на 10-20%. Теперь смещаем верхнее изображение на 10px вниз и готово. Вот что должно получиться:
Исходное изображение:
P.S.
Все еще не знаете, что вас ждет в 2012 году, то вам надо смотреть онлайн фильм 2012
P.P.S.
Если вы не хотите изучать дизайн и html, то специально для вас разработка и создание сайтов
Основные html теги
Представляю вам список самых используемых html-тегов, которые, по хорошему, надо знать наизусть. Для пользования списком желательно хотя бы небольшое знание HTML, т.к. большинство атрибутов и свойств тегов здесь не рассмотрено
Почти все теги состоят из двух частей:
- <тег> - открывающий тег
- </тег> - закрывающий тег
Между открывающим и закрывающим тегом находится само содержимое тега. Также после имени тега (в открывающем теге) могут следовать атрибуты тега: выравнивание, задание толщины границ, цвета текста и т.д.
Главные теги
Большинство из этих тегов должны быть в любом документе.
- <html> </html> - самый главные тег любой html странице. Обозначает начало и конец html-документа
- <head> </head> В нем прописывается служебная информация
- <body> </body> - в этом теге находится основное содержимое страницы
Информация о странице
Теги, сообщающие название страницы и ее описание:
- <title> Название страницы </title>
- <meta name="description" content="text" /> - описание страницы
Работа с текстом
Заголовки
Служат для выделения заголовков в тексте. Например, названия главы книги, название статьи и т.д.
Заголовков в HTML всего 6 штук: от 1 уровня до 6. Чем меньше уровень заголовка, тем больше шрифт и тем он важнее.
-
<h1> - Заголовок первого уровня
-
<h2> - Заголовок второго уровня
-
<h3> - Заголовок 3 уровня
-
<h4> - Заголовок 4 уровня
-
<h5> - Заголовок 5 уровня
-
<h6> - Заголовок 6 уровня
Заголовки 1-3 уровня используются поисковиками (google, yandex,bing) для определения, о чем текст, поэтому рекомендую использовать эти теги во всех создаваемых вами текстах
Внешний вид текста (курсив, жирные, подчеркнутый)
- <b> жирные текст, где-то прочитал, что его не рекомендуют использовать </b>
- <strong> тоже жирный текст</strong>
- <i>наклонный текст, также не рекомендован к использованию</i>
- <em> наклонный текст</em>
- <u> подчеркнутый текст </u>
- <strike> перечеркнутый текст<u>
- <sup> верхний индекс</sup>
- <sub> нижний индекс </sub>
- <big> Текст чуть больше обычного (чаще всего на 1 пункт)</big>
- <small>Аналогично, только меньше</small>
Форматирование текста
В html для форматирование текста используется несколько тегов:
- <p> </p> - абзац
- <div> <div> - "элемент-бокс". Обычно в нем хранится текст, к которому применяются различные css-стили (установка ширины, отступов, шрифта, фона, выравнивания и т.д.)
- <blockquote></blockquote> -создает отступ
- <br/> - перенос строки
- <hr/> - горизонтальная линия
- <pre> </pre> - сохраняет форматирование текста (количество пробелов, переносы строк и т.д)
- <ul> </ul> - создает маркированный список
- <ol> </ol> - нумерованный список
- <li> </li> - создает элемент списка (как маркированного, так и нумерованного)
- <span></span> - насколько я знаю, нифига не делающий тег, служит для прикручивания к тексту стиля (опять таки css)
Ссылки и изображения
Создание ссылки:
<a href="http://adorning.ru"> adorning.ru</a> - href="адрес ссылки, а между <a ... > и </a> - текст ссылки
Вставка изображения:
<img src="adress" alt="text" align="center"/> - вставка изображения, находящегося по адресу adress, с выравниванием по центру. При наведение мышкой на изображение будет отображен текст text
Создание таблицы:
- <table> </table> - создание таблицы
- <tr> </tr> - новая строка таблицы
- <td> </td> - новая ячейка таблицы
- <th> </th> - новая ячейка таблицы с жирным текстом, выравнивание текста по центру
Некоторые специальные символы:
- - неразрывный пробел
- © - ©
- ± - ±
Кроме того, многие теги для форматирования текста поддерживают выравнивание текста/тега. За это отвечает атрибут align:
- align="center" - выравнивание по центру
- align="right" - выравнивание по правому краю
- align="left" - выравнивание по левому краю
- align="justify" - выравнивание по ширине
Для использования пишем тег и до закрытия открывающего тега куда надо выравнивать:
<p align="center"> текст выравнен по центру </p>
Еще пара полезных атрибутов:
style="css" - позволяет вам прописать css для этого экземпляра тега
id="id" - ид стиля в css таблице (уникальный для страницы)
class="class" - класс css для использования с этим тегом
Про сам СSS я, возможно, как-нибудь расскажу. CSS необходим для управления отображением текста: цветом фона, шрифта, типом шрифта, его размерами, выравниваем, границами, шириной элементов, отступами и многим другим.
Вот и все на сегодня!
P.S. Если вам, вдруг, понадобится сервер, то вот хороший сервер за paypal.
Уроки GIMP. Рисуем молнию. Вариант 1.
Сегодня я расскажу, как можно в gimp нарисовать молнию (по крайне мере, что-то похожее на молнию).
Первым делом нам необходимо создать новое изображение размером 400х400. Затем залить его черно-белым градиентом. Для этого выбираем инструмент "Градиентная заливка". В параметрах выставляем градиент и проводим из верхнего левого угла к центру правой стороны. В результате должно получится что-то такое:
Теперь идем в Фильтры->визуализация->облака->разностные облака и устанавливаем детализацию на максимум (15). С размером по X и Y можно поэкспериментировать, я поставил на 3.1 и 3.4.
Нажимаем ОК и инвертируем (цвет->инвертировать) полученное изображение:
Возможно вы уже видите очертания нашей молнии, а чтобы они стали видны любому нам пора в цвет->кривые и приводим ее примерно к такому виду (следите за вашим изображение, параметры будут немного отличаться). Главное, чтобы вы увидели на черном фоне тонкую молнию. Весь оставшийся мусор (если он есть) без сомнений удаляйти
Мои параметры:
И результат:
Вот это уже очень даже похоже на молнию, только цвет какой-то неправильный. Поэтому лезем в цвет->цветовой баланс и перекрашиваем нашу молнию:
И, как всегда, результат:
Осталось немного косметических эффектов. Выделяем нашу молнию (выделение->выделение по цвету. Затем инвертировать). Применяем фильтр сгладить и гауссово размывание (3px). После этого увеличиваем контрастность, чтоб молния снова стала похожей на молнию.
Вот и все. Самая примитивная молния нарисована. 
Если вы совсем ничего не понимаете в компьютере или вам необходима помощь, то специально для вас есть пк для начинающих, полезный сайт для новичков и желающих получше узнать компьютер
Уроки GIMP. Рисуем огонь.
Сегодня я расскажу как можно нарисовать огонь с помощью GIMP
Первым делом, создайте новое изображение с разрешением 600х600 точек. Затем идем в Фильтры->визуализация->облака->сплошной шум и настраиваем фильтр приблизительно как на этом рисунке:
Теперь берем кисть, устанавливаем ей черный цвет и закрашиваем верхнюю часть примерно так:
А сейчас надо воспользоваться таким полезным инструментом, как палец. Он позволяет нам размазывать изображения как мы хотим. С помощью этого инструмента добейтесь того, чтоб на вашем изображении появились черно-белые огненные языки. Находим черный кусок и размазываем его вверх так, чтоб образовывалось что-либо наподобие языка пламени. Для большой реалистичности делаем в несколько этапов, постепенно уменьшая размер пальца. Если не хватает черного цвета, то добавляем его кистью. Затем применяем фильтр общие->эрозия. Результат должен быть примерно таким:
Затем идем в Цвет->Цветовой Баланс и придаем черно-белому огню цвет:
В результате у нас появилось что-то очень похожее на огонь. Осталось его сделать немного более реалистичным.
Первым делом идем в фильтры->искажения->рябь
Настраиваем:
Далее фильтры->размывание->Гауссово размывание. И фильтры->имитация->масляная краска с размером маски 3. Также используем фильтры сгладить и увеличение резкости.
Еще можно применить фильтры->искажения->исправить искажения оптики:
Вот и все. После небольшого количества простых действий мы смогли нарисовать достаточно реалистичный огонь. А вот и сам результат:
Кстати, если вы фанат photoshop`а, то вот здесь есть уроки фотошоп на русском. Надеюсь, вы найдете там то, что вам нужно.
Loading ...