Sphères Avec la propriété CSS border-radius, nous pouvons faire des formes arrondies et des cercles. Ajoutons y quelques dégradés et elles sont devenues des sphères. Essayons ça, et ajoutons y un peu d’animation pour les rendre plus vivantes. Flat Design Il y a deux manières de faire des sphères en CSS. La première, c’est de créer une sphère 3D en assemblant de multiples éléments. Au lieu de cela je vais essayer une deuxième approche, utilisant les dégradés CSS pour les ombres et avec un effet 3D sur un seul élément. Démo et code cource Tous les exemples ici mentionnés peuvent être retrouvés sur mon Codepen, ou en sélectionnant les liens "Éditer dans Codepen" dans chaque exemple plus loin. Dans les exemples de code, j’ai laissé tombé les préfixes dédiés des navigateurs. Forme de base Avant d’ajouter les détails, nous créons la forme circulaire de base. Nous utilisons un élément figure ici, mais cela peut être n’importe quel élément. Un cercle apparaît. Shading 101 Dégradés linéaires Ombres & 3D Brillant
Open Icon Library - Download Page - Free/Open Icons Open Icon Library needs a new admin, if your interested in taking over please Contact me Open Icon Library: free/open icons Open Icon Library is available in many different packages, to make it easier users to get the packages right for your system, and for developers to get a package with the wanted license Icon Packages Standard Package Description: This package is recommended for normal users. ico (16x16 22x22 24x24 32x32 48x48) Full Package Description: This package is for normal users who want large icons, all formats, and extra icons not included in the standard package. png (8x8 16x16 22x22 24x24 32x32 48x48 64x64 128x128 256x256 odd), svg (scalable), ico (16x16 22x22 24x24 32x32 48x48), icns (16x16 32x32 48x48) 256x256 PNG Package Description: This package is for users who want large icons. Windows Package Description: This package is recommended for normal users. Mac Package Description: This package is for Machintosh users. Webpage Icon Package Developers packages Full developers package
Des triangles en css | Bellami Il n’existe aucune propriété permettant à un élément d’avoir une forme triangulaire. C’est pourquoi les intégrateurs avaient l’habitude d’utiliser une image en background pour former un triangle quand le design l’exigeait. Nous allons voir ensemble comment réussir à dessiner visuellement ce triangle uniquement grâce à CSS. Une histoire de bordure Obtenir 4 triangles Ne garder qu’un seul triangle Attention à ne pas surcharger le DOM inutilement L’inconvénient majeur de cette technique est que cela vous obligera dans la plupart des cas à rajouter un élément vide dans le code HTML de la page. Il est donc possible en jouant avec la propriété border d’obtenir des triangles en CSS. Cette entrée a été publiée dans CSS, avec comme mot(s)-clef(s) border, triangles.
De la géométrie avec CSS Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc. Dans cet article, je vais présenter les différentes possibilités de formes faisables en CSS (du moins une liste non exhaustive). Tous les exemples auront pour structure HTML cette base : Compatibilité : Chrome, Safari, Opera, Firefox 4, IE9.Compatibilité partielle : Firefox 3.5 et IE8 (problème avec le border-radius). 5 commentaires Article lu 102502 fois. Ici, rien de bien compliqué, il suffit de définir une largeur et une hauteur identiques pour chaque côté de notre élément HTML. Le principe est le même que le carré sauf que la largeur est plus grande que la hauteur (ou l'inverse selon l'effet désiré). Le rond est obtenu grâce à la propriété border-radius sur un élément carré. J'ai appris récemment que l'on pouvait donner deux valeurs au border-radius équivalant à l'arrondi de départ et l'arrondi d'arrivée d'un coin de bordure. Par exemple :
Dessiner des formes en CSS pur - WebJuice - 100% pur jus de web Avec l’arrivée de CSS3 sur les navigateurs et des border-radius, il devient possible de faire des formes jusqu’alors impensables. Ci-dessous sont présentes une liste non-exhaustives de formes possibles (un navigateur respectant les normes CSS3 et notamment les border-radius est nécessaires pour en apprécier la beauté ; bref presque tous sauf IE 8 et moins). Pour que ça soit compréhensible, les formes sont classées par ordre de difficultés de réalisation. Square Rectangle Circle Oval Triangle Up Triangle Down Triangle Left Triangle Right Triangle Top Left Triangle Top Right #triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; Triangle Bottom Left Triangle Bottom Right Parallelogram Trapezoid Star (6-points) Star (5-points) via Kit MacAllister Pentagon Hexagon Octagon Heart via Nicolas Gallagher Infinity via Nicolas Gallagher Diamond Egg Pac-Man Talk Bubble 12 Point Burst via Alan Johnson 8 Point Burst via Alan Johnson