1 - Crop d'images par lot
sudo apt install graphicsmagick-imagemagick-compat
mogrify -crop 2420x1700+670+100 *.png
Results for graphisme : 14
2 - labels input flottants CSS pur
// 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;
}
3 - Pure CSS3 Image Slideshow Example
<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>
4 - Make a Simple JavaScript Slideshow without jQuery — SitePoint
<ul id="slides">
<li class="slide showing">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
<li class="slide">Slide 4</li>
<li class="slide">Slide 5</li>
</ul>
/*
essential styles:
these make the slideshow work
*/
#slides {
position: relative;
height: 300px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: 2;
}
/*
non-essential styles:
just for appearance; change whatever you want
*/
.slide {
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
}
.slide:nth-of-type(1) {
background: red;
}
.slide:nth-of-type(2) {
background: orange;
}
.slide:nth-of-type(3) {
background: green;
}
.slide:nth-of-type(4) {
background: blue;
}
.slide:nth-of-type(5) {
background: purple;
}
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
}
5 - makeFavIcon - créer un favicon avec un logo et un fond coloré
function makeFavIcon($background_color){
# Si on a changé la coupeur dans color.php
if (filemtime('favicon.png')!=filemtime('colors.php')){
# on charge le logo
$logo=imagecreatefrompng ('img/logo.png');
# ça c'est pour la transparence
imageAlphaBlending($logo, true);
imageSaveAlpha($logo, true);
# on crée l'image de fond
$fav=imagecreatetruecolor(140,140);
imageAlphaBlending($fav, true);
imageSaveAlpha($fav, true);
# on extrait la couleur (passée en #fff ou #ffffff)
preg_match('/#?([a-fA-F0-9]{1,2})([a-fA-F0-9]{1,2})([a-fA-F0-9]{1,2})/',$background_color,$color);
if (strlen($color[1])<2){
$color[1]=$color[1].$color[1];
$color[2]=$color[2].$color[2];
$color[3]=$color[3].$color[3];
}
$color=array_map("hexdec",$color);
$color = ImageColorAllocate ($fav,$color[1],$color[2],$color[3]);
# on crée le fond dans la couleur
imagefilledrectangle ($fav,0,0,140,140,$color);
imagecopy($fav,$logo,0,0,0,0,140,140);
# on sauve l'image
imagepng($fav, 'favicon.png');
# on libère la mémoire
imagedestroy($fav);
# on change le filemtime du fichier de couleurs
touch('colors.php');
}
}
6 - Centrer une image verticalement et horizontalement
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%);
}
7 - Image fullscreen en css
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 */
}
8 - calcul de tailles pour galerie aux tailles d'image optimisée
viewport_width = $(window).width()
ideal_height = parseInt($(window).height() / 2)
summed_width = photos.reduce ((sum, p) -> sum += p.get('aspect_ratio') * ideal_height), 0
rows = Math.round(summed_width / viewport_width)
if rows < 1
# (2a) Fallback to just standard size
photos.each (photo) -> photo.view.resize parseInt(ideal_height * photo.get('aspect_ratio')), ideal_height
else
# (2b) Distribute photos over rows using the aspect ratio as weight
weights = photos.map (p) -> parseInt(p.get('aspect_ratio') * 100)
partition = linear_partition(weights, rows)
# (3) Iterate through partition
index = 0
row_buffer = new Backbone.Collection
_.each partition, (row) ->
row_buffer.reset()
_.each row, -> row_buffer.add(photos.at(index++))
summed_ratios = row_buffer.reduce ((sum, p) -> sum += p.get('aspect_ratio')), 0
row_buffer.each (photo) -> photo.view.resize parseInt(viewport_width / summed_ratios * photo.get('aspect_ratio')), parseInt(viewport_width / summed_ratios)
9 - Charger du contenu onscroll
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css("display","none");
loading = false;
});
}
}
});
$(document).ready(function() {
$('#loaded_max').val(50);
});
10 - Redimensionner les images automatiquement
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
11 - Smooth Scrool vers une ancre
// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
$(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
12 - Ajouter un gravatar
/******************
*@email - Email address to show gravatar for
*@size - size of gravatar
*@default - URL of default gravatar to use
*@rating - rating of Gravatar(G, PG, R, X)
*/
function show_gravatar($email, $size, $default, $rating)
{
echo '<img src="http://www.gravatar.com/avatar.php?gravatar_id='.md5($email).
'&default='.$default.'&size='.$size.'&rating='.$rating.'" width="'.$size.'px"
height="'.$size.'px" />';
}
13 - Trouver la couleur dominante d'une image
Determine the dominant color of an image
This code will be super useful for people managing images or photography website. With it, you can analyze any image and get its dominant color (R, G, or B).
$i = imagecreatefromjpeg("image.jpg");
for ($x=0;$x<imagesx($i);$x++) {
for ($y=0;$y<imagesy($i);$y++) {
$rgb = imagecolorat($i,$x,$y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> & 0xFF;
$b = $rgb & 0xFF;
$rTotal += $r;
$gTotal += $g;
$bTotal += $b;
$total++;
}
}
$rAverage = round($rTotal/$total);
$gAverage = round($gTotal/$total);
$bAverage = round($bTotal/$total);
14 - Carrousel minimaliste
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
In thinking about the CSS, I decided to just lock all the images into the same place using absolute positioning.
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
jQuery Slideshow
Now to think about the slideshow. First, I knew that I'd want to hide all the images except the first one.
$('.fadein img:gt(0)').hide();
You have to remember that the image index starts at 0. That means that we want all images after the first one to be hidden.
Next, I need a setInterval to iterate through the images every few seconds.
setInterval(function(){ },3000);
From here, I started writing this out piece by piece to get what I wanted. I needed the first image to fade out.
$('.fadein :first-child').fadeOut()
After that, I need the next image to fade in.
.next('img').fadeIn()
Then I needed to take the first image and throw it onto the end of the stack.
.end().appendTo('.fadein')
The end() resets jQuery's internal reference back to the original selection. That way, it's the :first-child that I'm appending to the end of the .fadein element and not the next('img').
That's it?
Well, yes. That's it.
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});