css

Autofill transparent

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}

css

Texte seul - Permalink - Snippet public posté le 16/12/2018

100% video

/* 100% video */
.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
   margin: 10px 0;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

css

Texte seul - Permalink - Snippet public posté le 08/07/2018

Scaled/Proportional Content with CSS and JavaScript

Proportional scaling of a *container* is fairly easy


.parent {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}

.child {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

css

https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Texte seul - Permalink - Snippet public posté le 06/03/2018

Chargement css sans bloquer le rendu

<link rel="stylesheet" href="style.css" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

css html javascript

Texte seul - Permalink - Snippet public posté le 03/05/2017

SWip

http://codepen.io/meganos/pen/YNGQRB

css html javascript

http://codepen.io/meganos/pen/YNGQRB

Texte seul - Permalink - Snippet public posté le 16/01/2017

Effet Header sympa

Aussi la TYPO "Lato"


@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

css inspiration javascript

http://tympanus.net/Development/HeaderEffects/

Texte seul - Permalink - Snippet public posté le 11/10/2015

css masking

-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));

css

http://thenittygritty.co/css-masking

Texte seul - Permalink - Snippet public posté le 19/09/2015

Border box pseudo

html {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

*, *:before, *:after {
    -moz-box-sizing:inherit;
    -webkit-box-sizing:inherit;
    box-sizing:inherit;    
}

css

Texte seul - Permalink - Snippet public posté le 28/07/2015

display: inline-block et les espaces indésirables

/* La technique de font-size : 0 sur le parent*/

parent{
    font-size: 0;
}


/* ou bien sur l'element en question*/

{
    display: inline-block;    
    vertical-align:top;
}

css

http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Texte seul - Permalink - Snippet public posté le 02/01/2015

Implementing a Fixed Position iOS Web Application

Scroller = function(element) {
  this.element = this;
  this.startTouchY = 0;
  this.animateTo(0);

  element.addEventListener(‘touchstart’, this, false);
  element.addEventListener(‘touchmove’, this, false);
  element.addEventListener(‘touchend’, this, false);
}

Scroller.prototype.handleEvent = function(e) {
  switch (e.type) {
    case “touchstart”:
      this.onTouchStart(e);
      break;
    case “touchmove”:
      this.onTouchMove(e);
      break;
    case “touchend”:
      this.onTouchEnd(e);
      break;
  }
}

Scroller.prototype.onTouchStart = function(e) {
  // This will be shown in part 4.
  this.stopMomentum();

  this.startTouchY = e.touches[0].clientY;
  this.contentStartOffsetY = this.contentOffsetY;
}

Scroller.prototype.onTouchMove = function(e) {
  if (this.isDragging()) {
    var currentY = e.touches[0].clientY;
    var deltaY = currentY - this.startTouchY;
    var newY = deltaY + this.contentStartOffsetY;
    this.animateTo(newY);
  }
}

Scroller.prototype.onTouchEnd = function(e) {
  if (this.isDragging()) {
    if (this.shouldStartMomentum()) {
      // This will be shown in part 3.
      this.doMomentum();
    } else {
      this.snapToBounds();
    }
  }
}

Scroller.prototype.animateTo = function(offsetY) {
  this.contentOffsetY = offsetY;

  // We use webkit-transforms with translate3d because these animations
  // will be hardware accelerated, and therefore significantly faster
  // than changing the top value.
  this.element.style.webkitTransform = ‘translate3d(0, ‘ + offsetY + ‘px, 0)’;
}

// Implementation of this method is left as an exercise for the reader.
// You need to measure the current position of the scrollable content
// relative to the frame. If the content is outside of the boundaries
// then simply reposition it to be just within the appropriate boundary.
Scroller.prototype.snapToBounds = function() {
  ...
}

// Implementation of this method is left as an exercise for the reader.
// You need to consider whether their touch has moved past a certain
// threshold that should be considered ‘dragging’.
Scroller.prototype.isDragging = function() {
  ...
}

// Implementation of this method is left as an exercise for the reader.
// You need to consider the end velocity of the drag was past the
// threshold required to initiate momentum.
Scroller.prototype.shouldStartMomentum = function() {
  ...
}

css mobile

https://developers.google.com/mobile/articles/webapp_fixed_ui#bg

Texte seul - Permalink - Snippet public posté le 25/11/2014

Bootstrap 3 Media Queries

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }

css

http://scotch.io/quick-tips/css3-quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Texte seul - Permalink - Snippet public posté le 08/11/2014

Désactiver toutes les animation css

body.is-loading *
        {
            -moz-transition: none !important;
            -webkit-transition: none !important;
            -o-transition: none !important;
            -ms-transition: none !important;
            transition: none !important;
            -moz-animation: none !important;
            -webkit-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }

css

Texte seul - Permalink - Snippet public posté le 08/11/2014

Changer la couleur jaune autocomplete chrome

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #565960 inset;  
    -webkit-text-fill-color: #fff !important; 
}

css

http://labs.enonic.com/articles/remove-forced-yellow-input-background-in-chrome

Texte seul - Permalink - Snippet public posté le 28/10/2014

Taille police redimensionable

Vous connaissez certainement les unités px, em, rem ou pt pour dimensionner vos corps de texte ? Rajoutez à cette liste :

vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
vh : « Viewport Height », correspond à l’unité relative à la hauteur de votre écran
vmin (vm pour IE9) : « Viewport Min », correspond à l’unité relative à la plus petite des deux dimensions (largeur ou hauteur selon l’orientation)
vmax : « Viewport Max », correspond à l’unité relative à la plus grande des deux dimensions (largeur ou hauteur selon l’orientation)
Très bien, mais que représente une unité de vw, par exemple ?
C’est assez simple mais pas forcément intuitif de prime abord : 1 unité représente 1% de la dimension de référence.


h1 {  
   font-size: 10vw;  
}

css html

http://www.creativejuiz.fr/blog/veille-technologique/taille-police-en-fonction-largeur-ecran-viewport#comment-28332

Texte seul - Permalink - Snippet public posté le 23/10/2014

background en SVG

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    background: url("data:image/svg+xml;utf8,\a         <svg width='25' height='22' xmlns='http://www.w3.org/2000/svg'>\a             <path d='M4,1 L4,21 L5,21 L5,1 L4,1 Z M4,1' id='lineDark' fill='rgba(213, 213, 213, 0.70)'></path>\a             <path d='M5,1 L5,21 L6,21 L6,1 L5,1 Z M5,1' id='lineLight' fill='rgba(254, 255, 255, 0.70)'></path>\a             <path d='M11,9 L14.4690265,14 L18,9 L11,9 Z M11,9' id='arrow' fill='rgba(140, 140, 140, 1)'></path>\a         </svg>");
    background-repeat: no-repeat;
    background-position: 100% 50%; }
    select:hover {
      background: url("data:image/svg+xml;utf8,\a         <svg width='25' height='22' xmlns='http://www.w3.org/2000/svg'>\a             <path d='M4,1 L4,21 L5,21 L5,1 L4,1 Z M4,1' id='lineDark' fill='rgba(213, 213, 213, 0.70)'></path>\a             <path d='M5,1 L5,21 L6,21 L6,1 L5,1 Z M5,1' id='lineLight' fill='rgba(254, 255, 255, 0.70)'></path>\a             <path d='M11,9 L14.4690265,14 L18,9 L11,9 Z M11,9' id='arrow' fill='rgba(140, 140, 140, 1)'></path>\a         </svg>"), #e8e8e8;
      background-repeat: no-repeat, no-repeat;
      background-position: 100% 50%, 0% 0%; } }

css

Texte seul - Permalink - Snippet public posté le 22/10/2014

Personaliser un select css3

input, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #ededed;
  /* Note: No support for  <IE9. */
  background-color: #f3f3f3;
  background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#ebebeb));
  /* Chrome, Safari 4+ */
  background: -webkit-linear-gradient(top, #f3f3f3, #ebebeb);
  /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background: -moz-linear-gradient(top, #f3f3f3, #ebebeb);
  /* Firefox 3.6-15 */
  background: -o-linear-gradient(top, #f3f3f3, #ebebeb);
  /* Opera 11.10-12.00 */
  background: linear-gradient(to bottom, #f3f3f3, #ebebeb);
  /* W3C Markup, Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
  -webkit-box-shadow: inset 0px 0px 0px 1px #f3f3f3;
  -moz-box-shadow: inset 0px 0px 0px 1px #f3f3f3;
  -o-box-shadow: inset 0px 0px 0px 1px #f3f3f3;
  box-shadow: inset 0px 0px 0px 1px #f3f3f3;
  border: 1px solid #bdbec6;
  font-weight: 600 !important;
  /* !important fixes an <=IE8 bug. */
  font-size: 0.675em;
  font-weight: 300\9;
  *line-height: 1.4;
  *overflow: visible;
  *padding: 0.375em 0.65em 0.35em 0.65em; }
  input:hover, select:hover {
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    /* Note: No support for  <IE9. */
    background-color: #3e9cfd;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e9cfd), to(#4599ea));
    /* Chrome, Safari 4+ */
    background: -webkit-linear-gradient(top, #3e9cfd, #4599ea);
    /* Chrome 10-25, iOS 5+, Safari 5.1+ */
    background: -moz-linear-gradient(top, #3e9cfd, #4599ea);
    /* Firefox 3.6-15 */
    background: -o-linear-gradient(top, #3e9cfd, #4599ea);
    /* Opera 11.10-12.00 */
    background: linear-gradient(to bottom, #3e9cfd, #4599ea);
    /* W3C Markup, Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
    border-color: #2e8fec;
    color: #f9f9f9; 
}

select:active {
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 50, 0.115);
    border-color: #2678c6;
    color: #f1f1f1; 
}

css

http://julian.com/research/css/main.css

Texte seul - Permalink - Snippet public posté le 22/10/2014

Sticky Footer

/**********************
 * HTML
 *******************/

<div id="page">
    <div id="content"></div>
    <div id="footer"></div>
</div>

/**********************
 * CSS
 *******************/

#page {
    position: relative;
    min-height: 100%;
    padding: 0 0 150px 0;
}

#content{
    /* facultatif */
    padding-bottom: 100px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    background: #FFF;
}

css html

http://sngv.net/work/reactor/work.html

Texte seul - Permalink - Snippet public posté le 17/10/2014