InMy.Live

À propos d’un code

Apparence du héros – CSS uniquement

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Effet de zoom de survol échelonné de l’image de héros – CSS uniquement

CSS uniquement. Cela ne devrait probablement pas être utilisé sur un site de production, juste pour le plaisir.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Animation de héros à la maison

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Révélation de l’image du héros

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Héros du site de voyage

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Idée de héros National Geographic

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Articles flexibles

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Héros de la parallaxe CSS

Effet de parallaxe créé avec CSS transformsable perspective propriétés.

Navigateurs compatibles : Chrome, Bord, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Héros de Pâques

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Héros du site Web

Il suffit de jouer avec la position collante pour des effets de défilement amusants.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Héros à l’honneur

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Héros – 3 motifs

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos du code

Héros à double image

Navigateurs compatibles : Chrome, Firefox, Bord, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos du code

Vagues de héros

Navigateurs compatibles : Chrome, Firefox, Bord, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos du code

Animation de héros

Navigateurs compatibles : Chrome, Firefox, Bord, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Article de héros

Utilisation de Grid pour mettre en page une carte de héros d’article.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos du code

Module Hero avec Flexbox et l’unité ‘vh’

Le héros est un module largement utilisé. Cette version est créée avec des techniques modernes comme flexbox et le vh unité. Flexbox et le vh unit permet de créer ce module avec moins de code.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Animation d’étoile CSS pour Hero

Héros diagonal div avec fond d’animation étoile CSS.

Navigateurs compatibles : Chrome, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Héros à rayures

Héros de bande CSS de stripe.com.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Dépendances : –

À propos d’un code

Héros de fond de parallaxe

Plusieurs images d’arrière-plan avec animation CSS3 créent un effet de parallaxe multi-profondeur.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos du code

Fond de héros animé

Un animé héros arrière-plan, qui peut être utilisé pour les sites de portefeuille.

Navigateurs compatibles : Chrome, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Image de héros animée avec découpage CSS

Animation avec CSS et écrêtage d’élément fixe CSS appliqué pour obtenir une animation subtile.

Navigateurs compatibles : Chrome, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Expérience de héros

Mélangez des dégradés avec un arrière-plan coloré – ayez-vous du cool héros.

Navigateurs compatibles : Chrome, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Image de héros et dégradé CSS

Image de héros avec animation de dégradé CSS.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Titres/Hero Image Typography Playground

L’explication est en haut du fichier CSS. Juste quelques polices de caractères, des classes d’assistance et quelques préréglages pour tester facilement la typographie des en-têtes.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Héros teinté

Un moyen rapide de teinter un typique héros dans les sites Web. Utilisez simplement une pseudo classe au lieu d’une autre div.tint:
.hero:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 7, 100, .6); }.

Navigateurs compatibles : Chrome, Bord, Firefox, Opéra, Safari

Dépendances : –