Códigos CSS útiles

Para animar por fade los enlaces

a {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

 

Para animar las fotos de los items - pilarnorte.com

    .propdest .imagen,
    .listado.list .imagen {margin-bottom: 10px; width: 320px; overflow: hidden;}
    .propdest .imagen img,
    .listado.list .imagen img {overflow: hidden; transition: all 350ms cubic-bezier(0.785, 0.135, 0.150, 0.860);}
    .propdest .grp.presentacion:hover .imagen img,
    .listado.list .grp.presentacion:hover .imagen img {filter: grayscale(0%) contrast(1); transform: scale(1.5) rotate(5deg);}

 

Para cambiar el color al placeholder de Bootstrap

.form-control::-webkit-input-placeholder { color: white; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge */

 

Para hacer los videos de Youtube responsive

https://coolestguidesontheplanet.com/videodrome/youtube/

.video_player {
    position: relative;
    padding-bottom: 56.25%; /*panorámico*/
    padding-top: 25px;
    height: 0;
}

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

 

Para centrar texto en un TAG

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

 

Para agregar un icono Font Awesome mediante css

.menu.principal a:after {
    position: absolute;
    right: 15px;
    top: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "f0dd";
}

 

Borde transparente en una imagen

.menu.slide .sub1 a:after {
    content:"";
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    opacity:0.5;
    border:15px solid white;
}

 

Efecto imagen en gris y color

https://www.devargas.com.es/rollover-imagen-blanco-negro-color-fundido-css/

img.grayscale {
filter: url("data:image/svg xml;utf8,#grayscale"); /* Firefox 10 */
filter: gray; /*IE6-9*/
-webkit-filter: grayscale(100%); /*Chrome 19+ & Safari 6+*/
-webkit-transition: all 1.5s ease; /*Fade to color for Chrome and Safari*/
-moz-transition: all 1.5s ease;
-webkit-backface-visibility: hidden; /*Fix for transition flickering*/
width: 100%;
height: 100%;
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}

 

para centrar la ventana modal de alerta

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}