Informatyka





Web



Slider html css


<html>
<head>
<title>Slider html css</title>
<style type="text/css">
div#obramowka{width:500px}
div#captioned-gallery {
overflow: hidden;
}
figure {
margin: 0;
position: absolute;
width: 500px;
}
figure.slider {
width: 400%;
position: relative;
font-size: 0;
}
figure.slider figure {
width: auto;
height: auto;
position: inherit;
display: inline-block;
}
figure.slider img {
height: auto;
position: relative;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.3);
color: #fff;
width: 100%;
font-size: 2rem;
}

figure.pic {
animation: pic 12s 1s infinite normal forwards;
-webkit-animation: pic 12s 1s infinite normal forwards;
}
@keyframes pic {

0%{
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
}
20%{
transform: translate(-500px, 0px);
-webkit-transform: translate(-500px, 0px);
-moz-transform: translate(-500px, 0px);
-o-transform: translate(-500px, 0px);
}
25%{
transform: translate(-500px, 0px);
-webkit-transform: translate(-500px, 0px);
-moz-transform: translate(-500px, 0px);
-o-transform: translate(-500px, 0px);
}
45%{
transform: translate(-1000px, 0px);
-webkit-transform: translate(-1000px, 0px);
-moz-transform: translate(-1000px, 0px);
-o-transform: translate(-1000px, 0px);
}
50%{
transform: translate(-1000px, 0px);
-webkit-transform: translate(-1000px, 0px);
-moz-transform: translate(-1000px, 0px);
-o-transform: translate(-1000px, 0px);
}
70%{
transform: translate(-1500px, 0px);
-webkit-transform: translate(-1500px, 0px);
-moz-transform: translate(-1500px, 0px);
-o-transform: translate(-1500px, 0px);
}
75%{
transform: translate(-1500px, 0px);
-webkit-transform: translate(-1500px, 0px);
-moz-transform: translate(-1500px, 0px);
-o-transform: translate(-1500px, 0px);
}
}
@-webkit-keyframes pic {

0%{
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
}
20%{
transform: translate(-500px, 0px);
-webkit-transform: translate(-500px, 0px);
-moz-transform: translate(-500px, 0px);
-o-transform: translate(-500px, 0px);
}
25%{
transform: translate(-500px, 0px);
-webkit-transform: translate(-500px, 0px);
-moz-transform: translate(-500px, 0px);
-o-transform: translate(-500px, 0px);
}
45%{
transform: translate(-1000px, 0px);
-webkit-transform: translate(-1000px, 0px);
-moz-transform: translate(-1000px, 0px);
-o-transform: translate(-1000px, 0px);
}
50%{
transform: translate(-1000px, 0px);
-webkit-transform: translate(-1000px, 0px);
-moz-transform: translate(-1000px, 0px);
-o-transform: translate(-1000px, 0px);
}
70%{
transform: translate(-1500px, 0px);
-webkit-transform: translate(-1500px, 0px);
-moz-transform: translate(-1500px, 0px);
-o-transform: translate(-1500px, 0px);
}
75%{
transform: translate(-1500px, 0px);
-webkit-transform: translate(-1500px, 0px);
-moz-transform: translate(-1500px, 0px);
-o-transform: translate(-1500px, 0px);
}
}
</style>
</head>
<body>
<div id="obramowka">
<div id="captioned-gallery">
<figure class="slider">
<figure class="pic"><img src="1.jpg" alt="" style="z-index: -1" />
<figcaption>www.tomekmarszal.pl</figcaption>
</figure>
<figure class="pic"><img src="2.jpg" alt="" style="z-index: -2" />
<figcaption>Html Css Slider</figcaption>
</figure>
<figure class="pic"><img src="3.jpg" alt="" style="z-index: -3" />
<figcaption>We like fighting girls</figcaption>
</figure>
<figure class="pic"><img src="4.jpg" alt="" style="z-index: -4" />
<figcaption>kapral@toya.net.pl</figcaption>
</figure>
</figure>
</div>
</div>
</body>

Demo
Pobierz


Przenikanie zdjęć html css


<html>
<head>
<title>Przenikanie obrazów www.stackoverflow.com</title>
<style type="text/css">
.pic { position: absolute;opacity: 0; }
.pic1 { animation: pic1 4s infinite linear; }
.pic2 { animation: pic2 4s infinite linear; }
.pic1 { -webkit-animation: pic1 4s infinite linear; }
.pic2 { -webkit-animation: pic2 4s infinite linear; }

@keyframes pic1 { 0% {opacity: 0;}
5% {opacity: 1;}
45% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;} }
@keyframes pic2 { 0% {opacity: 0;}
50% {opacity: 0;}
55% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;} }
@-webkit-keyframes pic1 { 0% {opacity: 0;}
5% {opacity: 1;}
45% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;} }
@-webkit-keyframes pic2 { 0% {opacity: 0;}
50% {opacity: 0;}
55% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;} }
</style>
</head>
<body>
<img id="pic1" class="pic pic1" src="o1.jpg" />
<img id="pic2" class="pic pic2" src="o2.jpg" />
</body>
</html>

Demo
Pobierz


Responsywne Menu


plik css

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
/*MAIN*/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #09F;
}
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #ff0000;
}
@media (max-width:400px){
.allscreen{
visibility:hidden;
}
visibility:visible;
.handheld{
}
nav {
float: right;
padding: 20px;
}
#menu-icon {
display: hidden;
height: 40px;
width: 40px;
background: #444 url(../images/menu-icon.png) center;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
menu{
list-style: none;
}
b {
display: inline-block;
float: left;
padding: 10px
}
.current {
color: #ffff00;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
h1 {
font-size: 2em;
color: #2262AD;
line-height: 1.15em;
margin: 20px 0 ;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
}
}
@media (min-width:400px){
.twojstyl{}
margin-left: 80px;
#logo{
width: 800px;
height:200px;
background: url(../images/kolaz.jpg) no-repeat center;
display: block;
}
.handheld{
visibility:hidden;
}
}

/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav menu, nav:active menu {
display: none;
position: absolute;
background: #444;
padding: 20px; border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav b {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover menu {
display: block;
}


plik html

<head>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div class="handheld">
<nav>

<a href="#" id="menu-icon"></a>

<menu>

<b><a href="#" class="current">Witaj Kasiu</a></b>
<b><a href="#">Witam Panstwa</a></b>

</menu>

</nav>
</div>
<div class="allscreen">
<a href="#" id="logo"></a>
</div>

Pobierz

Kurs blogowania oparty o WordPress i Xampp

Pobierz