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.
- Szukasz po tagu: css
- Ilość rekordów w bazie: 21
Flex artykuł
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 — 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>Łapanie elmentów o podobnej nazwie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="sp-module-content">
<ul id="middle menu" class="nav menu">
<li class="item-118">
<a href="/www orla/index.php/kontakt-menu-middle">
Zadzwoń: 61 666 666
</a>
</li>
<li class="item-119">...</li>
<li class="item-120">...</li>
</ul>
</div>
<style type="text/css">
.sp-module-content .nav [class*='item-'] a {
color:pink;
}
</style>
</body>
</html>Siatka flex w css
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>* { box-sizing: border-box; }
.container {
width: 80%;
margin: 0 auto;
}
.row {
display: flex;
width: 100%;
}
.col {
flex: 1;
border: 5px solid black;
min-height: 150px;
margin: 5px;
}Siatka grid w css
<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
<div class="col-3">col-3</div>
<div>col-4</div>
<div>col-4</div>
<div>col-4</div>
<div>col-4</div>
</div>.container {
width: 1000px;
height: 500px;
margin: 30px auto;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
& > * {
border: 5px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.col-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.col-2, .col-3 {
grid-column: 3 / 5;
}
}Gradient generator
Hover menu
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>Tło z video w tle z podzielonym ekranem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="banner">
<div class="image-container">
<div class="text text-test">NATURE</div>
</div>
<video autoplay loop muted class="banner__video" poster="https://pawelgrzybek.com/photos/2015-12-06-codepen.jpg">
<source src="https://pawelgrzybek.com/photos/2015-12-06-codepen.webm" type="video/webm">
<source src="https://pawelgrzybek.com/photos/2015-12-06-codepen.mp4" type="video/mp4">
</video>
</div>
<style type="text/css">
body {
margin: 0;
}
.banner {
position: relative;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}
.banner__video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
z-index: -10;
}
.banner::before{
background: black;
content: '';
width: 100%;
height: 100%;
position: absolute;
}
.image-container {
background-size: cover;
position: relative;
height: 500px;
/* background-color: black;
*/
}
.text {
background-color: white;
color: black;
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}
</style>
</body>
</html>Scroll menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<style type="text/css">
.nav {
background-color: #FFF;
width:100%;
font-size: 14px;
font-weight:900;
letter-spacing: 1px;
min-width: 50px;
overflow-x: auto;
margin-left: 0px;
text-transform: uppercase;
z-index:9000;
-webkit-box-shadow: 0px 2px 12px 0px rgba(0, 79, 180, 1);
-moz-box-shadow: 0px 2px 12px 0px rgba(0, 79, 180, 1);
box-shadow: 0px 2px 12px 0px rgba(0, 79, 180, 1);
}
.nav li {
display: inline-block;
padding: 10px 15px 10px 15px;
overflow: visible;
height:auto;
font-weight: 500;
letter-spacing: .1em;
}
.nav li:nth-child(1){}
.nav li:last-child {margin-right:60px;}
.nav ul {
list-style: none;
text-align: center;
white-space: nowrap;
margin:15px 73px 10px 23px;
}
.nav li a {
color:#000
}
.nav li a:hover {
text-decoration: none;
opacity: 0.5;
}
.logo{
width:30px;
float:left;
padding-bottom:10px;
height:20px;
margin-right:50px;
}
body {
margin: 0px;
}
</style>
</head>
<body>
<nav class="nav" data-sticky="">
<ul class="">
<div class="logo animated infinite pulse">
<img src="img/html-5.svg" height="30" width="30" /></div>
<li><a href="#omnie" >O mnie</a></li>
<li><a href="#opis" >Opis</a></li>
<li><a href="#wersion" >Wersion</a></li>
<li><a href="#yourteam" >Your team</a></li>
<li><a href="#opinie" >Opinie</a></li>
<li><a href="#location" >Lokation</a></li>
<li><a href="#contaktimage" >kontakt</a></li>
</ul>
</nav>
</body>
</html>Niesamowite efekty
Link
link di strony z testowaniem przegldarek
walidator html
java script i php
hover img!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
hover img!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
walidacja !!!!!!!
fajnz blog !!!!!!!
jquery!!!!!!!!!!!!
jquery2222222222222!!!!!!!!!!!!
portfolio typa
programsta
blog
fajne rozne rzeczy
sematyczny kod
facebook debuger
Skośne tła
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>Border zaokraglony
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.border{
border: 4px solid #40B55C;
border-radius: 5px;
position: absolute;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="position: relative;">
<div class="border"></div>
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique sapiente vitae eius doloribus repudiandae unde repellat, quam saepe! Earum, cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam perferendis provident ipsam aliquid delectus quia omnis nemo libero dicta maiores obcaecati, ut sit quasi laborum reiciendis soluta architecto veritatis incidunt rerum neque, doloribus magni. Architecto, consequuntur impedit eum magni consequatur numquam? Doloremque minus a vel nostrum, culpa reiciendis ipsam ea, explicabo ad in sint velit illum, et possimus repellat praesentium maxime repellendus! Impedit ab, quod tempora tempore obcaecati voluptatum laborum mollitia eius ducimus similique eum dicta rem nulla, sunt ullam magnam, cumque. Officia ex, quod optio numquam libero quibusdam vel, velit dolor dolorum deserunt quia voluptate inventore pariatur nobis blanditiis!</p>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>Skosne tlo
https://codepen.io/anon/pen/regaRE?editors=1100
Vertical align
.vertical_align {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
@media (max-width: 1199px) {
.vertical_align {display: block; }
}Sprawdzanie koloru z obrazka w css
Pierwszy DRUGIVertical center element 100% okna
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
padding: 0px;
margin: 0px
}
.vertical {
display: table;
height: 100vh;
width: 100%;
text-align: center;
overflow: hidden;
}
.table-cell {
display: table-cell;
vertical-align: middle;
margin: auto;
width: 100%
}
.sectionclass1 {
background: url('https://images81.fotosik.pl/340/42b35b22f5e2a029.jpg') center center no-repeat fixed;
background-size: cover;
position: relative;
width: 100%!important;
height: 100vh!important;
}
.arrow {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
margin: auto;
width: 100%;
z-index: 3000
}
</style>
</head>
<body>
<section class="sectionclass1 overflow-none vertical">
<div class="container-fluid height-100 table-cell text-left white-font" id="welcome">
<h3 class="wow zoomIn" data-wow-delay="0.5s"><span class="border-bt big-font">FITNESS CENTER&</span></h3>
<h3 class="wow zoomIn" data-wow-delay="0.5s"><span class="border-bt big-font">PROFESSIONAL GYM STUDIO</span></h3>
</div>
<div class="arrow">
<a href="#about" class="chewron-down smoothScroll"> <i class="fa fa-angle-down fa-5x div-a" aria-hidden="true"></i></a>
</div>
</section>
</body>
</html>Vertical center fixed element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.window-container {
background-color: rgba(0, 0, 0, .8);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
-webkit-padding-start: 0px;
margin: auto;
text-align: center;
height: 100vh;
z-index: 8000;
}
.window-col {
background-color: rgba(23, 124, 164, 0.9);
text-align: center;
padding: 15% 15px 15% 15px;
border-radius: 5px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
margin: auto;
width: 70%;
-webkit-padding-start: 0px;
padding-left: 0px;
}
.window-close {
position: absolute;
top: 0;
right: 22px;
font-size: 70px;
cursor: pointer;
}
.contact-img {
width: 110px;
height: 110px;
margin: auto;
}
.content {
width: 40px
}
</style>
</head>
<body>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maiores autem, vel voluptas! Quaerat enim minima, delectus. Impedit dolorem atque nobis iusto quas excepturi est facilis eos voluptas eaque veniam, repellat, totam, beatae. Explicabo aut perferendis architecto optio officia alias distinctio recusandae quis autem, debitis est id cum earum harum, voluptatibus odit, reiciendis minus unde similique at dolorem. Error possimus delectus nesciunt illum molestiae eligendi incidunt, quaerat enim alias officiis ipsum sint debitis accusamus! Assumenda repudiandae accusamus est excepturi adipisci ex aspernatur omnis labore minima. Architecto rerum natus id nisi provident ipsum beatae molestiae eaque sapiente, facilis numquam expedita quidem perferendis tempora harum dolor doloremque dicta culpa adipisci quisquam.
</p>
</div>
<div id="window-1" class="window-container">
<div class="window-col">
<span class="window-close">×</span>
<img src="http://drive.google.com/uc?export=download&id=0Bw176tQtKlp1WUd5ZGJTNmVOZUU" class="contact-img">
<h2 class="big-font aldrich" style="margin-top:0px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis saepe necessitatibus, autem esse aperiam sed </h2>
</div>
</div>
</body>
</html>Scroll menu overflow pojawiający się suwak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav-overflow {
background-color: green
}
@media only screen and (max-height: 557px) {
.nav-overflow {
list-style-type: none;
overflow-y: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
height: 100vh;
background-color: red
}
}
</style>
</head>
<body>
<div class="nav-overflow">
<ul>
<li>
<a href="">jeden</a>
</li>
<li>
<a href="">jeden</a>
</li>
<li>
<a href="">jeden</a>
</li>
<li>
<a href="">jeden</a>
</li>
<li>
<a href="">jeden</a>
</li>
<li>
<a href="">jeden</a>
</li>
<li>
<a href="">jeden</a>
</li>
</ul>
</div>
</body>
</html>