Développeur Web RoR

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

Tag - css

Fil des billets

vendredi 29 mai 2015

Transformer votre CSS en SCSS

Il peut arriver de vouloir migrer un "vieux" CSS en SCSS pour factoriser les variables et centraliser les urls des ressources par exemple.

Voici un outil complet qui contient pas mal de paramêtre : http://sebastianpontow.de/css2compass/

Plus d'excuses, hein ;)

mercredi 15 janvier 2014

L'attribut form d'html5

Vous avez peut-être un jour souffert des formulaires en html. html5 introduit une nouveauté l'attribut form, celui-ci permet de placer les input/select/button partout dans votre page web et de leur associer à un formulaire.

<form id="monform">

</form>

<input type="text" form="monform" name="name" value="" placeholder="Votre nom">

Ça peut-être bien pratique croyez-moi.

mardi 26 février 2013

jQuery Highlight : Mettez vos résutats de recherche en évidence !

Il existe un plugin jQuery pour mettre en évidence une chaîne de caractères dans un paragraphe.

Voici le résultat :

Attention ce code est particulièrement compliqué :-) :

$("#id-mon-element").highlight("soleil");

id-mon-element étant l'id du conteneur dans lequel le texte "soleil" pourra être mis en évidence. Si vous souhaitez le faire sur toute la page :

$("body").highlight("soleil");

Source et téléchargement : http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

vendredi 5 octobre 2012

Display:inline-block les espaces indésirables

Je faisais des tests d'intégrations et en travaillant au pixel près j'ai découvert le problème des espaces indésirables entre les éléments inline-block. 

En bidouillant sur chrome, je n'ai pas réussi à trouver d'où ça venait. En cherchant sur Google je suis tombé sur un article de Raphael Goetter (AlsacreationS) http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html. C'était également un problème dans le twitter bootstrap. Donc je choisis de mettre les éléments à la suite sans retour à la ligne (pas de bidouille css et économie de caractère). Cool ça marche, par contre un second problème : mon conteneur termine 4px environ en dessous du LastChild en display:inline-block. 

La solution a ce second problème entraîné par display:inline-block est de mettre un line-height à 0.

samedi 28 janvier 2012

::selection la pseudo class CSS

Je me baladais sur le net ( http://htmlemailboilerplate.com/ ), je ne sais plus trop ce qu'il m'a pris mais j'ai selectionné du texte (essayez), la selection sera rose (magenta). Ca a alors fait tilt, j'ai ouvert d'autres pages web, j'ai constaté qu'il n'y avait que sur ce site que c'était différent j'ai fait clic droit "inspecté" et là je suis tombé sur cette pseudo class css ::selection qui nous permet de changer le style d'un texte selectionné.

Exemple (selectionnez ces deux paragraphes) :

Notre premier paragraphe sera bleu.

Notre second paragraphe sera vert.

Et vous, vous connaissiez ?
Ca peut être classe sur un site avec des exemples de code à copier / coller.

lundi 23 janvier 2012

Les ressources / articles web dev de ces derniers jours

Voici les quelques ressources que j'ai trouvé intéressante ces derniers jours (ça fait office de post-it en ce qui me concerne).

Framework html / css / js : http://www.99lime.com/

jQuery highlighter de code (marche avec Ruby !) : http://steamdev.com/snippet/

Utilisation de VIM : tutorial découverte par Synbioz : http://www.synbioz.com/blog/2012/01/18/l_utilisation_de_vim

Impress.js (Sur la ferme du web) : http://www.lafermeduweb.net/billet/impress-js-creez-des-presentations-de-type-prezi-en-javascript-1273.html

User interface Futurico (attention payant, mais peut être une bonne source d'inspi !) : http://www.behance.net/gallery/Futurico-User-Interface-Pro/2650227

Autre user interface : http://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/

Inspiration de design web : http://www.queness.com/community-news/10453/30-beautiful-web-design-examples-from-behance-and-deviantart

En espérant que cette petite compilation vous servira...

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/

- page 1 de 5