Construire rapidement une page Swish Teaser avec CSS3

Dans ce didacticiel, vous apprendrez à créer une page d'accroche en utilisant uniquement du CSS, aucune image ou même une conception Photoshop. De nombreux sites Web et applications à venir bénéficient d'une grande publicité grâce aux teasers. Il s'agit donc d'un concept utile à ajouter à votre boîte à outils. Utilisez-le pour n'importe quelle application ou site Web prêt à être lancé..

Étape 1: le balisage HTML

Le code HTML de la page d'accroche est assez simple. Nous avons juste un conteneur avec notre texte d'introduction et nos entrées.

      L'application arrive bientôt.            App.
  Cette application étonnante va changer votre vie. Abonnez-vous pour être informé des disponibilités ou suivez-nous sur Twitter.

Étape 2: Positionnement et dimensionnement de nos éléments

Donnons à notre page une structure. Nous commençons par les bases et plaçons le conteneur au centre de la page. Nous utiliserons un positionnement de 50%, puis des marges négatives pour ramener l'objet à la moitié de sa largeur et de sa hauteur..

 html, body width: 100%; hauteur: 100%; famille de fontes: "Helvetica Neue", Helvetica, sans serif; couleur: # 444; -webkit-font-lissage: antialiasé;  #container position: fixed; largeur: 500px; hauteur: 300px; en haut: 50%; à gauche: 50%; marge supérieure: -150 pixels; marge gauche: -250px; text-align: center;

Ensuite, nous positionnons le texte et les entrées, en utilisant des sélecteurs d'attribut pour cibler l'e-mail et soumettre les entrées séparément.

 h1 taille de la police: 90px;  p largeur: 80%; taille de police: 23px; hauteur de ligne: 1.3em; marge: 1.1em auto; text-align: center;  #subscribe margin: 0 auto; text-align: center;  input [type = email] width: 90%; rembourrage: 15px; marge: 0 auto;  input [type = submit] position: absolute; marge gauche: -105px; marge supérieure: 5px; rembourrage: 10px; largeur: 100px; hauteur: 50px;

Étape 3: Styliser le texte

Styliser le texte de cette page est assez simple. Nous voulons que le nom contraste avec l'arrière-plan, nous allons donc le rendre blanc. Le texte est important, mais nous souhaitons que les visiteurs retiennent le nom de notre produit afin de ne pas le rendre aussi prononcé. Le lien Twitter est souligné, indiquant qu'il s'agit d'un lien..

Tout d'abord, le texte principal:

 h1 taille de la police: 90px; poids de police: gras; couleur: #fff; text-shadow: 0 1px 4px # 000; marge supérieure: 20px;  p largeur: 80%; taille de police: 23px; hauteur de ligne: 1.3em; couleur: #fff; marge: 1.1em auto; text-align: center; texte-ombre: 0 0 2px rgba (0, 0, 0, 0,9);

Puis le lien Twitter:

 p a color: #fff; bordure-bas: solide 2px # 2da1ec;

Étape 4: Styliser l'arrière-plan

Passons maintenant à la partie amusante: donner aux objets de notre page un extra je ne sais quoi. Nous allons commencer par créer un joli fond dégradé. Si vous êtes un utilisateur Mac, vous pouvez vous appuyer sur GradientApp pour faire le travail dur pour vous. Sinon, rendez-vous sur CSS3 Please! pour avoir une idée de la syntaxe.

 html, body width: 100%; hauteur: 100%; famille de fontes: "Helvetica Neue", Helvetica, sans serif; couleur: # 444; -webkit-font-lissage: antialiasé; arrière-plan: # 000222; arrière-plan: -moz-linear-gradient (haut, # 000222 0%, # 4b637c 100%); arrière-plan: -webkit-gradient (linéaire, gauche haut, gauche bas, couleur-stop (0%, # 000222), couleur-stop (100%, # 4b637c)); arrière-plan: -webkit-linear-gradient (haut, # 000222 0%, # 4b637c 100%); arrière-plan: -o-linear-gradient (haut, # 000222 0%, # 4b637c 100%); arrière-plan: -ms-linear-gradient (haut, # 000222 0%, # 4b637c 100%); arrière-plan: gradient linéaire (haut, # 000222 0%, # 4b637c 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 000222", endColorstr = "# 4b637c", GradientType = 0);

Étape 5: Mise en forme du formulaire d'abonnement

Le formulaire d'abonnement est au centre de notre page, car nous souhaitons que les visiteurs sachent quand notre incroyable produit sera publié. Nous voulons que ce soit le centre de la page, après le nom ou le logo.

