Comment créer un logo de flux RSS avec CSS3
Le logo de flux RSS est l’un des logos les plus utilisés dans la conception Web, en raison de la fonction qu’il renvoie. Vous avez vu de nombreux tutoriels sur la création du logo de flux RSS à l'aide d'un logiciel graphique tel que Photoshop, mais qu'en est-il dessiner purement en utilisant CSS3? Oui, vous m'avez entendu :-)
Dans cette opportunité, je voudrais vous montrer comment créer facilement un logo de flux RSS standard avec uniquement du CSS3. Suivez donc le didacticiel avec des étapes détaillées et des graphiques pour obtenir votre premier logo de flux CSS3.!
Voici un aperçu de ce que vous allez créer dans une minute. Vous pouvez également télécharger les fichiers source à la fin du tutoriel..
Étape 1
Créez un fichier HTML, insérez le code suivant dans le fichier s'il est complètement vide.
Mon premier logo de flux RSS CSS3 - Insérez votre code HTML ici -
Étape 2
Insérez le code ci-dessous dans le fichier HTML pour créer une boîte de flux..
HTML pour la boîte de flux
CSS pour la boîte de flux
span.feed-box display: block; largeur: 200px; hauteur: 200px; marge: 0 auto; arrière-plan: # F9A004; box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, # C27C03, 6px 6px 0 # C27C3; -webkit-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, # C27C03, 6px 6px 0 # C27C03; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; span.feed-box * float: right; bloc de visualisation;
Voici le résultat que vous obtiendrez:
Étape 3
Nous allons dessiner une autre boîte qui se trouve dans la première boîte de flux, insérez donc le code HTML ci-dessous dans le code HTML de la première boîte de flux. Nous allons également ajouter la frontière comme barrière ici.
HTML pour les petites boîtes de flux
CSS pour les plus petites boîtes d'alimentation
span.feed-box .feed-box-in border: 4px solid # FFC563; largeur: 184px; hauteur: 184px; marge: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; /* débordement caché; * /
Voici le résultat que vous obtiendrez:
Étape 4
Dans cette étape, nous allons faire 1/4 grand cercle. Mettez le code HTML de 1/4 big circle dans le code HTML de la plus petite boîte de flux, et voici son code:
HTML pour 1/4 Big Circle
CSS pour 1/4 Big Circle
span.feed-box .feed-box-in .feed-quart-cercle-grand marge: 16px 16px 0 0; largeur: 260px; hauteur: 260px; bordure: solide 30px # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; border-radius: 260px;
Voici le résultat que vous obtiendrez:
Étape 5
Nous allons faire le 1/4 petit cercle maintenant, mettez le code HTML ci-dessous dans le code HTML du grand cercle.
HTML pour 1/4 petit cercle
CSS pour 1/4 petit cercle
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small marge: 16px 16px 0 0; largeur: 176px; hauteur: 176px; bordure: solide 26 px # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; border-radius: 176px
Voici le résultat que vous obtiendrez:
Étape 6
À l'étape 6, le plus petit cercle sera créé à l'intérieur du petit cercle. Mettez donc son code HTML dans le code HTML du petit cercle..
HTML pour le plus petit cercle
CSS pour le plus petit cercle
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle marge: 24px 24px 0 0; arrière-plan: # FFDEA5; largeur: 70px; hauteur: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px
Voici le résultat que vous obtiendrez:
La touche finale
Rechercher le code, /* débordement caché; * / puis remplacez par ce code, débordement caché;, alors oui! Vous venez d'obtenir un logo CSS3 RSS Feed!
Bonus: Ajouter un effet de survol
Vous ne voudrez pas que votre logo de flux RSS soit sans effet de survol magique, n'est-ce pas? Ajoutez simplement le style CSS ci-dessous pour y parvenir!
CSS pour effet de survol
span.feed-box: survol background: # 07C103; box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -moz-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, # 058E02, 6px 6px 0 # 058E02; span.feed-box: survolez .feed-box-in border-color: # 58FC55; span.feed-box: survoler .feed-box-in .feed-quart-cercle-grand, span.feed-box: survol .feed-box-dans .feed-quart-cercle-grand .feed-quart-cercle -petit border-color: # B9FFB7; span.feed-box: survolez .feed-box-in .feed-quart-cercle-grand .feed-quart-cercle-petit .feed-cercle background: # B9FFB7;
Aperçus et téléchargements
Voici des aperçus du logo de flux CSS3 de tailles et de styles différents. Si vous ne pouvez pas réaliser certaines étapes, vous pouvez également télécharger les fichiers source..
- Aperçu du logo RSS CSS3 (grand)
- Aperçu du logo RSS CSS3 (moyen)
- Aperçu du logo RSS CSS3 (petit)
- Aperçu du logo RSS CSS3 (moyen, inversé)
- Télécharger les fichiers source CSS Logo RSS (.Zip *: français)
Note de l'éditeur: Cet article est écrit par Irham Kendeni pour Hongkiat.com. Irham, également connu sous le nom d'Indaam, est un concepteur et développeur Web indonésien. Il aime aussi le développement de thèmes CSS et WordPress.
