Quel est le secret CSS de la boîte de recherche Google?

StackOverflow https://stackoverflow.com/questions/574671

  •  05-09-2019
  •  | 
  •  

Question

Je suis en train d'étudier les méthodes de Google utilise pour css créer leur ui. Je compris que le code CSS sur leur page d'accueil ne contient aucune référence à leur boîte de recherche; il semble que juste une étiquette d'entrée nue, pas une frontière, l'image d'arrière-plan ou l'une des conventions normalement utilisées pour styliser une frontière. Et pourtant, il peut afficher non seulement une teinte et une sorte de dégradé, mais il est légèrement rond et réagit également à la mise au point du curseur.

Alors, votre supposition est aussi bonne que la mienne. S'il vous plaît utiliser votre Firebug pour vérifier et me aider à aller au fond de cette énigme.

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é à connaître les techniques qu'ils ont utilisées pour styliser les frontières autour de leur zone de recherche - sans utiliser css que ce soit

.
Était-ce utile?

La solution

Utilisez-vous un Mac? Ne sont pas tous les éléments de l'interface utilisateur native ronde, lueur, et change de couleur?

Avez-vous des add-ons comme la barre d'outils Google qui pourrait être en train de modifier l'interface utilisateur de la page sans que vous puissiez le détecter?

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

lien mort ImageShack supprimé

Autres conseils

Pas de secret. Il est une zone de texte normal ... La page d'accueil de Google a toujours été célèbre minimaliste.

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;
}

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.

Maintenant que le navigateur certains comme Firefox sont capables de lire css3 u peut utiliser pour avoir un rayon d'angle, im en utilisant maintenant! bien que sa non valide par w3c encore.

Il ne semble pas qu'ils sont styliser la boîte de recherche. Mais s'ils voulaient ils pourraient simplement utiliser la balise HTML natif input. Il vous suffit de faire référence 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;
}

Ce serait juste couvrir la zone de champ de recherche. Si vous avez besoin pour couvrir le bouton, il suffit d'ajouter une classe à votre champ d'entrée 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 de input sur vous ensemble du site.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top