Développeur Web RoR

Aller au contenu | Aller au menu | Aller à la recherche

Tag - css

Fil des billets

jeudi 12 janvier 2012

Barre de progression en html, css3

Ca vous dit une petite barre de progression (progress bar) ? Certain diront qu'il existe <progress> et <meter> d'html5, c'est juste utilisez-les ! Là il s'agit plus de l'aspect (css) que de la sémantique (html). Donc vous pouvez également utiliser ce css avec les balises sémantique html5...

Voilà pour l'HTML

<div class="barre">
    <div class="progress"></div>
</div>

Voilà pour le CSS3

body{
    background-color:black;
}

.barre{
    height:3px;
    width:300px;
    border-radius:3px;
    border:1px solid #111;
    border-bottom:1px solid #111;
    margin:10px;
}

.progress{
    margin-top:2px;
    margin:0;
    padding:0;
    background-color:#2B85C1;
    height:1px;
    width:200px;
    box-shadow:0px 0px 15px 1px #2B85C1,0px 0px 10px 1px black;
}

Voici le jsfiddle qui va avec : http://jsfiddle.net/yQUHc/2/

mercredi 11 janvier 2012

Effet de vignettage en CSS3

Suite à la demande de Geoffrey Dorne sur twitter, je me suis dit que ça devait intéresser d'autres personnes. Voici la ligne de css à mettre dans une class ou un id pour obtenir un effet de vignettage sur une image ou un élément html :

box-shadow:0px 0px 163px 20px black inset;

Oups pardon si vous ne connaissez pas le terme "Vignettage" cliquez-ici.

L'intégration c'est cool et amusant... quand c'est pas pour IE !

jeudi 13 octobre 2011

Ubuntu 11.10 : une copie web du système d'exploitation

Aujourd'hui c'est aussi la sortie d'ubuntu 11.10. Ubuntu a lancé un site internet qui copie l'interface de ubuntu 11.10 : voici la page web quelques petites choses fonctionne bien shotwell, firefox. Et donc le tout en html css js. Pour tester c'est ici : http://www.ubuntu.com/tour/#surf-the-web

mardi 27 septembre 2011

Préparer MarkItup pour rails 3.1

Bon voilà dans l'attente d'un gros article, en voici un plus petit qui explique comment préparer markitup pour rails 3. Je pars du principe que vous êtes dans votre projet rails.

Téléchargez markitup. Copiez le répertoire "markitup" de l'archive dans stylesheets et également dans javascripts. (De cette manière il n'y aura plus qu'à remplacer le répertoire pour une mise à jour de markitup)

Dans la vue ou le layout :

<%= stylesheet_link_tag "markitup/skins/markitup/style.css",

    "markitup/sets/default/style.css" %>

<%= javascript_include_tag "markitup/jquery.markitup.js",

        "markitup/sets/default/set.js"; "initialize_markitup.js" %>

Et dans le fichier "initialize_markitup.js" :

$(function(){

    $('.monmarkitup').markItUp(mySettings);

});

Mettez ensuite dans votre code html un div avec pour classe "monmarkitup" et ça devrait marcher.
N'oubliez pas d'include également jQuery si ce n'est déjà fait. 

Pour ActiveAdmin - La procédure est la même pour les autres éditeurs WYSIWYG

Grosse parenthèse pour include markitup dans active_admin, il faut ajouter dans initializers/active_admin.rb :

config.register_javascript 'markitup/jquery.markitup.pack.js'

config.register_javascript 'markitup/sets/default/set.js'

config.register_javascript 'initialize_markitup.js'

config.register_stylesheet 'markitup/skins/markitup/style.css'

config.register_stylesheet 'markitup/sets/default/style.css'

# Attention le fichier ci-dessous est à créer :

config.register_stylesheet 'reset_markitup.css'

Le reset_markitup.css permet de pas tout péter dans l'interface :

.formtastic div:first-of-type{

  display:inline-block;

}

Et dans votre fichier app/admin/model.rb section form do, il faut ajouter ceci au champ concerné.

input_html => { :class => "monmarkitup" } 

Exemple :

form.input :title, :input_html => { :class => "monmarkitup" }

Coté serveur, il existe quelques gems pour convertir votre code en html :

BBCODE : bb-ruby

TEXTILE : RedCloth

MARKDOWN : BlueCloth

Bon code !

lundi 26 septembre 2011

Albino le gem ruby qui colorise votre code - syntax highlighter

Il existe un gem qui colorise votre code, il permet de mettre en évidence la syntaxe de votre code.

Installation :

sudo aptitude install python-setuptools

sudo easy_install pygments

sudo gem install albino

Pour tester dans la console ruby irb
require 'rubygems'
require 'albino'
puts Albino.colorize('puts "Hello World"', :ruby)

Bon code...

mardi 20 septembre 2011

Cours sur l'intégration html/css par BBX

Le créateur de http://bbxdesign.com/ vient de lancer un site / tutorial sur l'intégration html / css. Il est vraiment bien fait (je l'ai survolé), si vous n'y connaissez rien, je vous souhaite une bonne lecture. Tout est ici : http://css.steaw.com/ . Cliquez sur rideau puis le menu sera en haut à droite.

lundi 5 septembre 2011

10 astuces d'intégration html css

Voici quelques petites astuces  pour les intégrateurs web

1) Z-index ne fonctionne pas :

z-index ne fonctionne que sur les éléments positionnés (Ah ok je fais quoi alors : => position:relative; )

2) Z-index 20 au dessus de z-index 100 pourquoi ? :

Il y a certainement des contextes d'empilement différents (un parent différent avec un z-index).

3) Clear ça sert à quoi ?

clear : left / right / both : Il sert à faire un espèce de retour chariot à gauche / droite / les deux.

4) Mon bloc prend toute la place pourquoi ?

Justement parce que c'est un bloc (display:block;)... mettre display:inline si vous voulez qu'il prenne la place qu'il a besoin.

5) Je veux fixer les dimensions de mon élément, mais c'est un display:inline.

C'est pour cela qu'il existe la valeur de la proprété display : "inline-block".

6) Vertical-align ne fonctionne pas :

Vertical align ne fonctionne que sur les cellules de tableau, donc display:table-cell; ou display:table-row;

7) Je souhaite que mes deux blocs cote à cote aient la même hauteur, et si possible non fixé : 

Il faut les mettre en display:table-cell; et si possible mettre le conteneur parent en table-row.

8) Quand je change les paddings mon bloc change de taille :

Oui les padding ne comprenne pas la taille du bloc (content-box), il faut donc spécifier : box-sizing:border-box; maintenant les bordures et le padding sont inclus, les margins quand à eux sont toujours exclus.

9) Un élément de type bloc prend width:100%; par défaut !

10) N'oubliez pas le reset css (http://meyerweb.com/eric/tools/css/reset/).

En espérant que ça puisse servir à quelques uns.

- page 2 de 5 -