Szybkie posty

Jeżeli coś jest wartego uwagi a nie jest to materiał na pełnoprawnwgo posta na blogu to będę starać się to umieszczać w tym miejscu.

#ajax #apache #behat #bitbacket #bootstrap #composer #cookies #cqrs #css #css flex #ct8 #curl #docker #doctrine #edukacja #elasticsearch #enet #enp sla #filmy #firma #funkcje php #git #google #htaccess #html #inne #javascript #jedzenie #jquery #js/jquery #kawały #krypto #laravel #linux #oop #pdo #php #php wzorce narzędzia #phpmyadmin #phpspec #phpstan #phpstorm #phpunit #podcast #rabbit #redis #seo #soap #sql #symfony #szukanie po stringach w php #twig #virtual host #visual studio code #vue #wamp #windows #wino-nalewki #wyrazenia regularne #wzorce projektowe #xml #xxx #zdjecia #złote myśli
  • Szukasz po tagu: html
  • Ilość rekordów w bazie: 5

Ukryte pola bez jsa

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>CSS3 Accordion &mdash; Paul Hayes</title>
  <meta name="author" content="Paul Hayes" />
  <link rel="canonical" href="https://paulrhayes.com/experiments/accordion/" />
</head>
<body class="experiment">
  <div class="wrapper">
    <p class="learn">
      This is a demo, <a href="https://paulrhayes.com/2009-06/accordion-using-only-css/">learn how it works</a>.
    </p>
    <div id="experiment">
      <div class="accordion">
        <h2>Accordion Demo</h2>
        <div id="one" class="section">
          <h3>
            <a href="#one">Heading 1</a>
          </h3>
          <div>
            <p>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 cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.</p>
          </div>
        </div>
        <div id="two" class="section">
          <h3>
            <a href="#two">Heading 2</a>
          </h3>
          <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.</p>
          </div>
        </div>
        <div id="three" class="section">
          <h3>
            <a href="#three">Heading 3</a>
          </h3>
          <div>
            <p>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.</p>
          </div>
        </div>
        <div id="four" class="section large">
          <h3>
            <a href="#four">Heading 4</a>
          </h3>
          <div>
            <p>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.</p>
            <p>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 cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.</p>
            <p>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 cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.</p>
          </div>
        </div>
        <div id="five" class="section">
          <h3>
            <a href="#five">Heading 5</a>
          </h3>
          <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.</p>
          </div>
        </div>
        <div id="six" class="section">
          <h3>
            <a href="#six">Heading 6</a>
          </h3>
          <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .accordion {
      background: #eee;
      border: 1px solid #999;
      padding: 0 1em 24px;
      width: 500px;
      margin: 2em auto;
    }

    .accordion h2 {
      margin: 12px 0;
    }

    .accordion .section {
      border-bottom: 1px solid #ccc;
      padding: 0 1em;
      background: #fff;
    }

    .accordion h3 a {
      display: block;
      font-weight: normal;
      padding: 1em 0;
    }

    .accordion h3 a:hover {
      text-decoration: none;
    }

    .accordion h3+div {
      height: 0;
      overflow: hidden;
      -webkit-transition: height 0.3s ease-in;
      -moz-transition: height 0.3s ease-in;
      -o-transition: height 0.3s ease-in;
      -ms-transition: height 0.3s ease-in;
      transition: height 0.3s ease-in;
    }

    .accordion :target h3 a {
      text-decoration: none;
      font-weight: bold;
    }

    .accordion :target h3+div {
      height: 100px;
    }

    .accordion .section.large:target h3+div {
      overflow: auto;
    }
  </style>
</body>

</html>

