Search box CSS problems - css

I'm newbie. And I try to make a search box. When I open it on Firefox. It's okay for me. Then I do it in IE, Chrome and Safari. It's not cool actually. Anyone know my problems, please help me fix it?
I want make a search box like this: http://www.behance.net/gallery/Anthracite-EIKON/7171451
<div id="search-box">
<input type="text" name="search" placeholder="Search..."/>
</div>
And CSS:
*{ margin: 0; padding: 0; }
#search-box{
background: -moz-linear-gradient(top right, #353535, #010101);
background: -webkit-linear-gradient(top right, #353535, #010101);
background: -ms-linear-gradient(top right, #353535, #010101);
background: -o-linear-gradient(top right, #353535, #010101);
background: linear-gradient(top right, #353535, #010101);
padding: 30px 0;
position: relative;
}
input {
font-family: Cambria, 'Helvetica Neue',​Helvetica,​Arial,​sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
color: #bebebe;
font-weight: 400;
line-height: 56px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) ;
border-radius: 13px;
border: 1px solid #000000;
background-clip: border-box;
padding: 5px 4px 3px 24px;
width: 94px;
height: 27px;
box-shadow: 0 0 9px #121212 inset;
position: absolute;
right: 25px;
top: 15;
background-color: #444444 ;
background-image: url('images/search_icon.png');
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: 9px 8px;
}
input:hover {
box-shadow: none;
}
input:focus {
width: 200px;
box-shadow: none;
text-shadow: none;
color: #4D4E52;
background-color: white ;
background-image: url('images/search_icon5.png');
background-repeat: no-repeat;
background-position: 9px 8px;
}

In your css for input you need to change top:15 to top:15px and change line-height to 24px;
Example: http://jsfiddle.net/justincook/sMG3R/

Related

Creating a button with pure css

I'm trying to create a button like this:
This needs to be done in pure css.
I tried to do, nothing happened, it does not work correctly:
display: inline-block;
width: 165px;
text-align: center;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400,rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;
How can I do that?!
You can add the CSS properties inside a class. Then add the class to an HTML element with text-decoration: none; property as follows:
.pure_css_button {
display: inline-block;
width: 165px;
text-align: center;
color: #fff;
text-decoration: none;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;
}
<a href="#" class="pure_css_button">
Button</a>
button {
cursor: pointer;
font-size: x-large;
padding: 0.6rem 2rem;
font-weight: bold;
overflow: hidden;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border:0;
border-radius: .3rem;
position: relative;
border-top: 2px solid hsl(24, 49%, 15%);
border-bottom: 2px solid hsl(24, 49%, 15%);
}
button::after,button::before{
content: '';
height: 100%;
width: .15rem;
position: absolute;
top:0;
background:linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) ;
}
button::before{
left: 0;
}
button::after{
right: 0;
}
<button>
Pure Css</button>
it's possible using body::after content "text" and style it

Adding code to specific part of my WordPress opt-in form

Hi even though I have some experience with C# I have very little experience with any languages related to web development hence my question is probably going to seem very noobish.
I'm wanting to add an animated progress bar on my WordPress site for an opt-in form and I can't find any suitable plugins but I came across this CSS tutorial:
https://css-tricks.com/css3-progress-bars/
And downloaded its code example:
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
*
{ margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#page-wrap { width: 490px; margin: 80px auto; }
body { background: #333; text-align: center; color: #eee; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
h1 { font-size: 42px; font-weight: 600; margin: 0 0 30px 0; }
pre {
background: black;
text-align: left;
padding: 20px;
margin: 0 auto 30px auto;
}
Anyway my question is how can I add that code to a very specific place on my opt-in form if someone explains how I can add it on a specific part of a page hopefully I can figure it out from there.
I don't know what this code is classed as, as I know where to add CSS code for a page but now what this code does or where to put it exactly hopefully that all made sense.
You can add this to your HTML but you need to write a logic for increasing the width which is the progress bars percentage. You can write javascript for it.
<div class="meter">
<span style="width: 55%"></span>
</div>
<style> /* adding css here */
.meter {
height: 20px; /* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
</style>

Center text in button which has before selector with image background

I'm trying to center text in my button. I tried text-center: center; but it didn't help.
<button id="test" class="btn1" style="margin-left:8px;">Button 1</button>
css:
.btn1 {
display: inline-block;
border: 1px solid #ccc;
text-decoration: none;
word-wrap: normal;
vertical-align: middle;
text-center: center;
cursor: pointer;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
padding: 0 6px 0 5.5px;
height: 24px;
color: #6D6D6D;
background-color: #fafafa;
font-size: 11px;
font-family: "Roboto";
font-weight: 500;
}
.btn1:before {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsSAAALEgHS3X78AAAAq0lEQVRYhe3ZOw7CQBCDYXuziRBISOH+FbfiAogKKlLsJhkKHhWNq2zhTz7Ar2mHl+t5ONxjzUBge2Say/OUh/1jd7zF2jeTVRHMEV2sfTvXAhDRvWt+a0EAkbaO+M9ZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZigzwuxZ8YjK5MFUAbbyiyFTJJZdpBKOdxx3TXKbxBb7NLc+2MdrpAAAAAElFTkSuQmCC') no-repeat left center transparent;
background-size: 100% 100%;
width: 14px;
height: 14px;
content: '';
display: inline-block;
vertical-align: middle;
margin-bottom: 1px;
margin-left: 3px;
margin-right: 8px;
}
.btn1:hover {
background: black;
background-image: -webkit-linear-gradient(top, #f7f9fa, #eff5f7);
background-image: -ms-linear-gradient(top, #f7f9fa, #eff5f7);
background-image: -o-linear-gradient(top, #f7f9fa, #eff5f7);
background-image: linear-gradient(to bottom, #f7f9fa, #eff5f7);
}
It needs moving text down by 1 px
https://jsfiddle.net/8dz1tfw7/1/
Will advised to use flex for that button
.test.btn1 {
display: flex;
align-items: center;
}
see below
.btn1 {
/**display: inline-block;**/
display: flex;
align-items: center;
border: 1px solid #ccc;
text-decoration: none;
word-wrap: normal;
vertical-align: middle;
text-center: center;
cursor: pointer;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
padding: 0 6px 0 5.5px;
height: 24px;
color: #6D6D6D;
background-color: #fafafa;
font-size: 11px;
font-family: "Roboto";
font-weight: 500;
}
.btn1:before {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsSAAALEgHS3X78AAAAq0lEQVRYhe3ZOw7CQBCDYXuziRBISOH+FbfiAogKKlLsJhkKHhWNq2zhTz7Ar2mHl+t5ONxjzUBge2Say/OUh/1jd7zF2jeTVRHMEV2sfTvXAhDRvWt+a0EAkbaO+M9ZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZigzwuxZ8YjK5MFUAbbyiyFTJJZdpBKOdxx3TXKbxBb7NLc+2MdrpAAAAAElFTkSuQmCC') no-repeat left center transparent;
background-size: 100% 100%;
width: 14px;
height: 14px;
content: '';
display: inline-block;
vertical-align: middle;
margin-bottom: 1px;
margin-left: 3px;
margin-right: 8px;
}
.btn1:hover {
background: black;
background-image: -webkit-linear-gradient(top, #f7f9fa, #eff5f7);
background-image: -ms-linear-gradient(top, #f7f9fa, #eff5f7);
background-image: -o-linear-gradient(top, #f7f9fa, #eff5f7);
background-image: linear-gradient(to bottom, #f7f9fa, #eff5f7);
}
<button id="test" class="btn1" style="margin-left:8px;"><span>Button 1</span></button>
Try adding
vertical-align: center;
Instead of
vertical-align: middle;

HTML5 / CSS input field with image as submit-button inside the input field

I tried to get an input field with an submit-button inside it. Instead of using the "normal" submit button, I tried to insert a small icon into the input-field, but without any success. I wasn't able to get the image (dimensions 30*30 pixels) inside my input-field.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 2px 2px 2px 10px;
}
input[type=submit] {
position: absolute
width: 30px;
height: 30px;
top: 0px;
right: 0px;
/* background-color: #4d7fc3; */
border: none;
color: white;
background-image: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG');
display: block;
background-position: 100px 100px 100px 100px; */
/* background-repeat: no-repeat; */
/* padding: 2px 2px 2px 30px; */
z-index: -1;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<div id="Search">
<input type="text" name="search" placeholder="Search..">
<input type="submit" value="">
</div>
</form>
</body>
</html>
It should look like this:
There were quite a few errors in the code you pasted up above which weren't doing you any favors.
You left out a ; after the position: absolute; property in your submit input. In order to then have that element positioned properly, you need the parent container to be position: relative;. In this case, the parent container was #Search.
Once that was taken care of there was quite a few properties that could be removed due to being unnecessary. See if my code below helps...
#Search {
position: relative;
display: inline-block;
}
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
/* 40px padding to account for submit */
padding: 2px 40px 2px 10px;
}
input[type=submit] {
position:absolute;
width: 30px;
height: 100%;
top: 0px;
right: 0px;
border: none;
color: white;
background: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG') #4d7fc3 center center no-repeat;
display: block;
cursor: pointer;
}
Working codepen here.
Just a heads up that your background image for the submit is referencing a local file on your machine, so no one else can actually see it other than you. Be sure to assign it the correct path in relation from the index.html file.
Hope this helps.
Here it is done with HTML and CSS.
/*Clearing Floats*/
.cf:before, .cf:after{
content: "";
display: table;
}
.cf:after{
clear: both;
}
.cf{
zoom: 1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0, 0, 0, .2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* Left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* Remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
<form class="form-wrapper cf">
<input type="text" placeholder="Search..." required>
<button type="submit">Search</button>
</form>
tried both variants, both variants will work, second solution comes clothest

Div overlap another div

I have an issue I really can't figure out.
My login div overlapping my menu when my screen solution is smaller than XX. (found out when i changed from 21" to 15".)
I godt an menu witch seems to stay where it's placed, but the login box under is overlapping.
I got my css here:
/*******************
FONTS
*******************/
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
/*******************
SELECTION STYLING
*******************/
::selection {
color: #fff;
background: #f676b2; /* Safari */
}
::-moz-selection {
color: #fff;
background: #f676b2; /* Firefox */
}
/*******************
BODY STYLING
*******************/
* {
margin: 0;
padding: 0;
border: 0;
}
/*******************
TOPBAR
*******************/
#topbar {
list-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 13px;
text-shadow: 0 -1px 3px #202020;
width: 100%;
height: 30px;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
/*-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;*/
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
}
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
/* Center wrapper perfectly */
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -200px;
}
/*
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
background: url(../img/gradient.png) no-repeat;
}
*/
.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
/* Fallback */
background-image: url(../img/gradient.png);
background-repeat: no-repeat;
/* CSS3 Gradient */
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}
/*******************
MENU
*******************/
#menu {
margin: 40px 0;
list-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 13px;
text-shadow: 0 -1px 3px #202020;
width: 980px;
height: 34px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
}
#menu li {
display: block;
float: left;
border-right: 1px solid #5d5d5d;
border-left: 1px solid #929292;
width: 105px;
height: 34px;
border-bottom: 1px solid #575757;
border-top: 1px solid #797979;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
#menu li:not(:last-child):hover {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
background-color:#383838;
-moz-box-shadow: inset 0 0 5px 5px #535353;
-webkit-box-shadow: inset 0 0 5px 5px #535353;
box-shadow: inset 0 0 5px 5px #535353;
}
#menu li:not(:last-child):active {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
background-color:#383838;
-moz-box-shadow: inset 0 1px 2px 2px #000;
-webkit-box-shadow: inset 0 1px 2px 2px #000;
box-shadow: inset 0 1px 2px 2px #000;
}
#menu li a {
color: white;
text-decoration: none;
text-align: center;
display: block;
line-height: 34px;
outline: none;
}
#menu form input {
width: 76px;
height: 20px;
margin-left: 9px;
margin-top: 8px;
border: none;
padding-left: 20px;
padding-right: 10px;
color: #eee;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-image: url("../img/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
background-image: url("../img/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
background-repeat: no-repeat;
background-color: #6E6E6E;
-moz-box-shadow: inset 0 2px 1px 1px #363636;
-webkit-box-shadow: inset 0 2px 1px 1px #363636;
box-shadow: inset 0 2px 1px 1px #363636;
}
#menu li:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
border-left: none;
}
#menu li:first-child a img {
vertical-align: middle;
margin-top: -2px;
}
#menu li:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
border-right: none;
width: 124px;
}
#-webkit-keyframes showMenu {
from { opacity: 0; top: -20px; }
to { opacity: 1; }
}
#menu {
-webkit-animation: showMenu 1s;
position: relative;
}
/*******************
LOGIN FORM
*******************/
.login-form {
width: 300px;
margin: 0px auto;
position: absolute;
z-index:5;
background: #f3f3f3;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/*******************
HEADER
*******************/
.login-form .header {
padding: 40px 30px 30px 30px;
}
.login-form .header h1 {
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 28px;
line-height:34px;
color: #414848;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
margin-bottom: 10px;
}
.login-form .header span {
font-size: 11px;
line-height: 16px;
color: #678889;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}
/*******************
CONTENT
*******************/
.login-form .content1 {
padding: 0 30px 25px 30px;
}
/* Input field */
.login-form .content1 .input {
width: 188px;
padding: 15px 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
/* Second input field */
.login-form .content1 .password, .login-form .content .pass-icon {
margin-top: 25px;
}
.login-form .content1 .input:hover {
background: #dfe9ec;
color: #414848;
}
.login-form .content1 .input:focus {
background: #dfe9ec;
color: #414848;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.user-icon, .pass-icon {
width: 46px;
height: 47px;
display: block;
position: absolute;
left: 0px;
padding-right: 2px;
z-index: 3;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.user-icon {
top:147px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
background: rgba(65,72,72,0.75) url(../img/user-icon.png) no-repeat center;
}
.pass-icon {
top:221px;
background: rgba(65,72,72,0.75) url(../img/pass-icon.png) no-repeat center;
}
/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
}
/*******************
FOOTER
*******************/
.login-form .footer {
padding: 25px 30px 40px 30px;
overflow: auto;
background: #d4dedf;
border-top: 1px solid #fff;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}
/* Login button */
.login-form .footer .button {
float:left;
padding: 11px 25px;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}
.login-form .footer .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.login-form .footer .button:focus {
position: relative;
bottom: -1px;
background: #56c2e1;
box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
/* Register button
.login-form .footer .register {
display: block;
float: right;
padding: 10px;
margin-right: 20px;
background: none;
border: none;
cursor: pointer;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #414848;
text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}
.login-form .footer .register:hover {
color: #3f9db8;
}
.login-form .footer .register:focus {
position: relative;
bottom: -1px;
}*/
I'm not a genius in CSS, so im glad to see people helps in here, and so damn fast generally!
Thank you! :-)
edit #wrapper1 like this:
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-align: left;
text-decoration: none;
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 145px; /* or more */
margin-left: -150px;
}
and your gradient like this:
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 145px; /* as the top of wrapper */
margin-left: -300px;
margin-top: 0px;
background-image: url(../img/gradient.png);
background-repeat: no-repeat;
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}
jsFiddle
Update:
as the #Atul you can use position:relative for #wrapper1 too. look at this code:
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-align: left;
text-decoration: none;
width: 300px;
height: 400px;
position: relative;
left: 50%;
margin-left: -150px;
}
jsFiddle
Since you position your inlogbox absolute it will overlap the menu at some point. (When the window size is smaller than the height of the menu and inlogbox together).
The only thing you can do is position your inlogbox static.
Therefor, change:
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
/* Center wrapper perfectly */
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -200px;
}
To:
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
width: 300px;
height: 400px;
margin: 0 auto;
}
The inlogbox will then be under the menu . If you want extra space between the menu and inlogbox, simply add a margin-top to the inlogbox.

Resources