Share
Il y a quelques jours, j'ai reçu mon invitation à Google Music. Lors de la navigation dans l'application, j'ai remarqué une astuce minuscule mais intéressante qu'ils utilisent pour créer des onglets et des bordures diagonales avec du CSS ancien. Je vais vous montrer comment faire la même chose dans vos projets aujourd'hui!
Nous commençons avec un balisage simple.
Démo Nouvelle musiqueBonjour à tous!
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nous allons garder cette démo aussi simple que possible.
Ensuite, uniquement pour la mise en page, appliquons une couleur de fond et un peu d’espacement à la corps élément.
body background: # e3e3e3; famille de polices: sans-serif; largeur: 400px; marge: auto 100px;
Maintenant, nous allons styliser quelque peu la balise d'ancrage - appliquer une nouvelle couleur, la mettre en gras, ajouter des bordures, etc..
un padding: 10px; texte-décoration: aucun; Couleur blanche; poids de police: gras; bloc de visualisation; bordure droite: 30px rouge uni; bordure inférieure: solide 30px # 4c4c4c;
Remarquez comment, lorsque vous définissez de grandes largeurs de bordure, au point d'intersection des deux, une ligne diagonale est créée? Je me demande si nous pouvons utiliser cette intersection comme un bord d'onglet? Essayons de réduire le la taille à zéro.
un padding: 10px; texte-décoration: aucun; Couleur blanche; poids de police: gras; bloc de visualisation; bordure droite: 30px rouge uni; bordure inférieure: solide 30px # 4c4c4c; hauteur: 0;
Se rapprocher! Peut-être que si nous ajustons maintenant la hauteur de ligne de la balise anchor, nous pourrons adapter le texte à cette zone!
un padding: 10px; texte-décoration: aucun; Couleur blanche; poids de police: gras; bloc de visualisation; bordure droite: 30px rouge uni; bordure inférieure: solide 30px # 4c4c4c; hauteur: 0; hauteur de ligne: 50px;
Nous y arrivons! Mais, certainement, nous n’avons pas besoin de cette vilaine bordure rouge à droite. Y a-t-il un moyen de spécifier qu'il devrait recevoir le corpsla couleur d'arrière-plan de sans rappeler la valeur hexadécimale? Oui! Nous utilisons le transparent mot clé à cet effet.
un padding: 10px; texte-décoration: aucun; Couleur blanche; poids de police: gras; bloc de visualisation; border-right: 30px plein transparent; bordure inférieure: solide 30px # 4c4c4c; hauteur: 0; hauteur de ligne: 50px;
Le problème évident, à ce stade, est que cela semble un peu étrange lorsque l’arrière-plan s’étend sur toute la largeur du conteneur. L’instinct naturel pourrait être de mettre à jour le afficher à en ligne. Cependant, comme le montre l'image ci-dessous, cela ne fonctionnera pas.
Nous avons besoin de l'élément pour conserver sa bloc-comme la nature afin d'honorer la 0 la taille. La réponse à ce dilemme est d'utiliser affichage: inline-block;, ou pour flotte la balise d'ancrage, puis clair les éléments qui le suivent. Nous allons utiliser l'ancien.
un padding: 10px; texte-décoration: aucun; Couleur blanche; poids de police: gras; affichage: inline-block; border-right: 30px plein transparent; bordure inférieure: solide 30px # 4c4c4c; hauteur: 0; hauteur de ligne: 50px;
Beaucoup mieux!
Enfin, appelons le div en dessous un peu, et nous serons à peu près fini!
div border: 1px solid # 4c4c4c; bordure supérieure: solide 3px # 4c4c4c; rembourrage: 20px;
En safari 
Dans Firefox Euh oh. Nous avons un problème. Il semble que Firefox et Webkit ne s’entendent pas exactement sur la manière de restituer des éléments sans hauteur et d’afficher des bloc en ligne.
Sur une note occasionnelle, celui-ci m'a eu un peu confus. Sans recourir à des hacks, je ne pouvais pas obtenir de Firefox et de Chrome le rendu exact de la mise en page. Si vous trouvez un moyen, faites le moi savoir dans les commentaires! Mise à jour - reportez-vous aux commentaires pour une solution de contournement.
Il existe des moyens de cibler les navigateurs Webkit avec CSS, mais il est important pour moi de noter que de tels trucs ne devraient être utilisés qu'en dernier recours. En d'autres termes, n'essayez pas cela à la maison, kiddos (sauf si vous devez le faire). Dans notre cas, il semble qu'il serait plus intelligent d'utiliser flottes pour accomplir cette mise en page. Néanmoins, soyons dangereux et expérimentons quelques techniques alternatives.
Beaucoup ignorent que les requêtes multimédias peuvent être utilisées pour cibler les navigateurs Webkit. Regardez ce qui se passe lorsque nous utilisons une propriété spécifique au webkit comme condition de la requête multimédia.?
@media screen et (-webkit-animation) a margin-bottom: -4px;
Ta da! Ça marche. Rappelez-vous cependant: n'utilisez cette astuce que si vous n'avez pas d'autre choix.!
C'est une technique assez simple, mais néanmoins, nous devrions tous en avoir dans nos ceintures à outils. Avez-vous utilisé de telles astuces comme celle-ci dans vos projets? Faites-moi savoir dans les commentaires!
Accentsconagua