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 présente mes créations originales, articles tendance , vêtements et décor . En cours de route, j'ai beaucoup appris 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 nécessite une courbe d'apprentissage, mais peut être accompli avec du temps et beaucoup de patience. Je vous ai donc facilité la tâche. Faisons un pas en dehors de notre programmation habituelle, réduisons-la et faisons de la programmation.
Code Shopify personnalisé gratuit ?!
Certains ont posé des questions sur le travail personnalisé et ont proposé de payer pour mes services de conception de sites Web. Je suis flatté et j'en profiterai pour 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 devient obsolète, n'hésitez pas à envoyer un message, et j'ajusterai :
Opacité CSS du conteneur de contenu de bannière :
/*Ajustez le rayon des pixels à votre guise*/
.content-conteneur
{
rayon de bordure : 8 px ;
}
CSS d’en-tête transparent et vitreux :
.entête {
arrière-plan : rgba(255, 255, 255, 0,2) ;
rayon de bordure : 16 px ;
box-shadow : 0 4px 30px rgba(0, 0, 0, 0.1);
filtre de toile de fond : flou (5 px );
bordure : 1px rgba solide (255, 255, 255, 0,3) ;
}
.header__submenu {
arrière-plan : #fffffff1 ;
}
.header-wrapper {
arrière-plan : aucun ;
bordure : aucune ;
}
Texte d'en-tête central CSS
Écran @media et (largeur minimale : 990 px) {
.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 le menu est cliqué sur Mobile CSS
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 de bannière d'image CSS personnalisé
Appliquez-le au CSS personnalisé au bas de la section de bannière d'image que vous avez choisie. Ajustez la « largeur : 90 % » à votre guise.
.bannière
{
largeur : 90 % ;
marge : 0 automatique ;
}
Copiez ma section Css de bannière d'image assez cool
Appliquez ce code au CSS personnalisé au bas de la section de bannière d'image choisie.
Écran @media et (largeur maximale : 749 px) {
.banner .banner__content {
align-items : flex-end ;
}
}
Écran @media et (largeur maximale : 749 px) {
.banner__content {
remplissage : 20 px ;
}
}
h2 {
rembourrage inférieur : 24 px ;
}
.bannière {
largeur : 90 % ;
marge : 0 automatique ;
}
Ajouter un espace de remplissage sous le formulaire d'inscription par e-mail
Appliquez ce code au CSS personnalisé au bas du formulaire d'inscription par e-mail de votre choix. Vous pouvez ajuster le « 25px » à votre guise.
.formulaire-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é au bas de votre éditeur d'en-tête.
.list-menu
{
justifier-contenu : centre ;
}
Je m'enregistrerai et mettrai à jour au fur et à mesure, et j'ajouterai également des blogs contenant d'autres fonctions. Si vous avez des recommandations ou 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.
