A landing interface UI that beautifies PYQT5 using CSS

• Not perfect, there are some details I still don't know how to modify (time 2021-01-23 22:30)

The first is to see this article (@mahuatengmmp's article）

Then I watched the effect.
The CSS of QLineEdit and QPushbutton is a reference to TA.

Let's take a look at the final effect first

Next is a complete code

from PyQt5.QtWidgets import *
from PyQt5.QtCore import Qt
import sys


class widget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setFixedSize(450,640)  # Set fixed size

        self.setWindowFlags(Qt.CustomizeWindowHint)  # Hide the title bar
        self.setWindowFlags(Qt.FramelessWindowHint) # Hidden border
        # Set the total style, QWIDGET
        self.setStyleSheet('''
            QWidget
            {border:15px;
            margin:10px;
            margin-left:82px;
            margin-right:50px;
                         Font-Family: 'Huawen Xin Wei';
            font-size:40px;
            font-weight:bold;
            background-color:rgb(200,255,255);
            }
            QWidget#right_widget
            {border-radius:15;}
        ''')
        # Create a layout
        layout = QVBoxLayout()
        # Create a 4 control
        lb = QLabel('Xxx login system')
        lineEdit1 = QLineEdit('')
        lineEdit2 = QLineEdit('')
        # Set the account input form
        lineEdit1.setPlaceholderText('account name')
        # Set the password form
        lineEdit2.setPlaceholderText('password')
        lineEdit2.setEchoMode(QLineEdit.Password)
        # Set the LineEdit1 format
        lineEdit1.setStyleSheet('''
            QLineEdit
            {border:0px;
            border-radius:0;
            margin:10px;
            margin-left:50px;
            margin-right:50px;
            border-bottom: 2px solid #B3B3B3;
                         Font-Family: 'Isometrics;
            font-size:25px;
            font-weight:bold;}
            QLineEdit:hover{
                border-bottom:3px solid #66A3FF;
            }
            QLineEdit:focus{
                border-bottom:3px solid #E680BD
            }
        ''')
        # Set the LineEdit2 format
        lineEdit2.setStyleSheet('''
            QLineEdit
            {border:0px;
            border-radius:0;
            margin:10px;
            margin-left:50px;
            margin-right:50px;
            border-bottom: 2px solid #B3B3B3;
                         Font-Family: 'Isometrics;
            font-size:25px;
            font-weight:bold;}
            QLineEdit:hover{
                border-bottom:3px solid #66A3FF;
            }
            QLineEdit:focus{
                border-bottom:3px solid #E680BD;
            }
        ''')

        btn = QPushButton('log in')
        btn.setFixedSize(400,60)
        # Set button format
        btn.setStyleSheet(''' 
                            QPushButton
                            {text-align : center;
                            background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 #fbc2eb, stop:1 #a6c1ee);
                            font: bold;
                            border-color: grey;
                            border-width: 2px;
                            border-radius: 10px;
                            padding: 6px;
                            height: 28px;
                            border-style: outset;
                                                         FONT-FAMILY: 'black body';
                            font : 18px;}

                            QPushButton:pressed
                            {text-align : center;
                            background-color : light gray;
                            background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 #e1aad2, stop:1 #92adda);
                            font: bold;
                            color:lightblue;
                            border-color: gray;
                            border-width: 2px;
                            border-radius: 10px;
                            padding: 6px;
                            height : 28px;
                            border-style: outset;
                                                         FONT-FAMILY: 'black body';
                            font : 18px;}
                            QPushButton:hover:!pressed
                            {color:red;}
                            ''')
                     
        layout.addWidget(lb)
        layout.addWidget(lineEdit1)
        layout.addWidget(lineEdit2)
        layout.addWidget(btn)
        self.setLayout(layout)
        print(type(self))

if __name__ == "__main__":
    app = QApplication(sys.argv)
    demo = widget()
    demo.show()
    sys.exit(app.exec_())

Need to be perfect

• Rounded