12 CSS tips
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1649980/css3-logo-png.png)
@julienherpin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1651057/Twitter_logo_blue.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1651060/logo.png)
Whois
Frontend developer @
Le CSS, c'est parfois surprenant !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1649998/tumblr_m1vknqkfDX1qeyt27o1_500.gif)
Mais avec quelques petites astuces, c'est "EASY" !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650287/booba604-tt-width-604-height-403-bgcolor-000000.jpg)
tip#1
Aligner un bloc au milieu d'une page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650025/container.jpg)
ex : formulaire de login, ...
Euh, c'est facile ! Non ?
.container { position: relative; }
.content {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650054/Capture_d__cran_2015-08-18___23.44.55.png)
Avec une marge négative ?
.container { position: relative; }
.content {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px; /* On retire la moitié de la largeur */
margin-top: -50px; /* On retire la moitié de la hauteur */
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650011/container.jpg)
Mieux, avec une transformation ?
.container { position: relative; }
.content {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
// Remplace :
// margin-left: -50px;
// margin-top: -50px;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650011/container.jpg)
IE10+
Ou en tirant dans tous les sens ?
.container { position: relative; }
.content {
width: 100px;
height: 100px;
position: absolute;
// WTF, it's ok !
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650011/container.jpg)
#old
Avec Flexbox
.container {
position: relative;
height: 300px;
background: #333;
// -----
display: flex;
align-items: center;
justify-content: center;
// -----
}
.content {
width: 100px;
height: 100px;
// align-self: flex-start; -> si besoin de reset dans un contenu
// align-self: flex-end; -> si besoin de reset dans un contenu
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650011/container.jpg)
IE10+
tip#2
Centrer une ligne de texte verticalement
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650084/Capture_d__cran_2015-08-19___00.03.37.png)
et éviter que le texte dépasse
Avec le line-height !
.heading {
/* 1 line vertical centering */
height: 60px;
line-height: 60px;
/* Ellipsis */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650084/Capture_d__cran_2015-08-19___00.03.37.png)
tip#3
Occuper verticalement la hauteur de la page
Menu de gauche
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650097/Capture_d__cran_2015-08-19___00.13.00.png)
En utilisant le viewport height
.menu {
width: 20%;
float: left;
// height: 100%; -> Non !
height: 100vh;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650097/Capture_d__cran_2015-08-19___00.13.00.png)
IE10+
tip#4
Encapsuler des media objects
ex : Fil de commentaires
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650134/Capture_d__cran_2015-08-19___00.24.48.png)
Le media object (by N. Sullivan)
<div class="media">
<a href="#" class="media__img">img here</a>
<div class="media__content">text here</div>
</div>
.media { width: 100%; }
.media__content { overflow: hidden; } // -> IMPORTANT !
.media__img {
display: block;
float: left;
margin-right: 20px;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650147/cap.jpg)
Peut être encapsulé à l'infini
<div class="media">
<a href="#" class="media__img">img here</a>
<div class="media__content">
<p>Lorem ipsum ...</p>
<!-- An other one -->
<div class="media">
<a href="#" class="media__img">img here</a>
<div class="media__content">Lorem ipsum ...</div>
</div>
<!-- / An other one -->
</div>
</div>
Le CSS est commun
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650134/Capture_d__cran_2015-08-19___00.24.48.png)
Le media object, avec Flexbox ?
.media {
/* Flexbox magic */
display: flex;
align-items: flex-start;
}
.media__img {
/*float: left; <- Not needed */
margin-right: 20px;
}
.media__content {
flex: 1;
}
<div class="media">
<a href="#" class="media__img">img here</a>
<div class="media__content">text here</div>
</div>
IE10+
tip#5
Besoin d'un texte flou ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650196/Capture_d__cran_2015-08-19___00.41.43.png)
Utilisons une ombre portée
.blur {
color: transparent;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
font-size: 60px;
text-align: center;
}
et un texte transparent !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650196/Capture_d__cran_2015-08-19___00.41.43.png)
IE10+
Et pourquoi pas un filtre ?
.blur {
font-size: 60px;
text-align: center;
filter: blur(5px);
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650196/Capture_d__cran_2015-08-19___00.41.43.png)
!IE
tip#6
Positionner un élément par rapport à un coin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650223/Capture_d__cran_2015-08-19___00.48.25.png)
A l'intérieur ?
.rel { position: relative; }
.abs {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
}
#easy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650241/abs1.jpg)
A l'extérieur ?
.rel { position: relative; }
.abs {
width: 100px;
height: 100px;
position: absolute;
top: 0;
// right: 0;
// Use the opposite corner
left: 100%;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650242/abs2.jpg)
tip#7
Des blocs 16/9 responsive ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650254/Capture_d__cran_2015-08-19___01.04.08.png)
L'aspect ratio grâce au padding
<div class="box">
<div class="content">16:9</div>
</div>
.box:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%; // -> 9/16 = 0.5625
}
.box > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1650262/Capture_d__cran_2015-08-19___01.04.08_copie.png)
16/9
tip#8
Un layout simple avec Flexbox
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1652682/Capture_d__cran_2015-08-19___21.04.42.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1652682/Capture_d__cran_2015-08-19___21.04.42.png)
<div class="container">
<header>header</header>
<div class="main">
<nav>nav</nav>
<article>article</article>
<aside>aside</aside>
</div>
<footer>footer</footer>
</div>
// Conteneur
.main { display: flex; }
// Contenus
nav, aside { flex: 1; }
article { flex: 2; }
On profite du flex-grow !
IE10+
// Shorthand
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
// Default
flex: 0 1 auto;
La propriété "flex"
- flex-grow : S'étend ou non. Si oui, indiquer le ratio.
- flex-shrink : Peut rétrécir ou non. Si oui, indiquer le ratio.
- flex-basis : Base. Avant que l'espace soit distribué.
tip#9
Pourquoi mon input sort du formulaire ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1652877/Capture_d__cran_2015-08-19___21.43.03.png)
<form class="form">
<input class="input" placeholder="hey..." type="text" />
</form>
.form {
width: 500px;
padding: 20px;
}
.input {
width: 100%;
padding: 20px;
}
Par défaut, ça dépasse !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1652877/Capture_d__cran_2015-08-19___21.43.03.png)
<form class="form">
<input class="input" placeholder="hey..." type="text" />
</form>
.form {
width: 500px;
padding: 20px;
}
.input {
width: 100%;
padding: 20px;
// On change le box-model
box-sizing: border-box;
}
Changeons le box-model !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1652902/Capture_d__cran_2015-08-19___21.57.44.png)
IE8+
*, *:before, *:after { box-sizing: border-box; }
Allons-y franchement !
tip#10
Utiliser l'accélération matérielle ?
transform: translateZ(0);
transform: translate3d(0,0,0);
perspective: 1000; backface-visibility: hidden;
Améliore la performance sur des cas particuliers.
Ne pas en abuser !
IE10+
will-change: transform;
will-change: opacity;
will-change: left, top;
Une méthode plus propre ?
Chrome 36+ / Firefox 36+
Draft
tip#11
Des bordures multiples ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1652931/Capture_d__cran_2015-08-19___22.13.10.png)
box-shadow: 0 0 0 5px black, 0 0 0 10px gold, 0 0 0 15px black;
Avec des ombres portées !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1652931/Capture_d__cran_2015-08-19___22.13.10.png)
IE9+
tip#12
Des alignements du futur avec Flexbox ?
<div class="container">
<div>FLEX 1</div>
<div>FLEX 2</div>
<div>FLEX 3</div>
<div>FLEX 4</div>
</div>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1653110/Capture_d__cran_2015-08-19___23.40.10.png)
.container {
display: flex;
flex-direction: row;
}
Direction
IE10+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1653110/Capture_d__cran_2015-08-19___23.40.10.png)
.container {
display: flex;
flex-direction: row-reverse;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1653118/Capture_d__cran_2015-08-19___23.43.40.png)
.container {
display: flex;
flex-direction: column;
}
Direction
IE10+
.container {
display: flex;
flex-direction: column-reverse;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1653119/Capture_d__cran_2015-08-19___23.46.09.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1653121/Capture_d__cran_2015-08-19___23.46.20.png)
/* Main align */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
Axes
IE10+
/* Cross align */
align-items: flex-start;
align-items: flex-end;
Merci !
@julienherpin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1651057/Twitter_logo_blue.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364542/images/1651060/logo.png)
CSS tips
By Julien Herpin
CSS tips
- 1,234