First . Create new picture with FIREWORK with out background.
Save in the kurzor.PNG format.
Secund copy code to your website.
<style>
body{cursor: url(kurzor3.png),default;}
</style>
body{cursor: url(kurzor3.png),default;}
</style>
Wednesday, December 28, 2016
Wednesday, December 14, 2016
Insert into mySQL databasa with php
Create 3 file.
1. File name input.html
<html>
<header></header>
<body>
<form action="insert.php" method="post">
Username: <input name="adnam" size="20" /><br />
Password: <input name="adpsw" size="20" /><br />
<input type="submit" value="SEND" />
</form>
</body>
</html>
2. File name insert.php
<?php
$username = $_POST["adnam"];
$password = $_POST["adpsw"];
$conn = mysql_connect('localhost', 'root', '');
if (!$conn)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('users');
$query="INSERT INTO user (username, password)
VALUES ('$username','$password')";
mysql_query($query);
/*if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}*/
header("location:ok.html");
mysql_close($conn);
?>
3.File name ok.html
<html>
<head></head>
<body>
User inserted to databasa OK . <a href="input.html">New User</a>
</body>
</html>
Wednesday, October 19, 2016
How to create DB in MySQL with PhP
<?php
$db_username="root"; /*Username in localhost is ROOT*/
$db_password=""; /*DataBasa Password*/
$db_hoster="localhost"; /*Just in the LocalHost */
$conn = mysql_connect($db_hoster, $db_username, $db_password);
if(! $conn )
{
die('DataBasa error: ' . mysql_error());
}
// Create database
$databasa_name="MyFirstDB";
$sql = "CREATE DATABASE $databasa_name";
if (mysql_query($sql, $conn)) {
echo "Database created successfully";
} else {
echo "Error creating database: " . mysqli_error($conn);
}
mysql_close($conn);
?>
$db_username="root"; /*Username in localhost is ROOT*/
$db_password=""; /*DataBasa Password*/
$db_hoster="localhost"; /*Just in the LocalHost */
$conn = mysql_connect($db_hoster, $db_username, $db_password);
if(! $conn )
{
die('DataBasa error: ' . mysql_error());
}
// Create database
$databasa_name="MyFirstDB";
$sql = "CREATE DATABASE $databasa_name";
if (mysql_query($sql, $conn)) {
echo "Database created successfully";
} else {
echo "Error creating database: " . mysqli_error($conn);
}
mysql_close($conn);
?>
How To Connect MySQL DataBasa
<?php
$db_username="root"; /*Username in localhost is ROOT*/
$db_password=""; /*DataBasa Password*/
$db_hoster="localhost"; /*Just in the LocalHost */
$conn = mysql_connect($db_hoster, $db_username, $db_password);
if(! $conn )
{
die('DataBasa error: ' . mysql_error());
}
echo 'DataBasa READY';
mysql_close($conn);
?>
$db_username="root"; /*Username in localhost is ROOT*/
$db_password=""; /*DataBasa Password*/
$db_hoster="localhost"; /*Just in the LocalHost */
$conn = mysql_connect($db_hoster, $db_username, $db_password);
if(! $conn )
{
die('DataBasa error: ' . mysql_error());
}
echo 'DataBasa READY';
mysql_close($conn);
?>
Tuesday, October 18, 2016
How to install Local Server
Search in Google WebBrowser
Write in XAMPP download.
Click to download button
Click to Save File button
Open download container folder
Click to Next button
XAMPP cent would recommend what I use it.
First and easiest when it comes to the Web server.
XAMPP cent would recommend what I use it. Totally simple to install.
Once this is done you can begin acquiring programming. What is a NOTEPAD write, but you can search on the net is a program that will help in programming such as Macromedia Dreamweaver or newer version of ADOBE what has been marketed.
XAMPP is installed, it automatically installs the necessary local server programs,
databasa mysql, php, java, css, etc.
XAMPP cent would recommend what I use it. Totally simple to install.
Once this is done you can begin acquiring programming. What is a NOTEPAD write, but you can search on the net is a program that will help in programming such as Macromedia Dreamweaver or newer version of ADOBE what has been marketed.
XAMPP is installed, it automatically installs the necessary local server programs,
databasa mysql, php, java, css, etc.
Wednesday, October 12, 2016
Tuesday, October 11, 2016
Overflow scroll with css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Overflow scroll with css</title>
<style>
div {
background-color:#6F0;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<div>abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc.</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Overflow scroll with css</title>
<style>
div {
background-color:#6F0;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<div>abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc.</div>
</body>
</html>
Friday, October 7, 2016
Overflow hidden with css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Overflow hidden with css</title>
<style>
div {
background-color:#6F0;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div>abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc.</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Overflow hidden with css</title>
<style>
div {
background-color:#6F0;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div>abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc.</div>
</body>
</html>
Thursday, October 6, 2016
Overflow visible with css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Overflow visible with css</title>
<style>
div {
background-color:#6F0;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: visible;
}
</style>
</head>
<body>
<div>abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc.</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Overflow visible with css</title>
<style>
div {
background-color:#6F0;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: visible;
}
</style>
</head>
<body>
<div>abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc abcddefghijklmno abcdd ghij klmno cddefghijklmn abc.</div>
</body>
</html>
Saturday, October 1, 2016
Buttons with css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buttons with css</title>
</head>
<style>
.button {
background-color: #FF0;
border: none;
color: #060;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button1:hover{ color:#900; background-color:#FC0;}
.button2 {border-radius: 4px;}
.button2:hover{ color:#900; background-color:#FC0;}
.button3 {border-radius: 8px;}
.button3:hover{ color:#900; background-color:#FC0;}
.button4 {border-radius: 12px;}
.button4:hover{ color:#900; background-color:#FC0;}
.button5 {border-radius: 24px;}
.button5:hover{ color:#900; background-color:#FC0;}
.button6 {border-radius: 10%;}
.button6:hover{ color:#900; background-color:#FC0;}
.button7 {border-radius: 20%;}
.button7:hover{ color:#900; background-color:#FC0;}
.button8 {border-radius: 30%;}
.button8:hover{ color:#900; background-color:#FC0;}
.button9 {border-radius: 40%;}
.button9:hover{ color:#900; background-color:#FC0;}
.button10 {border-radius: 50%;}
.button10:hover{ color:#900; background-color:#FC0;}
</style>
</head>
<body>
<p>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">24px</button>
</p>
<p>
<button class="button button6">2px</button>
<button class="button button7">4px</button>
<button class="button button8">8px</button>
<button class="button button9">12px</button>
<button class="button button10">24px</button>
</p>
</body>
</html>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buttons with css</title>
</head>
<style>
.button {
background-color: #FF0;
border: none;
color: #060;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button1:hover{ color:#900; background-color:#FC0;}
.button2 {border-radius: 4px;}
.button2:hover{ color:#900; background-color:#FC0;}
.button3 {border-radius: 8px;}
.button3:hover{ color:#900; background-color:#FC0;}
.button4 {border-radius: 12px;}
.button4:hover{ color:#900; background-color:#FC0;}
.button5 {border-radius: 24px;}
.button5:hover{ color:#900; background-color:#FC0;}
.button6 {border-radius: 10%;}
.button6:hover{ color:#900; background-color:#FC0;}
.button7 {border-radius: 20%;}
.button7:hover{ color:#900; background-color:#FC0;}
.button8 {border-radius: 30%;}
.button8:hover{ color:#900; background-color:#FC0;}
.button9 {border-radius: 40%;}
.button9:hover{ color:#900; background-color:#FC0;}
.button10 {border-radius: 50%;}
.button10:hover{ color:#900; background-color:#FC0;}
</style>
</head>
<body>
<p>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">24px</button>
</p>
<p>
<button class="button button6">2px</button>
<button class="button button7">4px</button>
<button class="button button8">8px</button>
<button class="button button9">12px</button>
<button class="button button10">24px</button>
</p>
</body>
</html>
<body>
</body>
</html>
Friday, September 30, 2016
Border style in Paragraph
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border Paragraf</title>
<style>
#table{
width:300px;}
#dotted {border-style: dotted;}
#dashed {border-style: dashed;}
#solid {border-style: solid;}
#double {border-style: double;}
#groove {border-style: groove;}
#ridge {border-style: ridge;}
#inset {border-style: inset;}
#outset {border-style: outset;}
#none {border-style: none;}
#hidden {border-style: hidden;}
</style>
</head>
<body>
<div id="table">
<p id="dotted">Hello World - dotted</p>
<p id="dashed">Hello World - dashed</p>
<p id="solid">Hello World - solid</p>
<p id="double">Hello World - doudle</p>
<p id="groove">Hello World - groove</p>
<p id="ridge">Hello World - ridge</p>
<p id="inset">Hello World - inset</p>
<p id="outset">Hello World - outset</p>
<p id="none">Hello World - none</p>
<p id="hidden">Hello World - hidden</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border Paragraf</title>
<style>
#table{
width:300px;}
#dotted {border-style: dotted;}
#dashed {border-style: dashed;}
#solid {border-style: solid;}
#double {border-style: double;}
#groove {border-style: groove;}
#ridge {border-style: ridge;}
#inset {border-style: inset;}
#outset {border-style: outset;}
#none {border-style: none;}
#hidden {border-style: hidden;}
</style>
</head>
<body>
<div id="table">
<p id="dotted">Hello World - dotted</p>
<p id="dashed">Hello World - dashed</p>
<p id="solid">Hello World - solid</p>
<p id="double">Hello World - doudle</p>
<p id="groove">Hello World - groove</p>
<p id="ridge">Hello World - ridge</p>
<p id="inset">Hello World - inset</p>
<p id="outset">Hello World - outset</p>
<p id="none">Hello World - none</p>
<p id="hidden">Hello World - hidden</p>
</div>
</body>
</html>
Friday, September 23, 2016
Backround color
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Backround COLOR</title>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
</body>
<div>
<h1>HELLO</h1>
<p>World</p>
</div>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Backround COLOR</title>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
</body>
<div>
<h1>HELLO</h1>
<p>World</p>
</div>
</html>
Monday, June 27, 2016
Transform with CSS
 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css TRANFORM</title>
<style>
#transform1{
transform: rotate( -20deg );}
#transform2{
transform: rotateX( -45deg );}
#transform3{
transform: rotateY( -45deg );}
#transform4{
transform: rotate3d( 30, 0, 0, 30deg);}
#transform5{
transform: scaleX( 0.8 );}
#transform6{
transform: scaleY( 0.8 );}
#transform7{
transform: skewX( 20deg );}
#transform8{
transform: skewY( 20deg );}
#transform9{
transform-origin:20% 40%;}
</style>
</head>
<body>
<table width="500" height="500" border="0" align="center">
<tr>
<td align="center" valign="middle"><img id="transform1" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform2" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform3" src="madarka.jpg" width="150" height="120" /></td>
</tr>
<tr>
<td align="center" valign="middle"><img id="transform4" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform5" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform6" src="madarka.jpg" width="150" height="120" /></td>
</tr>
<tr>
<td align="center" valign="middle"><img id="transform7" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform8" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform9" src="madarka.jpg" width="150" height="120" /></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css TRANFORM</title>
<style>
#transform1{
transform: rotate( -20deg );}
#transform2{
transform: rotateX( -45deg );}
#transform3{
transform: rotateY( -45deg );}
#transform4{
transform: rotate3d( 30, 0, 0, 30deg);}
#transform5{
transform: scaleX( 0.8 );}
#transform6{
transform: scaleY( 0.8 );}
#transform7{
transform: skewX( 20deg );}
#transform8{
transform: skewY( 20deg );}
#transform9{
transform-origin:20% 40%;}
</style>
</head>
<body>
<table width="500" height="500" border="0" align="center">
<tr>
<td align="center" valign="middle"><img id="transform1" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform2" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform3" src="madarka.jpg" width="150" height="120" /></td>
</tr>
<tr>
<td align="center" valign="middle"><img id="transform4" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform5" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform6" src="madarka.jpg" width="150" height="120" /></td>
</tr>
<tr>
<td align="center" valign="middle"><img id="transform7" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform8" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform9" src="madarka.jpg" width="150" height="120" /></td>
</tr>
</table>
</body>
</html>
Friday, June 24, 2016
Image Tooltip with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltipimage {
top: 85px;
left: 0px;
visibility: hidden;
width: 120px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltipimage {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip"><img src="ten1.jpg" height="80" border="0" /> <span class="tooltipimage"><img src="ten1.jpg" width="300" border="0" /></span></div>
<div class="tooltip"><img src="Rain Drops Wallpaper(05).jpg" height="80" /><span class="tooltipimage"><img src="Rain Drops Wallpaper(05).jpg" width="300" border="0" /></span></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltipimage {
top: 85px;
left: 0px;
visibility: hidden;
width: 120px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltipimage {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip"><img src="ten1.jpg" height="80" border="0" /> <span class="tooltipimage"><img src="ten1.jpg" width="300" border="0" /></span></div>
<div class="tooltip"><img src="Rain Drops Wallpaper(05).jpg" height="80" /><span class="tooltipimage"><img src="Rain Drops Wallpaper(05).jpg" width="300" border="0" /></span></div>
</body>
</html>
Thursday, June 23, 2016
Text Tooltip with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tooltip</title>
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.tooltip .tooltiptext {
top: 25px;
left: 105%;
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip"><a href="#" >this is one link with tooltip <span class="tooltiptext">Hello, this is a link</span>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tooltip</title>
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.tooltip .tooltiptext {
top: 25px;
left: 105%;
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip"><a href="#" >this is one link with tooltip <span class="tooltiptext">Hello, this is a link</span>
</div>
</body>
</html>
Monday, June 20, 2016
Box Shadow with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Box Shadow</title>
<style>
div{
width:300px;
height:200px;
background-color:#0F0;
box-shadow:8px 8px 0 #F30;}
</style>
</head>
<body>
<div>
THIS IS BOX AND SHADOW
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Box Shadow</title>
<style>
div{
width:300px;
height:200px;
background-color:#0F0;
box-shadow:8px 8px 0 #F30;}
</style>
</head>
<body>
<div>
THIS IS BOX AND SHADOW
</div>
</body>
</html>
Sunday, June 19, 2016
Background Image with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Backround Image</title>
<style>
body{
background-image:url(19.JPG);}
</style>
</head>
<body>
<h1>This is a Backround image</h1>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Backround Image</title>
<style>
body{
background-image:url(19.JPG);}
</style>
</head>
<body>
<h1>This is a Backround image</h1>
</body>
</html>
Advenced backround example with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Advenced backround example</title>
<style>
body{
margin-left:200px;
background:#5d9ab2;}
.container{
text-align:center;}
.center_div{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:40%;
background-color:#d0f0f6;
text-align:left;
padding:10px;}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hello CSS Programmers</h1>
<p>Advenced backround example</p>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Advenced backround example</title>
<style>
body{
margin-left:200px;
background:#5d9ab2;}
.container{
text-align:center;}
.center_div{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:40%;
background-color:#d0f0f6;
text-align:left;
padding:10px;}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hello CSS Programmers</h1>
<p>Advenced backround example</p>
</div>
</div>
</body>
</html>
Saturday, June 18, 2016
Atributes Selector with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Atributes Selector</title>
<style>
label[for]
{
background:yellow;}
fieldset{
width:300px;}
</style>
</head>
<body>
<form>
<fieldset>
<legend> Sign in Form </legend>
<label for="user"> Username </label><br />
<label for="password"> Password </label><br /><br />
<input type="submit" value="SEND" />
</fieldset>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Atributes Selector</title>
<style>
label[for]
{
background:yellow;}
fieldset{
width:300px;}
</style>
</head>
<body>
<form>
<fieldset>
<legend> Sign in Form </legend>
<label for="user"> Username </label><br />
<label for="password"> Password </label><br /><br />
<input type="submit" value="SEND" />
</fieldset>
</form>
</body>
</html>
Animation with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transform</title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background:skyblue;}
#div2{
width:100px;
height:100px;
line-height:100px;
background:blue;
transition:all 1s ease-in-out;}
#div2 p{
color:white;
text-align:center;}
#div2:hover{
width:200px;
border-radius:30px;
background:red;
transform:scale(0.8);}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<p>Hello</p>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transform</title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background:skyblue;}
#div2{
width:100px;
height:100px;
line-height:100px;
background:blue;
transition:all 1s ease-in-out;}
#div2 p{
color:white;
text-align:center;}
#div2:hover{
width:200px;
border-radius:30px;
background:red;
transform:scale(0.8);}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<p>Hello</p>
</div>
</div>
</body>
</html>
Tuesday, April 5, 2016
Polaroid effect with css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#kep{
margin-top:100px;
border-color:#Fff;
border-style: solid;
transform: rotate(-10deg);
border-top-width:10px;
border-left-width:10px;
border-right-width:10px;
border-bottom-width:30px;
box-shadow: 3px 3px 3px #5a5a5b;}
#kep2{
margin-top:100px;
border-color:#Fff;
border-style: solid;
/*transform: rotate(-10deg);*/
border-top-width:10px;
border-left-width:10px;
border-right-width:10px;
border-bottom-width:30px;
box-shadow: 3px 3px 3px #5a5a5b;}
#kep3{
margin-top:100px;
border-color:#Fff;
border-style: solid;
transform: rotate(20deg);
border-top-width:10px;
border-left-width:10px;
border-right-width:10px;
border-bottom-width:30px;
box-shadow: 3px 3px 3px #5a5a5b;}
</style>
</head>
<body bgcolor="#CCCCCC">
<center>
<img src="kepek/8VIZESES.JPG" width="300" id="kep" />
<img src="kepek/8VIZESES.JPG" width="300" id="kep2" />
<img src="kepek/8VIZESES.JPG" width="300" id="kep3" />
</center>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#kep{
margin-top:100px;
border-color:#Fff;
border-style: solid;
transform: rotate(-10deg);
border-top-width:10px;
border-left-width:10px;
border-right-width:10px;
border-bottom-width:30px;
box-shadow: 3px 3px 3px #5a5a5b;}
#kep2{
margin-top:100px;
border-color:#Fff;
border-style: solid;
/*transform: rotate(-10deg);*/
border-top-width:10px;
border-left-width:10px;
border-right-width:10px;
border-bottom-width:30px;
box-shadow: 3px 3px 3px #5a5a5b;}
#kep3{
margin-top:100px;
border-color:#Fff;
border-style: solid;
transform: rotate(20deg);
border-top-width:10px;
border-left-width:10px;
border-right-width:10px;
border-bottom-width:30px;
box-shadow: 3px 3px 3px #5a5a5b;}
</style>
</head>
<body bgcolor="#CCCCCC">
<center>
<img src="kepek/8VIZESES.JPG" width="300" id="kep" />
<img src="kepek/8VIZESES.JPG" width="300" id="kep2" />
<img src="kepek/8VIZESES.JPG" width="300" id="kep3" />
</center>
</body>
</html>
Wednesday, February 24, 2016
Navigációs bar - css stilusal
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Navigacio gombok</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
/*position: fixed;
top: 0;
width: 100%;*/
color:#000000;
border: 1px solid #000000;
background-color: #ff9900;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #ffee00;
}
li:last-child {
border-right: none;
</style>
</head>
<body>
<table width="800" border="0" align="center">
<tr>
<td><ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<ul style="float:right;list-style-type:none;">
<li><a class="active" href="#about">About</a></li>
<li><a href="#login">Login</a></li>
</ul>
</ul></td>
</tr>
</table>
</body>
</html>
Sunday, February 21, 2016
Download counter
counter.php file
<?php
if (file_exists('counter.txt'))
{
$fil= fopen('counter.txt','r');
$dat=fread($fil,filesize('counter.txt'));
print "<br>Downloaded : " . $dat;
fclose($fil);
$fil=fopen('counter.txt','w');
fwrite($fil, $dat+1);
}
else
{
$fil=fopen('counter.txt','w');
fwrite($fil, 1);
echo'1';
fclose($fil);
}
?>
if (file_exists('counter.txt'))
{
$fil= fopen('counter.txt','r');
$dat=fread($fil,filesize('counter.txt'));
print "<br>Downloaded : " . $dat;
fclose($fil);
$fil=fopen('counter.txt','w');
fwrite($fil, $dat+1);
}
else
{
$fil=fopen('counter.txt','w');
fwrite($fil, 1);
echo'1';
fclose($fil);
}
?>
counter.txt
ez pedig az a file ahol a számláló megjegyzi az adatokat.
Az egész program letölthető innen https://www.dropbox.com/s/kcib7jat8k1in51/counter.php?dl=0
Az egész program letölthető innen https://www.dropbox.com/s/kcib7jat8k1in51/counter.php?dl=0
Wednesday, February 17, 2016
PayPal fizető gomb a weboldalunkra
PayPal fizetési kód HTML megoldása.
Természetesen nem árt ha a beállításkor odafigyelünk,
mert könnyen nem az elképzelt célt érjük el.
html kód :
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="valami@valami.com"><!---Email cím amelyikre megy a kifizetés-->
<input type="hidden" name="currency_code" value="EUR"><!--a fizetendő pénznem EURO , forint pedig HUF-->
<input type="hidden" name="item_name" value="termek_elnevezese"><!---Termék elnevezése-->
<input type="hidden" name="amount" value="2000"><!---Fizetendő összeg-->
<input type="image" src="http://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal payments">
</form>
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="valami@valami.com"><!---Email cím amelyikre megy a kifizetés-->
<input type="hidden" name="currency_code" value="EUR"><!--a fizetendő pénznem EURO , forint pedig HUF-->
<input type="hidden" name="item_name" value="termek_elnevezese"><!---Termék elnevezése-->
<input type="hidden" name="amount" value="2000"><!---Fizetendő összeg-->
<input type="image" src="http://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal payments">
</form>
Tuesday, February 16, 2016
Monday, February 15, 2016
Meta Tag - az oldalunk kereső optimalizálásra
Ezek a TAGek a kereső robotok számára kell feltüntetnünk, hogy eltudja olvasni miről is szól az oldalunk.
<title>ccccccccccccíít</title><!---Az oldal címe-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!---Betü tipus, amire az oldal be van állitva(ezesetben magyar karakterek)-->
<link href="css.css" type="text/css" rel="stylesheet"><!---stylus oldalt jelzi , ahol be van egy oldal megjelenése álitva-->
<link rel="shortcut icon" type="image/gif" href="favicon.gif" ><!---16x16 vagy 30x30 kis kép ami a cím melett jelenik meg a böngészőben-->
<meta name="description" content="php, html , css megoldások kezdőknek"><!---Leírása az oldalnak-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"><!---Kulcsszavak amire a kereső olvas-->
<!---<meta http-equiv="refresh" content="10">--><!---Az oldal mien időnként frisitse magát-->
<meta name="robots" content="index/follow">
<meta name="verify-v1" content="s1Wp+M................=" /><!--- A Google Webmester Eszközök tulajdonjog igazoló kódja.-->
<meta name="Author" content="szobytech@yahoo.com"><!---Az oldalat kiadó neve (esetenként autorizációra is használjuk)-->
<meta name="generator" content="SzobyTECH"><!---Az oldalat létrehozó neve-->
<meta name="Publisher" content="Szoby"><!---Az oldal kiadójának e-mail címe-->
<meta name="copyright" content="Szobytech 2016." /><!---A szerzői jog tulajdonosa-->
<meta name="country" content="Hungary"><!---A megjelenés országa-->
<meta name="content-language" content="hu, hun, hungarian"><!---A megjelenés nyelve-->
<meta name="revisit-after" content="5 days"><!---A robotok visszalátogatását 5 nap múlva indikálni remélő sor.-->
Thursday, February 11, 2016
CSS3 oval switch checkboxes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
input[type=checkbox].oval{
visibility: hidden;
}
label.toggler{ /* Label "track" style */
width: 85px; /* width of label */
height: 35px; /* height of label */
position: relative;
display: block; /* change "block" to "inline-block" if you want toggler to appear inline with other content next to it */
border-radius: 25px;
box-shadow: 8px 2px 8px rgba(0,0,0,0.7) inset, -7px 1px 8px rgba(0,0,0,0.7) inset; /* default gray shadow */
left: 0;
top: 0;
background: #7A7A7A; /* default tray background */
z-index: 50;
font: bold 12px Arial;
cursor: pointer;
}
label.toggler::before{ /* label "off" state text */
text-shadow: 0 -2px 1px #8a8a8a;
content: 'OFF';
position: absolute;
color: white;
top: 10px;
left: 64%;
}
label.toggler::after{ /* Round Knob "off" state */
content: '';
display: block;
width: 40px;
height: 40px;
border-radius: 40px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
box-shadow: 0 5px 10px rgba(0,0,0,.5), 2px -5px 5px rgba(0,0,0,.2) inset;
position: absolute;
top: -5px;
left: 0px;
background: rgb(255,255,255); /* knob style gradient */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 37%, rgba(186,186,186,1) 38%, rgba(244,244,244,1) 48%, rgba(252,252,252,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(37%,rgba(224,224,224,1)), color-stop(38%,rgba(186,186,186,1)), color-stop(48%,rgba(244,244,244,1)), color-stop(100%,rgba(252,252,252,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
}
input[type=checkbox]:checked + label{ /* Label "track" "on" style */
background: #9FBA48; /* green background */
box-shadow: 8px 2px 8px rgba(58,145,34,0.7) inset, -7px 1px 8px rgba(58,145,34,0.7) inset; /* green shadow */
}
input[type=checkbox]:checked + label::before{ /* label "on" state text */
content: 'ON';
left: 11%;
}
input[type=checkbox]:checked + label::after{ /* Round Knob "on" state */
left: 45px;
}
/* ############ red theme ############# */
input[type=checkbox]:checked + label.red{ /* Label "track" "on" style */
background: #C64141; /* green background */
box-shadow: 8px 2px 8px rgba(130,20,20,0.7) inset, -7px 1px 8px rgba(130,20,20,0.7) inset; /* red shadow */
}
/* ############ orange theme ############# */
input[type=checkbox]:checked + label.orange{ /* Label "track" "on" style */
background: #ED9F0E; /* orange background */
box-shadow: 8px 2px 8px rgba(219, 116, 13,0.7) inset, -7px 1px 8px rgba(219, 116, 13,0.7) inset; /* orange shadow */
}
/* ############ yellow theme ############# */
label.yellow::before{ /* label "off" state text */
color: white;
}
input[type=checkbox]:checked + label.yellow::before{ /* label "on" state text */
color: black;
text-shadow: 0 -2px 1px #eee;
}
input[type=checkbox]:checked + label.yellow{ /* Label "track" "on" style */
color: black;
background: #E8E009; /* yellow background */
box-shadow: 8px 2px 8px rgba(224, 196, 83,0.7) inset, -7px 1px 8px rgba(224, 196, 83,0.7) inset; /* yellow shadow */
}
/* ############ blue theme ############# */
input[type=checkbox]:checked + label.blue{ /* Label "track" "on" style */
background: #0DBDD8; /* blue background */
box-shadow: 8px 2px 8px rgba(17, 120, 175,0.7) inset, -7px 1px 8px rgba(17, 120, 175,0.7) inset; /* blue shadow */
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox1" class="oval" />
<label class="toggler" for="checkbox1"></label>
<input type="checkbox" id="checkbox2" class="oval" />
<label class="toggler red" for="checkbox2"></label>
<input type="checkbox" id="checkbox3" class="oval" />
<label class="toggler orange" for="checkbox3"></label>
<input type="checkbox" id="checkbox4" class="oval" />
<label class="toggler yellow" for="checkbox4"></label>
<input type="checkbox" id="checkbox5" class="oval" />
<label class="toggler blue" for="checkbox5"></label>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
input[type=checkbox].oval{
visibility: hidden;
}
label.toggler{ /* Label "track" style */
width: 85px; /* width of label */
height: 35px; /* height of label */
position: relative;
display: block; /* change "block" to "inline-block" if you want toggler to appear inline with other content next to it */
border-radius: 25px;
box-shadow: 8px 2px 8px rgba(0,0,0,0.7) inset, -7px 1px 8px rgba(0,0,0,0.7) inset; /* default gray shadow */
left: 0;
top: 0;
background: #7A7A7A; /* default tray background */
z-index: 50;
font: bold 12px Arial;
cursor: pointer;
}
label.toggler::before{ /* label "off" state text */
text-shadow: 0 -2px 1px #8a8a8a;
content: 'OFF';
position: absolute;
color: white;
top: 10px;
left: 64%;
}
label.toggler::after{ /* Round Knob "off" state */
content: '';
display: block;
width: 40px;
height: 40px;
border-radius: 40px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
box-shadow: 0 5px 10px rgba(0,0,0,.5), 2px -5px 5px rgba(0,0,0,.2) inset;
position: absolute;
top: -5px;
left: 0px;
background: rgb(255,255,255); /* knob style gradient */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 37%, rgba(186,186,186,1) 38%, rgba(244,244,244,1) 48%, rgba(252,252,252,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(37%,rgba(224,224,224,1)), color-stop(38%,rgba(186,186,186,1)), color-stop(48%,rgba(244,244,244,1)), color-stop(100%,rgba(252,252,252,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
}
input[type=checkbox]:checked + label{ /* Label "track" "on" style */
background: #9FBA48; /* green background */
box-shadow: 8px 2px 8px rgba(58,145,34,0.7) inset, -7px 1px 8px rgba(58,145,34,0.7) inset; /* green shadow */
}
input[type=checkbox]:checked + label::before{ /* label "on" state text */
content: 'ON';
left: 11%;
}
input[type=checkbox]:checked + label::after{ /* Round Knob "on" state */
left: 45px;
}
/* ############ red theme ############# */
input[type=checkbox]:checked + label.red{ /* Label "track" "on" style */
background: #C64141; /* green background */
box-shadow: 8px 2px 8px rgba(130,20,20,0.7) inset, -7px 1px 8px rgba(130,20,20,0.7) inset; /* red shadow */
}
/* ############ orange theme ############# */
input[type=checkbox]:checked + label.orange{ /* Label "track" "on" style */
background: #ED9F0E; /* orange background */
box-shadow: 8px 2px 8px rgba(219, 116, 13,0.7) inset, -7px 1px 8px rgba(219, 116, 13,0.7) inset; /* orange shadow */
}
/* ############ yellow theme ############# */
label.yellow::before{ /* label "off" state text */
color: white;
}
input[type=checkbox]:checked + label.yellow::before{ /* label "on" state text */
color: black;
text-shadow: 0 -2px 1px #eee;
}
input[type=checkbox]:checked + label.yellow{ /* Label "track" "on" style */
color: black;
background: #E8E009; /* yellow background */
box-shadow: 8px 2px 8px rgba(224, 196, 83,0.7) inset, -7px 1px 8px rgba(224, 196, 83,0.7) inset; /* yellow shadow */
}
/* ############ blue theme ############# */
input[type=checkbox]:checked + label.blue{ /* Label "track" "on" style */
background: #0DBDD8; /* blue background */
box-shadow: 8px 2px 8px rgba(17, 120, 175,0.7) inset, -7px 1px 8px rgba(17, 120, 175,0.7) inset; /* blue shadow */
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox1" class="oval" />
<label class="toggler" for="checkbox1"></label>
<input type="checkbox" id="checkbox2" class="oval" />
<label class="toggler red" for="checkbox2"></label>
<input type="checkbox" id="checkbox3" class="oval" />
<label class="toggler orange" for="checkbox3"></label>
<input type="checkbox" id="checkbox4" class="oval" />
<label class="toggler yellow" for="checkbox4"></label>
<input type="checkbox" id="checkbox5" class="oval" />
<label class="toggler blue" for="checkbox5"></label>
</body>
</html>
Subscribe to:
Posts (Atom)