I'm having a problem in my html page. When I zoom out or in, it's design brakes. Please help me to find a solution.
html {
/*position:relative;*/
left:0;
right:0;
top:0;
bottom:0;
background:URL(IN_2.jpg);
/*background-image: url("IN_2.jpg") no-repeat-x no-repeat-y;*/
background-size:cover;
/*opacity:0.9;*/
margin: auto;
}
h1
{
/*position:relative;*/
margin-left:520px;
font-family:Lucida Sans Unicode,Serif;
font-size:35px;
color:WHITE;
opacity:0.4;
size:normal;
margin: auto;
}
#textbox
{
position:relative;
top:100px;
left:510px;
margin: auto;
}
#textbox1
{
position:relative;
top:110px;
left:510px;
margin: auto;
}
.inputs {
background:white;
font-size: 1em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 50px;
border: non;
padding: 13px 10px;
/* margin-bottom: 20px;*/
box-shadow: inset 0 2px 3px rgba( 0, 0, 0,0.2);
/*position:500 500;*/
z-index:1;
}
.inputs:focus
{
background: #fff;
box-shadow: 0 0 0 3px PINK, inset 0 0px 2px rgba( 0, 0, 0, 0.4 ), 0px 5px 5px rgba( 0, 0, 0, 0.15 );
outline:10px;
}
div {
width: 300px;
height: 400px;
background-color:#F0F0F0;
border-radius: 50px;
padding-right:100px;
position: relative;
left: 5px;
top:-100px;
z-index:-1;
margin: auto;
box-shadow: 5px 5px 50px BLACK;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">a
<meta name="HandheldFriendly" content="true"/>
<link rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<h1>Helping Hand</h1>
<!--<input type="button" id="register" value="Register Here"/>-->
<form action="" >
<input type="text" class="inputs" placeholder="e-mail" id="textbox"/>
<br>
<br>
<input type="password" class="inputs" placeholder="Password" id="textbox1"/>
<br>
<br>
<button class="button"> <span> LogIn </span> </button>
<button class="button" ><span> Register </span></button>
</form>
<div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">a
<meta name="HandheldFriendly" content="true"/>
<link rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<h1>Helping Hand</h1>
<!--<input type="button" id="register" value="Register Here"/>-->
<form action="" >
<input type="text" class="inputs" placeholder="e-mail" id="textbox"/>
<br>
<br>
<input type="password" class="inputs" placeholder="Password" id="textbox1"/>
<br>
<br>
<button class="button"> <span> LogIn </span> </button>
<button class="button" ><span> Register </span></button>
</form>
<div>
</div>
</body>
</html>
CSS File
html {
/*position:relative;*/
left:0;
right:0;
top:0;
bottom:0;
background:URL(IN_2.jpg);
/*background-image: url("IN_2.jpg") no-repeat-x no-repeat-y;*/
background-size:cover;
/*opacity:0.9;*/
margin: auto;
}
h1
{
/*position:relative;*/
margin-left:520px;
font-family:Lucida Sans Unicode,Serif;
font-size:35px;
color:WHITE;
opacity:0.4;
size:normal;
margin: auto;
}
#textbox
{
position:relative;
top:100px;
left:510px;
margin: auto;
}
#textbox1
{
position:relative;
top:110px;
left:510px;
margin: auto;
}
.inputs {
background:white;
font-size: 1em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 50px;
border: non;
padding: 13px 10px;
/* margin-bottom: 20px;*/
box-shadow: inset 0 2px 3px rgba( 0, 0, 0,0.2);
/*position:500 500;*/
z-index:1;
}
.inputs:focus
{
background: #fff;
box-shadow: 0 0 0 3px PINK, inset 0 0px 2px rgba( 0, 0, 0, 0.4 ), 0px 5px 5px rgba( 0, 0, 0, 0.15 );
outline:10px;
}
div {
width: 300px;
height: 400px;
background-color:#F0F0F0;
border-radius: 50px;
padding-right:100px;
position: relative;
left: 5px;
top:-100px;
z-index:-1;
margin: auto;
box-shadow: 5px 5px 50px BLACK;
}
Output of html file:
Without zoom out
With zoom out
You must make a div and inside of it it will be your form,then determine the position,i chose relative.
This is the code:
html {
/*position:relative;*/
left: 0;
right: 0;
background: url(IN_2.jpg);
/*background-image: url("IN_2.jpg") no-repeat-x no-repeat-y;*/
background-size: cover;
/*opacity:0.9;*/
margin: auto;
}
h1 {
/*position:relative;*/
margin-left: 520px;
font-family: Lucida Sans Unicode, Serif;
font-size: 35px;
color: WHITE;
opacity: 0.4;
}
#textbox {
position: relative;
top: 10px;
left: 20px;
margin: auto;
}
#textbox1 {
position: relative;
top: 10px;
left: 20px;
margin: auto;
}
.inputs {
background: white;
font-size: 1em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 50px;
border: none;
padding: 13px 10px;
/* margin-bottom: 20px;*/
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
/*position:500 500;*/
z-index: 1;
}
.inputs:focus {
background: #fff;
box-shadow: 0 0 0 3px PINK, inset 0 0 2px rgba(0, 0, 0, 0.4), 0 5px 5px rgba(0, 0, 0, 0.15);
outline: 10px;
}
#form {
width: 300px;
height: 400px;
background-color: #F0F0F0;
border-radius: 50px;
padding-right: 100px;
position: relative;
left: 5px;
top: -100px;
z-index: -1;
margin: auto;
box-shadow: 5px 5px 50px BLACK;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
a
<meta name="HandheldFriendly" content="true"/>
<link rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<h1>Helping Hand</h1>
<!--<input type="button" id="register" value="Register Here"/>-->
<form action="">
<div id="form">
<input type="text" class="inputs" placeholder="e-mail" id="textbox"/>
<br>
<br>
<input type="password" class="inputs" placeholder="Password" id="textbox1"/>
<br>
<br>
</div>
</form>
<button class="button"> <span> LogIn </span> </button>
<button class="button"><span> Register </span></button>
</body>
</html>
Related
I am creating a tab based system where you can add days and add information for each day. I am trying to achieve an overlapping look when it comes to the tabs and would like to add a sort of shadow like effect when a tab is being overlapped by another on the left side. In this specific example, when day one is active, day 2's inner left portion will have a bit of a shadow to make it look like it is being overlapped. How can I achieve this effect?
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
}
.active {
background-color: lightgreen !important;
/* box-shadow: inset 0 20px 20px -20px #000000; */
z-index: 5000;
}
.tab {
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.tab:not(:first-child) {
margin-left: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab active">
Day 1
</div>
<div class="tab">
Day 2
</div>
<div class="tab" style="z-index: -10">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
I have tried adding in a box shadow to the tab elements that are on top of another tab. This method did not work as it looks a little cheap in my opinion.
Here is the css I tried to add to the tab css class
-webkit-box-shadow: 34px 0px 25px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 34px 0px 25px -13px rgba(0, 0, 0, 0.75);
box-shadow: 34px 0px 25px -13px rgba(0, 0, 0, 0.75);
You can use pseudo elements for this, but the caveat is you can't use a negative z-index because of the stacking context and the need for the active tab to be above the other tabs.
This is basically using the box-shadow and the transform: skew to fake either side of the active tab.
Then I have styles for the first and last active tabs so the :before and :after, respectively, do not show up if either are active.
This approach gives you a little more of a "polished" look instead of just using box-shadow on the active tab.
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
position: relative;
}
.tab.active {
position: relative;
background-color: lightgreen !important;
z-index: 5;
}
.tab {
position: relative;
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.tab:not(:first-child) {
margin-left: -5px;
}
.tab::before,
.tab::after {
content: '';
position: absolute;
left: 0;
bottom: 2px;
box-shadow: -3px 0px 4px 1px rgba(0, 0, 0, .3);
transform: skew(-5deg,-10deg);
width: 1px;
height: 60%;
border-radius: 0;
display: none;
}
.tab::after {
left: auto;
right: 0;
box-shadow: 3px 1px 4px 1px rgba(0, 0, 0, .3);
transform: skew(5deg,10deg);
}
.tab.active::before,
.tab.active::after {
z-index: -1;
display: block;
}
.tab.active:first-child::before {
display: none;
}
.tab.active:last-child::after {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab">
Day 1
</div>
<div class="tab active">
Day 2
</div>
<div class="tab">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
Add this to the active tab: box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, 0.4);
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
}
.active {
background-color: lightgreen !important;
box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, 0.4);
z-index: 5000;
}
.tab {
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.tab:not(:first-child) {
margin-left: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab active">
Day 1
</div>
<div class="tab">
Day 2
</div>
<div class="tab" style="z-index: -10">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
}
.active {
background-color: lightgreen !important;
-webkit-box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75);
box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75);
z-index: 5000;
}
.tab {
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.tab:not(:first-child) {
margin-left: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab active">
Day 1
</div>
<div class="tab">
Day 2
</div>
<div class="tab" style="z-index: -10">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
It would be nice if you could link some examples of what you are going for, but something you can possibly do is this:
/* background-image: linear-gradient(#134C13, #66AF66, lightgreen); */
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
}
.tab {
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.active {
background-color: lightgreen !important;
border-right: 5px solid black;
border-bottom: 2px solid black;
/* box-shadow: inset 0 20px 20px -20px #000000; */
z-index: 5000;
}
.tab:not(:first-child) {
margin-left: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab active">
Day 1
</div>
<div class="tab">
Day 2
</div>
<div class="tab" style="z-index: -10">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
I am having a problem with absolute positioning in IE 11. All other browsers don't have this issue (tested in Firefox, Chrome, Opera, Safari). I am having relatively positioned element #obrazek (marked as green) which contains relatively positioned element #hrob (marked as red). In all other browsers #hrob is properely positioned to its parent, but in IE 11 it behaves like it's absolutely positioned to the entire body. I can't find the right solution. Any ideas? Thank you.
HTML (simplified / unnecessary content removed):
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My title...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container1">
<div id="container2">
<div id="obrazek">
<img src="obrazky/hrob.svg" alt="Obrázek hrobu" class="obrazek" />
<div id="hrob">
<p class="napis pismo42">Username</p>
<p class="napis pismo24">Text under the name</p>
</div>
<p>text...</p>
</div>
</div>
</div>
</body>
</html>
CSS style.css:
/* CSS Document */
body {
background-image: url('obrazky/pozadi.svg');
background-size: 100% auto;
background-color: #000;
background-repeat: no-repeat;
}
#container1 {
margin: 0px auto;
width: 1020px;
}
#container2 {
background-color: rgba(255, 255, 255, 0.9);
width: 890px;
height: 340px;
border: 15px solid #000;
border-radius: 30px;
padding: 30px;
margin: 20px;
-webkit-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
-moz-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
display: table;
}
#obrazek {
float: left;
position: relative;
width: 340px;
display: table-row;
border: 3px solid green;
}
.obrazek {
width: 340px;
height: 427px;
}
#hrob {
position: absolute;
width: 220px;
height: 300px;
left: 75px;
top: 70px;
text-align: center;
border: 3px solid red;
}
.napis {
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
color: #4a4a4a;
}
.pismo42 {
font-size: 42px;
}
.pismo24 {
font-size: 24px;
}
Just changed table-row to table-cell. Now it looks the same in IE and Chrome:
/* CSS Document */
body {
background-image: url('obrazky/pozadi.svg');
background-size: 100% auto;
background-color: #000;
background-repeat: no-repeat;
}
#container1 {
margin: 0px auto;
width: 1020px;
}
#container2 {
background-color: rgba(255, 255, 255, 0.9);
width: 890px;
height: 340px;
border: 15px solid #000;
border-radius: 30px;
padding: 30px;
margin: 20px;
-webkit-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
-moz-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
display: table;
}
#obrazek {
float: left;
position: relative;
width: 340px;
display: table-cell;
border: 3px solid green;
}
.obrazek {
width: 340px;
height: 427px;
}
#hrob {
position: absolute;
width: 220px;
height: 300px;
left: 75px;
top: 70px;
text-align: center;
border: 3px solid red;
}
.napis {
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
color: #4a4a4a;
}
.pismo42 {
font-size: 42px;
}
.pismo24 {
font-size: 24px;
}
<div id="container1">
<div id="container2">
<div id="obrazek">
<img src="obrazky/hrob.svg" alt="Obrázek hrobu" class="obrazek" />
<div id="hrob">
<p class="napis pismo42">Username</p>
<p class="napis pismo24">Text under the name</p>
</div>
<p>text...</p>
</div>
</div>
</div>
I am trying to get radio button like this..
But I am getting like this
If No option is selected, I need to customize the radio button and it should show white color inside it. If radio button is selected, it should show green color inside the box. How to achieve this?
Here what I tried.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
</style>
</head>
<body>
<div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>
Just add the :before pseudo element to take care of the color before the radio button is checked. You could add this to your CSS:
.regular-radio + label:before {
background: none repeat scroll 0 0 #FDFDFD;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
Working demo. You can ofcourse change the background of this label to match exactly the example you show. Hope it helps.
You can achieve desired layout in two ways
Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE. Demo:
input[type="radio"] {
/* remove standard background appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
.flex {
display: flex;
align-items: center;
}
<div class="flex">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
</div>
Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here. Demo:
*,
*:before,
*:after {
box-sizing: border-box;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label:before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
margin-right: 3px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
label {
display: flex;
align-items: center;
}
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
input[type=radio].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=radio].css-checkbox + label.css-label {
padding-left: 30px;
height: 25px;
display: inline-block;
line-height: 25px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 25px;
vertical-align: middle;
cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -25px;
}
label.css-label {
background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_98809849d4d88f570f5ad4ce6c2be5b1.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
check out this fiddle.
You should format your radio button both uncheck and checked.
You can find your anwser follow block code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
/*----------------hungtq added--------------*/
.regular-radio + label:before {
background: none repeat scroll 0 0 #e9ecee;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
</style>
</head>
<body>
<div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>
Result:
I have used inline styling to put a radiused border around the five images in my index file. How do I apply this style to them by declaring css attributes/values in the external style sheet. Here is a demo of the index file http://jsfiddle.net/23nfM/embedded/result/
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>pedrosdigitalsolutions.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="image/x-icon" href="/custom pds/images/cheat_1.ico" rel="shortcut icon">
<link media="screen" type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<?php include 'header.php' ?>
<div id="content">
<p class="tab"><font size="7"><b>For all things</b></font><br>
<font size="7"><b>Electronic Arduino</b></font><br>
<font size="7"><b>and "other stuff"</b></font><br>
<font size="6"><b>Love ♥ The Duino</b></font>
</p>
<img style="position:absolute; top:515px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Manual Shift Register 300x225.gif">
<img style="position:absolute; top:215px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Manual LCD 300x225.gif">
<img style="position:absolute; top:515px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/LCDBitmap_via_SR.gif">
<img style="position:absolute; top:815px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/8_LED_Array.gif">
<img style="position:absolute; top:815px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Nicks Clock 300x225.gif">
</div>
<?php include 'footer.php' ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>
</body>
</html>
body {
background: #efefef;
border: none;
color: #3F4C6B;
font: normal 13px Verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center; }
#content {
height: 950px;
margin-bottom: 25px;
margin: 0 auto;
padding: 30px 0;
text-align: justify;
width: 950px;
}
.default {
-moz-box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
box-shadow: 0 5px 20px #888;
height: 50px;
width: 100%; }
.fixed {
-moz-box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
left: 0px;
position: fixed;
top: -5px;
width: 100%; }
#footer {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #98B0D9;
background: -webkit-linear-gradient(#98B0D9);
height: 70px;
position: relative;
z-index: 1;
}
h1 { line-height: 15px; }
#header {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(#606C88, #3F4C6B) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(#606C88, #3F4C6B);
border-color: #0F1620 #000000;
border-image: none;
height: 93px;
margin: 0;
width: auto; }
#logo {
border: medium none;
float: left;
margin: 0; }
#menu {
-moz-border-radius: 5px;
background: -webkit-linear-gradient(#c3d9ff, #98b0d9);
background: linear-gradient(#c3d9ff, #98b0d9) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 5px;
line-height: 50px;
margin: 0 135px;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
z-index: 5;
float: center;
}
#navi {
height: 50px;
margin-top: 0; }
ul { padding: 0; }
ul li {
display: inline;
list-style-type: none;
margin-right: 15px; }
ul li a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-property: color, background;
border-radius: 5px;
color: #fff;
padding: 3px 7px;
text-decoration: none;
text-shadow: 1px 1px 1px #000; }
ul li a:hover {
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-property: color, background;
background: #606C88;
color: #ff0; }
Strip out the inline styles, and put something like this in your external style sheet:
#content img {position:absolute; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px}
Some styles specific to each image have been left out. For those, add a class or id to the image and then write styles for that image. E.g. the first image could have a class of .lalala and then you'd do this in your style sheet:
.lalala {top:515px; left:692px;}
There are a lot of ways to do that, but the easiest path for your current code would be to declare the border and some other styles in the stylesheet, and then position the images with inline styles.
So in the stylesheet, add:
#content img {
position:absolute;
width:300px;
height:225px;
border: 1px solid #000000;
border-radius: 8px;
}
Then in the html, remove all of the inline styles on each image except top and left.
I want to add a little triangle to the right to overlap with the beginning of the input field but I haven't been able to. Here's my code:
HTML:
<div id="wrapper">
<form>
<label>First Name</label><input type="text" name="firstname" id="first" placeholder="Jorge" />
<label>Last Name</label><input type="text" name="lastname" id="last" placeholder="González" />
<label>Email</label> <input type="email" name="username" id="un" placeholder="jgon#gmail.com"/>
<label>Password</label> <input type="password" name="password" id="pass" placeholder="********" />
<input type="submit" value="Sign up" id="submit" />
</form>
</div>
CSS:
html{background-color:#000;}
label{
font-weight: bold;
background: -webkit-linear-gradient(#3073BF 0%, #204C7F 100%);
padding: .7em .85em .8em 0em;
display: block;
width: 100px;
float: left;
border-radius: .3em 0px 0px .3em;
margin: 5px 0;
color: #102640;
text-shadow: 0px 1px 1px #fff;/*rgba(0, 0, 0, 0.3);*/
height: 17px;
}
#wrapper{
width: 800px;
margin: 3em auto;
background: white;
padding: 2em 4em;
border-radius: .5em;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
}
form{
width: 330px;
margin: 0 auto;
text-align: right;
}
input{
padding: .5em;
border-radius: 0px 4px 4px 0px;
border: 1px solid #bcbcbc;
margin: .3em 0;
font-size: 1.1em;
}
#submit{
text-align: center;
clear: both;
float: none;
position: relative;
right:10px;
margin: 1em;
padding: 1em 3em;
background: -webkit-linear-gradient(#fff1ba 0%, #ffc400 100%);
border: 1px solid #ffb135;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
font-weight: bolder;
color: #a74f00;
font-size: 1em;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7);
cursor: pointer;
border-radius: .3em;
width:300px;
}
#submit:hover{
background: -webkit-linear-gradient(#ffc400 0%, #fff1ba 100%);
}
and the link to the fiddle: http://jsfiddle.net/Luis_Armando/HeDVy/
To create a triangle you can use following css. Add to your code as required.
.triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px 0 30px 20px;
border-color: transparent transparent transparent #007bff;
}
Change border-width parameters to change size of triangle.