Nous commençons par styliser l’espace réservé (styles spécifiques à Mozilla et Webkit) et en définissant une taille de police:

 :: - webkit-input-placeholder color: rgba (255, 255, 255, 0.4);  :: - moz-input-placeholder color: rgba (255, 255, 255, 0.4);  input font-family: "Helvetica Neue", Helvetica, sans-serif; taille de police: 25px;

Donnons maintenant au champ et au bouton un peu de couleur et de profondeur:

 input [type = email] outline: none; largeur: 90%; rembourrage: 15px; marge: 0 auto; couleur: #fff; bordure: aucune; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; arrière-plan: rgba (0, 0, 0, 0,3); -webkit-box-shadow: encart 0 0 5px rgba (0, 0, 0, 0.9); -moz-box-shadow: encart 0 0 5px rgba (0, 0, 0, 0.9); -o-box-shadow: encart 0 0 5px rgba (0, 0, 0, 0.9); encadré: encadré 0 0 5px rgba (0, 0, 0, 0,9);  input [type = submit] position: absolute; marge gauche: -105px; marge supérieure: 5px; taille de police: 25px; couleur: # 222; text-shadow: 0 1px 0 #fff; rembourrage: 10px; largeur: 100px; hauteur: 50px; bordure: aucune; arrière-plan: # f0f0f0; arrière-plan: -moz-linear-gradient (haut, # f0f0f0 0%, # c3d7ff 100%); arrière-plan: -webkit-gradient (linéaire, gauche haut, gauche bas, couleur-stop (0%, # f0f0f0), couleur-stop (100%, # c3d7ff)); arrière-plan: -webkit-linear-gradient (haut, # f0f0f0 0%, # c3d7ff 100%); arrière-plan: -o-linear-gradient (haut, # f0f0f0 0%, # c3d7ff 100%); arrière-plan: -ms-linear-gradient (haut, # f0f0f0 0%, # c3d7ff 100%); arrière-plan: dégradé linéaire (haut, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-box-shadow: 0 0 5px rgba (0, 0, 0, 1), encadré 0 1px 0 rgba (255, 255, 255, 0,3); -moz-box-shadow: 0 0 5px rgba (0, 0, 0, 1), encadré 0 1px 0 rgba (255, 255, 255, 0,3); -o-box-shadow: 0 0 5px rgba (0, 0, 0, 1), encadré 0 1px 0 rgba (255, 255, 255, 0,3); box-shadow: 0 0 5px rgba (0, 0, 0, 1), encart 0 1px 0 rgba (255, 255, 255, 0,3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; curseur: pointeur;

Étape 6: Ajout de transitions CSS

Ajoutons quelques jolies transitions CSS pour attirer l'attention des visiteurs..

Tout d'abord, nous allons ajouter les états de survol et actifs au lien Twitter et aux entrées:

 p a color: #fff; bordure-bas: solide 2px # 2da1ec;  p a: survol color: # 2da1ec; border-bottom: 2px solid #fff;

 input [type = email] outline: none; largeur: 90%; rembourrage: 15px; marge: 0 auto; couleur: #fff; bordure: aucune; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; arrière-plan: rgba (0, 0, 0, 0,3); -webkit-box-shadow: encart 0 0 5px rgba (0, 0, 0, 0.9); -moz-box-shadow: encart 0 0 5px rgba (0, 0, 0, 0.9); -o-box-shadow: encart 0 0 5px rgba (0, 0, 0, 0.9); encadré: encadré 0 0 5px rgba (0, 0, 0, 0,9);  entrée [type = email]: survol background: rgba (0, 0, 0, 0.5);  input [type = email]: focus -webkit-box-shadow: encart 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); -moz-box-shadow: encart 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); -o-box-shadow: encart 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); encadré: encadré 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); arrière-plan: rgba (0, 0, 0, 0,6);  input [type = submit] position: absolute; marge gauche: -105px; marge supérieure: 5px; taille de police: 25px; couleur: # 222; text-shadow: 0 1px 0 #fff; rembourrage: 10px; largeur: 100px; hauteur: 50px; bordure: aucune; arrière-plan: # f0f0f0; arrière-plan: -moz-linear-gradient (haut, # f0f0f0 0%, # c3d7ff 100%); arrière-plan: -webkit-gradient (linéaire, gauche haut, gauche bas, couleur-stop (0%, # f0f0f0), couleur-stop (100%, # c3d7ff)); arrière-plan: -webkit-linear-gradient (haut, # f0f0f0 0%, # c3d7ff 100%); arrière-plan: -o-linear-gradient (haut, # f0f0f0 0%, # c3d7ff 100%); arrière-plan: -ms-linear-gradient (haut, # f0f0f0 0%, # c3d7ff 100%); arrière-plan: dégradé linéaire (haut, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-box-shadow: 0 0 5px rgba (0, 0, 0, 1), encadré 0 1px 0 rgba (255, 255, 255, 0,3); -moz-box-shadow: 0 0 5px rgba (0, 0, 0, 1), encadré 0 1px 0 rgba (255, 255, 255, 0,3); -o-box-shadow: 0 0 5px rgba (0, 0, 0, 1), encadré 0 1px 0 rgba (255, 255, 255, 0,3); box-shadow: 0 0 5px rgba (0, 0, 0, 1), encart 0 1px 0 rgba (255, 255, 255, 0,3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; curseur: pointeur;  input [type = submit]: survol -webkit-box-shadow: 0 0 10px rgba (0, 0, 0, 0.9); -moz-box-shadow: 0 0 10px rgba (0, 0, 0, 0.9); -o-box-shadow: 0 0 10px rgba (0, 0, 0, 0,9); boîte-ombre: 0 0 10px rgba (0, 0, 0, 0,9); largeur: 125px; marge gauche: -130px;  input [type = submit]: active background: # c3d7ff; arrière-plan: -moz-linear-gradient (haut, # c3d7ff 0%, # f0f0f0 100%); arrière-plan: -webkit-gradient (linéaire, gauche haut, gauche bas, couleur-stop (0%, # c3d7ff), couleur-stop (100%, # f0f0f0)); arrière-plan: -webkit-linear-gradient (haut, # c3d7ff 0%, # f0f0f0 100%); arrière-plan: -o-linear-gradient (haut, # c3d7ff 0%, # f0f0f0 100%); arrière-plan: -ms-linear-gradient (haut, # c3d7ff 0%, # f0f0f0 100%); arrière-plan: dégradé linéaire (haut, # c3d7ff 0%, # f0f0f0 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# c3d7ff", endColorstr = "# f0f0f0", GradientType = 0);

