CSS – Le blog de Niums

12 juin 201631 décembre 2017

Créer un rond et un triangle en css3 ou tout simplement des formes

Pré-requis : les éléments sur lesquels on souhaite créer des formes doivent être de type block ou inline-block

Commençons par le plus simple

Un carré


# index.html
&lt;div class="carre"&gt;&lt;/div&gt;

#style.css
.carre {
    width:100px;
    height:100px;
   background-color:#333;
}

# index.html

#style.css

.carre {

width:100px;

height:100px;

background-color:#333;

}

Un cercle


# index.html
&lt;div class="cercle"&gt;&lt;/div&gt;

#style.css
.cercle {
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color:#333;
}

# index.html

#style.css

.cercle {

width:100px;

height:100px;

border-radius: 50%;

background-color:#333;

}

Un oval


# index.html
&lt;div class="oval"&gt;&lt;/div&gt;

#style.css
.oval {
    width:100px;
    height:50px;
    border-radius: 80px / 40px;
    background-color:#333;
}

# index.html

#style.css

.oval {

width:100px;

height:50px;

border-radius: 80px / 40px;

background-color:#333;

}

Un triangle

La création d’un triangle est un peu différente. Il faut modifier la largeur des bordures pour obtenir la forme voulu. Pour bien comprendre le processus, ici toutes les bordures ont une couleur.


# index.html
&lt;div class="triangle-bottom"&gt;&lt;/div&gt;

#style.css
.triangle-bottom {
     border-bottom: 240px solid yellow;
     border-left: 70px solid red;
     border-right: 70px solid blue;
     background-color:#333;
}

# index.html

#style.css

.triangle-bottom {

border-bottom: 240px solid yellow;

border-left: 70px solid red;

border-right: 70px solid blue;

background-color:#333;

}

Un triangle qui pointe vers le bas


# index.html
&lt;div class="triangle-top"&gt;&lt;/div&gt;

#style.css
.triangle-top {
     border-top: 240px solid blue;
     border-left: 70px solid transparent;
     border-right: 70px solid transparent;
}

# index.html

#style.css

.triangle-top {

border-top: 240px solid blue;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

}

Un triangle qui pointe à gauche


# index.html
&lt;div class="triangle-left"&gt;&lt;/div&gt;

#style.css
.triangle-left {
     border-right: 240px solid blue;
     border-left: 70px solid transparent;
     border-bottom: 70px solid transparent;
}

# index.html

#style.css

.triangle-left {

border-right: 240px solid blue;

border-left: 70px solid transparent;

border-bottom: 70px solid transparent;

}

Un triangle qui pointe à droite


# index.html
&lt;div class="triangle-right"&gt;&lt;/div&gt;

#style.css
.triangle-right {
     border-left: 240px solid blue;
     border-right: 70px solid transparent;
     border-bottom: 70px solid transparent;
}

# index.html

#style.css

.triangle-right {

border-left: 240px solid blue;

border-right: 70px solid transparent;

border-bottom: 70px solid transparent;

}

28 septembre 201431 décembre 2017

Installation Compass sur Mac OSX Lion

Si comme moi vous n’êtes pas un as du terminal et que l’installation de COMPASS n’a pas fonctionner du premier coup, voici comment je m’en suis sorti :-)

D’abord faites un tour ici si vous souhaitez avoir les bases du terminal :

http://wiseheartdesign.com/articles/2010/11/12/the-designers-guide-to-the-osx-command-prompt/
http://www.xrings.net/xrings/rubrique.php3?id_rubrique=8

A savoir : j’installe Compass sur une machine qui n’avait pas Xcode d’installé. Sachant que Ruby (1.8.7) est disponible sur mac par défaut mais avec une version ancienne.

Dans le cas ou il y aurait une tentative d’intsllation non abouti, je vous suggère pour avoir une installation propre de supprimer RVM et Xcode



$ rvm implode
$ rm -rf ~/.rvm/
$ sudo rm -rf /Developer

