Google Tarzı Arama Tasarımı

Shitric · 17 Nis 2019

Yeni sekmedeyken aklıma takıldı, yapabilir miyim acaba diye deneyeyim dedim. Yaptım herhalde

Kodları da bıraktım buraya

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        #material {
            border-radius: 50px;
            border: 1px solid lightgray;
            font-size: 12pt;
            outline: none;
            padding: 15px 30px 15px 30px;
            width: 400px;
        }
        #material:hover {
            box-shadow: 0px 1px 5px lightgray;
        }
        #image {
            margin-left: -50px;
            margin-bottom: -7px;
        }
        #image2 {
            margin-left: -55px;
            margin-bottom: -1px;
        }
    </style>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <table align="center">
        <tr>
            <td align="center"><img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="margin-bottom: 20px;"></td>
        </tr>
        <tr>
            <td>
                <input type="text" id="material" placeholder="Google'da arama yapın veya URL yazın">
                <img height="24" id="image" src="http://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png">
                <img id="image2" src="http://www.gstatic.com/inputtools/images/tia.png">
            </td>
        </tr>
    </table>
</body>
</html>

Joi · 17 Nis 2019

Buda benden gelsin

<br> yerine margin-top kullanabilirsin kardeşim

Kod:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        #material {
            border-radius: 50px;
            border: 1px solid lightgray;
            font-size: 12pt;
            outline: none;
            padding: 15px 30px 15px 30px;
            width: 520px;
            margin-top: 20px;
        }
        #material:hover {
            box-shadow: 0px 1px 5px lightgray;
        }
        #image {
            margin-left: -50px;
            margin-bottom: -7px;
        }
        #image2 {
            margin-left: -55px;
            margin-bottom: -1px;
        }
        table {
            height: 233px;
            margin-top: 89px;
        }
        .FPdoLc.VlcLAe {
            width: 571px;
            height: 70px;
            padding-top: 18px;
            z-index: 0;
        }

        input[type="submit"] {
            height: 36px;
            line-height: 27px;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
            background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
            -webkit-border-radius: 2px;
            -webkit-user-select: none;
            background-color: #f2f2f2;
            border: 1px solid #f2f2f2;
            border-radius: 4px;
            color: #5F6368;
            cursor: pointer;
            font-family: arial,sans-serif;
            font-size: 14px;
            margin: 11px 4px;
            min-width: 54px;
            padding: 0 16px;
            text-align: center;
        }

    </style>
   
    <table align="center">
        <tr>
            <td align="center"><img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="padding-top: 109px;"></td>
        </tr>
        <tr>
            <td>
                <input type="text" id="material">
                <img height="24" id="image" src="http://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png">
                <img  id="image2" src="http://www.gstatic.com/inputtools/images/tia.png">
            </td>
        </tr>
    </table>
     <center> <div class="FPdoLc VlcLAe">
     <input value="Google'da Ara" aria-label="Google'da Ara" name="btnK" type="submit">
     <input value="Kendimi Şanslı Hissediyorum" aria-label="Kendimi Şanslı Hissediyorum" name="btnI" type="submit" jsaction="sf.lck">
     </div>
     </center>
   
</body>
</html>

Shitric · 17 Nis 2019

CraweL' Alıntı:

Buda benden gelsin

<br> yerine margin-top kullanabilirsin kardeşim

Kod:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        #material {
            border-radius: 50px;
            border: 1px solid lightgray;
            font-size: 12pt;
            outline: none;
            padding: 15px 30px 15px 30px;
            width: 520px;
            margin-top: 20px;
        }
        #material:hover {
            box-shadow: 0px 1px 5px lightgray;
        }
        #image {
            margin-left: -50px;
            margin-bottom: -7px;
        }
        #image2 {
            margin-left: -55px;
            margin-bottom: -1px;
        }
        table {
            height: 233px;
            margin-top: 89px;
        }
        .FPdoLc.VlcLAe {
            width: 571px;
            height: 70px;
            padding-top: 18px;
            z-index: 0;
        }

        input[type="submit"] {
            height: 36px;
            line-height: 27px;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
            background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
            -webkit-border-radius: 2px;
            -webkit-user-select: none;
            background-color: #f2f2f2;
            border: 1px solid #f2f2f2;
            border-radius: 4px;
            color: #5F6368;
            cursor: pointer;
            font-family: arial,sans-serif;
            font-size: 14px;
            margin: 11px 4px;
            min-width: 54px;
            padding: 0 16px;
            text-align: center;
        }

    </style>
  
    <table align="center">
        <tr>
            <td align="center"><img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="padding-top: 109px;"></td>
        </tr>
        <tr>
            <td>
                <input type="text" id="material">
                <img height="24" id="image" src="http://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png">
                <img  id="image2" src="http://www.gstatic.com/inputtools/images/tia.png">
            </td>
        </tr>
    </table>
     <center> <div class="FPdoLc VlcLAe">
     <input value="Google'da Ara" aria-label="Google'da Ara" name="btnK" type="submit">
     <input value="Kendimi Şanslı Hissediyorum" aria-label="Kendimi Şanslı Hissediyorum" name="btnI" type="submit" jsaction="sf.lck">
     </div>
     </center>
  
</body>
</html>

Table a margin verebilirdim evet ama aklıma gelmedi. Teşekkürler düzenleme için

n0thingTR · 17 Nis 2019

nereye yazıcağımı bulamadım reis ツ

Joi · 17 Nis 2019

Shitric' Alıntı:
Table a margin verebilirdim evet ama aklıma gelmedi. Teşekkürler düzenleme için

Rica ederim

h4emRe · 17 Nis 2019

Sağ ol dostum güzel bir şekilde çalışıyor,

Post automatically merged: 17 Nis 2019

CraweL' Alıntı:

Buda benden gelsin

<br> yerine margin-top kullanabilirsin kardeşim

Kod:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        #material {
            border-radius: 50px;
            border: 1px solid lightgray;
            font-size: 12pt;
            outline: none;
            padding: 15px 30px 15px 30px;
            width: 520px;
            margin-top: 20px;
        }
        #material:hover {
            box-shadow: 0px 1px 5px lightgray;
        }
        #image {
            margin-left: -50px;
            margin-bottom: -7px;
        }
        #image2 {
            margin-left: -55px;
            margin-bottom: -1px;
        }
        table {
            height: 233px;
            margin-top: 89px;
        }
        .FPdoLc.VlcLAe {
            width: 571px;
            height: 70px;
            padding-top: 18px;
            z-index: 0;
        }

        input[type="submit"] {
            height: 36px;
            line-height: 27px;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
            background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
            -webkit-border-radius: 2px;
            -webkit-user-select: none;
            background-color: #f2f2f2;
            border: 1px solid #f2f2f2;
            border-radius: 4px;
            color: #5F6368;
            cursor: pointer;
            font-family: arial,sans-serif;
            font-size: 14px;
            margin: 11px 4px;
            min-width: 54px;
            padding: 0 16px;
            text-align: center;
        }

    </style>
  
    <table align="center">
        <tr>
            <td align="center"><img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="padding-top: 109px;"></td>
        </tr>
        <tr>
            <td>
                <input type="text" id="material">
                <img height="24" id="image" src="http://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png">
                <img  id="image2" src="http://www.gstatic.com/inputtools/images/tia.png">
            </td>
        </tr>
    </table>
     <center> <div class="FPdoLc VlcLAe">
     <input value="Google'da Ara" aria-label="Google'da Ara" name="btnK" type="submit">
     <input value="Kendimi Şanslı Hissediyorum" aria-label="Kendimi Şanslı Hissediyorum" name="btnI" type="submit" jsaction="sf.lck">
     </div>
     </center>
  
</body>
</html>

Eyw reis

Ara

Google Tarzı Arama Tasarımı

Shitric

Cehalet Mutluluktur

Joi

Shitric

Cehalet Mutluluktur

n0thingTR

Joi

h4emRe

Doomsday is approaching

Benzer Konular