Archives de
Mois : octobre 2021

Colors Management, Why HSL()/HSLA() is always forgotten.

Colors Management, Why HSL()/HSLA() is always forgotten.

Commentaires 0 Commentaire

Everybody knows each function to definized a color in CSS. The most famous are X11, RGB() and RGBA() or HEX. Least famous but equally important, HSL() and his counterpart HSLA() are functions to manage shadows and brightness in a chromatic circle. Take back the features of each functions for a good comprehension of HSLs’ differents The RGB() : Red Green Blue. RVB is the most popular function of color management, is used by webdesigner, grafist, UX, because it’s not exclusive…

Lire la suite Lire la suite

Ten tips for organizing your css code

Ten tips for organizing your css code

Commentaires 0 Commentaire

1. Insert the CSS reset One of the biggest challenges when developing a website is cross-browser compatibility. The CSS reset is a style sheet that greatly reduces these incompatibility errors by providing a general style that is defined but easily customisable. Normalize.css is a modern and quite precise reset based on HTML 5. https://necolas.github.io/normalize.css/ You should insert the style sheet for this CSS reset in the <head> section, before your style definitions. 2. Organise the elements To be able to…

Lire la suite Lire la suite

Less, CSS pre-processor

Less, CSS pre-processor

Commentaires 0 Commentaire

We all know CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code. You end up duplicating the same rules all over the place and using your editor’s search and replace for every color change. It takes a lot of effort and discipline to keep your CSS maintainable. But it doesn’t have to be this way. Luckily, the web development community has solved this problem. We now have…

Lire la suite Lire la suite

Materialize css.

Materialize css.

Commentaires 0 Commentaire

https://materializecss.com/ Materialize css. In research about progress in development, frameworks show up as sources of good ideas it’s not new. But today i will show you a little piece of framework that can be helpful to have a really good looking website. Its name is : Materialize. First of all, what are the basics of this framework ? Based on : Material Design https://material.io/ What that : Css language, inspired by nature , physical and texture. What for ? Transform some brutal aspects of fluid…

Lire la suite Lire la suite

CSS PSEUDO CLASSES: :has(), :is() and :where()

CSS PSEUDO CLASSES: :has(), :is() and :where()

Commentaires 0 Commentaire

What’s a pseudo-class? As a reminder, a CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). What is :has() ? It is a part of CSS selector 4 called relational pseudo-class. It represents elements whose relative scope selector matches when evaluated absolute Matching <a> elements that directly contain an <img> The following selector matches only <a> elements that directly contain an <img> child: a:has(> img) Matching <h1> elements that are followed by…

Lire la suite Lire la suite

METHODOLOGIE BEM-CSS

METHODOLOGIE BEM-CSS

Commentaires 0 Commentaire

BEM is a highly useful, powerful, and easy naming convention for CSS class names that makes your front-end code less complicated to examine and understand, less complicated to work with, less complicated to scale, extra strong, explicit, and extra strict. A BEM class name includes up to three parts: [BLOCKS]__[ELEMENTS]–[MODIFIERS] [BLOCKS]= .block{} The first element of the component is defined as the block and  represents the highest level of an abstraction or component. The most common blocks are : <header>, <aside>,…

Lire la suite Lire la suite

Selectors in CSS

Selectors in CSS

Commentaires 0 Commentaire

What are CSS selectors? A CSS selector is used as a way to target elements in our DOM (Document Object Model) and apply a certain style to it. Basically, what we are doing is defining the style we want to use and then applying a « filter » that target specified items. In order to do that, we are going to use this structure: There are many selectors in CSS, we’ll talk about them later on. The style we apply can target…

Lire la suite Lire la suite

The initial of Cascading CSS ( @layer CSS )

The initial of Cascading CSS ( @layer CSS )

Commentaires 0 Commentaire

Introduction Cascade Layers One of the fundamental design principles of CSS is cascading, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved. That the main reason why we have to carefully think about how we organize the CSS code. Currently, CSS layering has to be achieved with careful management of selector-specificity, or over-use of !important flags – both…

Lire la suite Lire la suite

Neumorphism

Neumorphism

Commentaires 0 Commentaire

Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism — hence the name. It got its name in a UX Collective post from December 2019, and since then, various design and development communities have been actively discussing the trend, usually with differing opinions. Chris poked fun at it on Twitter. Adam Giebl created an online generator for…

Lire la suite Lire la suite

MinMaxing: Understanding vMin and vMax in CSS

MinMaxing: Understanding vMin and vMax in CSS

Commentaires 0 Commentaire

Vmin and vmax units are far less known and generally poorly understood. This is unfortunate, as the units have some truly novel use-cases in web development. 1vh is equal to 1% of the current viewport height (i.e. the open browser window), while 1vw is 1% of the current viewport width. vmin and vmax use those same units, but in response to particular rules: vmin uses the ratio of the smallest side. That is, if the height of the browser window…

Lire la suite Lire la suite