Ensuite, nous ajoutons les règles de transition:

 p a color: #fff; bordure-bas: solide 2px # 2da1ec; -webkit-transition: tout le confort .4s; -moz-transition: tout le confort .4s; -o-transition: tout .4s facilité; transition: tout .4s facilité;

 entrée font-family: "Helvetica Neue", Helvetica, sans serif; taille de police: 25px; -webkit-transition: tout le confort .4s; -moz-transition: tout le confort .4s; -o-transition: tout .4s facilité; transition: tout .4s facilité;

Étape 7: Animations CSS

Nous pouvons également ajouter de jolies animations CSS3 pour un effet supplémentaire lors du chargement de la page. Il est conseillé d'utiliser des animations CSS pour compléter votre conception. pas une partie intégrante de celui-ci. La prise en charge des animations est encore rare et vous devez vous garder de compliquer votre conception pour le plaisir de le faire..

Ceci dit, Animate.css de Dan Eden est une bibliothèque d’animation CSS très utile. Vous pouvez l'ajouter comme indiqué dans le document d'origine au début du didacticiel, ou l'importer dans votre feuille de style, si vous préférez:

 @import url (animate.css);

Il existe une variété de belles animations à choisir, mais je vais ajouter le BounceInDown animation. Nous l'appliquons à notre élément (dans ce cas le conteneur) comme suit:

 #container position: fixed; largeur: 500px; hauteur: 300px; en haut: 50%; à gauche: 50%; marge supérieure: -150 pixels; marge gauche: -250px; text-align: center; -webkit-animation-name: bounceInDown; -webkit-animation-fill-mode: les deux; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linéaire; -moz-animation-name: bounceInDown; -moz-animation-fill-mode: les deux; -moz-animation-duration: 1.5s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linéaire; nom-animation: bounceInDown; animation-fill-mode: les deux; animation-durée: 1.5s; animation-iteration-count: 1; animation-timing-function: linéaire;

Si vous voulez changer l'animation, il vous suffit de changer le -nom-animation au nom de l'animation que vous souhaitez.

Étape 8: Aller plus loin

Ce n’est pas une conception sensible, loin de là, mais vous voudrez peut-être ajouter quelques requêtes multimédia au bas de votre CSS pour prendre en charge les périphériques plus petits. Pensez à rendre l'élément conteneur plus étroit pour les écrans plus petits et à modifier la largeur ou le positionnement des entrées.

Pour permettre à notre formulaire d'inscription d'ajouter des adresses électroniques à une liste, nous pourrions le connecter à un service de courrier électronique, tel que MailChimp. Je ne vais pas expliquer cela en détail, car cet article le démontre parfaitement.

Si vous souhaitez ajouter une validation au formulaire, vous pouvez consulter ce tutoriel..

Conclusion

Construire une page de teaser rapide comme celle-ci est essentiel pour la publicité avant le lancement d'un site Web ou d'un produit. Cela n’a pas besoin d’être complexe, comme le montre cette solution CSS pure.

J'espère que vous avez appris quelque chose de ce tutoriel, merci d'avoir lu!

Création de sites web