background preloader

De la géométrie avec CSS

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 : Related:  CSSweb code

Pompage.net : le web design puisé à la source Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch The tough economic times on Tatooine hit everyone hard, including the Jawas. Delivering a fast experience on the web usually involves reducing server response time, minification of CSS/JS/HTML and an optimisation of images and above-the-fold content. We can further minimize the latency caused by stylesheet loading by removing unused CSS rules delivered to the client. In this write-up, we’ll take a look at build tasks you can use to remove unused CSS in your pages. Before we begin, I thought it would be useful to share some success stories just to demonstrate that the tools here can be used to make a difference. Unused CSS is a particular problem when working with a heavy modern UI framework such as Twitter Bootstrap, Zurb Foundation or Adobe TopCoat. This is a problem that’s been previously highlighted by the PageSpeed team, who include removing unused CSS as part of their speed recommendations for the web: UnCSS Using grunt-uncss Testing As you can see, both sites look identical. Conclusions

jQuery UI Modèles de menus CSS Voici des modèles de menus de sites web réalisés en feuilles de styles CSS sans tableaux. Structure des menus Les menus sont structurés sous forme de listes : listes non ordonnées (ul, li) ou listes de définition (dl, dt, dd) pour les menus déroulants ou menus spéciaux avec titres et sous-parties. Vous êtes invités à voir la source HTML des menus avec un clic droit / "afficher source". Normes et Standards Tous les menus de la liste sont conformes aux Standards de langage actuel (XHTML Strict) tels qu'ils sont définis par le W3C. L'ensemble des menus est compatible avec la plupart des navigateurs internet respectant les Standards. Galerie de menus CSS : Horizontal simple 1 Vertical simple 1 Puces 1 Boutons 1 Graphique 1 : Médiéval Graphique 2 : Expérimental Graphique 3 : Portrait Graphique 4 : Smileys Graphique 5 : Coquelicots Graphique 6 : Minou Graphique 7 : Indéfinissable ! Menu Graphique 8 : Venise Menu Graphique 9 : Kitsch

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

Rotation d'un élément en CSS3 (rotate) La propriété transform associé à l'argument rotate() permet d'obtenir une rotation de l'élément auquel elle est assigné. L'argument de rotate exprimé en degré (deg) correspond à la valeur de l'angle de rotation et peut être également négatif pour inverser l'angle de rotation. Selon le navigateur utilisé, il faut préfixer la propriété. Exemple : transform:rotate(50deg); -ms-transform:rotate(50deg); /* Internet Explorer */ -moz-transform:rotate(50deg); /* Firefox */ -webkit-transform:rotate(50deg); /* Safari et Chrome */ -o-transform:rotate(50deg); /* Opera */ Note : les exemple ci-dessous affichent une image avec un degré d'inclinaison positif ou négatif. Rotation avec un angle positif : Ce qui donne comme résultat : Rotation avec un angle négatif : Vous pouvez appliquer la transformation à presque n'importe quel tag HTML et vous amusez à conjuguer avec d'autres propriétés CSS comme le "hover" dans cet exemple

Avoiding Faux Weights And Styles With Google Web Fonts Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now! If you’re using Google Web Fonts on your websites, then there’s a very good chance that 1 in 5 visitors are seeing faux bold and italic versions of your fonts — even if you correctly selected and used all of the weights and styles. (As of 21 May 2012, StatCounter1 reports that Internet Explorer 7 or 8 was used for 19.4% of the 45 billion page views collected in February, March and April 2012.) As an experienced print and Web typographer, I embrace and use the term “font” when talking about Web fonts; it’s the term used in CSS syntax and by a myriad of Web font providers. Faux Bold And Italic Fonts Are Stretched And Slanted Link Any designer who loves type will tell you that faux bold and italic aren’t beautiful.

30 Pure CSS Animation Snippets & Demos Open source code has ushered in a new era of frontend web development. Beginners and experts alike can save time and stress by working with pre-built code snippets. The following gallery consists of 30 different snippets for creating animated effects with pure CSS. All of these code snippets can be found in online cloud IDE platforms. Also be sure to check if there are any libraries included with each snippet, or if any CSS code has been compiled using SASS or LESS. Read more: The latest CSS Animation trends in web design Gooey Menu By Lucas Bebber Toggle a circular animated menu with icons using pure CSS animation. Animated Map Marker By Andreas Storm This map marker drops in like the iOS pin icon and continues to animate an outward ripple effect. Blurred Text By Nick Mkrtchyan Ever wanted to create a dynamic HTML/CSS blurry-to-clear text effect? Loading Animations By Manoz Cloud Icons By Dustin Boersma Fade-in animations can really spice up any layout. Hop Over Badges By Paul Foster

Related: