Teknotit Snipet Manager tarfst: Snippets: css

Autofill transparent

Sun, 16 Dec 2018 03:37:56 +0000

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;
}

100% video

Sun, 08 Jul 2018 06:31:39 +0000

/* 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%;
}

Scaled/Proportional Content with CSS and JavaScript

Tue, 06 Mar 2018 18:43:43 +0000

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%;
}

Chargement css sans bloquer le rendu

Wed, 03 May 2017 17:14:46 +0000

SWip

Mon, 16 Jan 2017 00:17:20 +0000

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

Effet Header sympa

Sun, 11 Oct 2015 09:41:01 +0000

Aussi la TYPO "Lato"


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

css masking

Sat, 19 Sep 2015 14:41:06 +0000

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

Border box pseudo

Tue, 28 Jul 2015 21:21:36 +0000

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;    
}

display: inline-block et les espaces indésirables

Fri, 02 Jan 2015 02:53:50 +0000

/* 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;
}

Implementing a Fixed Position iOS Web Application

Tue, 25 Nov 2014 02:42:19 +0000

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() {
  ...
}

Bootstrap 3 Media Queries

Sat, 08 Nov 2014 17:30:43 +0000

/*==================================================
=            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) {
        
    }

Désactiver toutes les animation css

Sat, 08 Nov 2014 14:12:57 +0000

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;
		}

Changer la couleur jaune autocomplete chrome

Tue, 28 Oct 2014 13:12:30 +0000

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

Taille police redimensionable

Thu, 23 Oct 2014 19:07:23 +0000

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;  
}

background en SVG

Wed, 22 Oct 2014 20:25:23 +0000

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    background: url("data:image/svg+xml;utf8,\a 		");
    background-repeat: no-repeat;
    background-position: 100% 50%; }
    select:hover {
      background: url("data:image/svg+xml;utf8,\a 		"), #e8e8e8;
      background-repeat: no-repeat, no-repeat;
      background-position: 100% 50%, 0% 0%; } }

Personaliser un select css3

Wed, 22 Oct 2014 20:24:50 +0000

input, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #ededed;
  /* Note: No support for



Sticky Footer
Fri, 17 Oct 2014 06:53:04 +0200
/**********************
 * HTML
 *******************/


	
	


/**********************
 * 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;
}