Skośny gradient

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br>
<div class="row">
    <div class="container-fluid">
        <div class="bg-gradient-green"></div>
        <div class="bg-green">
            <div class="container">
                <h1>Lorem ipsum dolor sit amet.</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur eaque quos nihil sint dolores at voluptatem cumque unde illo mollitia, tempora ea ut. Aliquam cumque voluptatem sed magnam deleniti tenetur vero odit dicta rem quis? Quae sunt veritatis iusto, officia sequi beatae eum quisquam error veniam rerum quis, asperiores aspernatur ducimus quo eligendi recusandae autem ratione facere adipisci ipsam. Enim at quae architecto et ipsum temporibus dolorum nisi qui minima doloribus aspernatur nobis explicabo voluptatibus fuga, nam a, consectetur fugit possimus est! Ratione est voluptates tempora, quos ducimus quo consequuntur pariatur dolore minus eveniet. Facere magni, delectus incidunt explicabo quibusdam placeat quia necessitatibus eveniet tempore harum architecto suscipit voluptas ullam nemo in totam exercitationem! Quia cupiditate fugiat soluta, dolor qui sunt, nobis pariatur veniam saepe exercitationem, blanditiis! Aliquid incidunt at quod optio, vel! Iure sunt, sapiente sint tempore voluptatibus fugiat earum, blanditiis veritatis. Deserunt perferendis, iure aperiam ex eum nemo. Perferendis ad itaque inventore molestiae blanditiis. Sunt esse impedit illum. Minima veniam deserunt, facilis facere enim. Obcaecati quia, libero ducimus enim cupiditate mollitia, deserunt alias quas, voluptatum commodi deleniti culpa eveniet. Voluptatibus pariatur esse laboriosam, hic quod recusandae dolorum porro, placeat. Est a adipisci quisquam atque incidunt in ipsa, tempore?</p>
            </div>
        </div>
            <div class="bg-gradient-orange"></div>
    </div>
</div>
<style type="text/css">
.bg-gradient-green {
    margin-top: -125px;
    height: 240px;
    background: #40b55c;
    background: -webkit-repeating-linear-gradient(277deg, transparent, transparent 49.9%, #40b55c 50.1%, #40b55c 100%);
    background: -o-repeating-linear-gradient(277deg, transparent, transparent 49.9%, #40b55c 50.1%, #40b55c 100%);
    background: repeating-linear-gradient(173deg, transparent, transparent 49.9%, #40b55c 50.1%, #40b55c 100%);
}

.bg-green {
    padding: 0 0 15px 0;
    background: #40b55c;
}
.bg-gradient-orange {
    height: 196px;
    background: -webkit-repeating-linear-gradient(94deg, transparent, transparent 49.9%, #ffcc32 50.1%, #ffcc32 100%);
    background: -o-repeating-linear-gradient(94deg, transparent, transparent 49.9%, #ffcc32 50.1%, #ffcc32 100%);
    background: repeating-linear-gradient(-4deg, transparent, transparent 49.9%, #ffcc32 50.1%, #ffcc32 100%);
}
</style>
</body>
</html>

LINK

Skośne tła

LINK

Hover okrągłego zdjęcia

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .circle{
      width:500px;
      height:500px;
      border-radius:500px;
      overflow:hidden;
      position:relative;
      z-index:1;
    }
    img{
      -webkit-transition:all .2s ease;
      transition:all .2s ease;
    }
    .circle:hover img{
      -webkit-transform:scale(1.1);
      transform:scale(1.1);
    }
    </style>
  </head>
  <body>
    <div class='circle'>
      <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" alt="" />
    </div>
  </body>
</html>

Obracajace się kółko

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    
    .circle {
      position: relative;
      margin: 20px;
      height: 120px;
      width: 120px;
      background-color: orange;
      border-radius: 50%;
    }
    .circle__spin {
      position: absolute;
      left: -10px;
      top: -10px;
      width: 140px;
      height: 140px;
    }
    .circle__spin svg {
      width: 100%;
      height: 100%;
      animation: spin 10s linear infinite;
    }
    .circle__spin circle {
      stroke-width: 5;
      stroke-dasharray: 120, 20;
      fill: none;
      stroke: orange;
    }
    @keyframes spin {
      100% {
        transform: rotate(360deg);
      }
    }
    </style>
  </head>
  <body>
    <div class="circle">
      <div class="circle__spin">
        <svg>
          <circle cx="50%" cy="50%" r="67px"></circle>
        </svg>
      </div>
    </div>
  </body>
</html>

LINK