<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Тени для текста и блоков.

Тени для текста и блоков.

В сегодняшней статье мы поговорим о том, как сделать тень у текста или блока с помощью CSS3.

Давайте для начала сделаем небольшую html разметку.

<html>
<head>
  <meta charset="utf-8">
  <title>Text-Shadow</title>
</head>
<body>
  <p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

А теперь давайте зададим для неё стили:

body {
  background: #ccc;
}

p {
  font-size: 18px;
  text-shadow: 0 1px 0 #eee;
}

Тень для текста задаётся с помощью свойства text-shadow, где первое значение - это отступ по горизонтали, второй - по вертикали, третий - размытие, а четвёртый параметр - это цвет тени. Если вы запустите данный пример, то увидите довольно-таки интересный эффект однопиксельной белой тени, который сейчас часто применяется.

Можно также задавать сразу несколько теней через запятую:

p {
  text-shadow: 0 1px 0 #eee, 3px 3px 3px #000;
}

Теперь давайте поговорим о том, как задать тень для блока.
Для начала изменим нашу разметку

<html>
<head>
  <meta charset="utf-8">
  <title>Box-Shadow</title>
</head>
<body>
  <div class="block"></div>
</body>
</html>

И зададим какие-нибудь первоначальные стили

.block {
  background: #333;
  width: 200px;
  height: 200px;
  margin: 20px;
}

Теперь зададим нашему блоку тень с помощью box-shadow

.block {
  background: #333;
  width: 200px;
  height: 200px;
  margin: 20px;
  box-shadow: 7px 1px 7px 5px #555, -7px 1px 7px 5px #c1ff05;
}

Абсолютно всё, что я говорил о тенях для текста, справедливо и для теней блоков. В данном примере мы задали первую тень со смещением по оси x на 7px, по оси y на 1px, размытием 7px, и светло-черным цветом. Со второй тенью всё то же самое, только смещение по оси x будет не вправо, а влево, т.к. мы задали отрицательное число. Как вы могли заметить, есть ещё четвёртый параметр, который обозначает радиус распрастранения тени, но он используется нечасто.

Это были внешние тени, но есть ещё и внутренние

.block {
  box-shadow: inset 9px 9px 3px #112233;
}

Как видите, чтобы тень стала внутренней, нужно всего лишь добавить в начале слово inset.

На этом всё для сегодняшней статьи. Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

dima9595 dima9595 03.04.2014 09:43:07

Нужно заметить, что место простого #цвета можно и использовать rgba цвета, в которых можно указать и прозрачность данного цвета.

Ответить

php_programmer php_programmer 03.04.2014 14:52:55

О задании цветов будет рассказываться в одной из следующих статей

Ответить

tigermehmat tigermehmat 03.04.2014 20:31:57

Ура)... жаль примеров не приводится...

Ответить

taalaybek96 taalaybek96 05.03.2015 22:12:59

Михаил можно ли с примерами

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.