Faire un triangle transparent en CSS

Voici un CodePen vous permettant de réaliser une flèche transparente en utilisant uniquement ce principe de bordure CSS :

See the Pen YZRYrY by habai (@jhabai) on CodePen.

Aller plus loin sur les flèches/triangles CSS

• http://www.bellami.fr/triangles-css
• http://apps.eky.hk/css-triangle-generator/

L’article Flèche transparente en CSS (triangle CSS, bordures) est apparu en premier sur Ice Development.

Avec les conditions, il est possible de vérifier certaines informations dans notre fichier SCSS. Par exemple, si la couleur est égale à orange, alors on définie de nouveaux parametres :

CSS généré :

Grâce à cette condition, il est possible de changer la valeur de $shadow en paramétrant $color. Dans cet exemple, nous vérifions la valeur de $color, néanmoins, plusieurs autres comparaisons sont possible. Découvrez tous les control directive de SASS.

Les boucles

Les boucles permettent de répéter une instruction autant de fois que vous le souhaitez.

La boucle @for

CSS généré :

La boucle @while

CSS généré :

La boucle @each

CSS généré :

Cette liste peut être définie dans une variable (comparable aux tableaux en PHP). Chaque valeur doit être séparée par une virgule.
Exemple : $var: puma, sea-slug, egret, salamander;

L’article SASS – Leçon 5 : les conditions et les boucles est apparu en premier sur Ice Development.

Une mixin est un morceau de code paramétrable et réutilisable n’importe où dans votre fichier SASS. Comme pour une fonction, une mixin peut prendre des paramètres.

Mixin avec des paramètres

Grâce aux mixins, il vous sera possible de générer plusieurs dizaines de lignes CSS avec une seule ligne (paramétrable, ou non) en SCSS !

Exemple :

Fichier CSS compilé :

SASS n’intègre aucune mixin préconçue. Néanmoins, c’est l’un des points forts de Compass qui lui, propose une centaine de mixins prêtes à l’emploi : Compass Mixins.

Les fonctions

La différence entre une mixin et une fonction est le résultat retourné une fois compilé. Une mixin peut vous générer plusieurs lignes de code CSS tandis qu’une fonction vous retournera uniquement une valeur.

Grâce aux fonctions, il vous sera possible de calculer le pourcentage d’un bloc, de convertir une unité « px » en « em/rem » ou encore d’éclaircir une couleur.

Retrouvez le liste complète des fonctions SASS et Compass.

L’article SASS – Leçon 4 : les mixins et les fonctions est apparu en premier sur Ice Development.

Pour utiliser une variable, vous devez la déclarer avec l’aide du signe « $ » (dollars) suivi de son nom et de sa valeur : $background: rgba(black, .2);

Une fois déclarée, la variable peut être appelée n’importe où dans la suite du document, même si elle est définie dans un fichier importé à l’aide de @import.

Code CSS généré :

L’utilisation d’une variable n’a pas de limite, vous pouvez l’appeler autant de fois que vous le souhaitez. Il est également possible d’utiliser une variable dans une mixin, une fonction ou des boucles.

Cas d’utilisation d’une variable booléenne en SASS

Dans le billet SASS – Leçon 2, nous avons expliqué qu’il est possible d’organiser votre CSS de façon modulaire.
Grâce aux variables booléennes, vous allez pouvoir activer ou désactiver un partial ou une portion de code SASS.

Avec $use-slider à « false », le code à l’intérieur de la condition ne sera pas compilé.

L’article SASS – Leçon 3 : les variables est apparu en premier sur Ice Development.

Avec SASS, il est possible d’organiser votre projet en plusieurs fichiers, qui seront importés et compilés en un seul fichier CSS minifié.
Cela est rendu possible grâce aux partials.

Les partials en SASS

Le nom d’un partial est toujours précédé d’un underscore.
Ex : _reset.scss

Sans cet underscore, SASS générerait un fichier supplémentaire reset.css.

Code SCSS du fichier _reset.scss :

Code SCSS du fichier principal style.scss :

CSS compilé :

Grâce à la règle @import, vous pouvez opter pour une organisation modulaire, ce qui vous permettra d’avoir un code mieux structuré et plus facile à maintenir (ce que l’on retrouve dans la philosophie SMACSS).

L’article SASS – Leçon 2 : diviser pour mieux régner, la factorisation est apparu en premier sur Ice Development.

Imbrication de règle, exemple avec la couleur d’un lien et ses états hover et focus :

CSS compilé :

L’imbrication vous aidera à avoir un code propre, logique et bien organisé, qui devrait être plus facile à entretenir au cours du temps.

Bien-sûr, il est possible d’utiliser l’imbrication dans n’importe quel cas. Exemple avec les media queries :

CSS compilé :

L’article SASS – Leçon 1 : l’imbrication des règles est apparu en premier sur Ice Development.

CSS Hat est une extension payante (34.99$) qui va vous permettre de produire votre CSS beaucoup plus rapidement !

Voici un exemple d’utilisation sur la découpe HTML du menu principal en rouge ci-dessous :

1. Sélectionnez votre calque (attention, le calque doit impérativement comporter les styles ! Si vous utilisez un calque fusionné, le plugin ne fonctionnera pas)
2. Ouvrez la fenêtre dédiée de CSS Hat
3. Cliquez sur le bouton « Copy »

CSS Hat permet

• La génération dans les langages suivants : CSS classique, LESS, SCSS (Compass), SASS et Stylus
• La génération des prefix navigateurs
• La génération des dimensions du calque
• La génération d’une class CSS

Où le trouver ?

Pour acheter CSS Hat, rendez-vous sur le site officiel du plugin : csshat.com.

CSS Hat vous fera gagner énormément de temps pendant votre découpe, notamment pour les boutons complexes ou encore pour les fonds en dégradé, comme dans l’exemple ci-dessus.

L’article Générez plus rapidement vos feuilles de style grâce à CSS Hat est apparu en premier sur Ice Development.

Prérequis pour pouvoir exporter vos icônes au fomat SVG :

1. Installer le script : save-ps-to-svg.jsx dans le dossier C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts
2. Démarrer Photoshop et avoir Illustrator installé sur sa machine.

Les screenshots ci-dessous sont fait sur Photoshop CS6, mais le script d’export des icônes au format SVG devrait fonctionner également sur CS5.
Source : http://hackingui.com/design/export-photoshop-layer-to-svg/

Procédure d’export svg :

1. Renommer les calques à exporter en terminant par .svg
   
2. Sélectionner la forme, appuyer sur A (outil de sélection de tracé) et cliquer sur fusionner les composants de forme.
   
3. Lancer le script via Fichier / Script, Illustrator va se lancer automatiquement et exporter un à un les calques .svg à l’endroit où vous avez sauvegardé votre PSD.

L’article Exporter ses icônes en SVG depuis Photoshop est apparu en premier sur Ice Development.

N’oubliez pas que si votre client est sous Windows XP, sa version d’Internet Explorer sera au maximum la version 8.

Notre script PHP détecte si la version d’Internet Explorer est obsolète. Si c’est le cas, un message invite l’utilisateur à changer de navigateur pour autre plus performant, plus sécurisé et surtout à jour !

Comment s’en servir ?

Nous recommandons l’utilisation de ce code sur la page de login de votre administration. Il suffit de copier/coller ce code juste après la balise <body>, après avoir récupéré le script plus bas :

Pour rappel, les commentaires additionnels ne sont plus pris en compte à partir de la version 10. Le code ci-dessus s’exécutera donc uniquement sur les versions égales ou inférieures à Internet Explorer 9.

Aperçu du message affiché pour un utilisateur d’IE8

Télécharger les fichiers pour Symfony 2 : https://github.com/reficedev/alert-ie-sf2

L’article Script PHP pour prévenir l’internaute de l’utilisation d’un navigateur obsolète (PHP Procédural + Symfony2) est apparu en premier sur Ice Development.

L’article Comment détecter le clic partout sauf sur un certain élément HTML en jQuery est apparu en premier sur Ice Development.