Interface utilisateur de la calculatrice - Neumorphisme - blanc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 May 2025

Site Web de portfolio de développeur HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="container">
    <div class="iphone-x">
        <div class="screen">
            <div class="notch">
                <div class="sound"></div>
                <div class="camera"></div>
            </div>
            <div class="time" id="time">
                <script>
                    var time = document.getElementById('time').innerHTML;
                    var today = new Date();
                    var time = today.getHours() + ":" + today.getMinutes();
                    time = document.write(time);
                </script>
            </div>
            <div class="battery">
                <i class="fa fa-battery-full"></i>
            </div>
            <div class="wifi">
                <i class="fa fa-wifi"></i>
            </div>

</div>
            </form>

</div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

:root
{
   
    --BxSi:6px 6px 8px rgba(13, 39, 80, 0.25),
        -6px -6px 10px #fff,
        inset -8px -8px 12px rgba(255,255,255,0.7),
        inset 5px 5px 8px rgba(13,39,80,0.2);

--PSD-3d:7px 7px 15px #45566754,
        -8px -8px 15px #5165790a,
         inset -5px -4px 13px 0px #51657959,
         inset 6px 7px 12px 0px #fffffff0; 
    --BxS:4px 4px 8px rgba(13, 39,80,0.25),
          -4px 4px 8px #fff; 
    --hoverS:-3px -3px 7px #a0a0a032,
         3px 3px 5px rgba(94, 104, 121, 0.417);

}
/***  ***/
* 
{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}
body
{
    background: #1a1a1a;
}
.iphone-x
{
    margin-top: 20px;
}
.iphone-x .screen
{
    width: 42%;
    height: 625px;
    margin: 0 auto;
    min-width: 310px;
    max-width: 310px;
    border-radius: 44px;
    background: #e8eaec;
    padding: 10px;
    box-shadow:var(--PSD-3d);
}
.screen .notch
{
    width: 159px;
    height: 30px;
    margin: 0px auto;
   /* background: #e8eaece1;*/
    border-bottom-right-radius: 15px;
    border-bottom-left-radius:15px ;
}
.sound
{
    top: 10px;
    left: 54px;
    width: 40px;
    height: 6px;
    position: relative;
    background: #222;
    border-radius: 10px;
}
.camera
{
    top: 2px;
    left: 110px;
    width: 10px;
    height: 10px;
    position: relative;
    background: #222;
    border-radius: 100px;
}
.time
{
    color: #000;

width: 60px;
    font-size: 11px;
    margin-top: -22px;
    background: transparent;
    margin-left: 18px;
}
.battery
{
    margin-top:-20px;
}
.battery i
{
    color: rgba(0,0,0,0.548);
    
    margin-left: 230px !important;
}
.wifi
{
    margin-top: -22px !important;
    margin-left: 260px;
}
.wifi i
{
    color: rgb(0,0,0);
    margin-top: -20px;
}
.top-nav
{
    width: 100%;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background: transparent;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.area
{
    min-width: 50% !important;
    width: 93% !important;
    min-height: 120px !important;
    margin-left: -5px;
    margin-top: -5px;
    font-size: 30px !important;
    text-align: center;
    text-align: right;
    overflow: scroll;
    outline: none;
    border: none;
    font-weight: bold;
    color:#0b254e;
    background:#e8eaec;
    border-radius: 10px;
    padding: 12px;
    box-shadow:var(--BxSi);

}
.calculator
{
    margin: 0;
    box-sizing: content-box;
}
.key
{
    float:  left !important;
    font-size: 15pt;
    display: flex !important;
    margin: -5%;
    margin-left: auto !important;
    margin-right: auto !important;
}
.first-col,
.second-col,
.third-col,
.fourth-col,
.fifth-col
{
    padding: 10px;
    white-space: wrap;
    margin: -9.5px;
    display: inline-block;
    margin-top: 20px !important;
    justify-content: space-between !important;
}
.button
{
    display: block;
    padding-left: 40px;
    min-height: 40px;
    padding-right: 30px;
    white-space: wrap;
    word-wrap: break-word;
    margin-top: 20px;
    justify-content: space-between !important;
}
button
{
    position: relative;
    margin-left: -54px !important;
    min-width: 45px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px;
    background: transparent;
    color: #c2c3c3 !important;
    border: none !important;
    border-radius: 10px !important;
    height: 45px;
    outline: none;
    font-weight:  bold !important;
    font-size: 14pt !important;
    box-shadow: var(--BxS);
}
.btn-work
{
    color:#0b254e !important;
}
.btn-equal
{
    color:#0b254e !important;
    height: 120px !important;
}
button:focus
{
    cursor: pointer;
    outline: none !important;
    border: none !important;

}
button:active
{
    box-shadow:var(--hoverS);
    outline: none !important;
    border: none !important;
}
button:hover
{
    color: #696a6a !important;
}
.btn-work:hover,
.btn-equal:hover
{
    color:#0b254e !important;
}
.home
{
    margin-top: 382px;
    margin-left: 72px;
    font-size: 30px;
    cursor: pointer;
    color: #0b254e;
}
.menu
{
    margin-top: 392px;
    margin-left: -275px;
    font-size: 20px;
    cursor: pointer;
    color: #0b254e;
}
.back
{
    margin-top: 392px;
    margin-left: 75px;
    font-size: 20px;
    cursor: pointer;
    color: #0b254e;
}

Interface utilisateur de la calculatrice - Neumorphisme - blanc

Recommandé

Un code par cyrillsemah

Un code par robustvariable23

Site Web de portfolio de développeur HTML

HTML

CSS

JS

Recommandé

Un code par cyrillsemah

Un code par robustvariable23

Site Web de portfolio de développeur HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS