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

Google Tarzı Arama Tasarımı

Shitric

Cehalet Mutluluktur

Joi

Shitric

Cehalet Mutluluktur

n0thingTR

Joi

h4emRe

Doomsday is approaching

Benzer Konular

Google Tarzı Arama Tasarımı

Shitric

Cehalet Mutluluktur

Joi

Shitric

Cehalet Mutluluktur

n0thingTR

Joi

h4emRe

Doomsday is approaching

Benzer Konular

Privacy & Transparency

Privacy & Transparency