Блочная верстка сайта (верстка с помощью DIV и CSS)

26.02.2010. CSS, HTML, Дизайн

2

Обычно, когда разрабатывается дизайн сайта, он сначала рисуется в 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;
}

Вот, вроде, и сверстан сайт. Но вот незадача, у нас сайдбары не прижаты к подвалу, а сам подвал не прижат к низу страницы. О том, как это поправить расскажу в следующий раз.

Объединяем twitter и jabber

25.02.2010. про сайты

0

Раз уж пошла речь о twitter (см. предыдущий пост), то расскажу, как настроить транспорт из twitter`а в jabber. Если кто еще не знает, то jabber  - что-то типа ICQ, но бесплатный и открытый. Если у вас стоит одна из этих программ: Google Talk,Я Онлайн, Qip Infium, то у вас точно есть Jabber. Но мой пост не о jabber, а о том, как настроить транспорт из twitter в jabber, поэтому перейдем к делу.

Для настройки особо ничего не требуется. Надо лишь зайти сюда https://www.tweet.im и нажать Sign in with Twitter, вас перебросит на сайт твиттера, спрашивающего вот это:

Allow Tweet.IM access?

Отвечаем Allow  и нас возвращает обратно. Там выбираем тип вашего jabbera (Google Talk или другой), пишем его и готово. Теперь запускаем ваш jabber-клиент. К вам должен был добавиться новый контакт - это и есть ваш twitter. Пишем сообщения этому контакту. они транспортируются в ваш твиттер.

Немного про команды для управления:

Во-первых, есть такая команда, как help. Что она делает, думаю понятно.

Во-вторых, вот  список большинства других команд:

Подробнее можно узнать на сайте транспорта в разделе FAQ

Полезные ссылки:

jabber.org - официальный сайт jabber`а

jabber.ru - "русский" jabber

ru.wikipedia.org - что такое jabber

http://ru.wikipedia.org/wiki/Jabber

Настраиваем кросспостинг в Twitter

25.02.2010. про сайты

0

У меня наконец-то дошли руки настроить кросспостинг с сайта в Twitter. Способ, который я расскажу, будет работать с любым сайтом, поддерживающим RSS, в том числе и с WordPress, Drupal, Joomla, PHP Nuke и т.д.

Для настройки кросспостинга в twitter идем на сайт twitterfeed.com и регистрируемся на нем. Затем нажимаем Create New Feed, прописываем заголовок и адрес вашей RSS-ленты, в Advanced Settings выбираем, как часто обновлять ленту, представление ссылки и содержимое поста, отправляемого в twitter. Затем нажимаем далее и там выбираем twitter, далее следуем простым инструкциям и через 2 минуты у вас будет настроен кросспостинг в twitter.

Вот и все, на настройку кросспостинга ушло всего около 10 минут.

А вот и twitter-лента моего сайта:

http://twitter.com/adorningru

P.S. А  вам нужны детские коляски?

Проблемы с отправкой комментариев в WordPress

25.02.2010. Новости

0

Если у вас проблемы с отправкой комментариев в WordPress, то возможно у вас в теме не правильно прописана информация об ID поста, к которому нужно отправить комментарий, а точнее вот эта строчка:

<input type="hidden" name="comment_post_ID" value="<?php echo $id ?/>" />

В этой строчке хранится информация, к какому посту мы должны отправить комментарий. В этой форме проблема в том, что переменной $id не существует, поэтому комментарий будет отправлен к случайному посту. Поэтому, если не уверены, что в вашей теме есть переменная $id, то замените ее на вот эту строчку $post->ID.

После этого комментарии должны будут отправляться нормально.

А вот, если кому надо, полная форма отправки комментариев для темы wordpress:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<div>
< ?php if ( $user_ID ) : ?>
<p>Вы вошли как <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
< ?php echo $user_identity; ?></a>.
<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout"
title="Выйти">Выйти?</a></p>
< ?php else : ?>
 
<div style="text-align:justify">
<label for="author">Имя < ?php if ($req) echo "(обязательно)"; ?> :
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?/>" size="27" tabindex="1" />
</label>
 
<br />
 
<label for="email">E-mail < ?php if ($req) echo "(обязательно)"; ?> :
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?/>" size="27" tabindex="2" />
</label>
 
<br />
<label for="url">Сайт: 
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?/>" size="27" tabindex="3" />
</label></div>
<br />
 
< ?php endif; ?>
 
<!--<p><small><strong>XHTML:</strong>
 You can use these tags: < ?php echo allowed_tags(); ?>
</small>-->
 
<label for="comment">Комментарий :<br /></label>
<textarea name="comment" cols="50" rows="8" tabindex="4">
</textarea>
 
<br />
<input name="submit" type="submit" id="submit" tabindex="5" value="Отправить" />
< ?php comment_id_fields(); ?>
 
<input type="hidden" name="comment_post_ID" value="<?php echo $post-/>ID; ?>" />
 
< ?php do_action('comment_form', $post->ID); ?>
</div>
</form>

P.S. Если кто хочет купить б/у машину, то специально для вас продажа поддержанных автомобилей

Текст с тенью при помощи CSS

24.02.2010. CSS, Дизайн

0

Еще одно замечательное свойство CSS3 text-shadow. Оно позволяет создавать тень для текста.

Это свойство имеет 4 параметра:

Первый параметр отвечает за смещение тени по горизонтали. Положительное значение - смещение влево, а отрицательное - вправою

Следующий, второй параметр, указывает смещение по вертикали. Положительные значение - смещение вниз, отрицательное - наверх.

Третий параметр определяет размывание тени.

И последний параметр указывает на цвет тени.

Последние два параметра не обязательны.

Примеры:

text-shadow: 2px 2px 2px black;
text-shadow: 2px 2px 2px yellow;
text-shadow: 2px 2px 2px green;

Размытый текст:

style="text-shadow: 0px 0px 3px "

Текст с зеленым свечением:

style="text-shadow: 0px 0px 5px "

Также можно создавать двойную тень:

<div style="text-shadow: 2px 2px 4px #00F, 5px 5px 2px red;"> Текст с двойной тенью<span></div>

А вот, наример, текст с 25 тенями, в Firefox, Chrome, Konqueror отображается нормально, в Opera не правильно

текст с 25 тенями

Вот так быстро, просто и легко можно создавать красивые эффекты при написании текста

P.S. Хотите больше знать про Unix-системы? Тогда можете посмотреть бесплатные курсы Linux

Обновился дизайн!

23.02.2010. Новости

2

Обновился дизайн. Пока что имеются баги. Всем пользователям Internet Exporer рекомендую сменить браузер на Mozilla Firefox или Google Chrome

Рамки с круглыми краями и прозрачность в CSS.

22.02.2010. CSS, Дизайн

2

Круглые края с помощью 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 и т.д.

Вот например текст в рамке с радиусом, равным 1em.

Прозрачность с помощью CSS

Еще одно свойство CSS3 - прозрачность. Позволяет делать элемент прозрачными и полупрозрачными. Как уже говорилось, MS Internet Explorer об этом свойстве не знает и его не поддерживает.

Задается свойство очень просто:

opacity: значение от 0 до 1;

1 - полная непрозрачность, 0 - полная прозрачность

Текст с прозрачностью 0.5

А ниже полностью прозрачный текст:

Полностью прозрачный текст

Можете попробовать выделить строчку выше, скопировать ее в блокнот и убедиться в этом;)
P.S.
Хотите сделать сайт, а хостинг еще не выбрали. Этот хостинг для сайтов специально для вас.
P.P.S.
Вот здесь вы сможете узнать все про социальные сети России

Коллекция обоев с котами и кошками.

21.02.2010. животные, Обои

1

Большая коллекция (140 штук) различных обоев с котами и кошками. Есть как домашние представители семейства кошачьих, так и всякие дикие: львы, гепарды, барсы и т.д.

Количество: 143

Разрешение: от 1280x800 до 2560x1600 (большинство 1600x1200)

Скачать:

Скачать

Зеркало

