Plusieurs exemples de petites fonctions réalisées avec du CSS pur

CSS fournit une description de style pour le langage de balisage HTML, définissant la manière dont les éléments qu'il contient sont affichés. CSS est une avancée majeure dans le domaine de la conception Web. Il peut être utilisé pour modifier un petit style afin de mettre à jour tous les éléments de page qui lui sont liés. De nos jours, CSS3 est récemment publié et basé sur CSS. Le CSS est toujours très important dans le travail front-end. Ci-dessous, nous partagerons avec vous quelques exemples de petites fonctions créées avec CSS.

CSS@supports

Tout bon développeur front-end doit effectuer des tests de fonctionnalités lorsqu'il utilise des fonctionnalités qui peuvent ne pas être disponibles dans les navigateurs. Les tests de fonctionnalités ont toujours été effectués en JavaScript, et de nombreuses personnes utilisent Modernizr, un excellent utilitaire composé de nombreux cas bien testés, pour effectuer des tests de fonctionnalités. Une nouvelle API : @supports, en tout cas, est apparue pour les développeurs, qui permet de faire des tests de fonctionnalités avec CSS. Voici quelques exemples simples du fonctionnement de @supports :

Le code est le suivant :

/* basic usage */@supports(prop:value) {/* more styles */}
/* real usage */@supports (display: flex) {p { display: flex; }}
/* testing prefixes too */@supports (display: -webkit-flex) or(display: -moz-flex) or(display: flex) 
{section {display: -webkit-flex;display: -moz-flex;display: flex;float: none;}}

Cette nouvelle fonctionnalité @supports a également une version JavaScript correspondante, mais elle a expiré. hâte de l'utiliser bientôt !

Filtres CSS

Écrivez un service qui change la teinte d'une image et vous pouvez le vendre à Facebook pour des milliards de dollars. Bien sûr, c'est une évidence, mais écrire des filtres d'image n'est pas une science. Un petit programme que j'ai écrit au cours de ma première semaine chez Mozilla (qui a remporté un prix, hein, je le dis juste) utilisait des mathématiques basées sur JS pour créer des filtres d'image à l'aide de Canvas, mais nous pouvons maintenant créer des images à l'aide de CSS Filtered.

Le code est le suivant :

/* simple filter */.myElement {-webkit-filter: blur(2px);}
/* advanced filter */.myElement {-webkit-filter: blur(2px) 
grayscale (.5) opacity(0.8) hue-rotate(120deg);}

Ce type de filtre modifie simplement l'apparence originale de l'image. Le dit filtre n'est pas utilisé lors de l'enregistrement ou de l'exportation de l'image, mais lorsque vous l'utilisez. Ceci est utile lorsque vous devez embellir une photo ou travailler sur une affiche.

Événements Pointr et clics de brique

La propriété CSS Pointer Events fournit un moyen de désactiver efficacement un élément. Pour cette raison, via JavaScript, cliquer sur un lien ne déclenchera pas d'événement Click. :

Le code est le suivant :

/* do nothing when clicked or activated */.disabled { pointer-events: none; }
/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {alert("Clicked!");});

Dans l'exemple ci-dessus, l'événement click ne se déclenchera pas en raison de la valeur CSS pointer-events. J'ai trouvé que c'était un énorme avantage, vous n'avez pas besoin de vérifier le nom de classe ou les attributs partout pour vous assurer qu'un élément est désactivé.

Réduire et développer le menu

CSS nous permet de créer des effets de transition et des animations, mais nous avons souvent besoin de bibliothèques JavaScript pour nous aider à modifier certaines choses et à contrôler les animations. Une animation très populaire est l’effet de menu pliant et agrandi. Beaucoup de gens ne savent pas qu’il peut être réalisé en utilisant uniquement CSS !

Le code est le suivant :

/* slider in open state */.slider {overflow-y: hidden;max-height: 500px; /* approximate max height */
transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}
/* close it with the "closed" class */.slider.closed {max-height: 0;}

Une utilisation intelligente de Max-height peut permettre aux éléments de s'effondrer et de s'étendre selon l'effet souhaité.

Compteur CSS

Le terme « compteur » désigne souvent quelque chose sur le Web qui nous fait rire, mais les compteurs CSS sont une autre chose qui nous fait même rire plus chose. Les compteurs CSS permettent aux développeurs d'utiliser :before et :after pour incrémenter un compteur sur des éléments spécifiés :

Le code est le suivant :

/* initialize the counter */ol.slides {counter-reset: slideNum;}
/* increment the counter */ol.slides > li {counter-increment: slideNum;}
/* display the counter value */ol.slides li:after {content: "[" counter(slideNum) "]";}

Vous voyez souvent des compteurs CSS utilisés dans les diapositives L'effet est comme une liste du contenu du formulaire.

Noms de styles CSS Unicode

Il existe de nombreux documents de bonnes pratiques CSS, et ils commencent tous par la façon de nommer les styles CSS. Vous ne verrez jamais de document indiquant d'utiliser des symboles Unicode pour nommer vos styles :

Le code est le suivant :

.ಠ_ಠ {border: 1px solid #f00;background: pink;}
.❤ {background: lightgreen;border: 1px solid green;}

Veuillez ne pas utiliser ces symboles. Sauf si vous le pouvez !

Cercle CSS

Le triangle CSS est une tâche technique, et il en va de même pour le cercle CSS. En abusant du CSS border-radius, vous pouvez créer des cercles parfaits !

Le code est le suivant :

circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* width and height can be anything, as long as they're equal */
}

Vous pouvez ajouter des dégradés à vos cercles, et vous pouvez même utiliser des animations CSS pour faire bouger vos cercles ! CSS est sur le point de disposer d'API plus unifiées pour ces formes, mais pour l'instant, vous pouvez créer des cercles de cette façon.

Ci-dessus sont quelques exemples de petites fonctions réalisées avec du CSS pur. J'espère qu'elles pourront aider tout le monde.

Recommandations associées :

Conseils pour dessiner divers graphiques de base avec CSS3

Utilisez CSS 3 pour créer une longue ombre

Quelques conseils utiles sur les fonctions CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!