blog.roxing.net

Pure CSS Star Rating Widget

Pierrox — 2019-08-13T06:19:37Z

Formulaire d'évaluation avec étoile en pure CSS.

Html :

<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating"> <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label> <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label> <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label> <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label> <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

CSS :

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; } /****** Style Star Rating Widget *****/ .rating { border: none; float: left;
} .rating > input { display: none; } .rating > label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\f005";
} .rating > .half:before { content: "\f089"; position: absolute;
} .rating > label { color: #ddd; float: right; } /***** CSS Magic to Highlight Stars on Hover *****/ .rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */ .rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }

Voir en ligne : Pure CSS Star Rating Widget

Crédit : James Barnett

[SPIP] Appeler le contenu d'un fichier distant directement à l'intérieur d'un squelette

placido — 2016-12-19T02:23:24Z

Récemment, j'ai eu besoin d'incorporer le contenu d'un fichier distant à l'intérieur d'un squelette de feuille de style. En l'occurence, il s'agissait de récupérer un fichier CSS dans sa dernière version (fréquemment mise à jour) et d'étendre certaines règles CSS via des directives @extend de SCSS à d'autres élémenst de mon choix.

Pour complexifier encore la chose, le document source question débute par un BOM [1] qui faisait planter le compilateur SCSSphp.

Mais à SPIP vaillant, rien d'impossible, sans quitter le squelette, en 2 lignes de code s'il vous plait :

[(#HTTP_HEADER{Content-type:text/css[; charset=(#CHARSET)]})] [(#VAL{url_abs_to_css}|recuperer_url{#ARRAY{transcoder,true}}|table_valeur{page}|texte_script)] .formulaire_spip { @extend .form--fancy; } /* etc ... */ #FILTRE{scss_compile}

[1] http://stackoverflow.com/questions/3255993/how-do-i-remove-%C3%AF-from-the-beginning-of-a-file

Effeckt.css

placido — 2016-04-11T10:55:52Z

Collection d'animations CSS3

- signets / css, graphisme, animations, keyframes

[BASH] Utiliser l'API fontello.com

placido — 2015-10-14T12:35:17Z

Allons directement dans le vif du sujet en créant un fichier

Makefile
chmod +x Makefile pour le rendre exécutable quelque part en amont de votre projet :

# Makefile FONT_DIR ?= ./css/icons PROJECT_NAME ?= projet_foo FONTELLO_HOST ?= http://fontello.com fontopen: @if test ! `which curl` ; then \ echo 'Install curl first.' >&2 ; \ exit 128 ; \ fi curl --silent --show-error --fail --output .fontello \ --form "config=@${FONT_DIR}/config.json" \ ${FONTELLO_HOST} x-www-browser ${FONTELLO_HOST}/`cat .fontello` fontsave: @if test ! `which unzip` ; then \ echo 'Install unzip first.' >&2 ; \ exit 128 ; \ fi @if test ! -e .fontello ; then \ echo 'Run `make fontopen` first.' >&2 ; \ exit 128 ; \ fi rm -rf .fontello.src .fontello.zip curl --silent --show-error --fail --output .fontello.zip \ ${FONTELLO_HOST}/`cat .fontello`/get unzip .fontello.zip -d .fontello.src rm -rf ${FONT_DIR}/* mv `find ./.fontello.src -maxdepth 3 \( -name "config.json" -o -name "*.woff" -o -name "*.ttf" -o -name "*.svg" -o -name "*.eot" \) ` ${FONT_DIR} mv `find ./.fontello.src -maxdepth 3 -name "${PROJECT_NAME}-codes.css"` ${FONT_DIR}/codes.scss rm -rf .fontello.src .fontello.zip

Passons rapidement le script en revue

Tout d'abord, on doit éditer le script pour renseigner 2 informations :

FONT_DIR, qui est l'emplacement du dossier qui va recevoir les éléments issus de fontetto (.ttf, .woff. css, .css, ...), relativement au fichier Makefile. Personnellement j'ai choisi un dossier "icons" dédié à cela, et distinct des polices (webfonts) complètes qui elles sont dans un autre dossier "fonts".
PROJECT_NAME qui désigne le nom du projet.

A présent, direction fontello.com où vous pouvez commencer à composer votre webfont personnalisée projet_foo. Enregistrez (bouton en haut à droite), téléchargez le .zip et récupérez le fichier config.json (qui est le seul qui nous intéresse) et copiez le dans le dossier FONT_DIR.

À l'usage

À partir de maintenant, l'ajout ou modification d'icônes va se faire en un clin d'oeil via 2 commandes successives, issues du fichier Makefile :

make fontopen

inspecte le fichier config.json et ouvre le navigateur avec les paramètres d'édition sauvegardés.

make fontsave

récupère la version mise à jour du projet_foo en écrasant les anciens fichiers.

Pour ma part, c'est surtout le fichier projet_foo-codes.css avec les codes qui m'importe (voir et modifier au besoin la ligne 32) ; c'est pourquoi je renomme en codes.scss pour l'appeler ultérieurement dans la compilation SASS.

Ultime remarque, si vous constatez un problème d'affichage des icônes après une mise à jour, essayer de changer le paramètre en fin d'url dans la déclaration css font-face.

@font-face { font-family: 'projet_foo'; src: url('icons/projet_foo.eot?248676'); /* ... */ }

devenant par exemple :

@font-face { font-family: 'projet_foo'; src: url('icons/projet_foo.eot?1039286'); /* ... */ }

C'est un désagrément dû aux navigateurs, qui allouent un cache spécifique pour les webfonts.

[SPIP] Mettre en exergue une partie d'un titre

placido — 2015-07-08T17:53:12Z

On est parfois confronté au souhait d'afficher une version raccourcie d'un #TITRE d'article ; typiquement dans un menu de navigation latéral où l'espace est précieux, ou bien si l'on souhaite mettre en exergue une partie seulement du titre (les n premiers mots).

Prenons l'exemple trivial d'un #TITRE un peu long :

La buvette des joyeux pétanqueurs reprend du service à la fin du mois de juin.

Comment faire pour gérer toute la longueur du titre dans une mise en page où la titraille est imposante ?

Il existe le fameux filtre |couper qui s'avère souvent très efficace, quoiqu'il peut opérer une césure malvenue, et que l'on perd une partie de l'information.
D'aucun serait tenté de jouer entre les valeurs des champs #TITRE, #SURTITRE (voire #SOUSTITRE) ; par exemple, ces derniers étant une version étendue du premier. Il s'agit, je pense, d'une mauvaise solution qui implique une certaine redondance d'information, sans compter un usage fastidieux.

Et donc l'astuce je vous la donne.
En insérant un espace insécable au bon endroit :

La buvette des joyeux pétanqueurs reprend du service à la fin du mois de juin.

Combiner à cela, un petit filtre maison à mettre dans son fichier mes_fonctions.php

function scinder($texte){ $txt = explode(" ", $texte); if (is_array($txt) AND isset($txt[1])) $texte = "<strong>".$txt[0]."</strong><span> ".$txt[1]."</span>"; return $texte;
}

On obtient un titre dont la première partie est contenue dans un , et la suite dans un .
Dès lors on peut faire ce que l'on veut avec du CSS, sans trop de vérification de conditions ni de variantes de squelette.

h2{} h2 strong {color: #954141;font-size: 3em} h2 span {color:#437788;font-size: 1em}

Libre à vous d'inclure le code où vous le souhaitez dans votre squelette, au cas par cas :

[(#TITRE|scinder) ]

Enfin, si vous souhaitez l'appliquer à toutes les balises #TITRE de manière automatique, vous pouvez définir une règle sur la table des traitements dans mes_options.php :

$GLOBALS['table_des_traitements']['TITRE'][]= 'scinder(%s)';

Hover.css - A collection of CSS3 powered hover effects

placido — 2014-07-08T13:46:14Z

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

Voir en ligne : Hover.css - A collection of CSS3 powered hover effects

Code Snippets | CSS-Tricks

placido — 2014-06-08T19:00:55Z

HTML
CSS
htaccess
PHP
JavaScript
jQuery
WordPress
- signets / css, javascript, JQuery, snippet, html

Fonds de site - backgrounds - textures - patterns

placido — 2014-06-04T14:19:56Z

Sobres :
subtlepatterns.com
+ Graphiques
thepatternlibrary.com
- signets / design, css, graphisme

Guide CSS • Conseils et bonnes pratiques

placido — 2014-06-04T06:52:45Z

Voir en ligne : Guide CSS • Conseils et bonnes pratiques

Générateurs de polices à icônes en ligne

placido — 2014-06-04T01:45:55Z

Composer sa propre webfont, en sélectionnant, voire ajoutant, ses propres svg.

Plusieurs ressources :
fontello
icomoon.io
glyphter.com

Voir en ligne : Fontello - icon fonts generator

A voir aussi l'article qui montre un exemple d'utilisation du service fontello via l'API.