HTML Tips n Tricks

------------------Внедрение картинки из base64 строки:-----------------
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0j
vb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAA
Re8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0Cc
guWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16"
height="14" alt="внедренная иконка папки"/>
----------------------bg video webm or mp4 on bootstrap templates:-----------
<!-- HEAD:------background video css/js ---- -->
<style type="text/css">
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(images/polina.png) no-repeat;
background-size: cover;
}
video { display: block; }
@media screen and (max-device-width: 800px) {
body {
background: url(images/polina.png) #000 no-repeat center center fixed;
}
#bgvid {
display: none;
}
}
</style>
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
<!-- HEAD:JS:---------------background video css/js ---- -->
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
<!-- BODY(TOP): -->
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="video/polina.webm" type="video/webm">
<source src="video/polina.mp4" type="video/mp4">
</video>
=================modal only css (no js!!!):==========================
<style>
//
// Variables
// ----------------------

@gray: #333;
@gray-light: #aaa;
@gray-lighter: #eee;
@space: 40px;
@blue: #428bca;
@blue-dark: darken(@blue, 5%);

// Mixin for transition/transform
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9+
          transform: translate(@x, @y);
}
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

//
// Body
// ----------------------

body{
  color: @gray;
  font-family: 'Helvetica', arial;
}

.wrap{
  padding: @space;
  text-align: center;
}

hr {
  clear: both;
  margin-top: @space;
  margin-bottom: @space;
  border: 0;
  border-top: 1px solid @gray-light;
}

h1{
  font-size: 30px;
  margin-bottom: @space;
}

p{
  margin-bottom: @space/2;
}

//
// Btn
// ----------------------

.btn{
  background: @blue;
  border: @blue-dark solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
 
  &:hover{
    background: @blue-dark;
  }
 
  &.btn-big{
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
  }
 
}

.btn-close{
  color: @gray-light;
  font-size: 30px;
  text-decoration: none;
  position: absolute; right: 5px; top: 0;
 
  &:hover{
     color: darken(@gray-light, 10%);
  }
 
}

//
// Modal
// ----------------------

.modal{
  
  // This is modal bg
  &:before{
    content: "";
    display: none;
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
  }
 
  &:target{
    
    // Active animate in modal
    &:before{
      display: block;
    } 
    .modal-dialog{
      .translate(0, 0);
      top: 20%; 
    }
    
  }
 
}

// Modal Dialog
// ----------------------

.modal-dialog{
  background: #fefefe;
  border: @gray solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed;
  left: 50%;
  top: -100%; 
  z-index: 11;
  width: 360px;
  .translate(0, -500%);
  .transition-transform(~"0.3s ease-out");
}

.modal-body{
  padding: @space/2;
}

.modal-header,
.modal-footer{
  padding: @space/4 @space/2;
}

.modal-header{
  border-bottom: @gray-lighter solid 1px;
 
  h2{
    font-size: 20px;
  }
 
}

.modal-footer{
  border-top: @gray-lighter solid 1px;
  text-align: right;
}

</style>
<div class="wrap">
  <h1>Modal - Pure CSS (no Javascript)</h1>
  <p>Example of modal in CSS only, here I use the pseudo selector ":target" and no javascript for modal action.</p>
  <p>This works in IE9+ and all modern browsers.</p>
  <p>View <a href="http://www.felipefialho.com/css-components/">Pure CSS Components</a> project.</p>
  <hr />
  <a href="#modal-one" class="btn btn-big">Modal!</a>
</div>
<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Modal in CSS?</h2>
      <a href="#" class="btn-close" aria-hidden="true">×</a>
    </div>
    <div class="modal-body">
      <p>One modal example here! :D</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Nice!</a>
    </div>
  </div>
</div>
<!-- /Modal -->

-------Ссылка в виде кнопки с bootstrap 3.x.x:---------------
<a class="btn btn-danger btn-lg" href="#">BUTTON LINK!!!</a>
-------Копия страницы с преобразованными ссылками.(Перепроверить ссылки https):
wget -t 3 —restrict-file-names=windows -E -r -k -p -np https://getmdl.io/components/index.html