Ce que vous avez toujours voulu savoir sur CSS Aujourd’hui, c’est un fait: tout le monde connaît et utilise CSS. Et c’est tant mieux! Cependant, bien que le langage en lui-même soit plutôt simple, certains aspects peuvent sembler encore obscurs. Cet article fait suite à une présentation que j'ai donnée lors de la Kiwi Party 2013, puis lors des MSTechDays 2014. CSS, c’est simple «Le langage CSS, c’est très simple». Ne vous cachez pas, je vous vois… On s'est tous déjà dit: <td>CSS Sucks</td>! La cascade CSS Le C de CSS signifie Cascading (cascade en français), ça tout le monde le sait. les feuilles Author: les devs webles feuilles User: les utilisateursles feuilles UA: les styles navigateurs (modifiés éventuellement par les réglages des utilisateurs) La cascade CSS applique alors un poids à chaque déclaration en suivant cet ordre: récupération de toutes les déclarations CSS pour le média cibletri des déclarations suivant cet ordre UAUserAuthorAuthor ! On remarque que les styles utilisateurs ! Spécificité des sélecteurs Les valeurs CSS
Tombez pour SMACSS | @nicoespeon Petit tour d'horizon sur ces guidelines qui feront de vous un bûcheron du CSS, un vrai. Timber ! SMACSS est un ensemble de conseils et de lignes de conduite élaborés par Jonathan Snoovvk et dont le but est de vous permettre d’organiser votre CSS de manière claire et intelligente. Le premier principe réside dans la catégorisation : on distingue et regroupe les règles CSS par affinité logique afin de structurer son code (base, layout, module, state, theme). Le second principe relève de la convention de nommage : ne pas utiliser des ID quand une classe fait très bien l’affaire, nommer les classes de manière à faire ressortir la logique qui s’y cache, … Le troisième principe consiste à découpler le HTML du CSS : garder chaque module indépendant du contexte HTML dans lequel il se trouve, utiliser les sélecteurs d’enfants à bon escient, … Avec ces 3 principes, SMACSS vous permet de poser des bases solides pour un CSS de qualité, made in Canada ! Principe et intérêts Les 3 grands principes de SMACSS
Conventions CSS • Conseils et bonnes pratiques Accueil → La plupart du temps, j'utilise simplement des classes délimités par des traits d'union (ex. .foo-bar, pas .foo_bar ou .FooBar), mais dans certaines circonstances, j'utilise la notation BEM (Block, Élément, Modifieur). BEM est une méthode pour nommer et classifier vos sélecteurs CSS de façon à les rendre beaucoup plus strict, transparent et informatif. La convention de nommage suit ce modèle : .block {}.block__element {}.block--modifieur {} .block représente le niveau supérieur d'une abstraction ou d'un composant. .block__element représente un descendant de .bloc puisqu'il contribue à former .bloc dans son ensemble. .block--modifieur représente un état ou une version différente de .block. Une analogie du fonctionnement de la méthode BEM : .personne {}.personne--femme {} .personne__main {} .personne__main--gauche {} .personne__main--droite {} Ici, nous pouvons voir que l'objet de base que nous décrivons est une personne, et qu'un autre type de personne pourrait être une femme.
Bonnes pratiques en CSS : BEM et OOCSS Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS. Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus. Sommaire Je me suis d'abord tourné vers OOCSS (Object Oriented CSS), un ensemble de bonnes pratiques initiées par Nicole Sullivan (Stubbornella). Le concept de OOCSS est de repérer des « objets CSS », c'est-à-dire des « patterns visuels » qui se répètent, et de définir ainsi des classes réutilisables. OOCSS met en avant deux principes : Le principe de séparation de la structure et de l'apparence ; Le principe de séparation du conteneur et du contenu. Mais OOCSS correspondait imparfaitement à mon besoin. Aïe.
Specificity - SitePoint Specificity is a mechanism within the CSS cascade that aids conflict resolution. The concept of specificity states that when two or more declarations that apply to the same element, and set the same property, have the same importance and origin, the declaration with the most specific selector will take precedence. Consider this example: The above example style sheet contains four style rules that have a selector that matches p elements. The simple answer is that the more specific selector’s declaration will take precedence. Here’s a simplified description of the process by which the specificity of the selectors of two or more declarations is compared: If one declaration is from a style attribute, rather than a rule with a selector (an inline style), it has the highest specificity. If two or more selectors have the same specificity, then, according to the rules of the CSS cascade, the latter specified rule takes precedence. <p style="color:red;">Red Text</p> We now have our result.
50+ Beautiful CSS3 Buttons with Effects & Tutorials - freshDesignweb Same effect can be used on navigation bars, buttons etc., and these look great in every major browser except Internet Explorer 8 and below as they do not support the gradients and box shadows. Please take a look at the source code to understand more about them. Enjoying wonderful new CSS3 properties we can create some amazingly elegant and stylish buttons styles without the smell of an image and have perfectly adequate fall back styles for older browsers. You may like to create your buttons directly in CSS, or you may like to head to your layout tool of choice, but it is important to consider how your button design lives in context . Those css css3 button that I always think about when i design buttons. You may like this post: Beautiful Free Flat Social Media Icons Sets CSS3 Hexagon Buttons CSS3 Hexagon Buttons created with pure CSS3 and also used javaScript for flexibility. demo download / more info series of simple CSS buttons A series of simple CSS buttons. download / more info
CSS Effects: 150 Cool CSS Examples And Tutorials We have put together a smart collection of cool CSS effects to help you learn the nitty-gritty details so that you can use it to create more beautiful web sites. Enjoy! 1. Swatch Book Tutorial with CSS3 & jQuery [Demo] 2. 3D Thumbnail Hover Effects [Demo] 3. 4. This awesome website consists of more than 100 different CSS effects like 2D transitions, background transitions, icon CSS effects, border transitions, shadow and glow transitions, speech bubble CSS effects, and cool CSS curl effects. 5. You will find more than 50 CSS animation examples on this simple website. 6. 7. 8. 9. 10. 11. 12. 3D Flipping Circle with CSS3 & jQuery [Demo] 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. Use the basic features of CSS3 Transform: rotate. 49. Analogue clock created using webkit transition and transform CSS. 50. 3D Cube That Rotates Using Arrow Keys 51. 52. An accordion effect using only CSS. 53. 54. 55.
Poids des sélecteurs - Les cours css | ZONE CSS - Les cours css (Articles CSS V5.0) Les héritages de ciblage Introduction Le but de ce chapitre de comprendre le poids des sélecteurs css. Connaître le poids de votre sélecteur par rapport à un autre, n'est utile que dans le cas où l'on surcharge la css.Surcharger la css, c'est à dire que l'on ajouter des propriétés de feuilles de style ou écraser des propriétés de feuilles de style, c'est ce cas qui nous intéresse dans ce chapitre.En effet, dans le cas où nous ajoutons une propriété, il n'y a pas de notion de poids du sélecteur. Dans ce chapitre je parle de cible et chemin : C'est le chemin que vous utilisez pour assigner une ou des propriétés de feuilles de styles css. Pour l'héritage même des propriétés (c'est à dire liée à la propriété css en non au ciblage), il vous suffit d'aller trouver l'information dans la définition de la propriété css dans la partie "Héritage". La règle du poids Définition Pour déterminer le poids d'un sélecteur css par rapport à un autre, il vous suffit de remplir le tableaux ci-dessous :
40 CSS jQuery Charts and Graphs | Scripts + Tutorials Data visualization is the modern equivalent of visual communication and involves the creation and study of the visual representation of data. It transforms information in an abstract, schematic and visual form. Data visualization’s goal is to communicate information clearly and efficiently, and this is done via charts, graphs, plots etc. These use dots, lines, or bars, to visually communicate a message. Learn how to create simple, clean and engaging HTML5 based, CSS jQuery charts. There are many jQuery charts plugins available that can help you create interactive data visualisations. By using these CSS jQuery charts and graphs scripts and tutorials, plus some great and useful plugins, you won’t waste time and effort and you’ll be able to create data visualizations quickly and beautifully. CSS3 Pie Chart Learn how to make this CSS3 pie chart, with multiple colors. Customisable Animated Donut Chart Circle Bar Chart This is a nice, circle bar chart with a gradient effect. Dash Board Chart
An Exhaustive Guide on Creating Responsive Website Using HTML5 & CSS3 Over the recent years, it has been observed that people are preferring mobile phones over desktop computers for browsing the Internet. Building a website that looks perfect and functions appropriately on multiple hand-held gadgets has become the most-trusted method of gaining an edge over your competitors. It is responsive design which plays a vital role in creation of sites that can be accessed smoothly on a variety of devices with different screen sizes and resolutions. HTML5 and CSS3 have emerged as two of the most applauded web technologies for creating responsive designs that can easily adapt to contemporary mobile browsers and devices. Creating a basic Responsive Website skeleton using HTML5 and CSS3 Well, there are two methods of creating a responsive design. Method No.1- Using your own coding technique As the very first method, you can create a responsive design using your own code as shown below: .col { float: left; margin: 1%; width: 23%; min-height: 50px; background: #F0F0F0; .col {
Create a Full Page Background Image with CSS3 The other day we looked at 10 Awesome Websites With Full Screen Background Images. At the beginning of the article I had mentioned that there were a few ways of approaching this effect, some developers prefer to do it with jQuery, some with CSS, and others with Flash. In this article we’re going to take a look at how to achieve a full screen background image with CSS. CSS3 allows us to choose between a few different values for the “background-size” property. Now look at how the image appears in a traditional square browser. The code for this is method is really quite simple. That was easy. This technique is simple and works, but you’re relying on one image to please all resolution sizes. Before you curse the variables like screen resolution and monitor shapes that can make our jobs so frustrating at times, allow me to give you the answer you’re looking for: media queries. Now that we’ve got the big version of our background image set, we can move on to the medium.
An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements Perfect CSS Sprite / Sliding Doors Button Demo View Demo Download Files <a class=”GlobalOrangeButton” href=” Neat!</span></a> Reference URL