I have a form as in the below code ? how can i make it fit to the center of the screen and convert it to be responsive ?
HTML5 Code
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS3 Search Form</title>
<link href="css/cbdb-search-form.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css">
body {
background: #999;
}
</style>
</head>
<body>
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" />
</form>
</body>
</html>
CSS Code
/************************************
CSS 3 SEARCH BY ZEAOS
************************************/
#search-form {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;
/* Gradients */
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
/* Shadows */
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}
/*** TEXT BOX ***/
input[type="email"]{
background: #fafafa; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 5px;
width: 250px;
/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
/* Shadows */
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}
/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
outline: none;
background: #fff; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}
/*** SEARCH BUTTON ***/
input[type="submit"]{
background: #44921f;/* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 84px;
outline: none;
/* Rounded Corners */
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
/* Shadows */
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
background: #4ea923; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
background: #4ea923; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)),
color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
EDIT 1
This is a mobile web application . Users consists of both smart phones and oldest devices.
First at all
Remove HTML DOCTYPE or change it to <!DOCTYPE html>. HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
To center Content
Wrap your form in a DIV
<body>
<div class="modal">
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" />
</form>
</div>
</body>
Then Apply this CSS to center on screen.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#search-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
To be Responsive Use CSS Media Query
Media Queries let you apply styles depending on conditions (screen size, screen type, etc) on the screen where you will see the page.
This is only a simple example. I recommend you read about CSS Media Queries.
In this case you set minimum width and height
#media ( max-width :320px) {
.modal {
min-width: 200px;
min-height: 120px;
}
}
#media ( min-width :321px) {
.modal {
min-width: 300px;
min-height: 220px;
}
}
#media ( min-width :640px) {
.modal {
min-width: 480px;
min-height: 320px;
}
}
#media ( min-width :1200px) {
.modal {
min-width: 700px;
min-height: 400px;
}
}
In the other Hand
Have you thought about using bootstrap?
Enjoy!
First of all for making a responsive form or anything like that always give width in %age followed by giving media queries. You can use bootstrap for making your page even better. you can get bootstrap from getbootstrap.com/. The usage and implementation techniques are mentioned there
To center add position:relative to the body
Then you add these rules to the #form to your css:
#search-form{
margin:auto;
position:absolute;
z-index: 30;
top:0;
bottom:0;
left:0;
right:0;
width: 300px; /*variable*/
height: 300px; /*variable*/
}
To center, add
width: 365px;
height:38px;
position:absolute;
top:50%;
margin-top:-19px;
left:50%;
margin-left:-182px;
in #search-form
for responsive, this could be a starting point:
#media all and (max-width:480px) {
#search-form {
width:100%;
margin-left:-50%;
}
input[type="email"]{
width:70%;
}
input[type="submit"]{
width:20%;
}
}
I have been trying to apply glow with CSS box-shadow property (tried inset) on hover. So far, I have been able to do this with inset - http://jsfiddle.net/bgGS6 (hover over list item to see the effect).
Test code:
HTML:
<ul>
<li>
home
</li>
</ul>
CSS:
ul {
list-style:none;
}
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
I'm trying to achieve something like this:
I'm wondering if it will be possible to increase glow toward the center and fade it out towards the edges. I assume ultimate solution will be to add a png on hover, but want to find out if this can be achieved with CSS alone.
Update: Added radial gradient to top and it is pretty close to what I need - http://jsfiddle.net/bgGS6/5 Will add rules for cross-browser compatibility as well.
It flickers because of transition, not sure how to fix that. Any suggestions?
You can simply chain your shadows, thus:
box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3;
Demo Fiddle
What this does is add an initial inset box shadow with the same colour as the background (in this case just white) to make it look like the element is faded at the edges, before applying your highlighing box shadow- with larger pixel distances defined.
just as a note, you should structure your html like this:
<ul>
<li>
<a>Home</a>
</li>
</ul>
The following is css to create a blue effect, and you can probably customize it to your liking but you can get the basic gist of it:
ul li a{
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}
As a further note, please check out some tutorials on CSS3. There are plenty out there that could help you get a more broad idea of the tools you have to play with to achieve what you need. A good place to start would be Codeacademy.com They have a pretty good tutorial on CSS3
You could add a :before pseudo-element which has a box-shadow;
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
position: relative;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
li:hover:before {
position: absolute;
width: 10px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
content:' ';
left: 30px;
top: 1px;
box-shadow: 0 3px 7px 5px rgba(255, 255, 255, 0.4);
}
See this fiddle
I am facing a problem with edges in a css list (<ul>,<li>). The problem that when I set the left edge with a color and a different thickness, the lower edge of overlapping ends as shown in the screenshot below:
In the picture there to see the right, so here I leave the fiddle to anyone who can give me help in this situation.
http://jsfiddle.net/Igaojsfiddle/T6KrE/31/
#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-bottom:1px solid #999999;
**border-left:10px solid green;**
border-right:1px solid #999999;
height:55px;
}
it is normal, borders reaches each other to the corners.
you may draw your line with box-shadow:
http://jsfiddle.net/T6KrE/32/
#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 3px -2px gray;;
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-left:10px solid green;
border-right:1px solid #999999;
height:55px;
}
I am following this tutorial to create CSS 3 button with Icon. But the problem in this tutorial Icon height depends on font-size. If I increase font-size of text, icon fits well but if I try to reduce the font-size, it doesn't fit well.Image I am using is 40x30
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 15px;
font-weight: bold;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
display: block;
background: url(../img/gmail2.png) no-repeat;
}
Your statement is a little ambiguous and lacks a question, but I'll take a stab.
In this scenario, font-size will always play a small factor, as it will determine the height of the icon. At some point you are going to need to know some details about the button size, but it doesn't have to be affected by font. If you set the button height and the img{ height:100%; } the image will scale to fit the area.
<div id="container">
<h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>
combined with
#container{
border: 2px solid black;
width: 200px;
height: 20px;
}
#container img{
height:100%;
}
Should get you something you close to what you're looking for. I've whipped up a small jsfiddle to demonstrate one way to accomplish this.
It would be helpful if you could share your code.
In the css3 buttons examples of the link you provided, if I decrease font-size and set the following CSS style, works.
span { display: block; }
span is the tag that wraps the text inside the buttons.
I am using CSS3 pie and am calling it by attached js files just before the head tag.
For some reason my background image inst appearing. I have tried the standard adding z-index and position relative fixes but it doesn't show. Any help guidance appreciated.
Below is the css.
.linkButton {
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #dc5c00;
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-gradient(linear, 0% 0% 0% 100% from(#e36000), to(#c85400));
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -moz-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -ms-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -o-linear-gradient(top, #e36000, #c85400);
-pie-background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #000;
padding: 10px 10px 10px 11px;
display: inline-block;
color: #ffffff;
font-weight: bold;
box-shadow: inset 0 1px 0 0 #ff801e, 0 0 1px 1px #ffffff, 0 0 1px 1px #ffffff;
border: 1px solid #c85400;
text-shadow: #813700 2px 2px 1px;
line-height: 12px;
margin-bottom: 7px;
width: 326px;
display: block!important;
position:relative;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;`enter code here`
z-index:1;
}
First of all you don't need -pie-background for plain old image + background color.
If you do want to use -pie remember that paths are relative to html not css.
(I assume that you've set up mime-type etc and pie works for you in different cases.)
.linkButton{
behavior: url(PIE.htc);
}
Also, try adding a .index file with the following content in the same location as the PIE.htc file:
more info http://css3pie.com/
http://css3pie.com/documentation/
Try linking it without dots and slash like this:
-pie-background: url('Images/linkButtonBg.png') 100% 9px no-repeat #000;