1 - footer en bas de page en deux lignes
body{
display:grid;
grid-template-rows: auto 1fr auto;
}
avec une structure HTML:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
body{
display:grid;
grid-template-rows: auto 1fr auto;
}
avec une structure HTML:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
ou
display: grid;
justify-items: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
// HTML
<body>
<form>
<h1>Please login</h1>
<label><span>Username</span>
<input type="text" name="login" value="" placeholder=" " >
</label>
<label><span>Password</span>
<input type="password" name="pswd" value="" placeholder=" ">
</label>
<input type="submit" value="Ok">
<hr>
<h4>or <a href="">subscribe</a></h4>
</form>
</body>
// CSS
body{
height: 100%;
max-height: 100%;
}
form{
max-width:320px;
margin:auto;
border:1px solid rgba(0,0,0,0.2);
border-radius: 0.5em;
padding:0.5em;
background:var(--color);
position : relative;
top: 50%;
transform: translateY(-50%);
}
label{
display: block;
margin-top:1em;
}
input{
outline: 0;
display: block;
width:100%;
border-radius: 0.5em;
border:1px solid rgba(0,0,0,0.2);
margin-top:0.5em;
}
input[name="login"]{
padding:0.5em;
padding-left:24px;
background: url(http://api.warriordudimanche.net/iconeleon/?i=fontawesome%20solid/circle-user.svg&c=black) no-repeat 4px center;
background-size: 16px 16px;
}
input[type="password"]{
padding:0.5em;
padding-left:24px;
background: url(http://api.warriordudimanche.net/iconeleon/?i=elusive/unlock-alt.svg&c=black) no-repeat 4px center;
background-size: 16px 16px;
}
label span{
position: relative;
top:2em;
left:24px;
transition:all 500ms;
}
label:has(input:placeholder-shown) span{
position: relative;
top:2em;
left:24px;
transition:all 500ms;
}
label:has(input:focus) span,
label:has(input:not(:placeholder-shown)) span
{
color:blue;
top:0;
left:0;
transition:all 500ms;
}
<figure class="hover-menu">
<img src="https://picsum.photos/id/1060/800/480.jpg"/>
<div>
<a href="#">Home</a>
<a href="#">Pricing</a>
<a href="#">About</a>
</div>
</figure>
<style>
.hover-menu {
position: relative;
overflow: hidden;
margin: 8px;
min-width: 340px;
max-width: 480px;
max-height: 290px;
width: 100%;
background: #000;
text-align: center;
box-sizing: border-box;
}
.hover-menu * {
box-sizing: border-box;
}
.hover-menu img {
position: relative;
max-width: 100%;
top: 0;
right: 0;
opacity: 1;
transition: 0.3s ease-in-out;
}
.hover-menu div {
position: absolute;
top: 0;
left: -120px;
width: 120px;
height: 100%;
padding: 8px 4px;
background: #000;
transition: 0.3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
}
.hover-menu div a {
display: block;
line-height: 2;
color: #fff;
text-decoration: none;
opacity: 0.8;
padding: 5px 15px;
position: relative;
transition: 0.3s ease-in-out;
}
.hover-menu div a:hover {
text-decoration: underline;
}
.hover-menu:hover img {
opacity: 0.5;
right: -120px;
}
.hover-menu:hover div {
left: 0;
opacity: 1;
}
</style>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.image-slideshow {
width: 600px;
height: 300px;
overflow: hidden;
white-space: nowrap;
font-size: 0;
position: relative;
}
.image-slideshow > div {
width: 600px;
height: 300px;
animation: move 15s ease-in-out 2s infinite alternate;
display:inline-block;
}
.image-slideshow > div div {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
width: 100%;
}
.image-slideshow h2 {
padding: 15px;
margin: 0;
font-size: 18px;
color: #f9f9f9;
}
.image-slideshow p {
padding: 0 15px 15px 15px;
margin: 0;
font-size: 14px;
color: #dddddd;
}
@keyframes move {
0%,30% { transform: translateX(0); }
40%,70% { transform: translateX(-600px); }
80%,100% { transform: translateX(-1200px); }
}
</style>
<div class="image-slideshow">
<div>
<img src="https://via.placeholder.com/600x300" width="600" height="300" alt="">
<div>
<h2>Example Photo 1</h2>
<p>Example description for the photo...</p>
</div>
</div>
<div>
<img src="https://via.placeholder.com/600x300" width="600" height="300" alt="">
<div>
<h2>Example Photo 2</h2>
<p>Example description for the photo...</p>
</div>
</div>
<div>
<img src="https://via.placeholder.com/600x300" width="600" height="300" alt="">
<div>
<h2>Example Photo 3</h2>
<p>Example description for the photo...</p>
</div>
</div>
</div>
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
font: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}
<table class=”events-table” >
<thead>
<tr>
<th class=”event-date”>Date</th>
<th class=”event-time”>Horaire</th>
<th class=”event-description”>Evènement</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label=”Date”> Le #_EVENTDATES</td>
<td data-label=”Horaire”>#_EVENTTIMES</td>
<td data-label=”Evènement”>#_EVENTLINK</td>
</tr>
</tbody>
</table>
table caption {
display: none;
}
@media all and (max-width:500px){
table{
width:100%;
}
table caption {
display: block;
background-color: #484d55;
color:white;
}
.table thead {
display: none;
}
.table tr{
display: block;
margin-bottom: 40px;
}
.table td {
display: block;
text-align: right;
}
.table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
.tree {
--spacing: 1.5rem;
--radius: 10px;
--marker-bg-default: #ddd;
--marker-bg-haschild: #6b9abb;
line-height: 2rem;
}
.tree li {
display: block;
position: relative;
padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
margin-left: calc(var(--radius) - var(--spacing));
padding-left: 0;
}
.tree ul li {
border-left: 2px solid #ddd;
}
.tree ul li:last-child {
border-color: transparent;
}
.tree ul li::before {
content: "";
display: block;
position: absolute;
top: calc(var(--spacing) / -2);
left: -2px;
width: calc(var(--spacing) + 2px);
height: calc(var(--spacing) + 1px);
border: solid #ddd;
border-width: 0 0 2px 2px;
}
.tree summary {
display: block;
cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
display: none;
}
.tree summary:focus {
outline: none;
}
.tree summary:focus-visible {
outline: 1px dotted #000;
}
.tree li::after,
.tree summary::before {
content: "";
display: block;
position: absolute;
top: calc(var(--spacing) / 2 - var(--radius) + 2px);
left: calc(var(--spacing) - var(--radius) - 2px);
width: calc(2 * var(--radius));
height: calc(2 * var(--radius));
border-radius: 50%;
background: var(--marker-bg-default);
}
.tree summary::before {
content: "+";
z-index: 1;
background: var(--marker-bg-haschild);
color: #fff;
line-height: calc(2 * var(--radius));
text-align: center;
}
.tree details[open] > summary::before {
content: "−";
}
<ul class="tree">
<li>
<details open>
<summary>Informatique</summary>
<ul>
<li>
<details>
<summary>Périphériques</summary>
<ul>
<li>Clavier</li>
<li>Souris</li>
<li>Ecran</li>
</ul>
</details>
</li>
<li>
<details open>
<summary>Stockage</summary>
<ul>
<li>Disque dur</li>
<li>SSD</li>
<li>Clé USB</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Composants</summary>
<ul>
<li>Processeur</li>
<li>Carte mère</li>
<li>Mémoire</li>
<li>
</ul>
</details>
</li>
<li>
<details>
<summary>Composants</summary>
<ul>
<li>Processeur</li>
<li>Carte mère</li>
<li>Mémoire</li>
<li>Carte graphique</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</code></pre> codeCarte graphique</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
<style type="text/css">
key{
display:inline-block;
padding:0.5em;
border:1px solid rgba(0,0,0,0.5);
border-radius: 3px;
box-shadow: 0 0.2em 0 0.05em #222;
background: linear-gradient(180deg, rgba(150,150,150,1) 0%, rgba(240,240,240,1) 100%);;
}
</style>
<key>Shift</key>+<key>B</key>
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.box {
background-color: transparent;
width: 220px;
height: 300px;
border: 1px solid #eeeeee;
perspective: 1000px;
}
.box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.box:hover .box-inner {
transform: rotateY(180deg);
}
.box-front, .box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.box-front {
background-color: #cccccc;
color: #111111;
}
.box-back {
background-color: #8ebf42;
color: #eeeeee;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<h2>Boîte de retournement 3D (Horizontale)</h2>
<p>Placez la souris sur la boîte pour voir l'effet:</p>
<div class="box">
<div class="box-inner">
<div class="box-front">
<h2>Face frontale</h2>
</div>
<div class="box-back">
<h2>Face arrière</h2>
</div>
</div>
</div>
</body>
</html>
/* Dans le Head */
<style type="text/css">body{opacity: 0;transition: opacity 1s}</style>
/* balise body */
<body onload="document.body.style.opacity=1" >
display:grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
// boutons
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab1</label>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Tab2</label>
// contenus
<div class="tab content1">Tab1 Contents </div>
<div class="tab content2">Tab2 Contents </div>
// css pour cacher/montrer
input { display: none; } /* hide radio buttons */
input + label { display: inline-block } /* show labels in line */
input ~ .tab { display: none } /* hide contents *//* show contents only for selected tab */
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2 { display: block; }
// css pour styler
input + label { /* box with rounded corner */
border: 1px solid #999;
background: #EEE;
padding: 4px 12px;
border-radius: 4px 4px 0 0;
position: relative;
top: 1px;
}
input:checked + label { /* white background for selected tab */
background: #FFF;
border-bottom: 1px solid transparent;
}
input ~ .tab { /* grey line between tab and contents */
border-top: 1px solid #999;
padding: 12px;
}
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* Your container needs a fixed height, and it
* needs to be taller than your tallest column. */
height: 600px;
}
.item {
width: 32%;
margin-bottom: 2%; /* Optional */
}
/* Re-order items into 3 rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* Force new columns */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
4 colonnes
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* Your container needs a fixed height, and it
* needs to be taller than your tallest column. */
height: 600px;
}
.item {
width:24%;
margin-bottom: 2%; /* Optional */
}
/* Re-order items into 4 rows */
.item:nth-child(4n+1) { order: 1; }
.item:nth-child(4n+2) { order: 2; }
.item:nth-child(4n+3) { order: 3; }
.item:nth-child(4n) { order: 4; }
/* Force new columns */
.break {
content: "";
flex-basis: 100%;
width: 0;
margin: 0;
}
.full-bleed {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
</div>
</body>
</html>
div {
--angle: 150deg; /* CHANGE THIS VALUE TO THE ANGLE YOU WANT */
}
div {
height: 300px;
width: 600px;
overflow: hidden;
position: relative;
background: crimson;
border-radius: 300px 300px 0 0;
border: 1px solid crimson;
}
div::before {
height: inherit;
width: inherit;
position: absolute;
content: "";
background-color: white;
transform-origin: 50% 100%;
transform: rotate(var(--angle));
}
$colors=[
"transparent",
"Maroon",
"DarkRed",
"FireBrick",
"Red",
"Salmon",
"Tomato",
"Coral",
"OrangeRed",
"Chocolate",
"SandyBrown",
"DarkOrange",
"Orange",
"DarkGoldenrod",
"Goldenrod",
"Gold",
"Olive",
"Yellow",
"YellowGreen",
"GreenYellow",
"Chartreuse",
"LawnGreen",
"Green",
"Lime",
"LimeGreen",
"SpringGreen",
"MediumSpringGreen",
"Turquoise",
"LightSeaGreen",
"MediumTurquoise",
"Teal",
"DarkCyan",
"Aqua",
"Cyan",
"DarkTurquoise",
"DeepSkyBlue",
"DodgerBlue",
"RoyalBlue",
"Navy",
"DarkBlue",
"MediumBlue",
"Blue",
"BlueViolet",
"DarkOrchid",
"DarkViolet",
"Purple",
"DarkMagenta",
"Fuchsia",
"Magenta",
"MediumVioletRed",
"DeepPink",
"HotPink",
"Crimson",
"Brown",
"IndianRed",
"RosyBrown",
"LightCoral",
"Snow",
"MistyRose",
"DarkSalmon",
"LightSalmon",
"Sienna",
"SeaShell",
"SaddleBrown",
"Peachpuff",
"Peru",
"Linen",
"Bisque",
"Burlywood",
"Tan",
"AntiqueWhite",
"NavajoWhite",
"BlanchedAlmond",
"PapayaWhip",
"Moccasin",
"Wheat",
"Oldlace",
"FloralWhite",
"Cornsilk",
"Khaki",
"LemonChiffon",
"PaleGoldenrod",
"DarkKhaki",
"Beige",
"LightGoldenrodYellow",
"LightYellow",
"Ivory",
"OliveDrab",
"DarkOliveGreen",
"DarkSeaGreen",
"DarkGreen",
"ForestGreen",
"LightGreen",
"PaleGreen",
"Honeydew",
"SeaGreen",
"MediumSeaGreen",
"Mintcream",
"MediumAquamarine",
"Aquamarine",
"DarkSlateGray",
"PaleTurquoise",
"LightCyan",
"Azure",
"CadetBlue",
"PowderBlue",
"LightBlue",
"SkyBlue",
"LightskyBlue",
"SteelBlue",
"AliceBlue",
"SlateGray",
"LightSlateGray",
"LightsteelBlue",
"CornflowerBlue",
"Lavender",
"GhostWhite",
"MidnightBlue",
"SlateBlue",
"DarkSlateBlue",
"MediumSlateBlue",
"MediumPurple",
"Indigo",
"MediumOrchid",
"Plum",
"Violet",
"Thistle",
"Orchid",
"LavenderBlush",
"PaleVioletRed",
"Pink",
"LightPink",
"Black",
"DimGray",
"Gray",
"DarkGray",
"Silver",
"LightGrey",
"Gainsboro",
"WhiteSmoke",
"White"
];
/* Based on email I got from andrea ricci */
a[href^="mailto:"]:before { content: "\2709"; }
.phone:before { content: "\2706"; }
.important:before { content: "\27BD"; }
blockquote:before { content: "\275D"; }
blockquote:after { content: "\275E"; }
.alert:before { content: "\26A0"; }
:before, :after {
color: purple;
}
p, blockquote {
margin: 20px;
}
body, a {
color: #333;
text-decoration: none;
font-size: 21px;
}
img{
position : relative;
top: 50%;
transform: translateY(-50%);
}
<div id="slider">
<!-- Slide Images -->
<img id="slide-1" src="img1.jpg" alt="img description"/>
<img id="slide-2" src="img2.jpg" alt="img description"/>
<img id="slide-3" src="img3.jpg" alt="img description"/>
<img id="slide-4" src="img4.jpg" alt="img description"/>
<!-- Navigation for the slides -->
<ul>
<li><a href="#slide-1">1</a></li>
<li><a href="#slide-2">2</a></li>
<li><a href="#slide-3">3</a></li>
<li><a href="#slide-4">4</a></li>
</ul>
</div>
SCSS
#slider {
img {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 200px;
&:target {
transition: all .5s ease-in-out;
}
&:not(:target),
&:target ~ img#slide-4 {
position: relative;
opacity: 0;
}
// set initially visible
&#slide-4 {
position: absolute;
opacity: 1;
}
}
}
.one:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
<body>
<div class="page">
<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>
</div>
</body>
Nous allons donc simplement appliquer display: flex; à body, et spécifier le comportement de ses descendants direct en tant que colonnes. Puis nous diront simplement à .site-content d’utiliser toute la hauteur disponible.
CSS
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex: 1;
}
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
header{
/* We want the header to have a static height,
it will always take up just as much space as it needs. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* By setting flex-grow to 1, the main content will take up
all of the remaining space on the page.
The other elements have flex-grow: 0 and won't contest the free space. */
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* Like the header, the footer will have a static height - it shouldn't grow or shrink. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
<?php
/**
* On-the-fly CSS Compression
* Copyright (c) 2009 and onwards, Manas Tungare. (changes by bronco)
* Creative Commons Attribution, Share-Alike.
*
* In order to minimize the number and size of HTTP requests for CSS content,
* this script combines multiple CSS files into a single file and compresses
* it on-the-fly.
*
* To use this in your HTML, link to it in the usual way:
* <link rel="stylesheet" type="text/css" media="screen, print, projection" href="/css/compressed.css.php" />
*/
/*
* this version detects css files and allow very basic replacements (bronco@warriordudimanche.net)
*/
# replacement rules: "String to replace" => "Replacement"
$replace=array(
'#basic_color_neutral'=>'#405bff',
'#basic_color_dark'=>'#2039ee',
'#basic_color_light'=>'#617dff',
'#hover_color'=>'',
);
# function
if (!function_exists('_glob')){
function _glob($path,$pattern='') {
# glob function fallback by Cyril MAGUIRE (thx bro' ;-)
if($path=='/'){
$path='';
}
$liste = array();
$pattern=str_replace('*','',$pattern);
if ($handle = opendir($path)) {
while (false !== ($file = readdir($handle))) {
if(stripos($file, $pattern)!==false || $pattern=='' && $file!='.' && $file!='..' && $file!='.htaccess') {
$liste[] = $path.$file;
}
}
closedir($handle);
}
natcasesort($liste);
return $liste;
}
}
$cssFiles = _glob('./','css');
/**
* Ideally, you wouldn't need to change any code beyond this point.
*/
$buffer = "";
foreach ($cssFiles as $cssFile) {
$buffer .= file_get_contents($cssFile);
}
$buffer=str_replace(array_keys($replace),array_values($replace),$buffer);
// Remove unnecessary characters
$buffer = preg_replace("|/\*[^*]*\*+([^/][^*]*\*+)*/|", "", $buffer);
$buffer = preg_replace("/[\s]*([\:\{\}\;\,])[\s]*/", "$1", $buffer);
// Remove whitespace
$buffer = str_replace(array("\r\n", "\r", "\n"), '', $buffer);
// Enable GZip encoding.
ob_start("ob_gzhandler");
// Enable caching
header('Cache-Control: public');
// Expire in one day
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
// Set the correct MIME type, because Apache won't set it for us
header("Content-type: text/css");
// Write everything out
echo($buffer);
?>
Le code :
#container {
max-height: 100%;
}
#container img {
/* Keeps image from going outside the screen */
max-height: 100%;
max-width: 100%;
/* Keeps image from beeing distorted */
height: auto;
width: auto;
/* centering horizontally AND vertically */
/* 50% of container */
position: relative;
top: 50%;
left: 50%;
/* 50% of image */
transform: translate(-50%,-50%);
}
<!--
Checkbox Trickery with CSS:
http://codersblock.com/blog/checkbox-trickery-with-css/
-->
<div class="container">
<h1><span class="marvel">Marvel</span> Mutant Teams</h1>
<input id="original" type="radio" name="team" checked>
<label for="original">Original X-Men</label>
<input id="force" type="radio" name="team">
<label for="force">X-Force</label>
<input id="factor" type="radio" name="team">
<label for="factor">X-Factor</label>
<input id="hellfire" type="radio" name="team">
<label for="hellfire">Hellfire Club</label>
<br>
<ul class="characters">
<li id="angel" data-teams="original force factor hellfire">
<h2>Angel</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-angel.png" alt="">
</li>
<li id="beast" data-teams="original factor">
<h2>Beast</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-beast.png" alt="">
</li>
<li id="cyclops" data-teams="original force factor">
<h2>Cyclops</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-cyclops.png" alt="">
</li>
<li id="emma-frost" data-teams="hellfire">
<h2>Emma Frost</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-emma-frost.png" alt="">
</li>
<li id="iceman" data-teams="original factor">
<h2>Iceman</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-iceman.png" alt="">
</li>
<li id="jean-grey" data-teams="original factor">
<h2>Jean Grey</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-jean-grey.png" alt="">
</li>
<li id="magneto" data-teams="hellfire">
<h2>Magneto</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-magneto.png" alt="">
</li>
<li id="nightcrawler" data-teams="force">
<h2>Nightcrawler</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-nightcrawler.png" alt="">
</li>
<li id="professor-x" data-teams="original">
<h2>Professor X</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-professor-x.png" alt="">
</li>
<li id="psylocke" data-teams="force hellfire">
<h2>Psylocke</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-psylocke.png" alt="">
</li>
<li id="quicksilver" data-teams="factor">
<h2>Quicksilver</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-quicksilver.png" alt="">
</li>
<li id="rictor" data-teams="force factor">
<h2>Rictor</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-rictor.png" alt="">
</li>
<li id="storm" data-teams="force hellfire">
<h2>Storm</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-storm.png" alt="">
</li>
<li id="sunspot" data-teams="force hellfire">
<h2>Sunspot</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-sunspot.png" alt="">
</li>
<li id="tithe" data-teams="hellfire">
<h2>Tithe</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-tithe.png" alt="">
</li>
<li id="wolverine" data-teams="force">
<h2>Wolverine</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-wolverine.png" alt="">
</li>
</ul>
</div>
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
color: #fff;
background-color: #444;
font: 0/1 'Oswald', sans-serif;
text-align: center;
}
.container {
margin: 0 auto;
padding: 20px 5px;
}
h1 {
margin: 0 5px 15px;
font-size: 45px;
line-height: 1.2;
text-transform: uppercase;
text-shadow: 0 0 20px #000;
}
.marvel {
color: #c00;
}
input {
position: absolute;
left: -9999px;
}
label {
display: inline-block;
position: relative;
width: 150px;
margin: 5px;
padding: 10px 10px 10px 38px;
background-color: #000;
font-size: 18px;
white-space: nowrap;
cursor: pointer;
}
label::before {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 18px;
height: 18px;
border: 2px solid #fff;
background-color: #444;
}
input:focus + label {
outline: 1px solid #fff;
}
input:checked + label::before {
background-color: #c00;
}
/* width is controlled here and in media queries to ensure that there's always an even number of columns (prevents orphans) */
.characters {
display: inline-block;
width: 240px;
list-style-type: none;
margin: 15px -5px 0;
padding: 0;
}
.characters li {
display: inline-block;
position: relative;
margin: 10px;
padding: 0;
width: 100px;
height: 100px;
}
.characters h2 {
display: none;
position: absolute;
z-index: 2;
top: 70px;
left: 0px;
right: 0px;
margin: 0;
padding: 4px;
border: 1px solid #fff;
color: #fff;
background-color: #000;
font-size: 14px;
font-weight: normal;
}
.characters img {
width: 100px;
height: 100px;
border: 4px solid #fff;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px #000;
opacity: .25;
transform: scale(.5);
}
#original:checked ~ .characters [data-teams~="original"] h2,
#force:checked ~ .characters [data-teams~="force"] h2,
#factor:checked ~ .characters [data-teams~="factor"] h2,
#hellfire:checked ~ .characters [data-teams~="hellfire"] h2 {
display: block;
}
#original:checked ~ .characters [data-teams~="original"] img,
#force:checked ~ .characters [data-teams~="force"] img,
#factor:checked ~ .characters [data-teams~="factor"] img,
#hellfire:checked ~ .characters [data-teams~="hellfire"] img {
animation: avatar .3s forwards;
}
/* fade in and expand image to full size, with a slight bounce */
@keyframes avatar {
70% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media only screen and (min-width: 500px) {
.characters {
width: 480px;
}
}
@media only screen and (min-width: 740px) {
.characters {
width: 720px;
}
h1 {
font-size: 60px;
}
}
@media only screen and (min-width: 980px) {
.characters {
width: 960px;
}
}
<!--
Checkbox Trickery with CSS:
http://codersblock.com/blog/checkbox-trickery-with-css/
-->
<div class="container">
<h1>
<span>Subscribe to</span><br>
Celery Facts Weekly!
</h1>
<section>
<label for="email" class="top-label">Email</label>
<input id="email" type="email" autocomplete="off">
</section>
<section>
<label class="top-label">How did you hear about us?</label>
<input id="how-friend" name="how" type="radio">
<label for="how-friend" class="side-label">From a friend</label>
<input id="how-internet" name="how" type="radio">
<label for="how-internet" class="side-label">Somewhere on the internet</label>
<input id="how-other" name="how" type="radio">
<label for="how-other" class="side-label">Other...</label>
<div class="how-other-disclosure">
<label for="how-other-explain" class="top-label">Please explain</label>
<textarea id="how-other-explain"></textarea>
</div>
</section>
<section>
<input id="permitted" type="checkbox">
<label for="permitted" class="side-label">I am legally permitted to submit forms</label>
<div class="blocked">(you have to check the checkbox to continue)</div>
<button>Submit</button>
</section>
</div>
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700);
*, *::before, *::after {
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
margin: 20px;
color: #435757;
background:
linear-gradient(40deg, transparent 40%, #9ab593),
linear-gradient(-40deg, #ba7461 20%, #593e4e 90%);
font: 1.2em/1 'Noto Sans', sans-serif;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 10px 20px 40px;
color: #fff;
background-color: rgba(0, 0, 0, .6);
}
h1 {
margin: 0;
padding-bottom: 30px;
border-bottom: 1px solid #fff;
line-height: 1.2;
font-size: 2.2em;
font-weight: normal;
}
h1 span {
font-size: .7em;
}
section {
margin-top: 30px;
}
section::after {
content: '';
display: block;
clear: both;
}
.top-label {
display: block;
margin: 10px 0;
}
input[type="email"], textarea {
display: block;
width: 100%;
max-width: 100%;
padding: 5px;
border: none;
color: #593e4e;
background-color: #fff;
font-family: inherit;
font-size: inherit;
appearance: none;
}
input[type="email"]:focus, textarea:focus, button:focus {
outline: 2px solid #9ab593;
}
textarea {
height: 100px;
}
input[type="checkbox"], input[type="radio"] {
position: absolute;
left: -9999px;
}
.side-label {
display: block;
position: relative;
margin: 10px 0;
padding-left: 35px;
cursor: pointer;
}
.side-label::before, .side-label::after {
content: '';
position: absolute;
top: 0;
left: 0;
}
input[type="radio"] + .side-label::before,
input[type="radio"] + .side-label::after {
border-radius: 50%;
}
.side-label::before {
display: block;
width: 20px;
height: 20px;
border: 2px solid #fff;
}
input:focus + .side-label::before {
border-color: #9ab593;
}
.side-label::after {
display: none;
width: 12px;
height: 12px;
margin: 4px;
background-color: #9ab593;
}
input:checked + .side-label::after {
display: block;
}
.how-other-disclosure {
display: none;
margin: 10px 0 0 35px;
}
#how-other:checked ~ .how-other-disclosure {
display: block;
}
.blocked {
margin-top: 40px;
color: rgba(255, 255, 255, .3);
text-align: center;
}
button {
display: none;
appearance: none;
margin: 40px auto 0;
padding: 5px 40px;
border: 2px solid #fff;
color: rgba(0, 0, 0, .8);
background-color: #9ab593;
font-family: inherit;
font-size: inherit;
font-weight: bold;
cursor: pointer;
}
#permitted:checked ~ .blocked {
display: none;
}
#permitted:checked ~ button {
display: block;
}
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"/>
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""/>
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""/>
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
<style>html, body {
margin: 0px;
padding: 0px;
background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg");
}
.carousel {
position: relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 26px;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #428bca;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
</style>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
avec headers
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
...
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>
avec séparateurs
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
...
<li role="presentation" class="divider"></li>
...
</ul>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Avec un bouton de fermeture
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Avec contextes
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Avec un tableau dedans
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Avec un liste group dedans
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Groupes contextualisés
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
// pour détecter la fermeture de la boite
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
On peut alors recupérer les données saisies
autres events: show.bs.modal shown.bs.modal hidden.bs.modal loaded.bs.modal
<img src="logo.svg" onerror="this.src = 'logo.png';" alt="logo" width="140" height="140"/>
<nav>
<ul>
<li><a href="/" class="active">Home</a></li>
<li><a href="/collections/all">Books</a></li>
<li><a href="/blogs/five-simple-steps-blog">Blog</a></li>
<li><a href="/pages/about-us">About Us</a></li>
<li><a href="/pages/support">Support</a></li>
</ul>
<select>
<option value="" selected="selected">Select</option>
<option value="/">Home</option>
<option value="/collections/all">Books</option>
<option value="/blogs/five-simple-steps-blog">Blog</option>
<option value="/pages/about-us">About Us</option>
<option value="/pages/support">Support</option>
</select>
</nav>
And here is the CSS. Nothing complicated here: We hide the <select> by default, and only show it if the document width is smaller than 960px.
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*appliquer au div contenant des flottants*/
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.element p {
@include vertical-align;
}
ajouter overflow: -moz-hidden-unscrollable; et ça fonctionne...
<script>
function redimtextareas(obj){
obj.style.height='500px';
obj.style.height = obj.scrollHeight + 20 + 'px';
}
</script>
html:
<textarea name="nom" onFocus="redimtextarea(this);" onKeydown="redimtextarea(this);"></textarea>
css:
textarea{overflow:hidden; /* éviter les scrollbars*/}
sans que l’image ne perde son ratio
dépassement de l’écran (ni verticalement, ni horizontalement), donc s’affichant au maximum à l’écran.
sans sur-zoomer l’image
sans JavaScript
HTML, CSS :
<div id="d1">
<div>
<img src="image.jpg"/>
</div>
</div>
#d1 {/* dans le cas d’une lightbox, j’ai ça pour pas que ça dépasse de l’écran */
position: fixed;
top: 5%; right: 5%; bottom: 5%; left: 5%;
}
#d1 div img {
max-width: 100%; max-height: 100%;
width: auto;
height: auto;
}
#d1 div {
width: 100%; height: 100%;
display: inline-block; /* lui il est important */
}
/* CSS */
<style>
.fadein .carrousel .links{clear:both;width:100%;txtr}
.fadein { position:relative; width:100%; height:300px; }
.fadein .carrousel { position:absolute; left:0; top:0; }
</style>
/* HTML */
<div class="fadein">
<div class="carrousel car1">
<div class="content">
<h1>Titre du premier</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupihref="" datat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="links">
<em>1</em>
<a href="" data="car2">2</a>
<a href="" data="car3">3</a>
</div>
</div>
<div class="carrousel car2">
<div class="content">
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupit non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="links">
<a href="" data="car1">1</a>
<em>2</em>
<a href="" data="car3">3</a>
</div>
</div>
<div class="carrousel car3">
<div class="content">
</div>
<div class="links">
<a href="" data="car1">2</a>
<a href="" data="car2">3</a>
<em>3</em>
</div>
</div>
</div>
/* JS/JQuery */
<script>
$('.fadein .carrousel:gt(0)').hide();compteur=0;
function slideshow(){
z=setInterval(
function(){
compteur++;
if (compteur==4){montre=1;cache=3;compteur=1;}
else if (compteur>1){montre=compteur;cache=compteur-1;}
else if (compteur==1){montre=1;cache=3;}
$('.fadein > .car'+cache).fadeOut(500)
.parent().find('.car'+montre).fadeIn(500)
.end();
}
,5000);
return z;
}
slide=slideshow();
// si on survole, pause
$('.fadein').hover(function(ev){
clearInterval(slide);
}, function(ev){
slide = slideshow();
}
);
// clic sur un lien pour changer de diapo
$('.links a').click(function(){
car=$(this).attr('data');
$('.fadein > .carrousel').fadeOut(500)
.parent().find('.car'+car).fadeIn(500)
.end();
compteur=car;
return false;
});
</script>
.Absolute-Center {
height: 100px; width:100px; /* width et height fixés */
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/* dans un container */
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/* centré dans le viewport*/
.Absolute-Center.is-Fixed {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}
/* version responsive */
.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 400px;
max-width: 500px;
padding: 40px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/* sur la droite */
.Absolute-Center.is-Right {
width: 50%;
height: 50%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: auto; bottom: 0; right: 20px;
text-align: right;
}
/* avec overflow */
.Absolute-Center.is-Overflow {
width: 50%;
height: 300px;
max-height: 100%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/* pour les images */
.Absolute-Center.is-Image {
width: 50%;
height: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/* utiliser max-height pour avoir une height variable (pas pour ie <9) */
.Absolute-Center.is-Variable {
display: table;
width: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/* avecmarges négatives (pas responsive)*/
.is-Negative {
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -170px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}
/* via les css3 et transform */
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
transform
translate(-50%,-50%)
<div class="Pos-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
.Pos-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
/* grâce à flexbox */
.Pos-Container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
.centered {
position: fixed;
top: 50%;
left: 50%;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
* html .centered { position:absolute }
margin: 20px auto;
translate()
.center {
position: absolute;
left: 50%;
top: 50%;
/*
Nope =(
margin-left: -25%;
margin-top: -25%;
*/
/*
Yep!
*/
transform: translate(-50%, -50%);
/*
Not even necessary really.
e.g. Height could be left out!
*/
width: 40%;
height: 50%;
}
position:absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 40%;
height: 50%;
position:absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;
<ul id="Grid">
<li></li>
<li></li>
<li></li>
<li></li>
<li class="break"></li>
</ul>
#Grid{
text-align: justify;
font-size: 0.1px; /*hide whitespace between elements*/
}
#Grid li{
display: inline-block;
width: 23%;
font-size:20px;
}
#Grid .break{
width: 100%;
height: 0;
}
#Grid:after{
content: '';
display: inline-block;
width: 100%;
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */
/* 3 COL */
@media (max-width: 800px){
#Grid li{
width: 31%;
padding-top: 31%;
margin-bottom: 3%;
}
}
/* 2 COL */
@media (max-width: 600px){
#Grid li{
width: 48%;
padding-top: 48%;
margin-bottom: 4%;
}
}
/* SINGLE COL */
@media (max-width: 400px){
#Grid li{
width: 100%;
padding-top: 100%;
margin-bottom: 5%;
}
}
#q:hover, #q:focus, #q:not([value=""]) {width: 200px;}
#q {width: 50px;}
div{
// débordement
word-wrap:break-word;
overflow-wrap: break-word;
//césure
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
}
img{
max-width:100%;
height:auto;
}
//pour ie8
.ie8 img{width:auto;}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ou
@viewport{
width: device-width;
zoom:1;
}
font-family: Oxford, Garamond, serif;
font-family: Torque, Tahoma, sans-serif;
font-family: Consolas, Monaco, Courier, monospace;
font-family: 'BPReplay Regular', Arial, sans-serif
font-family: Palatino, Georgia, Helvetica, sans-serif;
font-family: Consolas, Menlo, 'DejaVu Sans Mono', monospace;
font-family: Miso, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'myriad-pro-1', 'myriad-pro-2', HelveticaNeue, Helvetica, Arial, serif;
font-family: Monaco, 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
font-family: 'Verlag Condensed', 'Abadi MT Condensed', 'Futura Std Light Condensed', 'Futura Condensed', 'Gill Sans', 'Arial Narrow', Calibri, 'Trebuchet MS', Georgia, sans-serif;
font-family: 'calluna-1', 'calluna-2', 'Georgia', 'Nimbus Sans L', serif;
font-family: 'adelle-1', 'adelle-2', Georgia, serif;
font-family: 'ronnia-1', 'ronnia-2', sans-serif;
CSS DE LA LIGHTBOX
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
CONTENU DE LA LIGHTBOX
<div id="light" class="white_content">Hi, I am an happy lightbox</div><div id="fade" class="black_overlay"></div>
APPEL DE LA LIGHTBOX
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click me</a>
LIEN POUR FERMER LA LIGHTBOX
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Hide me</a>
Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick.
affiche la scroll bar tout le temps et évite le saut
html{ overflow-y:scroll; }