Как сделать форму прозрачной c
Хотя если задать форме прозрачность, то при загрузке форма прозрачная.
Попробую скоро такое сделать )
Здравствуйте!
Вопрос о так званых всплывашках. Можно ли сделать форму прозрачной, а всё, что она содержит, непрозрачным?
Здравствуйте!
Вопрос о так званых всплывашках. Можно ли сделать форму прозрачной, а всё, что она содержит, непрозрачным?
Можно, для этого надо юзать свойства формы TransparentColor/TransparentColorValue. Кроме того надо убрать с формы скинпровайдер и в настройках скинменеджера отключить автоматическое скинирование форм.
Такда какой смысол в скинах? если нужно всё поотключать.
Ну видимо TopCore нужны только скиновые кнопочки
Не угадали. Неужели, если нужен в приложении baloon, значит мне нужны только лишь кнопочки? Не вижу связи. Скинпровайдер я же не буду кидать только на эту форму. А за ответ спасибо.
Этот код у меня не работает даже в новом приложении без скинов, не трудно будет пример сделать?
Можно, для этого надо юзать свойства формы TransparentColor/TransparentColorValue. Кроме того надо убрать с формы скинпровайдер и в настройках скинменеджера отключить автоматическое скинирование форм.
Провёл следующий опыт (установлены скины v6.42).
На главной форме SkinManager и sButton (вызывает вторую форму). На второй форме SkinProvider и кнопка (просто так). Свойства второй формы: BorderStyle = bsNone, Color = clWhite, TransparentColor = true, TransparentColorValue = clWhite. Свойства SkinProvider: SkinData->CustomColor = true.
Запускаю приложение, открываю вторую форму – бордюров нет, а фон формы есть, причем не белый, а скиновский.
После этого устанавливаю свойство BorderStyle = bsSingle, и, о чудо, бордюр есть, а фон как и надо прозрачный.
По идее первый вариант должен был получится ведь (вторая форма должна была быть вся прозрачная)? Или я где-то что-то недопонял.
Эта вторая форма служит заставкой к приложению.
У меня предложение: в SkinManager добавить свойство, в которое будут добавляться формы, к которым скин применять не нужно.
Представьте, что вы начинающий верстальщик и перед вами стоит задача сверстать прозрачную форму входа на фоне изображения. Дизайнеры часто используют такие комбинации на сайтах с авторизацией, поэтому неплохо было бы знать как это делается.
HTML код
Я не присваивал тегам никаких классов, так как мы имеем дело только с фрагментом сайта и можем себе это позволить. При верстки целого сайта, без классов не обойтись.
Делать HTML разметку, одно сплошное удовольствие - это как разминка перед стартом, чего не скажешь про CSS. Надо много поработать, чтобы получить такую красоту.
CSS код формы входа
Для всех элементов пропишем свойство:
чтобы на заданную ширину формы 400 пикселей, не влияли бордеры, марджины и паддинги, в противном случае размеры формы выйдут из под контроля.
В качестве фона для всей секции будет большая фотография, которая займет собой все пространство - cover и не будет повторяться - no-repeat.
Прозрачный бокс (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.
Стилизуем поля ввода (input)
В макете поля ввода нарисованы не типично, мы видим простые две линии, как в школьной тетрадке. Эти линии - нижнии рамки белого цвета и прозрачный фон у input-ов. Остальным рамкам выставлен border: none.
Если щелкнуть мышью по полю ввода, то у него появится обводка, чтобы это убрать, то пишем следующее свойство.
Метки полей ввода (label)
Псевдоэлементы :focus и :valid
При вводе в форму пользователя логина и пароля, метки (login, password) будут мешаться. Поэтому в момент, когда input будет в фокусе, метки сдвинутся вверх.
section div input:focus ~ label,
section div input:valid ~ label left: 0;
top: -22px;
>
На jsfiddle вы можете посмотреть код последнего элемента прозрачной формы - кнопки входа, а так же весь код целиком.
"В моём видеокурсе" вы увидите реальный пример адаптивной верстки по макету.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 1 ):
у меня с прозрачностью rgba(0,0,0,.6) по чему-то не срабатывало, получилось только с полным значением 0.6, т.е. (0,0,0,0.6), а в остальном спасибо за урок очень познавательно.
В данном HOWTO мы подробно рассмотрим процесс создания полностью прозрачной главной формы приложения на Qt Widgets, которая будет корректно отображаться под всеми поддерживаемыми Qt платформами.
Введение
Для работы мы будем использовать свободную официальную IDE для разработки на C++/Qt — Qt Creator.
Код из наших примеров корректно компилируется и работает как в Qt 4.x, так и в 5.x. Лицензия всех фрагментов кода из данной статьи — GNU General Public License version 3.
Создание проекта
Создайте новый проект на Qt: File -> New file or Project -> Application -> Qt Widgets Application. Названия и пути укажите произвольные.
Редактирование формы
1. Откройте главную форму созданного проекта в режиме Design.
2. Внутри centralWidget добавьте новый Widget. Удалите созданные по умолчанию menuBar, mainToolBar и statusBar. Все нужные вам элементы создавайте только внутри widget.
3. Выберите объект MainWindow класса QMainWindow, затем в редакторе свойств найдите поле styleSheet и нажмите справа от него кнопку с многоточием (…) для запуска встроенного редактора каскадных таблиц стилей.
4. В открывшемся окне редактора стилей пропишите следующий код:
Если всё сделано верно, то стиль будет применён немедленно.
Редактирование основного кода
Откройте файл mainwindow.cpp в штатном редакторе кода и создайте новый метод:
Не забудьте описать его в private slots заголовочного файла этой формы (mainwindow.h):
Теперь добавьте вызов созданного метода в функцию создания формы (mainwindow.cpp):
Скомпилируйте и запустите своё приложение.
3 комментария к записи
Добрый день! Вместо прозрачности форма становится черной, не подскажите в чем дело?
В новых версиях Qt Creator такое иногда встречается при множественных сохранениях формы. Видимо значение по умолчанию какого-то свойства формы или виджета изменяется.
Насколько я понимаю, делается это переопределением события OnPaint.
Тоесть получаешь картинку под формой, смешиваешь ее с картинкой самой формы и выводишь на канву.
Может кто знает готовые решения?
Самому стало интересно. Провел небольшое расследование.
Вот что выяснил:
1. Форму можно сделать полностью прозрачной.
Делается это примерно так:
2. Форму можно сделать полупрозрачной, но эта фича (Alpha Blend) поддерживается только в Windows NT/2000/XP.
Для этого устанавливается стиль WS_EX_LAYERED, а затем вызывается функция SetLayeredWindowAttributes(). Подробности - в MSDN.
Читайте также: