CSS Lab PDF

CSS PROPERTIES
Image Overlay Hover

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
.image {
display: block;
width: 100%;
height: auto;
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
</style>
</head>
<body>
<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Modal Image
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>

<button id="myBtn">Open Modal</button>


<div id="myModal" class="modal">

<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Hero Image
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
.hero-image {
background-image: url("photographer.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
.hero-text button:hover {
background-color: #555;
color: white;
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am John Doe</h1>
<p>And I'm a Photographer</p>
<button>Hire me</button>
</div>
</div>
<p>Page Content..</p>
</body>
</html>
How TO - Shake an Image

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
</style>
</head>
<body>
<p>Hover over the image:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Image Filters
Note: The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1
and earlier.
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
</style>
</head>
<body>
<p>Convert the image to grayscale:</p>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and
earlier.</p>
</body>
</html>
BLUR Image
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
</style>
</head>
<body>
<p>Apply a blur effect to the image:</p>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and
earlier.</p>
</body>
</html>
How TO - Side Navigation

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
.sidenav a:hover {
color: #f1f1f1;
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
</script>
</body>
</html>
Accordion
<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<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.</p>
</div>
<div class="panel">
consequat.</p>
</div>
<div class="panel">
consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
</script>
</body>
</html>

CSS Lab PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

CSS Lab PDF

Hochgeladen von

Copyright:

Verfügbare Formate

CSS PROPERTIES

Image Overlay Hover

transition: .5s ease;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

<h2>Slide in Overlay from the Right</h2>

<p>Hover over the image to see the effect.</p>

<img src="img_avatar.png" alt="Avatar" class="image">

<div class="text">Hello World</div>

/* The Modal (background) */

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

padding-top: 100px; /* Location of the box */

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

border: 1px solid #888;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

from {top:-300px; opacity:0}

from {top:-300px; opacity:0}

/* The Close Button */

.modal-body {padding: 2px 16px;}

padding: 2px 16px;

<h2>Animated Modal with Header and Footer</h2>

<button id="myBtn">Open Modal</button>

<p>Some text in the Modal Body</p>

<p>Some other text...</p>

// Get the modal

var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal

// When the user clicks on <span> (x), close the modal

// When the user clicks anywhere outside of the modal, close it

transform: translate(-50%, -50%);

padding: 10px 25px;

<h1 style="font-size:50px">I am John Doe</h1>

<p>And I'm a Photographer</p>

How TO - Shake an Image

animation: shake 0.5s;

0% { transform: translate(1px, 1px) rotate(0deg); }

10% { transform: translate(-1px, -2px) rotate(-1deg); }

20% { transform: translate(-3px, 0px) rotate(1deg); }

30% { transform: translate(3px, 2px) rotate(0deg); }

40% { transform: translate(1px, -1px) rotate(1deg); }

50% { transform: translate(-1px, 2px) rotate(-1deg); }

60% { transform: translate(-3px, 1px) rotate(0deg); }

70% { transform: translate(3px, 1px) rotate(-1deg); }

80% { transform: translate(-1px, -1px) rotate(1deg); }

90% { transform: translate(1px, 2px) rotate(0deg); }

100% { transform: translate(1px, -2px) rotate(-1deg); }

<p>Hover over the image:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */

<p>Convert the image to grayscale:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>