Table des matières : [ cacher ]
Nos styles CSS en pleine croissance
Comme vous le savez, ce site Web a commencé comme un passe-temps et s'est rapidement transformé en une activité à temps plein. Mon site Web présente mes créations originales, articles tendance , vêtements et décor . En cours de route, j'ai appris des tonnes de choses sur la façon de personnaliser le code sur le « back-end » pour créer notre style en constante évolution. Le freestyle avec CSS, HTML et JS est une courbe d'apprentissage, mais peut être accompli avec du temps et beaucoup de patience. Je vous ai donc facilité la tâche. Sortons de notre programmation habituelle, réduisons-la et faisons un peu de programmation.
Code Shopify personnalisé gratuit ?!
Certains m'ont demandé des travaux personnalisés et ont proposé de payer mes services de conception de sites Web. Je suis flatté et j'utiliserai cela comme une opportunité de suivre les règles de Collection de Sydney . Il est tout à fait normal que nous répandions la positivité en vous proposant une section Shopify personnalisée gratuite ! C'est très simple et j'ai hâte d'ajouter d'autres articles comme celui-ci à mon blogs .
Commençons
J'ajouterai d'autres éléments à cette liste au fur et à mesure, et je ferai de mon mieux pour fournir le code le plus à jour. Si un code est rendu obsolète, n'hésitez pas à envoyer un message et je l'ajusterai :
Opacité du conteneur de contenu de la bannière CSS :
/*Ajustez le rayon des pixels à votre guise*/
.conteneur de contenu
{
rayon de la bordure : 8 px ;
}
En-tête transparent et vitreux CSS :
.en-tête {
arrière-plan : rgba(255, 255, 255, 0.2);
rayon de la bordure : 16 px ;
boîte-ombre : 0 4px 30px rgba(0, 0, 0, 0.1);
filtre d'arrière-plan : flou(5 px) ;
bordure : 1 px solide rgba(255, 255, 255, 0,3) ;
}
.header__submenu {
arrière-plan : #fffffff1 ;
}
.en-tête-wrapper {
Contexte : aucun ;
bordure : aucune ;
}
Texte d'en-tête central CSS
@media écran et (min-width: 990px) {
.header--milieu-gauche {
grille-modèle-colonnes : 1fr auto 1fr ;
espacement des colonnes : 2rem ;
}
}
Ajoutez le texte « SKU » avant le numéro SKU sur la page du produit :
.product__sku::avant
{
contenu : « SKU : » ;
}
Supprimer l'icône de fermeture du hamburger « X » lorsque l'utilisateur clique sur le menu CSS mobile
ajoutez ceci à la fin de votre base.css :
svg .icon .icon-close { affichage : aucun; }
Rendre la bannière d'image plus petite pour la section Bannière d'image CSS personnalisé
Appliquez ceci au CSS personnalisé en bas de la section de bannière d'image que vous avez choisie. Ajustez la « largeur : 90 % » à votre convenance.
.bannière
{
largeur : 90 % ;
marge: 0 auto;
}
Copiez ma section de bannière d'image plutôt cool CSS
Appliquez ce code au CSS personnalisé au bas de la section de bannière d’image choisie.
@media écran et (largeur maximale : 749 px) {
.bannière .banner__content {
aligner-éléments : flex-end ;
}
}
@media écran et (largeur maximale : 749 px) {
.banner__content {
rembourrage : 20 px ;
}
}
h2 {
rembourrage inférieur : 24 px ;
}
.bannière {
largeur : 90 % ;
marge: 0 auto;
}
Ajoutez un espace de remplissage sous le formulaire d'inscription par e-mail
Appliquez ce code au CSS personnalisé en bas du formulaire d'inscription par e-mail que vous avez choisi. Vous pouvez ajuster les « 25 px » à votre guise.
.formulaire de newsletter
{
rembourrage inférieur : 25 px ;
}
Centrez les éléments de texte de votre menu d'en-tête
Appliquez ce code au CSS personnalisé en bas de votre éditeur d’en-tête.
.liste-menu
{
justifier-contenu : centre ;
}
Je vérifierai et mettrai à jour au fur et à mesure, et j'ajouterai également des blogs contenant d'autres fonctions. Si vous avez des recommandations ou si vous recherchez quelque chose de spécifique, faites-le moi savoir dans les commentaires !
Merci d'avoir lu, j'espère que vous avez trouvé du CSS gratuit utile.
