Voici un exercice purement html css, afin de se familiariser avec le positionnement css. On va crée une sorte de « pop up », centrée sur la page, avec un bouton de chaque coté. Notez la « position absolute » de l’élément « .pop up » l’ajustement avec le « margin top » et « margin left », la création d’une div interne pour centrer […]
Aujourd’hui on va construire une page html toute simple, sans se soucier du responsive. Le but ici est de se familiariser avec les menus fixes. Dans l’exemple suivant, on va placer le menu et le centrer en bas de page, comme dans l’image suivante : On donne à notre footer une position fixe, on crée une […]
Voici la procédure standard pour intégrer une nouvelle police dans son site web. On télécharge notre police sur Googlefont, généralement un simple fichier ttf.(ce site ou tout autre site dédié bien sûr). Pour que la police soit lisible sur tous les navigateurs, on va avoir besoin de convertir notre fichier en plusieurs format par défaut : […]
Dans ce petit tutoriel, on va voir comment transformer un site construit à l’aide de 960 grid.gs en un site entièrement responsive. 960 grid.gs, permet de créer jusqu’à 24 colonnes avec un container_24, contrairement à Bootstrap par exemple qui se limite à 12 colonnes. Certains thèmes premium étaient encore et son peut-être encore codés à […]
Il existe une multitude de façons de créer un effet de hover sur une image, pour faire apparaître son titre par exemple, ou le titre du post lié. Admettons que j’ai un caroussel carouFredSel (jquery) en home page : chaque post est représenté par son image à la une , et en passant la souris […]
Pour mettre une image en floutée, on connait l’attribut css blur. Afin d’appliquer cet effet sur une page, on peut utiliser les pseudo-éléments comme before. Voici un exemple de code qui marche sur un de mes sites: J’applique un pseudo-éléments before au body . Je lui donne une position fixed, avec une width et une […]
Voici deux techniques simple pour augmenter la taille des ses images au hover. On part d’un exemple simple, nous avons ici une image : On lui attribue une classe « full » , que l’on va animer au hover grâce à la propriété transform:scale(). Une autre astuce consiste à attribuer une width à notre image avec un […]
Pour un site de vidéos et de photos, j’ai du trouver une solution pour rendre mes iframe responsive, afin qu’elle prennent toute la largeur et hauteur de l’écran. Cela vaut aussi bien pour les cartes (myMaps de google par exemple) que pour les vidéos Youtube .. Le problème des iframes est qu’elles ont par défaut […]
See the Pen pvbEax by yuyazz (@yuyazz) on CodePen. Le rendu est un peu crado mais appliquez le dans votre éditeur habituel pour un meilleur résultat . Les image logo sont bien entendu prises au hasard pour l’exemple.. Pour un entretien, j’ai du réaliser une page qui comporte des effets d’animation.J’utilise bootstrap pour structurer […]
Aujourd’hui on va construire un formulaire assez fourni grace à Bootstrap 3 et ses nombreuses classes. L’idée est de faire un formulaire qui prenne toute la page, soit responsive, et qu’il soit découpé en plusieurs morceaux.Voici le rendu du formulaire: Ou en version simplifiée, avec juste les class bootstrap de base et quelques modif. Le […]