Пишем рандомайзер (генератор случайных чисел) на perl`е

21.02.2010. perl, Программирование

0

Очень простой урок о том, как написать элементарный perl-web-скрипт, генерирующий случайные числа.
CGI-скрипт должен начинаться с указания программы, которая его обрабатывает. Поэтому в первой строчке как раз и напишем это:

#!/usr/bin/perl

Теперь сообщим, что мы хотим выводить html-документ и создадим экземпляр класса для получения параметров, переданных через браузер

use CGI;
use CGI::Carp qw/fatalsToBrowser/;
$cgi=new CGI;
 
print "Content-type:text\/html\n\n";

Первые три строчки - создание экземпляра класса, а последняя сообщает, что мы будем выводить html-документ
Получать данные для скрипта будем с помощью метода GET. Т.е. все переменные будут передаваться нам через строку браузера после адреса скрипта. Передача осуществляется примерно так: site.ru/script.cgi?a=10&b=12
Теперь, чтобы получить значения a и b надо создать 2 переменные и "вытащить" оттуда эти данные:

$x=$cgi->param('a');
$y=$cgi->param('b');

Вот здесь мы записали в x и y переданные скрипту a и b.
Что-бы не передавать параметры вручную создадим форму:

print "<form action=\"index.cgi\" method=\"get\"><br />Vvedite a: <input type=\"text\"  
value=$x name=\"a\"/> Vvedite b:<input type=\"text\"
value=$y name=\"b\"/> <input type=\"submit\"/><br /></form>";

И теперь выведем случайное число от a до b:

print int(rand($x)+$y);

Вот и все. Простой скрипт, генерирующий случайные числа сделан. Загружаем его на сервер и любуемся результатом.
Полные код:

#!/usr/bin/perl
use CGI;
use CGI::Carp qw/fatalsToBrowser/;
$cgi=new CGI;
 
print "Content-type:text\/html\n\n";
$x=$cgi->param('a');
$y=$cgi->param('b');
print "<form action=\"index.cgi\" method=\"get\"><br />Vvedite a: <input type=\"text\"  
value=$x name=\"a\"/> Vvedite b:<input type=\"text\"
value=$y name=\"b\"/> <input type=\"submit\"/><br /></form>";
print int(rand($x)+$y);

Установка web-сервера Apache в Kubuntu

20.02.2010. Linux

0

Установка и настройка Apache в Kubuntu не занимает много времени.

Устанавливаем Apache2

sudo -s

apt-get install apache2

Сервер установлен и готов к работе;)

Ставим MySQL

apt-get install mysql-server mysql-client

В процессе установки попросят выбрать  пароль для базы данных. Установите его и не потеряйте.

Устанавливаем и настраиваем perl

Если, вдруг, у вас не стоит perl (чего быть не должно, устанавливается обычно с системой), то ставим его:

apt-get install perl

Теперь настраиваем.

Первым делом добавляем в файл /etc/apache2/httpd.conf (nano /etc/apache2/httpd.conf) эту строчку:

AddHandler cgi-script .sh  .pl .cgi

Затем переходим в папку cd /etc/apache2/sites-available

cd /etc/apache2/sites-available

Там должен быть файл с именем default. Открываем его.

nano default

Находим строчку ScriptAlias /cgi-bin/ путь и меняем на путь к папке (только запомните путь, который был до этого), в которой мы хотим хранить perl-скрипты. Например, на /var/www

Теперь, ищем все строчки с путем, запомненным нами и меняем в них путь на новый.

Теперь ваши perl-скрипты доступны по адресу localhost/cgi-bin/

Если мы хотим хранить их не только в этой папке, то надо в блок <VirtualHosts *:80> </VirtualHosts> добавить вот такие строчки:

<Directory "путь">
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Options ExecCGI
Order allow,deny
allow from all
</Directory>

Устанавливаем php

apt-get install php5 libapache2-mod-php5 php5-common php5-cli php5-cgi php5-mysql

Устанавливаем phpMyAdmin

apt-get install phpmyadmin

Для доступа к phpmyadmin вводим в браузере localhost/phpmyadmin
После всего этого перезагружаем apache2 (/etc/init.d/apache2 restart) и радуемся жизи.

php5-common php5 libapache2-mod-php5 php5-cli php5-cgi php5-mysql

Несколько советов по Kubuntu

18.02.2010. KDE, Linux

0

Настройка WINE (установка шрифтов, directx, кодеков, библиотек и т.д.)

Для wine существует очень удобный скрипт, который позволяет устанавливать множество полезных вещей

Для установки этого скрипта открываем консоль и вводим:

wget http://www.kegel.com/wine/winetricks
Теперь есть несколько вариантов использования скрипта.
Первый вариант. Вводим sh winetricks и выбираем все, что хотим установить.
Второй вариант. Вводим sh winetricks что_установить.
Для установки DirectX, основных библиотек, кодеков и шрифтов достаточно выполнить такую команду:

sh winetricks corefonts directx9 dotnet30 flash vcrun2005 vcrun2008
После этого при небольшой доле везения у вас должны работать большинство windows-программ.

Устанавливаем множество различных виджетов для plasma (для kde4)

Открываем консоль и вводим

sudo apt-get install plasma-widget-*

После этого будут установлены все виджеты, которые есть в ваших репозитах

Улучшаем внешний вид окон (настройка kwin)

Вводим

sudo apt-get install kwin

sudo apt-get install kwin-*

После этого в Настройках -> Внешний вид -> Окна появится множество новых тем для оформления окон.

"Улучшаем Bluetooth"

Единственное, чего мне удалось добиться от стандартного bluetooth-мененджера в kde - это передача файлов. Поэтому, если вам нужно больше, имеет смысл поставить blueman:

sudo add-apt-repository ppa:blueman/ppa

sudo apt-get update

sudo apt-get install blueman

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

Если у вас есть bluetooth-стереогарнитура и вы хотите её пользоваться (если у вас не работает bluetooth-гарнитура), то устанавливаем pulseaudio (если не стоит) и pulseaudio-module-bluetooth

sudo apt-get isntall pulseaudio, pulseaudio-module-bluetooth,paman

И в настройках мультимедиа ставим pulseaudio в самый верх, затем просто соединяем гарнитуру с компьютером при помощи blueman. Если сразу не заработает, то в Kickoff ищем регулятор громкости pulseaudio и там в конфигурация устанавливаем гарнитуре A2DP профиль и в проигрывание ставим гарнитуры на проигрывание.

Генерация паролей в Linux

Для Linux существует очень удобная программа для генерации паролей (и не только, я с ее помощью придумал имя для компьютера;)

Устанавливаем:

sudo apt-get install pwgen

Генерируем пароль:

pwgen кол-во символов

Если не хотите, чтобы в пароле были цифры:

pwgen -0 кол-во символов

Про остальные параметры читайте man:

man pwgen

Нужен аналог Far`а, Total Commandera и т.д.

