Quel est le secret CSS du champ de recherche Google?

J'étudie les méthodes css que Google utilise pour créer son interface utilisateur. J'ai réalisé que le code css sur leur page d'accueil ne contient aucune référence à leur boîte de recherche; il semble juste une étiquette d'entrée nue, sans bordure, sans image d'arrière-plan ou avec l'une des conventions normalement utilisées pour styliser une bordure. Et pourtant, il peut afficher non seulement une teinte et une sorte de dégradé, mais il est légèrement arrondi et réagit également au focus du curseur. Donc, votre estimation est aussi bonne que la mienne. S'il vous plaît utilisez votre Firebug pour le vérifier et m'aider à aller au fond de cette énigme.Quel est le secret CSS du champ de recherche Google?

http://www.google.com/

EDIT: Pour être clair, je ne cherche pas à faire un jugement esthétique. Bien que je pense que le minimalisme de la page d'accueil de Google est fantastique, je suis vraiment intéressé de découvrir les techniques qu'ils ont utilisées pour styliser les frontières autour de leur boîte de recherche - sans utiliser de css quoi que ce soit.

Source

2009-02-22 picardo

La simplicité de leur page d'accueil est ce qui m'a fait changer de google d'excite.com (environ 2000). À l'époque des modems 14.4, c'était rafraîchissant d'avoir une page de recherche que vous n'aviez pas à attendre. Rien, mais rien, mais la recherche. –

Utilisez-vous un mac? Tous les éléments de l'interface utilisateur natifs ne sont-ils pas arrondis, brillants et ne changent pas de couleur?

Avez-vous des modules complémentaires comme la barre d'outils Google qui pourrait modifier l'interface utilisateur de la page sans que vous puissiez la détecter?

Editer: La technique demandée dans la question n'a vraiment rien à voir avec CSS et tout ce qui a trait au navigateur. La saisie de texte sur la page d'accueil de Google n'a pas de style CSS appliqué et est donc laissée au navigateur pour décider à quoi il ressemble. Voici à quoi il ressemble lorsque le champ a le focus dans Google Chrome:

lien ImageShack mort enlevé

Source

2009-02-22 09:59:12

Non, je suis sous Windows Vista. Pas de barre d'outils Google non plus. Je l'ai vérifié dans différents navigateurs et il semble la plupart du temps la même chose, sauf dans Google Chrome, où la mise au point de la frontière prend une teinte orange. – picardo

Ah! Malheureusement, il n'y a pas de magie CSS, c'est juste ce que les entrées de texte ressemblent dans Chrome. –

Oh, mec. Bien sûr. Ils utilisent les styles natifs du navigateur. Ce qui n'apparaît apparemment pas dans Firebug. Probablement je pourrais les trouver dans chrome.css, tho. Ha. Merci! – picardo

Pas de secret. C'est une boîte de texte normale ... La page d'accueil de Google a toujours été minimaliste.

Source

2009-02-22 09:58:34 cletus

Merci pour la réponse, mais j'essaie d'apprendre la technique qu'ils ont utilisée pour créer l'effet de bordure. – picardo

Je ne suis pas sûr de ce que vous voyez, mais je vois une boîte de texte plain vanilla. – cletus

De toute façon, c'est ce que nous essayons de vous dire: il n'y a rien de spécial à ce sujet. Quelque chose de spécial que vous voyez est soit le résultat de votre système d'exploitation, votre navigateur, un plug-in d'une certaine description ou, bien, votre imagination. – cletus

Il est tout au sujet de Chrome, il applique un effet de lumière extérieure lorsque vous vous concentrez sur une zone de texte avec ce navigateur.

Source

2009-02-22 10:40:15

pas sûr de leur page d'accueil, mais ils font la même chose dans Gmail, et il y a CSS impliqué:

.mFwySd:focus 
{ 
border:2px solid #73A6FF !important; 
margin:0 !important; 
outline-color:-moz-use-text-color !important; 
outline-style:none !important; 
outline-width:0 !important; 
} 

.mFwySd { 
background-color:#FFFFFF; 
border-color:#666666 #CCCCCC#CCCCCC; 
border-style:solid; 
border-width:1px; 
color:#000000; 
}

Source

2009-02-22 10:50:16

Voici un lien utile pour utiliser ce CSS avec IE: http://cf-bill.blogspot.com/2005/05/styling-all-input-typetext-webpage.html –

Il ne semble pas qu'ils sont styliser la boîte de recherche. Mais s'ils le voulaient, ils pourraient simplement utiliser la balise HTML native input. Il suffit de le référencer dans le fichier CSS.

input { 
    padding:???; 
    margin:???; 
    background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0; 
    color:#??????; 
    text-align:????; 
    font:normal ?em/?em arial; 
}

Cela ne couvrirait que la zone de champ de recherche. Si vous avez besoin de couvrir le bouton, ajoutez simplement une classe à votre champ de saisie de bouton.

J'utilise toujours .btn

input.btn { 
    padding:???; 
    margin:???; 
    background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0; 
    color:#??????; 
    text-align:????; 
    font:normal ?em/?em arial; 
}

Maintenant, cela devrait vous donner un contrôle total sur tous les domaines input sur vous ensemble du site.

Source

2009-03-31 16:10:22

Maintenant que certains navigateurs tels que firefox sont capables de lire css3 vous pouvez l'utiliser pour avoir un rayon de coin, je l'utilise maintenant! Bien que ce n'est pas encore valide par W3C.

Source

2010-02-15 02:59:22 hadith

Quel est le secret CSS du champ de recherche Google?

Répondre

Questions connexes