I'm looking to achieve this multiple underline effect and figured out that using box-shadows would be the best way to do it. Specifically, I tried doing this and was successful:
I used the following CSS to do it:
h1{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF, 0 6px 0px #276FBF, 0 8px 0px 0px #FFF, 0 10px 0px #AF5B5B;
float: left;
}
However, I'd like to achieve an effect to turn specific underlines on and off as required. So I came up with this and added the classes to my HTML:
h1{
float: left;
}
.red{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF;
}
.blue{
box-shadow: 0 6px 0px #276FBF, 0 8px 0px 0px #FFF;
}
.brown{
box-shadow: 0 10px 0px #AF5B5B, 0 12px 0px 0px #FFF;
}
But the effect that it produced was this:
I tried adding the classes in different orders and also adding them dynamically using JavaScript, but I am still getting the same result. Am I doing anything wrong, or is there an alternative way to achieve the turn-on turn-off effect?
This could be accomplished with pseudo elements:
h1 {
display:inline-block;
border-bottom:2px solid #e8353b;
position:relative;
}
h1:before {
content:"";
height:2px;
width:100%;
background:#2762be;
display:block;
position:absolute;
bottom:-6px;
}
h1:after {
content:"";
height:2px;
width:100%;
background:#a3514f;
display:block;
position:absolute;
bottom:-10px;
}
<h1>Hello there</h1>
An interesting way using <span>s :)
You can add as many <span> as you want and just extend the colors palette in CSS:
.borders {
display: inline-block;
}
.borders span {
display: block;
height: 2px;
margin: 2px;
}
.borders span:nth-child(1) { background: red; }
.borders span:nth-child(2) { background: blue; }
.borders span:nth-child(3) { background: green; }
/* Add more here */
<h1 class="borders">
Hi there
<span></span>
<span></span>
<span></span>
</h1>
Or if you need only 3 borders and you don't want to insert additional HTML elements:
use a border-bottom for your first class, than :before on your second class and :after on your third class.
h1 {
position: relative;
display: inline-block;
}
.red{
box-shadow: 0 2px 0 red;
}
.blue:after, .green:before{ content: ""; position: absolute; width: 100%; left: 0; }
.blue:after{
bottom: -6px;
border-bottom: 2px solid blue;
}
.green:before{
bottom: -10px;
border-bottom: 2px solid green;
}
<h1 class="red blue green">Hi there</h1>
You can use linear-gradient, which will be fully transparent.
Note, when combine classes as you did, they doesn't merge those values, the last property set on an element will overwrite any previous, whether they are set in classes with different names or not, hence your line becomes all brown.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green),
linear-gradient(to right, transparent,transparent);
}
h1.blue{
background-image:
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can easily re-position the lines and close any gap by simply leave out the line you don't want.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green);
}
h1.blue{
background-image:
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can actually do this with only 1 pseudo-element.
Here's what I've done (with comments on how to control spacings):
h1 {
display: inline-block;
/* controls the last line */
border-bottom: 2px solid #a3514f;
}
h1:after {
content: "";
display: block;
/* controls space between 1st and 2nd line */
height: 2px;
width: 100%;
/* controls space between 2nd and 3rd line */
margin-bottom: 2px;
border-bottom: 2px solid #2762be;
border-top: 2px solid #e8353b;
}
<h1>Hello there</h1>
This was written based on #APAD1's answer, taking his idea of using borders.
This method offers the advantage of the whole ::after being part of the content of the <h1>, instead of being outside.
You can add up to five lines using pseudoelements and borders.
Each class adds a new line.
*,
*:before,
*:after {
box-sizing: border-box;
}
h1 {
display: inline-block;
padding-bottom: 2px;
position: relative;
}
h1:before,
h1:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 6px;
bottom: -10px;
}
h1:after {
bottom: -18px;
}
.one {
border-bottom: 2px solid red;
}
.two:before {
border-top: 2px solid blue;
}
.three:before {
border-bottom: 2px solid green;
}
.four:after {
border-top: 2px solid brown;
}
.five:after {
border-bottom: 2px solid orange;
}
<h1 class="one two three four five">Lorem ipsum</h1>
Just trying to get as many lines as posible, using pseudos, borders, shadows ...
You get up to 9 lines, that can be set / unset with 9 independent classes.
Some of them need will only work against a solid, known background-color (white in this case)
.base {
font-size: 60px;
position: relative;
display: inline-block;
}
.base:before,
.base:after {
content: "";
position: absolute;
left: 0px;
width: 100%;
height: 10px;
padding: 10px 0px;
background-clip: content-box;
}
.base:before {
bottom: -90px;
}
.base:after {
bottom: -170px;
}
.a {
border-bottom: solid 10px lightgreen;
}
.b {
box-shadow: 0px 10px white, 0px 20px green;
}
.c:before {
border-top: solid 10px lightblue;
}
.d:before {
background-color: red;
}
.e:before {
border-bottom: solid 10px yellow;
}
.f:before {
box-shadow: 0px 10px white, 0px 20px green;
}
.g:after {
border-top: solid 10px tomato;
}
.h:after {
background-color: magenta;
}
.i:after {
border-bottom: solid 10px gray;
}
.j:after {
box-shadow: 0px 10px white, 0px 20px brown;
}
<h1 class="base a b c d e f g h i j">Hello world</h1>
I have been messing with Coding during school because it interests me the most out of anything at school, and have been self-teaching myself Html-Css-and Js for most of the school year.
I have been re-creating my school's website, and I have run into some problems.
My CSS "Margin-Right" command has not been working.
I have been trying to center a <Div> area with CSS and the "Style" command using margin left and right, and the right will never work.
I don't want to just use the position: absolute; command because I want some space on the side so you can see the background.
Here is my Html code.
CSS:
.Isaac {
width: 100%;
padding: 4px;
margin-right:100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
HTML:
<div class="Isaac" Style="Background-color: #E6E6E6 ; Margin-Top: 40px">
<!-- div content -->
</div>
Edit: The "100x" thing was just a silly error on my part, I meant to have "100px"
Also, I changed Margin-Right: 100x ; to margin-right:100px; and it still have no difference
I hope you can help me
Change:
Margin-Right: 100x;
to:
margin-right: 100px;
The problem is the width:100% on the .Isaac divs. This causes the divs themselves to be as wide as their parent, the body. Then the margins extend to the right of that, off screen.
Solution: remove the width:100%.
.Isaac {
/*width: 100%;*/
padding: 4px;
Margin-Right: 100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
.myButton {
-moz-box-shadow: inset 0px 5px 0px 0px #000000;
-webkit-box-shadow: inset 0px 5px 0px 0px #000000;
box-shadow: inset 0px 1px 0px 0px #000000;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #000000;
display: inline-block;
cursor: pointer;
color: #000000;
font-family: Arial;
font-size: 13px;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #000000;
}
.myButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-color: #ffffff;
}
.myButton:active {
position: relative;
top: 1px;
}
/* I added this, because the body start tag doesn't appear in the snippet */
body {
background-attachment: fixed; background-repeat: no-repeat; Background-size: 100% 100%; background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/32/Mount_Rainier_from_above_Myrtle_Falls_in_August.JPG)
}
<div class="Isaac" Style="Background-color: #E6E6E6; Margin-Top: 40px"><img src="http://www.conway.k12.wa.us/sites/default/files/logov4.png" style="width:150px;height:50px;">Menu : Family access : Facebook/Social Media<a/> : <a href="#" class="Hello"><br><a href="#" class="MyButton">District Office
School OfficeDepartmentsStaffFamilyTeachersBoard</div>
use text-align center for aligning your contents to center
issue with margin-right was you use : x instead of px
.Isaac {
width: 100%;
padding: 4px;
text-align: center;
margin-right: 100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
Hope this is what you want to achieve
Im building a login system in html with form. Heres The HTML and css.
Would php work?
HTML
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Paper Stack</title>
<link rel="stylesheet" type="text/css" href="loginstyle.css" />
</head>
<body>
<div class="container">
<section id="content">
<form action="">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="username" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" />
</div>
<div>
<input type="submit" value="Log in" />
Lost your password?
Register
</div>
</form><!-- form -->
<div class="button">
Download source file
</div><!-- button -->
</section><!-- content -->
</div><!-- container -->
</body>
</html>
CSS
/* Reset CSS */
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 {
background: #DCDDDF url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
color: #000;
font: 14px Arial;
margin: 0 auto;
padding: 0;
position: relative;
}
h1{ font-size:28px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}
h1,h2,h3,h4,h5,h6{ color:#563D64;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
form:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container { margin: 25px auto; position: relative; width: 900px; }
#content {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
-webkit-box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow: 0 1px 0 #fff inset;
-ms-box-shadow: 0 1px 0 #fff inset;
-o-box-shadow: 0 1px 0 #fff inset;
box-shadow: 0 1px 0 #fff inset;
border: 1px solid #c4c6ca;
margin: 0 auto;
padding: 25px 0 0;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 400px;
}
#content h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
margin: 10px 0 30px;
}
#content h1:before,
#content h1:after {
content: "";
height: 1px;
position: absolute;
top: 10px;
width: 27%;
}
#content h1:after {
background: rgb(126,126,126);
background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
right: 0;
}
#content h1:before {
background: rgb(126,126,126);
background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
left: 0;
}
#content:after,
#content:before {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
border: 1px solid #c4c6ca;
content: "";
display: block;
height: 100%;
left: -1px;
position: absolute;
width: 100%;
}
#content:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
top: 0;
z-index: -1;
}
#content:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
top: 0;
z-index: -2;
}
#content form { margin: 0 20px; position: relative }
#content form input[type="text"],
#content form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
border: 1px solid #c8c8c8;
color: #777;
font: 13px Helvetica, Arial, sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 80%;
}
#content form input[type="text"]:focus,
#content form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #ed1c24 inset;
-moz-box-shadow: 0 0 2px #ed1c24 inset;
-ms-box-shadow: 0 0 2px #ed1c24 inset;
-o-box-shadow: 0 0 2px #ed1c24 inset;
box-shadow: 0 0 2px #ed1c24 inset;
background-color: #fff;
border: 1px solid #ed1c24;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#content form input[type="submit"] {
background: rgb(254,231,154);
background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
border: 1px solid #D69E31;
color: #85592e;
cursor: pointer;
float: left;
font: bold 15px Helvetica, Arial, sans-serif;
height: 35px;
margin: 20px 0 35px 15px;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
width: 120px;
}
#content form input[type="submit"]:hover {
background: rgb(254,193,81);
background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#content form div a {
color: #004a80;
float: right;
font-size: 12px;
margin: 30px 15px 0 0;
text-decoration: underline;
}
.button {
background: rgb(247,249,250);
background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid #CFD5D9;
padding: 15px 0;
}
.button a {
background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
color: #7E7E7E;
font-size: 17px;
padding: 2px 0 2px 40px;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.button a:hover {
background-position: 0 -135px;
color: #00aeef;
}
When the user enter submit i would like it to check a txt file with usernames and passwords. The text file is formatted like this:
username1:password1
username2:password2
username3:password3
I want to grab the first line, split it to "username1" and "password1", and then post to this:
br.form['login'] = 'username1'
br.form['passwd'] = 'password1'
EDIT
I know this php code will write the username and password to a txt file. I just need help doing the opposite.
PHP (Register)
<?php
//If Submit Button Is Clicked Do the Following
if ($_POST['Login']){
$myFile = "log.txt";
$fh = fopen($myFile, 'a') or die("can't open file");
$stringData = $_POST['username'] . ":";
fwrite($fh, $stringData);
$stringData = $_POST['password'] . "\n";
fwrite($fh, $stringData);
fclose($fh);
} ?>
After that, I want it to repeat and move onto username2:password2.
I saw this exact post for python but i would like to do this in html, Php ,Or JavaScrypt any help
PHP would be a good option. First familiarise yourself with the language then look in to the functions related to files e.g. fwrite() and fread().
Edit:
Look in to fgets(). That way you can put the username and password posted from the form and compare it against the file line by line.
You can use PHP.
Also it is never a good idea to store passwords in plain text. You should do some hashing of passwords and then store them. You can use PHP's password hashing API. You can read more about PHP's password hashing API
Also, I am not sure why you are storing password in plain text, you probably can use database (like MySQL) to store the details.
However, if you want only a layer of password protection before the users can access your site then you can use .htaccess and .htpasswd to add a layer of authentication on your site. When you add this, the users will have to enter a password before they can access the site. You can read more about about Authentication using .htaccess file
If you don't need database and don't want to use the .htaccess method and want to use file, then you might want to read on fgets() and fread(). Also, if you are using the file to store passwords, then don't have it accessible from the website (i.e. using some URL in browser). Store the file is some location which cannot be reached by some URL on your site. This will prevent others to download your password file.
Im having trouble with this Javascript popup. It works fine expect for one important thing, when I scroll down the page on my Home Screen if i click the sign in button this pop-up seems to hide up at the top. It does't cater for the scroll.
I have added screenshots to show it what I mean. the first one shows it looking fine, and the other one shows the when I scroll down a little bit and press the button.
It also seems to hide the menu bar at the top.. which is fixed
I have no idea how to fix these things. Any one have an idea?
<script src="js/jquery.avgrund.js"></script>
<script>
$(function() {
$('#show').avgrund({
height: 700,
holderClass: 'custom',
showClose: true,
showCloseText: 'close',
onBlurContainer: '.containerrr',
template: '<section id="conntent">' +
'<form form name="login" action="loginprocess.php" method="post" accept-charset="utf-8">' +
'<img src="images/logopop.png">' +
'<h1></h1>' + '<div>' + '<input type="text" name="email" placeholder="example#example.com" required id="username" />' + '</div>' + '<div>' + '<input type="password" name="password" placeholder="Password" required id="password" />' + '</div>' + '<div>' + '<input type="submit" id="submit" name="submit" value="Log In">' + '</div>' + '</form>' + '</section>'
});
});
</script>
My CSS
.containerrr {
position: fixed;
width: 900px;
opacity: 0.95;
filter: alpha(opacity=95);
margin-bottom: 12%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
#conntent {
background-color: rgba(250,250,250,1.0);
padding: 25px 0 0;
position: fixed;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 350px;
margin-bottom: 0;
margin-left: 3%;
margin-right: 0;
margin-top: 1px;
}
#conntent h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
margin: 10px 0 30px;
}
#conntent h1:before,
#conntent h1:after {
content: "";
height: 1px;
position: absolute;
top: 10px;
width: 27%;
}
#conntent h1:after {
background: rgb(126,126,126);
background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
right: 0;
}
#conntent h1:before {
background: rgb(126,126,126);
background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
left: 0;
}
#conntent form { margin: 0 20px; position: relative }
#conntent form input[type="text"],
#conntent form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
border: 1px solid #c8c8c8;
color: #777;
font-family:'Source Sans Pro', sans-serif;
font-size:15px;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 80%;
}
#conntent form input[type="text"]:focus,
#conntent form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #00bbe0 inset;
-moz-box-shadow: 0 0 2px #00bbe0 inset;
-ms-box-shadow: 0 0 2px #00bbe0 inset;
-o-box-shadow: 0 0 2px #00bbe0 inset;
box-shadow: 0 0 2px #00bbe0 inset;
background-color: #fff;
border: 1px solid #00bbe0;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#conntent form input[type="submit"] {
border: 1px solid #00a2e2;
background: -webkit-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a2e2 0%,#00a2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
color: #fff;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height: 35px;
position: fixed;
width: 120px;
margin-bottom: 35px;
margin-left: 15px;
margin-top: 25px;
margin-right: 0px;
}
#conntent form input[type="submit"]:hover {
cursor:pointer;
border-color:rgba(71, 186, 255, 1);
background: rgba(71, 186, 255, 1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#conntent form div a {
color: #004a80;
float: right;
font-size: 12px;
text-decoration: underline;
margin-bottom: 0;
margin-left: 0;
margin-right: 15px;
margin-top: 25px;
}
Use position: fixed both in the header of the page and the container of the popup. Then you'll be able to scroll everything else and those elements will remain fixed respect to the browser window.