sudo apt-get install mc

Настройка  тачпада (synaptics)

sudo apt-get gsynaptics

gsynaptics

P.S.

Прикольные демотиваторы все-таки еще остались

Снова CSS. Шрифты, форматирование, позиционирование

17.02.2010. CSS, Дизайн

0

Шрифты

Для настройки шрифтов существует свойство 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

13.02.2010. GIMP, Дизайн

1

Сегодня я расскажу, как можно нарисовать сердце в GIMP.

Как всегда, первым делом создаем квадратное изображение 400x400 пикселей. Затем выбираем инструмент контуры (или нажимаем B). Отмечаем точку с координатами 200 по X и 50-75 по y. Затем отмечаем вторую точку с координатами 200 и 340-360. Должна получиться ровная линия. Теперь берем линию и придаем ей очертания половинки сердца (хватаем за точку на линии и уводим влево):

делаем очертания половины сердца

Теперь создаем выделение из контура (в меню контура) и заливаем его любым цветом (не белым) и отражаем выделение. После этого заливаем новое выделение тем же цветом и с помощью инструмента выделение по цвету выделяем все "сердце".

продолжаем рисовать сердце

Теперь берем два схожих оттенка красного (например, как на рисунке выше) и заливаем градиентом черное сердце. С формой градиента можно поэкспериментировать, я выбрал очертания (сфера). В результате получается такое изображение:

частично готовое изображение

Теперь применяем Гаусово размывание. Дублируем слой, устанавливаем смешивание "Затемнение" и прозрачность процентов на 60.  Еще раз дублируем слой. Выделение не снимаем. Идем в фильтры->визуализация->облака->сплошные облака. Настраиваем как-нибудь так:

настройка облаковС параметрами можно поэкспериментировать..

Смешивание устанавливаем в "Рассеянный свет", прозрачность 100%. Дублируем еще раз слой. Параметры смешивания не трогаем. Должно получится что-то типа этого:

почти готовое сердцеТеперь можно применить к изображению различные фильтры. Я применил, как всегда, Гауссово размывание, сглаживание, имитацию масляной краски. Сводим изображение. Надеюсь у вас выделение сердца все еще сохранено, иначе выделяем по белому цвету и инвертируем. Теперь последний шаг. Идем в фильтры->свет и тень->отбрасываемая тень. Получаем тень. При желании, тень можно нарисовать и вручную. Для этого дублируем слой, рисуем круг под сердцем и заполняем его черным цветом, затем настраиваем прозрачность, чтоб появилась тень.

После всего этого я еще раз применил Гауссово размывание, повысил резкость, и немного подкорректировал кривые. Получилось вот такое сердечко:

еще один готовый вариант
P.S. А вы уже познакомились с web 2.0?

Еще немного CSS. Поля и отступы.

12.02.2010. CSS, Дизайн

0

С помощью 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.

10.02.2010. CSS, Дизайн

0

Фон

Границы (Край)

Задание границы в css состоит из нескольких частей. Во-первых, граница может быть правой (right), левой (left), верхней (top) и нижней (bottom). Также любая граница имеет несколько свойств: цвет (color), стиль границы (style), толщина границы (width).

Имя свойства строится из всего вышеперечисленного:

border-положение-свойство:

Если пропустить положение, то свойство будет применяться ко всем границам. Кроме этого, можно как в фоне задавать сразу несколько свойств. Тогда значения свойств перечисляются через пробел:

border-top:1px solid black; - верхняя граница имеет толщину в один пиксель, она черного цвета и непрерывная

Возможные значения свойств:

color - как всегда, цвет в RGB формате или в виде имени цвета.

color:red; color:#FED; color:#13F29E; - три варианта задания цвета.

width - тоже не особо интересный параметр. Определяет ширину границы. Задается в пикселях.

style- самый интересный параметр, определяет вид границы

Примеры:

border:2px solid green; - задает зеленую границу в 2 пикселя

border-left-style: dotted; - делает левую границу пунктирной

border-right: double 10px #666; устанавливает ширину правой границы в 10px, стиль - двойная линия и цвет #666 (если не ошибаюсь, то серый)

Продолжение следует!!!

UPD:

Продолжение: отступы и поля

Что такое CSS?

8.02.2010. CSS, Дизайн

0

Что такое 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-файлу можно несколькими способами:

  1. Записать весь CSS внутри тега <style> в заголовке документа (тег <head>)
  2. Подключить внешнюю таблицу стилей.Опять таки внутри тега <head>:

    <link rel="stylesheet" type="text/css" href="style.css" />

  3. Третий вариант не позволяет подключить таблицу стилей, но позволяет прописать стили внутри самого тега. Для этого используется атрибут style: style="свойства:значение;свойство 2:значение 2;".Например:

    <span style="color:green background: black">зеленый текст на черном фоне</span>

Вот и все на сегодня, подробнее о CSS и о "свойствах и значения" я расскажу как-нибудь в следующий раз

P.S. Нужен реферат? Вот вам рефераты на заказ.

Добавляем отражение к изображению в GIMP (а-ля зеркало)

7.02.2010. GIMP, Дизайн

0

Сегодня я расскажу как можно сделать отражение изображения в GIMP

Сначала откройте изменяемое изображение. Затем уменьшите размер слоя в 2 раза и затем еще на 5px. Теперь вам надо, с помощью инструмента выравнивание, выравнять изображение по верхнему краю и по центру. После этого продублируйте слой, выровняйте его по нижнему краю и, используя инструмент зеркало, отразите его по вертикали и горизонтали. Затем создайте слой с черным фоном и установите его в  самый низ. Должно получиться вот так:

результат

Теперь нажмите на нижний слой и добавьте маску слоя:

маска слоя

Теперь установите прозрачность зеркального слоя на 80%, и проведите от начала слоя к его концу градиент из белого в прозрачный (можно из немного серого) Должно получится так:

почти готово

Сейчас надо создать новый прозрачный слой под слоями с изображениями и над слоем фона и выделить в этом слое пространство примерно между серединой первого и второго изображений:

правильное выделениеИ Выделение->растушевать с значением 15. Затем заполняем выделенное градиентом из белого в черный и устанавливаем прозрачность слоя на 10-20%. Теперь смещаем верхнее изображение на 10px вниз и готово. Вот что должно получиться:

результат Исходное изображение:

исходное изображение
P.S.
Все еще не знаете, что вас ждет в 2012 году, то вам надо смотреть онлайн фильм 2012
P.P.S.
Если вы не хотите изучать дизайн и html, то специально для вас разработка и создание сайтов

Основные html теги

6.02.2010. HTML, Дизайн

0

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

Почти все теги  состоят из двух частей:

Между открывающим и закрывающим тегом находится само содержимое тега.  Также после имени тега (в открывающем теге) могут следовать атрибуты тега: выравнивание, задание толщины границ, цвета текста и т.д.

Главные теги

Большинство из этих тегов должны быть в любом документе.

Информация о странице

Теги, сообщающие название страницы и ее описание:

Работа с текстом

Заголовки

Служат для выделения заголовков в тексте. Например, названия главы книги, название статьи и т.д.