$ rvm implode

$ rm -rf ~/.rvm/

$ sudo rm -rf /Developer

Installation de GCC avec Xcode ou osx gcc installer

Par défaut , il ,’y a pas d’outils de compilation sous mac osx, c’est pour cela qu’on installe GCC.

Avec Xcode

Il est gratuit et disponible sur l’appstore. Une chose importante à savoir lorsque vous « installer » Xcode depuis l’appstore est qu’il se téléchargera mais qu’il ne s’installe pas. Il faudra donc lancer l’installation pour que celle ci soit bien réalisée.

Le fichier approchant les 2go , ne soyez pas pressé…

Une fois le fichier téléchargé et installé , pensez à installer « Command Line Tools for Xcode »

si Xcode 4.3.1 est correctement installé,

cc –version

devrait vous donner quelque chose qui ressemble à ca cela:

% cc –version
Apple clang version 3.1 (tags/Apple/…
Target: x86_64-apple-darwin11.4.2
Thread model: posix

Avec OSX GCC installer ( recommandé)

L’ alternative si vous ne souhaitez pas installer ce volumineux fichier qu’est Xcode est par ici :

https://github.com/kennethreitz/osx-gcc-installer/downloads et choisissez GCC Installer for OSX 10.7+, v2,

site : https://github.com/kennethreitz/osx-gcc-installer

Installation de Homebrew

Homebrew est un gestionnaire de paquet pour mac osx.


ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"

ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"

site : http://mxcl.github.com/homebrew/

Vous pouvez maintenant installer des outils dont vous pourrez avoir tel que autoconf , automake , git, wget…

$ brew install automake
$ brew install git
$ brew install wget

Si vous avez une erreur lors de votre utilisation avec Homebrew, lancer :

$ brew doctor

Installation de RVM

RVM pour Ruby version manager vous permettra d’avoir plusieurs version de Ruby (et donc aussi de SASS) sur la même machine. Il est préférable d’avoir un environnement de développement dédié à chaque type de projet. SASS étant en perpétuelle évolution vos anciens fichiers SASS risque de ne plus se compiler correctement lors de vo mise à jour.

installation de RVM avec ruby (version stable) :

$ \curl -L https://get.rvm.io | bash -s stable –ruby

get.rvm.io est en fait une redirection vers https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer
Vous pourriez aussi utiliser l’url absolue pour l’installation :

$ \curl https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer | bash -s stable

mais si cela ne fonctionne pas :

Comme nous avons déjà installer GCC Installer for OSX 10.7+, v2 par Kenneth Reitz, un simple

$ rvm reinstall 1.9.3

et le tour est joué ! Il ne vous reste plus qu’à définir la dernière version comme la version par défaut

$ rvm –default use 1.9.3

Site : https://rvm.io/rvm/install/

Vérifions que les bonnes version sont installées pour rvm et ruby:

$ rvm -v

devrait nous donner un truc comme

rvm 1.18.5 (wayneeseguin/master) by Wayne E. Seguin <wayneeseguin@…

$ ruby -v

ruby 1.9.3p374 (2013-01-15 revision 38858) …

Installation de compass

Il ne nous reste plus que à installer compass

$ gem update –system
$ gem install compass

Si vous détester les lignes de commandes vous pouvez vous procurez SCOUT

site : http://mhs.github.com/scout-app/

7 août 201331 décembre 2017

Comment choisir l’unité de mesure pour ses fonts : px , em ou rem

Choisir l’unité de mesure pour la police est toujours sujet à débat…

Entre les %, pt, in,px, em et rem, on s’y perd un peu. J’avais l’habitude d’utiliser exclusivement les pixels mais depuis que j’utilise Sass & Compass et que j’ai considérablement simplifier le temps de création de mes css, rester au px aurait été dommage. Surtout lorsqu’on sait que nous pouvons utiliser des mixins assez intéréssante comme celle ci :

Continuer la lecture de « Comment choisir l’unité de mesure pour ses fonts : px , em ou rem »

19 juin 201317 juin 2013

Les curseurs en css

Il est possible d’utiliser le css pour changer l’apparence des curseurs.
Ci-dessous un petit rappel :

Continuer la lecture de « Les curseurs en css »

20 novembre 201231 décembre 2017

Le responsive web design

Le « responsive web design », l’ultime solution ?

Habituellement, à la création d’un site internet, le design de celui ci devait apparaitre à l’identique sur tous les navigateurs du plus ancien encore en circulation au dernier à la mode. Avec l’arrivée des smartphone et tablette, dont la résolution d’écran dépasse maintenant celui de certains ordinateur de bureau, la donne à changer et il faut maintenant en tenir compte. Il n’est plus question de créer un site principal pour les « desktops » et un site secondaire pour les » mobiles » car les résolutions d’écran ayant tendances à se croiser cela n’a plus de sens. C’est là que le responsive web design fait son apparition.

Ce terme est l’art de créer un site internet dont le design s’adapte au changement de résolution de l’écran (ou navigateur) de l’utilisateur. Le but étant, par exemple, qu’un site ayant un design sur 3 colonnes pour une résolution minimale de 1000px de large ait un design sur 2 colonnes lorsque la résolution de l’écran ou du navigateur descend sous 800px de large par exemple et enfin 1 colonne lorsque celle ci passe en dessous de 300px. Il s’agit donc d’adapter dynamiquement le design à l’aide de css.

C’est une manière de travailler qui est intéressante car nous sommes arrivé, en terme de web design et développement, à un point ou la multiplicité de dispositif avec des résolutions différents devient un vrai casse tête pour le développeur et/ou la société qui souhaite un design adapté à tous les formats. Il est certain qu’il n’est pas possible de développer autant de version de site qu’il existe de résolutions.

Voici un site, anderssonwise.com, qui a su remarquablement mettre en place le « responsive web design ».

responsive web design site — Anderson Rise

Celui ci aussi : foodsense.is

Responsive web design site 2 — Food sense

Mais tout n’est pas parfait… loin de là

Malheureusement cette nouvelle façon de créer n’est pas exempt de défaut et de contrainte.

Le budget

Le cout de ce type de site est supérieur au site classique car il faut créer autant d’adaptation de page que de dispositif visé. Pour un site classique avec 5 pages, il faudra penser aux versions :

smartphone
tablette
netbook
ordinateur de bureau

Les images

C’est le problème le plus important qui se pose lors d’une conception utilisant cette technique. En responsive web design, les images sont redimensionnées pour s’adapter à un écran de bureau ou un écran de terminal mobile avec une résolution bien inférieure. De ce fait le mobile téléchargera une image extrêmement lourde et utilisera de la bande passante inutilement.

De plus redimensionner une image force le dispositif à consommer plus de mémoire et augmente la charge du processeur.
Sur un mobile, l’image dont les dimensions et le poids sont élevés est

téléchargée,
chargé dans la mémoire du téléphone
et enfin redimensionné pour que sa dimension soit adaptée à l’écran du terminal mobile.

Pour une image de 1024X768 chargée sur un mobile lambda, celui ci aura besoin de 2,36MB de mémoire. Si vous chargé 4 images de cette taille, cela fera tout de même 9,44MB à charger. Les mobiles ont une mémoire limitée et beaucoup de téléphones ont une mémoire allouée au images et aux pages web limitées, et le fait de dépasser cette limitation cause des problèmes de chargement incomplète de pages ainsi que d’autres problèmes.

Le temps de chargement des pages et le chargement d’éléments qui ne seront pas visible

En responsive web design plus la résolution est grande , plus il y a d’éléments visible sur l’écran (images, vidéos, flash etc…) et plus certains éléments ont une taille plus élevée. A contrario, lorsque la résolution diminue, les médias voient leur dimensions diminuées ou tout simplement disparaisse de l’écran. Sur un ordinateur de bureau cela ne serait pas très grave (car celui ci est plus puissant qu’un mobile et dispose la plupart du temps de bien plus de mémoire), mais sur un mobile ces éléments sont toujours téléchargés même s’il ne sont pas visible. C’est un point encore plus gênant que le fait de redimensionner les images car au moins ceux ci sont visible. Ces fichiers téléchargés, visible et invisibles, auront un impact notable sur le temps de chargement de la page.

Si des éléments doivent être caché il est préférable de les supprimer : vérifier le type de résolution avant l’affichage ?

Plus de code , plus à mettre à jour

La mise en place d’un site utilisant le responsive web design nécessitera plus de code.
Étant donné que le site doit s’adapter si une modification est demandé, cette modification doit être visible (donc faites) sur les autres déclinaisons.

11 juillet 20129 août 2013

Ajouter un beau hover à la galerie par défaut de WordPress avec jquery

Pour mon portofolio, j’avais besoin d’améliorer la galerie photo de base de WordPress.
Elle me convenait, toutefois je souhaitais que sur le roll hover apparaisse un fond blanc sur lequel le nom de la référence soit marqué.
L’idée est de récupérer le title de l’image et de le coller dans le h3 d’un div caché qui ne s’afficherait qu’au passage de la souris.

L’exemple se trouve ici : http://webdesign.niums.com/clients/

Pour rappel voilà de quoi est composée la galerie créée par WordPress
.gallery : class de la galerie
.gallery-item : dl : conteneur
.gallery-icon :dt : élément à définir
.attachment-thumbnail : notre miniature

Voilà ce que nous allons y ajouter grâce à jquery
.hide : un div qui contiendra notre texte
h3 : une balise de titre
XXX : notre texte en le copiant depuis la balise title de l’image

Préparons nos fichiers

Nous aurons besoin
– de créer un fichier javascript externe que nous chargerons : site.js
– de modifier le fichier css de wordpress : style.css

Tout d’abord créons un fichier javascript que nous enregistrerons dans un dossier js de notre dossier de thème.

Nous appellerons ce fichier dans le header.php ou le footer.php selon notre convenance : soit avec un chargement en mémoire avec un enqueue soit directement dans le fichier header

Charger les scripts en mémoire : Version wp_enqueue_scripts

Dans le fichier function php, ajoutons le code ci-dessous


/**
 * chargement de jquery, de la feuille de style et du fichier js
 */
function niums_scripts() {

 /* 
 chargeons jquery 
 wp_enqueue_scripts action hook charge seulement en front end 
 si les scripts sont nécessaires en admin on peut aussi 
 utiliser admin_enqueue_scripts 
 */	

   // l'appel à jquery qui est déjà inclus dans wordpress
   wp_enqueue_script('jquery'); 
   // appel du fichier styles.css
   wp_enqueue_style( 'style', get_stylesheet_uri() );
    
   // chargement de site.js en faisant attention à ce que jquery soit chargé avant 
   // (en tant que dépendance) puis on le charge dans le footer
   //wp_enqueue_script( $handle    ,$src    ,$deps    ,$ver    ,$in_footer );
    wp_enqueue_script( 'site.js', get_template_directory_uri() . '/js/site.js', array( 'jquery' ), '' , TRUE );
 
}

add_action( 'wp_enqueue_scripts', 'niums_scripts' );

/**

* chargement de jquery, de la feuille de style et du fichier js

function niums_scripts() {

chargeons jquery

wp_enqueue_scripts action hook charge seulement en front end

si les scripts sont nécessaires en admin on peut aussi

utiliser admin_enqueue_scripts

// l'appel à jquery qui est déjà inclus dans wordpress

wp_enqueue_script('jquery');

// appel du fichier styles.css

wp_enqueue_style( 'style', get_stylesheet_uri() );

// chargement de site.js en faisant attention à ce que jquery soit chargé avant

// (en tant que dépendance) puis on le charge dans le footer

//wp_enqueue_script( $handle ,$src ,$deps ,$ver ,$in_footer );

wp_enqueue_script( 'site.js', get_template_directory_uri() . '/js/site.js', array( 'jquery' ), '' , TRUE );

}

add_action( 'wp_enqueue_scripts', 'niums_scripts' );

Charger directement les scripts dans le header

Si pour une raison ou une autre, le chargement en mémoire ne vous convient pas, vous pouvez aussi charger directement les fichiers dans header.php entre head et /head


// Par défaut, jQuery est chargé dans le thème, pas besoin de le recharger
// charger le fichier js
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/site.js"></script>

// votre fichier style est normalement déjà chargé comme suit
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

// Par défaut, jQuery est chargé dans le thème, pas besoin de le recharger

// charger le fichier js

// votre fichier style est normalement déjà chargé comme suit

Création de notre js

Maintenant que tous nos fichiers sont chargés, nous pouvons créer nos fonctions.

PS : J’ai modifié mon appel à la fonction principale qui se fait lorsque le document est prêt afin qu’on puisse utiliser $() comme alias et cela sans conflit.


jQuery(document).ready(function($){
    // ici on peut utiliser $() avec la certitude que c'est jQuery, sans conflit possible
   // le code qui suit se placera donc ici
});

jQuery(document).ready(function($){

// ici on peut utiliser $() avec la certitude que c'est jQuery, sans conflit possible

// le code qui suit se placera donc ici

});

Pour commencer, ajoutons la classe wrap à chaque liste de définitions.
Cette class permettra aux listes d’avoir des positions « relative » afin que le futur div .hide, qui contient notre texte, puisse être positionné au-dessus des images car en position « absolute »


$(".gallery-item").addClass("wrap");

// puis attachons un gestionnaire d'évènement à la class wrap

$(".wrap").on({
   mouseover: function() {
      	$(".hide", this).stop().fadeTo(300, 1.0); // on définit le hover à 100%
   },
     mouseout: function() {
      	$(".hide", this).stop().fadeTo(300, 0); //  on définit le hover à 0%
  }
 });

//.puis nous ajoutons notre div .hide :  après  .gallery-icon 

$(".gallery .gallery-item .gallery-icon").append('<div class="\'hide\'"></div>');

// puis nous créons un h3 dans le .hide

$(".gallery .gallery-item .gallery-icon .hide").wrapInner('<h3>'); 

// puis nous copions le title dans le h3 en le recopiant depuis la balise title de l'image 

$(".gallery .gallery-item .gallery-icon").each(function (index) { 
var leTitre = $(this).find(".attachment-thumbnail").attr('alt');
$(this).find(".hide h3").text(leTitre);

$(".gallery-item").addClass("wrap");

// puis attachons un gestionnaire d'évènement à la class wrap

$(".wrap").on({

mouseover: function() {

$(".hide", this).stop().fadeTo(300, 1.0); // on définit le hover à 100%

mouseout: function() {

$(".hide", this).stop().fadeTo(300, 0); // on définit le hover à 0%

}

});

//.puis nous ajoutons notre div .hide : après .gallery-icon

$(".gallery .gallery-item .gallery-icon").append('<div class="\'hide\'"></div>');

// puis nous créons un h3 dans le .hide

$(".gallery .gallery-item .gallery-icon .hide").wrapInner('<h3>');

// puis nous copions le title dans le h3 en le recopiant depuis la balise title de l'image

$(".gallery .gallery-item .gallery-icon").each(function (index) {

var leTitre = $(this).find(".attachment-thumbnail").attr('alt');

$(this).find(".hide h3").text(leTitre);

Pour infos jQuery peut accepter un second paramètre afin d’écraser le contexte de la sélection


 $("img", this);
// est la même chose que
 $(this).find("img");

$("img", this);

// est la même chose que

$(this).find("img");

Et si l’image est un descendant direct de l’élément cliqué alors nous pouvons aussi écrire :


$(this).children("img");

$(this).children("img");

En ce qui concerne le css, rien de spécial

Ajoutez le code ci-dessous dans votre fichier style.css


/* Wraps */
.wrap {
	position:relative;
	width:100%;
	height:auto;
}

.hide {
        display:none;
	background-color:#fff;
	background-color:rgba(255,255,255,.9);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}

/* Wraps */

.wrap {

position:relative;

width:100%;

height:auto;

}

.hide {

display:none;

background-color:#fff;

background-color:rgba(255,255,255,.9);

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:2;

}

Pour info

Dans WordPress il est possible de choisir le nombre d’images par ligne.
Dans le cas contraire, pour décider du nombre d’éléments par ligne, on pourrait aussi écrire :


dl dt:nth-child(4n){clear:left;} 
//ou
ul li:nth-child(4n){clear:left;}

dl dt:nth-child(4n){clear:left;}

//ou

ul li:nth-child(4n){clear:left;}

Voilà +++

22 janvier 200923 janvier 2009

Migration vers wordpress 2.7 et modification du design

Et voila ma petite mise à jour vers wordpress 2.7 est faite et j’en ai profité pour refaire mon blog et voir les nouveautés apportées à wordpress.

Voici un petit avant après.

Dans les nouveautés de wp 2.7 j’ai surtout aimé :
– L’ergonomie de l’interface d’administration : les développeurs se sont enfin bouger sur cette parti. C’est surement du à tous les blogueurs qui râlaient sur cet interface d’administration.
– La mise à jour automatique de wordpress
– La gestion des plugins : installation et la mise à jour automatique.
– La possibilité de répondre aux commentaires directement dans l’administration.
– La personnalisation des commentaires par rapport à leurs auteurs avec un simple css : Continuer la lecture de « Migration vers wordpress 2.7 et modification du design »

11 mars 200822 janvier 2009

Myspace’s tips flash et css !

Myspace urban kiss
Je n’ai pas eu réellement le temps de me remettre sur mon blog ces derniers temps. Pas mal de boulot en freelance et aussi coté musique.
En fait c’est sur ce dernier point que je vais écrire ce billet. Donc, dernièrement je me suis occupé du myspace du groupe de musique avec lequel je suis. D’habitude je ne me prends pas trop la tête étant donné que je n’ai fait qu’un seul myspace et c’était pour moi. Je fais soit un truc plus que simple ou j’utilise Love my flash. Cette fois j’ai eu envie de voir ce qui m’était possible de faire avec myspace. Voici quelques infos qui pourraient en intéresser quelques un.

J’ai donc tout d’abord caché le maximum d’élements avec display: none, ensuite j’ai créé quelque chose d’assez simple en css, crée mes flash, mélangé le tout et envoyé la préparation sur myspace et comme vous vous en doutez ça n’a pas du tout fonctionné au début.

Il faut savoir qu’on peut apparemment faire ce qu’on veut sur myspace tant qu’on ne cache pas les pubs.
Les # sont automatiquement supprimés, pas d’utilisation d’id donc et les commentaires s’écrivent : .r { écrire ici les commentaires}.

Autre chose myspace a bloqué la possibilité d’utiliser les getURL dans flash, on ne peut donc pas créer de lien dans un flash vers un autre myspace ou un site externe. C’est du en fait à une attaque par un vers utilisé dans flash en 2006. Vous remarquez donc à chaque fois que vous ajoutez un flash que celui-ci se voit inclure les propriétés ci-dessous :


&lt;param name="allownetworking" value="internal" /&gt;
&lt;param name="allowScriptAccess" value="never" /&gt;
&lt;param name="enableJSURL" value="false" /&gt;
&lt;param name="enableHREF" value="false" /&gt;

La seule solution trouvée pour le moment est Continuer la lecture de « Myspace’s tips flash et css ! »