Верстка прозрачной формы входа
Представьте, что вы начинающий верстальщик и перед вами стоит задача сверстать прозрачную форму входа на фоне изображения. Дизайнеры часто используют такие комбинации на сайтах с авторизацией, поэтому неплохо было бы знать как это делается.
HTML код
Я не присваивал тегам никаких классов, так как мы имеем дело только с фрагментом сайта и можем себе это позволить. При верстки целого сайта, без классов не обойтись.
Делать HTML разметку, одно сплошное удовольствие — это как разминка перед стартом, чего не скажешь про CSS. Надо много поработать, чтобы получить такую красоту.
CSS код формы входа
Для всех элементов пропишем свойство:
чтобы на заданную ширину формы 400 пикселей, не влияли бордеры, марджины и паддинги, в противном случае размеры формы выйдут из под контроля.
В качестве фона для всей секции будет большая фотография, которая займет собой все пространство — cover и не будет повторяться — no-repeat.
body <
background: url(https://cdn.pixabay.com/photo/2017/06/12/17/54/anemone-2396299_1280.jpg);
background-repeat: no-repeat;
background-size: cover;
>
Прозрачный бокс (section)для формы входа
Эта строчка задает черный цвет фона формы (0,0,0) и степень прозрачности, значение (.6) делает ее полупрозрачной.
section <
background: rgba( 0,0,0,.6);
Код ниже отвечает за местонахождение бокса относительно окна браузера. В нашем случае бокс позиционирован точно по центру.
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Стилизуем заголовок (h2)
Цвет, размер, название шрифта, необходимые отступы, определяются по PSD макету, ставит заголовок по центру свойство — text-align: center.
section h2 <
color: #fff;
font-family: 'Caveat', sans-serif;
font-size: 30px;
margin: 0 0 30px;
padding: 0;
text-align: center;
>
Стилизуем поля ввода (input)
В макете поля ввода нарисованы не типично, мы видим простые две линии, как в школьной тетрадке. Эти линии — нижнии рамки белого цвета и прозрачный фон у input-ов. Остальным рамкам выставлен border: none.
section div input <
background: transparent;
border: none;
border-bottom: 1px solid #fff;
>
Если щелкнуть мышью по полю ввода, то у него появится обводка, чтобы это убрать, то пишем следующее свойство.
Метки полей ввода (label)
Псевдоэлементы :focus и :valid
При вводе в форму пользователя логина и пароля, метки (login, password) будут мешаться. Поэтому в момент, когда input будет в фокусе, метки сдвинутся вверх.
section div input:focus
label,
section div input:valid
«В моём видеокурсе» вы увидите реальный пример адаптивной верстки по макету.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 1 ):
у меня с прозрачностью rgba(0,0,0,.6) по чему-то не срабатывало, получилось только с полным значением 0.6, т.е. (0,0,0,0.6), а в остальном спасибо за урок очень познавательно.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Невидимая форма
Как сделать так, чтобы вся форма была прозрачной, а были видны только компоненты?
Т.е. тупо картинка image посреди экрана, либо label (надпись).
Нужно убрать рамки и сделать прозрачную саму форму (без компонентов).
Настроить свойства формы: Transparent=True , в TransparentColor указать тот цвет, который ни для каких других элементов управления использоваться не будет (желательно какой-нибудь яркий: clYellow, clFuchsia ) и поставить этот же цвет в свойстве Color формы. Все эти свойства, конечно же, можно устанавливать программно, но это необходимо для тех случаев, когда может измениться цвет элементов управления: надписей и др. А рамка у формы убирается свойством BorderStyle со значением bsNone .
По поводу рамки гуглите в сторону WM_NCPAINT .
По поводу создания формы произвольных размеров — CreateWindowRegion .
Точно не знаю, но, может, этого можно добиться с помощью borderStyle None и TransperentColor ?
Не помню с какой версии Делфей, но у формы появились свойства AlphaBlend и AlphaBlendValue как раз для этого предназначение. Но есть оговорка, работает в Виндах начиная с Windows 2000. То есть, на НТ4, Ме, 9х прозрачности не будет.
Создание прозрачных форм Windows Forms
В операционной системе Microsoft Windows XP существует возможность управления прозрачностью отображаемых окон. Свойство Opacity позволяет управлять прозрачностью формы.
Примечание.
Так как прозрачность форм поддерживается только начиная с операционной системы Windows 2000, формы Windows Forms останутся совершенно непрозрачными при запуске в старых операционных системах, например в Windows 98, независимо от значения свойства Opacity.
Чтобы управлять прозрачностью Windows Forms в окне Свойства для формы в свойстве Opacity задайте значение в диапазоне от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность).
Чтобы управлять прозрачностью Windows Forms программными средствами в теле метода для свойства Opacity задайте значение в диапазоне от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность). Свойство Opacity является типом значения Double, например:
glob.frm2.Opacity = 0.6;
Изменение границ формы Windows Forms с помощью конструктора
При определении внешнего вида формы Windows Forms предлагается несколько стилей границ. Изменяя свойство FormBorderStyle можно управлять поведением формы в отношении изменения размеров. Кроме того, с помощью свойства FormBorderStyle можно определить вид строки заголовка, а также кнопки, которые должны в ней появиться.
Чтобы определить стиль границы Windows Forms в режиме конструктора в окне Cвойства формы задайте для свойства FormBorderStyle выбранный стиль.
Примечание. Выбор стиля границы определяет наличие кнопок Свернуть и Развернуть в строке заголовка. По умолчанию кнопки Свернуть и Развернуть включены. Функциональные возможности этих кнопок определяются в окне Свойства.
Чтобы отключить кнопки свертывания и развертывания в Windows Forms в окне Свойства формы выберите у свойств MinimizeBox или MaximizeBox значение false.
В зависимости от заданного свойства соответствующая кнопка будет присутствовать, но останется нерабочей.
Чтобы определить стиль границы Windows Forms программными средствами присвойте свойству FormBorderStyle требуемое значение стиля. В следующем примере кода для стиля границы формы frm2 задается значение FixedDialog.
glob.frm2.FormBorderStyle = System.Windows.Forms.FormBorderStyle.FixedDialog;
Переход между формами
При добавлении формы Windows Forms в проект эта новая форма по умолчанию не отображается во время выполнения.
Чтобы перейти из формы1 на форму2 необходимо:
Объявить глобальную переменную в пространстве решения в любом месте, например:
namespace Metodichka
public class glob
public static Form frm;
прописать процедуру открытия формы2 в модуле Form1.cs, например:
private void toolStripMenuItem2_Click(object sender, EventArgs e)
if (glob.frm == null)
glob.frm = new Form2();
glob.frm.Show();
прописать процедуру закрытия формы2 в модуле Form2.cs, например:
private void Form2_FormClosed(object sender, FormClosedEventArgs e)
Как сделать прозрачную форму
Лучший отвечающий
Вопрос
Доброго времени суток!
Столкнулся с необходимостью сделать полупрозрачную форму с непрозрачными контролами на ней. В частности интересует вывод текста на полупрозрачную форму.
Необходима возможность регулировать степень прозрачности динамически во время работы приложения.
Есть возможность изменять прозрачность при помощи Form.Opacity — но в этом случае все размещенные контролы также следуют установленному значению. Пробовал рисовать на форме — ну как и ожидалось — результат тот же, что и c размещенными контролами.
Нарыл в инете вариант с:
Form.BackColor = Color.White;
Form.TransparencyKey = Color.White;
public class opacityLabel : Label <
protected override void OnPaint(PaintEventArgs e) <
if (e != null) <
e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SingleBitPerPixelGridFit;
e.Graphics.DrawString(Text, Font, new SolidBrush(ForeColor), ClientRectangle);
>
else
base.OnPaint(e);
>
Но решение не совсем хорошее, т.к. форма становится полностью прозрачной.
В общем я в тупике. пните меня в нужное русло/направление для поиска в моей тупиковой ситуации.
PS: Можно ли делать градиентную прозрачность формы, например, используя в качестве шаблона картинку PNG?