<![CDATA[SnippetVamp bronco: Snippets: css]]>http://snippetvamp.warriordudimanche.net/snippetvamp.php <![CDATA[Liste de couleurs HTML sous forme de tableau PHP]]> $colors=[ "transparent", "Maroon", "DarkRed", "FireBrick", "Red", "Salmon", "Tomato", "Coral", "OrangeRed", "Chocolate", "SandyBrown", "DarkOrange", "Orange", "DarkGoldenrod", "Goldenrod", "Gold", "Olive", "Yellow", "YellowGreen", "GreenYellow", "Chartreuse", "LawnGreen", "Green", "Lime", "LimeGreen", "SpringGreen", "MediumSpringGreen", "Turquoise", "LightSeaGreen", "MediumTurquoise", "Teal", "DarkCyan", "Aqua", "Cyan", "DarkTurquoise", "DeepSkyBlue", "DodgerBlue", "RoyalBlue", "Navy", "DarkBlue", "MediumBlue", "Blue", "BlueViolet", "DarkOrchid", "DarkViolet", "Purple", "DarkMagenta", "Fuchsia", "Magenta", "MediumVioletRed", "DeepPink", "HotPink", "Crimson", "Brown", "IndianRed", "RosyBrown", "LightCoral", "Snow", "MistyRose", "DarkSalmon", "LightSalmon", "Sienna", "SeaShell", "SaddleBrown", "Peachpuff", "Peru", "Linen", "Bisque", "Burlywood", "Tan", "AntiqueWhite", "NavajoWhite", "BlanchedAlmond", "PapayaWhip", "Moccasin", "Wheat", "Oldlace", "FloralWhite", "Cornsilk", "Khaki", "LemonChiffon", "PaleGoldenrod", "DarkKhaki", "Beige", "LightGoldenrodYellow", "LightYellow", "Ivory", "OliveDrab", "DarkOliveGreen", "DarkSeaGreen", "DarkGreen", "ForestGreen", "LightGreen", "PaleGreen", "Honeydew", "SeaGreen", "MediumSeaGreen", "Mintcream", "MediumAquamarine", "Aquamarine", "DarkSlateGray", "PaleTurquoise", "LightCyan", "Azure", "CadetBlue", "PowderBlue", "LightBlue", "SkyBlue", "LightskyBlue", "SteelBlue", "AliceBlue", "SlateGray", "LightSlateGray", "LightsteelBlue", "CornflowerBlue", "Lavender", "GhostWhite", "MidnightBlue", "SlateBlue", "DarkSlateBlue", "MediumSlateBlue", "MediumPurple", "Indigo", "MediumOrchid", "Plum", "Violet", "Thistle", "Orchid", "LavenderBlush", "PaleVioletRed", "Pink", "LightPink", "Black", "DimGray", "Gray", "DarkGray", "Silver", "LightGrey", "Gainsboro", "WhiteSmoke", "White" ];]]> Mon, 31 Jul 2017 12:24:40 +0200 <![CDATA[Common Unicode Icons ✿ dabblet.com]]> /* Based on email I got from andrea ricci */ a[href^="mailto:"]:before { content: "\2709"; } .phone:before { content: "\2706"; } .important:before { content: "\27BD"; } blockquote:before { content: "\275D"; } blockquote:after { content: "\275E"; } .alert:before { content: "\26A0"; } :before, :after { color: purple; } p, blockquote { margin: 20px; } body, a { color: #333; text-decoration: none; font-size: 21px; }]]> Thu, 24 Nov 2016 11:02:09 +0100 <![CDATA[Centrer verticalement]]> img{ position : relative; top: 50%; transform: translateY(-50%); }]]> Thu, 03 Nov 2016 15:24:30 +0100 <![CDATA[un switcher d'image à base de target trick]]> <div id="slider"> <!-- Slide Images --> <img id="slide-1" src="img1.jpg" alt="img description"/> <img id="slide-2" src="img2.jpg" alt="img description"/> <img id="slide-3" src="img3.jpg" alt="img description"/> <img id="slide-4" src="img4.jpg" alt="img description"/> <!-- Navigation for the slides --> <ul> <li><a href="#slide-1">1</a></li> <li><a href="#slide-2">2</a></li> <li><a href="#slide-3">3</a></li> <li><a href="#slide-4">4</a></li> </ul> </div> SCSS #slider { img { position: absolute; top: 0; left: 0; width: 300px; height: 200px; &:target { transition: all .5s ease-in-out; } &:not(:target), &:target ~ img#slide-4 { position: relative; opacity: 0; } // set initially visible &#slide-4 { position: absolute; opacity: 1; } } }]]> Thu, 13 Oct 2016 22:37:32 +0200 <![CDATA[Clear:both auto sur pseudo element]]> .one:after { content: "."; display: block; clear: both; visibility: hidden; height: 0; }]]> Wed, 12 Oct 2016 10:51:12 +0200 <![CDATA[ Un site qui prend toute la hauteur disponible avec flexbox]]> <body> <div class="page"> <header class="site-header"></header> <main class="site-content"></main> <footer class="site-footer"></footer> </div> </body> Nous allons donc simplement appliquer display: flex; à body, et spécifier le comportement de ses descendants direct en tant que colonnes. Puis nous diront simplement à .site-content d’utiliser toute la hauteur disponible. CSS body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; } .site-content { flex: 1; }]]> Sun, 04 Sep 2016 10:50:23 +0200 <![CDATA[un sticky footer]]> <body> <header>...</header> <section class="main-content">...</section> <footer>...</footer> </body> header{ /* We want the header to have a static height, it will always take up just as much space as it needs. */ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 0 0 auto; } .main-content{ /* By setting flex-grow to 1, the main content will take up all of the remaining space on the page. The other elements have flex-grow: 0 and won't contest the free space. */ /* 1 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 1 0 auto; } footer{ /* Like the header, the footer will have a static height - it shouldn't grow or shrink. */ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 0 0 auto; }]]> Wed, 13 Apr 2016 18:34:44 +0200 <![CDATA[auto_css minimal]]> <?php /** * On-the-fly CSS Compression * Copyright (c) 2009 and onwards, Manas Tungare. (changes by bronco) * Creative Commons Attribution, Share-Alike. * * In order to minimize the number and size of HTTP requests for CSS content, * this script combines multiple CSS files into a single file and compresses * it on-the-fly. * * To use this in your HTML, link to it in the usual way: * <link rel="stylesheet" type="text/css" media="screen, print, projection" href="/css/compressed.css.php" /> */ /* * this version detects css files and allow very basic replacements (bronco@warriordudimanche.net) */ # replacement rules: "String to replace" => "Replacement" $replace=array( '#basic_color_neutral'=>'#405bff', '#basic_color_dark'=>'#2039ee', '#basic_color_light'=>'#617dff', '#hover_color'=>'', ); # function if (!function_exists('_glob')){ function _glob($path,$pattern='') { # glob function fallback by Cyril MAGUIRE (thx bro' ;-) if($path=='/'){ $path=''; } $liste = array(); $pattern=str_replace('*','',$pattern); if ($handle = opendir($path)) { while (false !== ($file = readdir($handle))) { if(stripos($file, $pattern)!==false || $pattern=='' && $file!='.' && $file!='..' && $file!='.htaccess') { $liste[] = $path.$file; } } closedir($handle); } natcasesort($liste); return $liste; } } $cssFiles = _glob('./','css'); /** * Ideally, you wouldn't need to change any code beyond this point. */ $buffer = ""; foreach ($cssFiles as $cssFile) { $buffer .= file_get_contents($cssFile); } $buffer=str_replace(array_keys($replace),array_values($replace),$buffer); // Remove unnecessary characters $buffer = preg_replace("|/\*[^*]*\*+([^/][^*]*\*+)*/|", "", $buffer); $buffer = preg_replace("/[\s]*([\:\{\}\;\,])[\s]*/", "$1", $buffer); // Remove whitespace $buffer = str_replace(array("\r\n", "\r", "\n"), '', $buffer); // Enable GZip encoding. ob_start("ob_gzhandler"); // Enable caching header('Cache-Control: public'); // Expire in one day header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); // Set the correct MIME type, because Apache won't set it for us header("Content-type: text/css"); // Write everything out echo($buffer); ?> ]]> Fri, 19 Feb 2016 13:20:28 +0100 <![CDATA[Centrer une image verticalement et horizontalement]]> Le code : #container { max-height: 100%; } #container img { /* Keeps image from going outside the screen */ max-height: 100%; max-width: 100%; /* Keeps image from beeing distorted */ height: auto; width: auto; /* centering horizontally AND vertically */ /* 50% of container */ position: relative; top: 50%; left: 50%; /* 50% of image */ transform: translate(-50%,-50%); } ]]> Fri, 31 Jul 2015 20:07:33 +0200 <![CDATA[Filtrage d'items à base de radiobutton sans js]]> <!-- Checkbox Trickery with CSS: http://codersblock.com/blog/checkbox-trickery-with-css/ --> <div class="container"> <h1><span class="marvel">Marvel</span> Mutant Teams</h1> <input id="original" type="radio" name="team" checked> <label for="original">Original X-Men</label> <input id="force" type="radio" name="team"> <label for="force">X-Force</label> <input id="factor" type="radio" name="team"> <label for="factor">X-Factor</label> <input id="hellfire" type="radio" name="team"> <label for="hellfire">Hellfire Club</label> <br> <ul class="characters"> <li id="angel" data-teams="original force factor hellfire"> <h2>Angel</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-angel.png" alt=""> </li> <li id="beast" data-teams="original factor"> <h2>Beast</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-beast.png" alt=""> </li> <li id="cyclops" data-teams="original force factor"> <h2>Cyclops</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-cyclops.png" alt=""> </li> <li id="emma-frost" data-teams="hellfire"> <h2>Emma Frost</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-emma-frost.png" alt=""> </li> <li id="iceman" data-teams="original factor"> <h2>Iceman</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-iceman.png" alt=""> </li> <li id="jean-grey" data-teams="original factor"> <h2>Jean Grey</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-jean-grey.png" alt=""> </li> <li id="magneto" data-teams="hellfire"> <h2>Magneto</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-magneto.png" alt=""> </li> <li id="nightcrawler" data-teams="force"> <h2>Nightcrawler</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-nightcrawler.png" alt=""> </li> <li id="professor-x" data-teams="original"> <h2>Professor X</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-professor-x.png" alt=""> </li> <li id="psylocke" data-teams="force hellfire"> <h2>Psylocke</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-psylocke.png" alt=""> </li> <li id="quicksilver" data-teams="factor"> <h2>Quicksilver</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-quicksilver.png" alt=""> </li> <li id="rictor" data-teams="force factor"> <h2>Rictor</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-rictor.png" alt=""> </li> <li id="storm" data-teams="force hellfire"> <h2>Storm</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-storm.png" alt=""> </li> <li id="sunspot" data-teams="force hellfire"> <h2>Sunspot</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-sunspot.png" alt=""> </li> <li id="tithe" data-teams="hellfire"> <h2>Tithe</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-tithe.png" alt=""> </li> <li id="wolverine" data-teams="force"> <h2>Wolverine</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-wolverine.png" alt=""> </li> </ul> </div> @import url(http://fonts.googleapis.com/css?family=Oswald:400,700); *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: #fff; background-color: #444; font: 0/1 'Oswald', sans-serif; text-align: center; } .container { margin: 0 auto; padding: 20px 5px; } h1 { margin: 0 5px 15px; font-size: 45px; line-height: 1.2; text-transform: uppercase; text-shadow: 0 0 20px #000; } .marvel { color: #c00; } input { position: absolute; left: -9999px; } label { display: inline-block; position: relative; width: 150px; margin: 5px; padding: 10px 10px 10px 38px; background-color: #000; font-size: 18px; white-space: nowrap; cursor: pointer; } label::before { content: ''; display: block; position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; border: 2px solid #fff; background-color: #444; } input:focus + label { outline: 1px solid #fff; } input:checked + label::before { background-color: #c00; } /* width is controlled here and in media queries to ensure that there's always an even number of columns (prevents orphans) */ .characters { display: inline-block; width: 240px; list-style-type: none; margin: 15px -5px 0; padding: 0; } .characters li { display: inline-block; position: relative; margin: 10px; padding: 0; width: 100px; height: 100px; } .characters h2 { display: none; position: absolute; z-index: 2; top: 70px; left: 0px; right: 0px; margin: 0; padding: 4px; border: 1px solid #fff; color: #fff; background-color: #000; font-size: 14px; font-weight: normal; } .characters img { width: 100px; height: 100px; border: 4px solid #fff; border-radius: 50%; background-color: #fff; box-shadow: 0 0 20px #000; opacity: .25; transform: scale(.5); } #original:checked ~ .characters [data-teams~="original"] h2, #force:checked ~ .characters [data-teams~="force"] h2, #factor:checked ~ .characters [data-teams~="factor"] h2, #hellfire:checked ~ .characters [data-teams~="hellfire"] h2 { display: block; } #original:checked ~ .characters [data-teams~="original"] img, #force:checked ~ .characters [data-teams~="force"] img, #factor:checked ~ .characters [data-teams~="factor"] img, #hellfire:checked ~ .characters [data-teams~="hellfire"] img { animation: avatar .3s forwards; } /* fade in and expand image to full size, with a slight bounce */ @keyframes avatar { 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @media only screen and (min-width: 500px) { .characters { width: 480px; } } @media only screen and (min-width: 740px) { .characters { width: 720px; } h1 { font-size: 60px; } } @media only screen and (min-width: 980px) { .characters { width: 960px; } }]]> Wed, 24 Jun 2015 15:02:59 +0200 <![CDATA[Formulaire dont certaines chechboxes-radio révèlent-cachent du contenu]]> <!-- Checkbox Trickery with CSS: http://codersblock.com/blog/checkbox-trickery-with-css/ --> <div class="container"> <h1> <span>Subscribe to</span><br> Celery Facts Weekly! </h1> <section> <label for="email" class="top-label">Email</label> <input id="email" type="email" autocomplete="off"> </section> <section> <label class="top-label">How did you hear about us?</label> <input id="how-friend" name="how" type="radio"> <label for="how-friend" class="side-label">From a friend</label> <input id="how-internet" name="how" type="radio"> <label for="how-internet" class="side-label">Somewhere on the internet</label> <input id="how-other" name="how" type="radio"> <label for="how-other" class="side-label">Other...</label> <div class="how-other-disclosure"> <label for="how-other-explain" class="top-label">Please explain</label> <textarea id="how-other-explain"></textarea> </div> </section> <section> <input id="permitted" type="checkbox"> <label for="permitted" class="side-label">I am legally permitted to submit forms</label> <div class="blocked">(you have to check the checkbox to continue)</div> <button>Submit</button> </section> </div> @import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700); *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; } body { margin: 20px; color: #435757; background: linear-gradient(40deg, transparent 40%, #9ab593), linear-gradient(-40deg, #ba7461 20%, #593e4e 90%); font: 1.2em/1 'Noto Sans', sans-serif; } .container { max-width: 500px; margin: 0 auto; padding: 10px 20px 40px; color: #fff; background-color: rgba(0, 0, 0, .6); } h1 { margin: 0; padding-bottom: 30px; border-bottom: 1px solid #fff; line-height: 1.2; font-size: 2.2em; font-weight: normal; } h1 span { font-size: .7em; } section { margin-top: 30px; } section::after { content: ''; display: block; clear: both; } .top-label { display: block; margin: 10px 0; } input[type="email"], textarea { display: block; width: 100%; max-width: 100%; padding: 5px; border: none; color: #593e4e; background-color: #fff; font-family: inherit; font-size: inherit; appearance: none; } input[type="email"]:focus, textarea:focus, button:focus { outline: 2px solid #9ab593; } textarea { height: 100px; } input[type="checkbox"], input[type="radio"] { position: absolute; left: -9999px; } .side-label { display: block; position: relative; margin: 10px 0; padding-left: 35px; cursor: pointer; } .side-label::before, .side-label::after { content: ''; position: absolute; top: 0; left: 0; } input[type="radio"] + .side-label::before, input[type="radio"] + .side-label::after { border-radius: 50%; } .side-label::before { display: block; width: 20px; height: 20px; border: 2px solid #fff; } input:focus + .side-label::before { border-color: #9ab593; } .side-label::after { display: none; width: 12px; height: 12px; margin: 4px; background-color: #9ab593; } input:checked + .side-label::after { display: block; } .how-other-disclosure { display: none; margin: 10px 0 0 35px; } #how-other:checked ~ .how-other-disclosure { display: block; } .blocked { margin-top: 40px; color: rgba(255, 255, 255, .3); text-align: center; } button { display: none; appearance: none; margin: 40px auto 0; padding: 5px 40px; border: 2px solid #fff; color: rgba(0, 0, 0, .8); background-color: #9ab593; font-family: inherit; font-size: inherit; font-weight: bold; cursor: pointer; } #permitted:checked ~ .blocked { display: none; } #permitted:checked ~ button { display: block; }]]> Wed, 24 Jun 2015 14:59:19 +0200 <![CDATA[Carrousel sans js]]> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"/> <div class="carousel-item"> <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without"> </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""/> <div class="carousel-item"> <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript"> </div> <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""/> <div class="carousel-item"> <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel"> </div> <label for="carousel-3" class="carousel-control prev control-1">‹</label> <label for="carousel-2" class="carousel-control next control-1">›</label> <label for="carousel-1" class="carousel-control prev control-2">‹</label> <label for="carousel-3" class="carousel-control next control-2">›</label> <label for="carousel-2" class="carousel-control prev control-3">‹</label> <label for="carousel-1" class="carousel-control next control-3">›</label> <ol class="carousel-indicators"> <li> <label for="carousel-1" class="carousel-bullet">•</label> </li> <li> <label for="carousel-2" class="carousel-bullet">•</label> </li> <li> <label for="carousel-3" class="carousel-bullet">•</label> </li> </ol> </div> </div> <style>html, body { margin: 0px; padding: 0px; background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg"); } .carousel { position: relative; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64); margin-top: 26px; } .carousel-inner { position: relative; overflow: hidden; width: 100%; } .carousel-open:checked + .carousel-item { position: static; opacity: 100; } .carousel-item { position: absolute; opacity: 0; -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; } .carousel-item img { display: block; height: auto; max-width: 100%; } .carousel-control { background: rgba(0, 0, 0, 0.28); border-radius: 50%; color: #fff; cursor: pointer; display: none; font-size: 40px; height: 40px; line-height: 35px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; } .carousel-control.prev { left: 2%; } .carousel-control.next { right: 2%; } .carousel-control:hover { background: rgba(0, 0, 0, 0.8); color: #aaaaaa; } #carousel-1:checked ~ .control-1, #carousel-2:checked ~ .control-2, #carousel-3:checked ~ .control-3 { display: block; } .carousel-indicators { list-style: none; margin: 0; padding: 0; position: absolute; bottom: 2%; left: 0; right: 0; text-align: center; z-index: 10; } .carousel-indicators li { display: inline-block; margin: 0 5px; } .carousel-bullet { color: #fff; cursor: pointer; display: block; font-size: 35px; } .carousel-bullet:hover { color: #aaaaaa; } #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet { color: #428bca; } #title { width: 100%; position: absolute; padding: 0px; margin: 0px auto; text-align: center; font-size: 27px; color: rgba(255, 255, 255, 1); font-family: 'Open Sans', sans-serif; z-index: 9999; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0); } </style>]]> Wed, 03 Jun 2015 11:15:23 +0200 <![CDATA[dropdown - exemples]]> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> <div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> avec headers <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> ... <li role="presentation" class="dropdown-header">Dropdown header</li> ... </ul> avec séparateurs <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider"> ... <li role="presentation" class="divider"></li> ... </ul> ]]> Sun, 05 Apr 2015 23:35:11 +0200 <![CDATA[button dropdown menus]]> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>]]> Sun, 05 Apr 2015 23:32:33 +0200 <![CDATA[Nav bar complète - exemple]]> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>]]> Sun, 05 Apr 2015 23:28:47 +0200 <![CDATA[labels - exemples (étiquettes)]]> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>]]> Sun, 05 Apr 2015 23:26:28 +0200 <![CDATA[Alertes - exmples]]> <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div> Avec un bouton de fermeture <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>]]> Sun, 05 Apr 2015 23:24:19 +0200 <![CDATA[Media - exemple]]> <div class="media"> <div class="media-left media-middle"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">Middle aligned media</h4> ... </div> </div>]]> Sun, 05 Apr 2015 23:21:46 +0200 <![CDATA[Listgroups - exemples]]> <div class="list-group"> <a href="#" class="list-group-item disabled"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> Groupes contextualisés <ul class="list-group"> <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li> <li class="list-group-item list-group-item-danger">Vestibulum at eros</li> </ul> <div class="list-group"> <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a> <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a> </div>]]> Sun, 05 Apr 2015 23:20:53 +0200 <![CDATA[Panel - exemples]]> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> <div class="panel-footer">Panel footer</div> </div> Avec contextes <div class="panel panel-primary">...</div> <div class="panel panel-success">...</div> <div class="panel panel-info">...</div> <div class="panel panel-warning">...</div> <div class="panel panel-danger">...</div> Avec un tableau dedans <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <p>...</p> </div> <!-- Table --> <table class="table"> ... </table> </div> Avec un liste group dedans <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <p>...</p> </div> <!-- List group --> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div>]]> Sun, 05 Apr 2015 23:21:05 +0200 <![CDATA[Menu en accordeon]]> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>]]> Sun, 05 Apr 2015 20:35:40 +0200 <![CDATA[Collapse un div via un bouton]]> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> <div class="collapse" id="collapseExample"> <div class="well"> ... </div> </div>]]> Sun, 05 Apr 2015 20:34:21 +0200 <![CDATA[checkbox et radio sous forme de boutons]]> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label> </div> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 </label> </div>]]> Sun, 05 Apr 2015 20:30:50 +0200 <![CDATA[popover]]> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button>]]> Sun, 05 Apr 2015 20:12:08 +0200 <![CDATA[tooltip]]> <a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>]]> Sun, 05 Apr 2015 20:10:34 +0200 <![CDATA[alert modale]]> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> // pour détecter la fermeture de la boite $('#myModal').on('hidden.bs.modal', function (e) { // do something... }) On peut alors recupérer les données saisies autres events: show.bs.modal shown.bs.modal hidden.bs.modal loaded.bs.modal]]> Sun, 05 Apr 2015 19:22:50 +0200 <![CDATA[un fallback à svg (utilisable ailleurs)]]> <img src="logo.svg" onerror="this.src = 'logo.png';" alt="logo" width="140" height="140"/>]]> Tue, 17 Jun 2014 15:21:50 +0200 <![CDATA[menu normal + select pour les mobiles]]> <nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href="/pages/about-us">About Us</a></li> <li><a href="/pages/support">Support</a></li> </ul> <select> <option value="" selected="selected">Select</option> <option value="/">Home</option> <option value="/collections/all">Books</option> <option value="/blogs/five-simple-steps-blog">Blog</option> <option value="/pages/about-us">About Us</option> <option value="/pages/support">Support</option> </select> </nav> And here is the CSS. Nothing complicated here: We hide the <select> by default, and only show it if the document width is smaller than 960px. nav select { display: none; } @media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; } }]]> Thu, 06 Mar 2014 12:23:43 +0100 <![CDATA[Strip HTML Tags in JavaScript | CSS-Tricks]]> var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,""); ]]> Mon, 17 Feb 2014 17:43:31 +0100 <![CDATA[International box-sizing Awareness Day | CSS-Tricks]]> *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ]]> Sun, 02 Feb 2014 19:04:52 +0100 <![CDATA[clearfix]]> /*appliquer au div contenant des flottants*/ .clearfix:before, .container:after { content: ""; display: table; } .clearfix:after { clear: both; } /* IE 6/7 */ .clearfix { zoom: 1; }]]> Sat, 25 Jan 2014 14:37:07 +0100 <![CDATA[html - Select removing dropdown arrow - Stack Overflow]]> select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; } ]]> Thu, 23 Jan 2014 15:20:42 +0100 <![CDATA[Centrage vertical en 3 lignes]]> .element { position: relative; top: 50%; transform: translateY(-50%); } @mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .element p { @include vertical-align; } ]]> Sat, 18 Jan 2014 15:24:17 +0100 <![CDATA[bug overflow:hidden sous firefox]]> ajouter overflow: -moz-hidden-unscrollable; et ça fonctionne... ]]> Wed, 16 Oct 2013 20:02:19 +0200 <![CDATA[Autoresize vertical d'un textarea]]> <script> function redimtextareas(obj){ obj.style.height='500px'; obj.style.height = obj.scrollHeight + 20 + 'px'; } </script> html: <textarea name="nom" onFocus="redimtextarea(this);" onKeydown="redimtextarea(this);"></textarea> css: textarea{overflow:hidden; /* éviter les scrollbars*/}]]> Sun, 29 Sep 2013 14:31:14 +0200 <![CDATA[Image fullscreen en css]]> sans que l’image ne perde son ratio dépassement de l’écran (ni verticalement, ni horizontalement), donc s’affichant au maximum à l’écran. sans sur-zoomer l’image sans JavaScript HTML, CSS : <div id="d1"> <div> <img src="image.jpg"/> </div> </div> #d1 {/* dans le cas d’une lightbox, j’ai ça pour pas que ça dépasse de l’écran */ position: fixed; top: 5%; right: 5%; bottom: 5%; left: 5%; } #d1 div img { max-width: 100%; max-height: 100%; width: auto; height: auto; } #d1 div { width: 100%; height: 100%; display: inline-block; /* lui il est important */ }]]> Sat, 21 Sep 2013 09:13:09 +0200 <![CDATA[Slideshow minimaliste]]> /* CSS */ <style> .fadein .carrousel .links{clear:both;width:100%;txtr} .fadein { position:relative; width:100%; height:300px; } .fadein .carrousel { position:absolute; left:0; top:0; } </style> /* HTML */ <div class="fadein"> <div class="carrousel car1"> <div class="content"> <h1>Titre du premier</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupihref="" datat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="links"> <em>1</em> <a href="" data="car2">2</a> <a href="" data="car3">3</a> </div> </div> <div class="carrousel car2"> <div class="content"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupit non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="links"> <a href="" data="car1">1</a> <em>2</em> <a href="" data="car3">3</a> </div> </div> <div class="carrousel car3"> <div class="content"> </div> <div class="links"> <a href="" data="car1">2</a> <a href="" data="car2">3</a> <em>3</em> </div> </div> </div> /* JS/JQuery */ <script> $('.fadein .carrousel:gt(0)').hide();compteur=0; function slideshow(){ z=setInterval( function(){ compteur++; if (compteur==4){montre=1;cache=3;compteur=1;} else if (compteur>1){montre=compteur;cache=compteur-1;} else if (compteur==1){montre=1;cache=3;} $('.fadein > .car'+cache).fadeOut(500) .parent().find('.car'+montre).fadeIn(500) .end(); } ,5000); return z; } slide=slideshow(); // si on survole, pause $('.fadein').hover(function(ev){ clearInterval(slide); }, function(ev){ slide = slideshow(); } ); // clic sur un lien pour changer de diapo $('.links a').click(function(){ car=$(this).attr('data'); $('.fadein > .carrousel').fadeOut(500) .parent().find('.car'+car).fadeIn(500) .end(); compteur=car; return false; }); </script>]]> Sat, 17 Aug 2013 15:47:36 +0200 <![CDATA[Absolute Horizontal And Vertical Centering In CSS | Smashing Coding]]> .Absolute-Center { height: 100px; width:100px; /* width et height fixés */ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* dans un container */ .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* centré dans le viewport*/ .Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; } /* version responsive */ .Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 400px; max-width: 500px; padding: 40px; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* sur la droite */ .Absolute-Center.is-Right { width: 50%; height: 50%; margin: auto; overflow: auto; position: absolute; top: 0; left: auto; bottom: 0; right: 20px; text-align: right; } /* avec overflow */ .Absolute-Center.is-Overflow { width: 50%; height: 300px; max-height: 100%; margin: auto; overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* pour les images */ .Absolute-Center.is-Image { width: 50%; height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* utiliser max-height pour avoir une height variable (pas pour ie <9) */ .Absolute-Center.is-Variable { display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* avecmarges négatives (pas responsive)*/ .is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ } /* via les css3 et transform */ .is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } transform translate(-50%,-50%) <div class="Pos-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> &lt!-- CONTENT --> </div> </div> </div> .Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; } /* grâce à flexbox */ .Pos-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } ]]> Sun, 11 Aug 2013 17:06:32 +0200 <![CDATA[Font Stacks | CSS-Tricks]]> /* Times New Roman-based stack */ font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; /* Modern Georgia-based serif stack */ font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; /* Traditional Garamond-based serif stack */ font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; /* Helvetica/Arial-based sans serif stack */ font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Verdana-based sans serif stack */ font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; /* Trebuchet-based sans serif stack */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; /* Impact-based sans serif stack */ font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; /* Monospace stack */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; ]]> Fri, 09 Aug 2013 11:35:08 +0200 <![CDATA[centrer un élément dont on connait la taille (marges negatives)]]> .centered { position: fixed; top: 50%; left: 50%; } .centered { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } * html .centered { position:absolute } margin: 20px auto; ]]> Sat, 06 Jul 2013 09:40:21 +0200 <![CDATA[Centering Percentage Width/Height Elements | CSS-Tricks]]> translate() .center { position: absolute; left: 50%; top: 50%; /* Nope =( margin-left: -25%; margin-top: -25%; */ /* Yep! */ transform: translate(-50%, -50%); /* Not even necessary really. e.g. Height could be left out! */ width: 40%; height: 50%; } position:absolute; left: 30%; right:30%; top: 25%; bottom:25%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 40%; height: 50%; position:absolute; left: 30%; right:30%; top: 25%; bottom:25%; ]]> Sat, 06 Jul 2013 09:39:35 +0200 <![CDATA[Colonnes gérées avec Text-align: Justify ]]> <ul id="Grid"> <li></li> <li></li> <li></li> <li></li> <li class="break"></li> </ul> #Grid{ text-align: justify; font-size: 0.1px; /*hide whitespace between elements*/ } #Grid li{ display: inline-block; width: 23%; font-size:20px; } #Grid .break{ width: 100%; height: 0; } #Grid:after{ content: ''; display: inline-block; width: 100%; } /* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */ /* 3 COL */ @media (max-width: 800px){ #Grid li{ width: 31%; padding-top: 31%; margin-bottom: 3%; } } /* 2 COL */ @media (max-width: 600px){ #Grid li{ width: 48%; padding-top: 48%; margin-bottom: 4%; } } /* SINGLE COL */ @media (max-width: 400px){ #Grid li{ width: 100%; padding-top: 100%; margin-bottom: 5%; } } ]]> Tue, 04 Jun 2013 14:56:54 +0200 <![CDATA[css si un input contient quelque-chose]]> #q:hover, #q:focus, #q:not([value=""]) {width: 200px;} #q {width: 50px;}]]> Fri, 31 May 2013 07:55:39 +0200 <![CDATA[Gérer les débordements de texte & d'image]]> div{ // débordement word-wrap:break-word; overflow-wrap: break-word; //césure -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; } img{ max-width:100%; height:auto; } //pour ie8 .ie8 img{width:auto;}]]> Thu, 23 May 2013 19:48:49 +0200 <![CDATA[Forcer le viewport]]> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ou @viewport{ width: device-width; zoom:1; }]]> Thu, 23 May 2013 14:02:17 +0200 <![CDATA[Des font-families sympa]]> font-family: Oxford, Garamond, serif; font-family: Torque, Tahoma, sans-serif; font-family: Consolas, Monaco, Courier, monospace; font-family: 'BPReplay Regular', Arial, sans-serif font-family: Palatino, Georgia, Helvetica, sans-serif; font-family: Consolas, Menlo, 'DejaVu Sans Mono', monospace; font-family: Miso, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'myriad-pro-1', 'myriad-pro-2', HelveticaNeue, Helvetica, Arial, serif; font-family: Monaco, 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; font-family: 'Verlag Condensed', 'Abadi MT Condensed', 'Futura Std Light Condensed', 'Futura Condensed', 'Gill Sans', 'Arial Narrow', Calibri, 'Trebuchet MS', Georgia, sans-serif; font-family: 'calluna-1', 'calluna-2', 'Georgia', 'Nimbus Sans L', serif; font-family: 'adelle-1', 'adelle-2', Georgia, serif; font-family: 'ronnia-1', 'ronnia-2', sans-serif;]]> Tue, 16 Apr 2013 22:17:40 +0200