Variación transparente de entrada de interfaz de usuario semántica

Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.

Variación transparente de entrada de interfaz de usuario semántica , es posible que los usuarios necesiten mostrar una entrada sin fondo, es decir, agrega un toque único a la entrada con su aspecto transparente, lo que permite que las páginas web tengan entradas que coincidan con el color de fondo de la página.

Clase de variación transparente de entrada de interfaz de usuario semántica:

transparente: esta clase se utiliza para especificar la variación transparente de las entradas.

Sintaxis:

<div class="ui transparent input">
    <input type="text" placeholder="Text">
    ....
</div>

Ejemplo 1: este ejemplo demuestra la variación transparente de entrada usando la clase transparente en Semantic-UI.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
  
<body>
    <div class="ui container">
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
            <p>Semantic UI Input Transparent Variation</p>
        </b><hr>
        <p>Transparent input :</p>
        <div class="ui transparent input">
            <input type="text" placeholder="Enter name / email">
        </div>
        <br />
        <p>Non transparent input : </p>
        <div class="ui input">
            <input type="text" placeholder="Enter name / email">
        </div>
    </div>
</body>
</html>

Salida: ambas entradas se pueden ver en la imagen a continuación. Puede ver la diferencia entre la entrada transparente sin fondo y la entrada no transparente con un fondo de línea de borde.

Entradas de interfaz de usuario semántica

Ejemplo 2: este ejemplo muestra un paquete de variaciones de entradas transparentes como un formulario de registro usando la clase transparente .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head>
  
<body>
    <div class="ui container">
        <center>
            <h2 class="ui header green">GeeksforGeeks</h2>
            <b>
                <p>Semantic UI Input Transparent Variation</p>
            </b>
            <hr>
            <div class="ui segment">
                <p>Sign up Form</p>
                <div class="ui transparent input">
                    <input type="text" placeholder="Enter name / email">
                </div>
                <br />
                <div class="ui transparent input">
                    <input type="number" placeholder="Enter contact number">
                </div>
                <br />
                <div class="ui transparent input">
                    <input type="password" placeholder="Enter password" /> 
                </div>
            </div>
        </center>
    </div>
</body>
</html>

Salida: Todas las entradas transparentes se pueden ver en la imagen de abajo.

Entradas transparentes

Referencia: https://semantic-ui.com/elements/input.html#transparent

Publicación traducida automáticamente

Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta