Текст надпись с обводкой контуром настройка ширины цвета обводки
Содержание:
Прозрачность различных элементов
Рассмотрим некоторые примеры задания прозрачности определенным элементам, которые чаще всего используются на странице.
CSS прозрачность картинки.
Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность</title>
<style>
.im1 {
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.im2 {
filter: alpha(Opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<p>
<img src="/euro.png" alt="Оригинальное изображение">
<img src="/euro.png" alt="Прозрачность 50%" class="im1">
<img src="/euro.png" alt="Прозрачность 30%" class="im2">
</p>
</body>
</html>
Результат:
Прозрачность на CSS при наведении курсора на картинку .
Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса :hover. Для этого нашей картинке нужно прописать два класса один обычный — это будет неактивное состояние картинки и второй класс с псевдоклассом :hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность</title>
<style>
.im1 {
filter: alpha(Opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.im1:hover {
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.im2 {
filter: alpha(Opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
.im2:hover {
filter: alpha(Opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
</style>
</head>
<body>
<p>
<img src="/lyx.png" class="im1">
<img src="/computer.png" class="im2">
</p>
</body>
</html>
Результат можете посмотреть в демо.
Прозрачность фона на CSS.
Здесь необходимо помнить, что прозрачность распространяется на все вложенные элементы и они не могу обладать большей прозрачностью чем вложенный элемент.
В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.
Пример кода:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность</title>
<style>
BODY {
background: url(bg.png); /* Изображение в качестве фона */
}
.blok {
background: #FC0; /* Цвет фона */
padding: 5px; /* Внутренний отступ */
color: #000000; /* Цвет текста */
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="blok">
Текст
</div>
</body>
</html>
Вот результа размещенного выше кода:
Прозрачность текста.
Присвоив свойство opacity любому элементу в который вложен текст, сам текст как и элемент становиться прозрачным. Вот пример создания прозрачного текста на CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность</title>
<style>
BODY {
background: url(bg.png); /* Изображение в качестве фона */
}
.blok {
font-size:72px; /* Размер шрифта */
font-weight:bold; /* Выделение текста жирным шрифтом */
padding: 5px; /* Внутренний отступ */
color: #333; /* Цвет текста */
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
</head>
<body>
<p class="blok">
Прозрачный текст!
</p>
</body>
</html>
Результат работы кода:
Еще материалы по CSS:
- Подробности
-
Опубликовано: 26 Сентябрь 2013
-
Обновлено: 15 Октябрь 2013
-
Просмотров: 33089
Подготавливаем наши буквы
Уверен, если бы возможность использовать полупрозрачные буквы и другие элементы, была у вас в программе MS PowerPoint, вы бы воспользовались ей незамедлительно… Но ведь такая возможность в PowerPoint действительно есть!
Откроем новый пустой слайд и подберем в интернете или коллекции клипартов любое подходящее фоновое изображение. У меня сегодня отличное настроение, поэтому и выбранной мной фон буквально пышет позитивным настроем.
Каждая буква этого слова — отдельный объект. Так будет проще потом.
Теперь добавим текстовую надпись, выставим шрифт покрупнее и напишем любое слово, в моем примере — bussoft. Мой пример выглядит «монолитно», хотя на самом деле, каждая его буква представляет собой самостоятельный объект — та к в дальнейшем будет проще работать.
Теперь я раскрашиваю каждую отдельную букву в разные цвета и с помощью мыши, перемещаю их относительно друг друга, выстраивая ломаную «линейку», ну и кроме того, частично накладывая их друг на друга.
А ведь ещё можно использовать наклон букв!
Работа с надписями
После того, как Вы вставили нужный блок в документ, его можно изменить по своему желанию. Для этого выделите написанное и перейдите на вкладку «Средства рисования» – «Формат». В группе «Стили WordArt» выберите или один из готовых стилей, или самостоятельно подберите заливку, контур, один из эффектов.
«Экспресс стили» – это тот же WordArt. Кнопки справа используются для изменения заливки, контура или добавления эффекта. Выбирайте различные эффекты, изменяйте цвета и смотрите, как после этого будет меняться напечатанное.
Если Вам нужна надпись в рамке, тогда кликните по границе, чтобы выделить ее. Затем в группе «Стили фигур» выбирайте или готовый стиль, или используя три кнопки сбоку «Заливка фигуры», «Контур фигуры» и «Эффект фигуры» подберите нужный вид рамки самостоятельно.
Выбрав «Контур фигуры» получится изменить цвет контура, выбрать другую толщину или изменить его тип.
«Заливка фигуры» используется, чтобы добавить заливку для блока – слова будут написаны на выбранном фоне. В списке эффектов выбирается тень, отражение, подсветка и так далее.
Если Вам нужно убрать границы надписи в Ворде, тогда выделите рамку, откройте вкладку «Средства рисования» – «Формат», в группе «Стили фигур» кликните по «Контур фигуры» и выберите пункт «Нет контура».
Если Вы вставляете ее на рисунок, и нужно убрать белый фон заливки, тогда выделите блок и нажмите «Заливка фигуры». В списке выберите «Нет заливки».
В результате у нас получилось вот что: у самого блока нет рамки и заливки.
Теперь давайте разберемся, как делается прозрачная надпись в Ворде. Выделите соответствующий блок и кликните по нему правой кнопкой мышки. Затем выберите в выпадающем списке «Формат фигуры».
После этого откроется или дополнительная область справа в документе Ворд, или отдельное окно «Формат фигуры». На вкладке «Параметры фигуры» – «Заливка и границы» разверните поля «Заливка» и «Линии» и, в зависимости от того, что нужно сделать прозрачным, поставьте ползунок в поле «Прозрачность» на нужное значение.
Чтобы изменить прозрачность самих слов, открывайте «Параметры текста» – «Заливка и контур текста». Дальше разворачивайте поля «Заливка» и «Контур» и изменяйте значение в поле «Прозрачность».
Красивая надпись получится не только меняя цвет контура и текста, но и изменив его форму. Выделите напечатанное, затем в группе «WordArt» кликните «Текстовые эффекты» – «Преобразовать». Выберите в списке понравившийся вид и кликните по нему.
В зависимости от того, что Вы выберите, в появятся желтые маркеры. Перемещая маркер, можно изменить и вид самого текста.
Если в документе несколько различных надписей рядом, и Вы планируете их потом перемещать, поворачивать и прочее, тогда лучше сделать группировку. Выделите одну из них, зажмите и удерживайте «Ctrl» и выделяйте другие – наводите курсор к границе и, когда он примет вид стрелки с плюсом, кликайте левой кнопкой мыши.
Дальше на вкладке «Средства рисования» – «Формат» в группе «Упорядочить» выберите «Группировать».
Как это делается,прочтите подробнее в статье, как сгруппировать фигуры в Ворде.
Текст на прозрачном фоне в Фотошопе
Теперь нужно слегка изменить оригинальное изображение. Для страховки все изменения лучше производить на копии слоя и затем уже мы создадим текст на прозрачном фоне в Фотошопе. Копия делается очень просто. Выделите в соответствующей панели слой «Пейзаж» и нажмите сочетание клавиш Ctrl+J. Или перетащите выбранный слой на кнопку «Создать новый слой». В любом случае в панели появится копия вашего слоя.
Совершите щелчок левой кнопкой мыши по слою-копии. Теперь зажмите клавишу Ctrl и щелкните левой кнопкой мыши по миниатюре слоя «Матовый фон» (не по её названию). У вас будет выделена часть слоя с пейзажем, расположенная под созданным ранее прямоугольником. Далее перейдите по пути «Фильтр>Размытие>Размытие по Гауссу». Радиус увеличьте до 20 пикселей. Если разрешение фотографии очень маленькое, то радиус может быть и меньше.
Теперь создайте новый слой. Как это сделать — вы уже знаете. Назовите новый слой «Улучшение фона». В панели «Слои» его нужно перетащите в самый верх. Сейчас необходимо снова загрузить выделение слоя с матовым изображением. Если вы не совершали лишних действий, то выделение будет сохранено после предыдущей операции.
Выберите инструмент «Кисть». Нажим уменьшите до 0%, поставьте белый цвет. Размер кисти зависит от разрешения изображения. В нашем случае хватило 30 пикселей. Кистью нужно произвести мазки по верхним и нижним граням прямоугольной области, осветлив их. Когда закончите — понизьте непрозрачность слоя до 60%.
Дальше выделение можно снимать. Осталось лишь написать какой-нибудь текст. Делается это при помощи знакомого нам уже инструмента «Горизонтальный текст». После появления надписи можно отредактировать размер шрифта, изменить его тип и совершить прочие действия. Всё зависит только от вашей фантазии.
В Интернете вы можете найти и готовые фоны для текста для Фотошопа, все они в первую очередь пригодятся создателям открыток и приглашений. Что касается нашего урока, то все действия занимают минимум времени. В дальнейшем вы сможете легко ответить себе на вопрос : как сделать матовый фон для текста в фотошоп всего за две-три минуты! Следите за другими нашими уроками, тогда вы научитесь и многим другим чудесным вещам.
Как сделать надпись
Для того чтобы ее вставить в Word, перейдите в документе на вкладку «Вставка». Дальше в группе «Текст» кликните «Текстовое поле» и выберите из открывшегося списка «Простая надпись».
После этого, на лист будет добавлен блок, в котором написан пример. Жмите «Delete», чтобы удалить все напечатанное, и напишите в данном блоке то, что нужно Вам.
Таким образом, добавляется обычная надпись. Выделив все, что в ней написано, на вкладке «Главная» изменяется размер, шрифт и прочее.
Если выделить сам блок, чтобы вокруг него появилась рамка с маркерами, то наведя курсор на границу (при этом он примет вид стрелок, направленных в разные стороны), получится переместить его в любое место документа – при этом удерживайте левую кнопку мышки. Потянув за маркер на рамке, увеличится область для текста.
Сделать красивый текст получится и с помощью вставки объекта «WordArt». При этом к тому, что Вы напечатаете, будет сразу применен определенный стиль: цвет, размер, отражение, свечение и прочее.
Откройте вкладку «Вставка» и в группе «Текст» выберите «WordArt». Нажмите по одному из предложенных вариантов.
На листе появится блок с текстом. Нажмите «Delete», чтобы удалить набранный пример и напечатайте что нужно. Перемещается, поворачивается, изменяются размеры блока также, как я писала выше: используя рамку, стрелку вверху и маркеры на рамке.
CSS:
.background {
text-align: center;
background: url(«background.jpg») top center;
padding: 120px 10px;
}
.transparent {
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 50px;
line-height: 50px;
text-transform: uppercase;
background: #000;
color: #FFF;
mix-blend-mode: multiply;
padding: 10px 20px;
display: inline-block;
/* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */
}
|
1 |
.background { text-aligncenter; backgroundurl(«background.jpg»)topcenter; padding120px10px; } .transparent { font-familyTahoma,sans-serif; font-weightbold; font-size50px; line-height50px; text-transformuppercase; background#000; color#FFF; mix-blend-modemultiply; padding10px20px; displayinline-block; /* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */ } |
В итоге у нас получится это:
