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

Des icones légères pour les principaux réseaux sociaux

placido — 2017-08-20T20:54:05Z

Super Tiny Social Icons : des icones légères pour les principaux réseaux sociaux

- signets / svg, css, icon

Optimisez vos polices web

placido — 2017-08-09T16:01:08Z

- signets / font, css, javascript

Compass + Guard + Livereload = :)

placido — 2014-06-04T15:36:54Z

Voici comment déployer (presque rapidement) un environnement Ruby pour bénéficier du compilateur css SASS via Compass et rechargement automatique de la page en fonction des modifications enregistrées, grâce à Livereload, le tout chapeauté par Guard.

Il faut installer gem et bundle au besoin :

sudo apt-get install gem sudo gem install bundle

Ensuite dans le dossier parent du projet on crée un Gemfile

#Gemfile source "http://rubygems.org" group :development do gem 'sass' # Sass. gem 'compass' # Framework built on Sass. gem 'compass-validator' # So you can <code class='spip_code spip_code_inline' dir='ltr'>compass validate</code>. gem 'oily_png' # Faster Compass sprite generation. gem 'css_parser' # Helps <code class='spip_code spip_code_inline' dir='ltr'>compass stats</code> output statistics. gem 'guard' # Guard event handler. gem 'guard-compass' # Compile on sass/scss change. gem 'guard-shell' # Run shell commands. gem 'guard-livereload' # Browser reload. gem 'bootstrap-sass' end

Puis on lance coup sur coup Compass et Guard via Bundle pour initier le projet (ici avec l'option bootstrap-sass)

bundle install bundle exec compass create mon_projet -r bootstrap-sass --using bootstrap

Je copie ici mes fichiers Guardfile et config.rb pour info :

# ~/.guardfile # More info at https://github.com/guard/guard#readme notification :off puts "Using default guard file." group :development do if File.exists?("./config.rb") # Compile on start. puts <code class='spip_code spip_code_inline' dir='ltr'>compass compile --time --quiet</code> # https://github.com/guard/guard-compass guard :compass do watch(%r{(.*)\.s[ac]ss$}) ignore %r{^tmp/} end end # Look for specified files in the current and child directories. # <code class='spip_code spip_code_inline' dir='ltr'>find</code> requires Ruby 1.9 or greater. require 'find' if Find.find(Dir.pwd).detect{|dir|dir=~/.+\.(css|js|html?|php|inc|theme)$/} guard :livereload do watch(%r{.+\.(css|js|html?|php)$}) ignore %r{^tmp/} end end end

#config.rb require 'bootstrap-sass' # Sass options: # http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#options sass_options = Hash.new sass_options[:debug_info] = false css_dir = "dev/css" sass_dir = "dev/css/sass" fonts_dir = "dev/css/fonts" javascripts_dir = "dev/js" images_dir = "dev/css/img" relative_assets = true output_style = (environment == :production ? :compressed : :expanded)

Il reste à installer le module Firefox LiveReload

Avec ça l'environnement doit être prêt et fonctionnel.

On lance Guard via Bundle depuis le dossier parent du projet

bundle exec guard start

Liens vers les ressources utiles
https://github.com/guard/guard-livereload
https://github.com/twbs/bootstrap-sass
https://addons.mozilla.org/en-US/firefox/addon/livereload/
https://gist.github.com/dvessel/1610551