Заголовков в HTML всего 6 штук: от 1 уровня до 6. Чем меньше уровень заголовка, тем больше шрифт и тем он важнее.

Заголовки 1-3 уровня используются поисковиками (google, yandex,bing) для определения, о чем текст, поэтому рекомендую использовать эти теги во всех создаваемых вами текстах

Внешний вид текста (курсив, жирные, подчеркнутый)

Форматирование текста

В html для форматирование текста используется несколько тегов:

Ссылки и изображения

Создание ссылки:

<a href="http://adorning.ru"> adorning.ru</a> - href="адрес ссылки, а между <a ... > и </a> - текст ссылки

Вставка изображения:

<img src="adress" alt="text" align="center"/> - вставка изображения, находящегося по адресу adress, с выравниванием по центру. При наведение мышкой на изображение будет отображен текст text

Создание таблицы:

Некоторые специальные символы:

Кроме того, многие теги для форматирования текста поддерживают выравнивание текста/тега. За это отвечает атрибут align:

Для использования пишем тег и до закрытия открывающего тега куда надо выравнивать:

<p align="center"> текст выравнен по центру </p>

Еще пара полезных атрибутов:

style="css" - позволяет вам прописать css для этого экземпляра тега

id="id" - ид стиля в css таблице (уникальный для страницы)

class="class" - класс css для использования с этим тегом

Про сам СSS я, возможно, как-нибудь расскажу. CSS необходим для управления отображением текста: цветом фона, шрифта, типом шрифта, его размерами, выравниваем, границами, шириной элементов, отступами и многим другим.

Вот и все на сегодня!

P.S. Если вам, вдруг, понадобится сервер, то вот хороший сервер за paypal.

"description" content="?">

Уроки GIMP. Рисуем молнию. Вариант 1.

3.02.2010. GIMP, Дизайн

0

Сегодня я расскажу, как можно в gimp нарисовать молнию (по крайне мере, что-то похожее на молнию).

Первым делом нам необходимо создать новое изображение размером 400х400. Затем залить его черно-белым градиентом. Для этого выбираем инструмент "Градиентная заливка". В параметрах выставляем градиент и проводим из верхнего левого угла к центру правой стороны. В результате должно получится что-то такое:

Теперь идем в Фильтры->визуализация->облака->разностные облака и устанавливаем детализацию на максимум (15). С размером по X и Y можно поэкспериментировать, я поставил на 3.1 и 3.4.

Нажимаем ОК и инвертируем (цвет->инвертировать) полученное изображение:

Возможно вы уже видите очертания нашей молнии, а чтобы они стали видны любому нам пора в цвет->кривые и приводим ее примерно к такому виду (следите за вашим изображение, параметры будут немного отличаться). Главное, чтобы вы увидели на черном фоне тонкую молнию. Весь оставшийся мусор (если он есть) без сомнений удаляйти

Мои параметры:

И результат:

Вот это уже очень даже похоже на молнию, только цвет какой-то неправильный. Поэтому лезем в цвет->цветовой баланс и перекрашиваем нашу молнию:

И, как всегда, результат:

Осталось немного косметических эффектов. Выделяем нашу молнию (выделение->выделение по цвету. Затем инвертировать). Применяем фильтр сгладить и гауссово размывание (3px). После этого увеличиваем контрастность, чтоб молния снова стала похожей на молнию.

Вот и все. Самая примитивная молния нарисована.

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

Уроки C++. Структуры.

1.02.2010. c++, Программирование

0

Очень часто бывает необходимо объединить в одной переменной хранить несколько значений. Например, 2 координаты: х и у. Вот тогда можно использовать структуры данных, или просто структуры.
Создавать и работать с структурами очень просто. Для объявления структуры надо написать struct name
{ type varname;
type2 var2name}
Например,
struct point
{
float x;
float y;
int color;
string name;
};

Теперь, после того, как мы объявили структуру, пора создать ее экземпляр:
point points[1000]; // мы создали массив из 1000 элементов

Обращение к элементу структуры осуществляется через точку:

points[10].x=0,5;

points[10].y=1;

cout<<points[1].name;

И так далее.

Если вы создаете структуры динамически, то обращение к элементу осуществляется через ->:

point *p;

p=new point;

p->x=1;

p->y=2;

P.S.
Скачать программы и обои для стен, игры для nokia 5800 и бесплатные игры на телефон.

Страница 1 из 11

Rambler's Top100 Блогун - монетизируем блоги