Skip to content

Instantly share code, notes, and snippets.

@qmmr

qmmr/callouts.css

Created December 1, 2012 19:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save qmmr/4184319 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save qmmr/4184319 to your computer and use it in GitHub Desktop.
Download ZIP
Boilerplate code for form example
Raw
callouts.css
::-webkit-validation-bubble-message{
background-color: #434343;
padding: 20px;
color: whitesmoke;
text-shadow: -2px -2px 2px rgba(0,0,0,0.4);
font-size: 34px;
font-family: "Lobster";
border: none;
border: 3px solid rgba(255,255,255,0.8);
top: 49px;
left: 0px;
width: 480px;
margin: 0;
text-align: center;
text-indent:-10px;
display: table;
padding: 12px 20px;
box-shadow: 0px 0px 0px red;
background-image: url("wood_pole_texture2.png");
background-size: cover;
}
::-webkit-validation-bubble-message > div > div + *{
color: lightgrey;
font-size: 16px;
line-height: 32px;
font-family: sans-serif;
text-shadow: -2px -2px 6px rgba(0,0,0,0.5);
}
::-webkit-validation-bubble-icon{
background-color: transparent;
padding: 0px;
text-indent: 0px;
display: inline-block;
position: relative;
background-image: none;
background-repeat: none;
background-size: 100%;
float:left;
}
::-webkit-validation-bubble-arrow{
background-color: transparent;
border: none;
position: absolute;
}
::-webkit-validation-bubble-arrow:before{
position: absolute;
-webkit-transform: rotate(-55deg);
top: -38px;
left: -8px;
content: "";
width: 130px;
height: 130px;
background: url("new_arrow.png") no-repeat 0 0 transparent;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sample page</title>
<link rel="stylesheet" type="text/css" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="page.css">
<link rel="stylesheet" type="text/css" href="inputs.css">
<link rel="stylesheet" type="text/css" href="callouts.css">
</head>
<body>
<section id="wrapper">
<header>
<h1>Sign up for a free account</h1>
<h2>It is free! No credit card required</h2>
</header>
<form>
<fieldset>
<legend>Sample form</legend>
<label for="username">
<span>Choose a username</span>
<input required id="username">
</label>
<label for="email_address">
<span>Enter your email address</span>
<input required type="email" id="email_address">
</label>
<label for="password">
<span>Choose a password</span>
<input required type="password" id="password" pattern="\S{6}" title="Please use only 6 digits!">
</label>
<input type="submit" id="submit">
</fieldset>
</form>
<footer>
@copy 2013
</footer>
</section>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</html>
Raw
inputs.css
form{
width: 50%;
margin: 2% auto;
}
fieldset{
background-color: rgba(247, 236, 236, 1);
margin-bottom: 24px;
padding: 12px 20px;
border-radius: 8px;
border: 1px solid silver;
box-shadow: 0px 0px 48px rgba(148, 150, 147, 0.27);
}
legend {
font-size: 24px;
font-family: lobster;
text-transform: capitalize;
background-color: rgba(247, 236, 236, 1);
border-radius: 8px;
margin-bottom: 8px;
border: 1px solid transparent;
padding: 4px 12px;
color: rgba(0, 0, 0, 0.46);
text-shadow: 1px -2px 2px rgba(242, 242, 243, 0.64);
}
label{
display: block;
margin-bottom: 24px;
}
label > span{
display: inline-block;
margin-bottom: 4px;
color: rgba(63,63,56,1);
}
input{
display: block;
border: 1px solid rgba(0,0,0,0.3);
box-shadow: -1px -2px 3px rgba(0,0,0,0.2);
padding: 8px;
padding-right: 45px;
text-align: center;
color: rgba(101,100,90,1);
}
input:required{
background: url("mandatory.png") no-repeat 96% center white;
outline: 2px solid transparent;
}
input:valid{
background: url("valid.png") no-repeat 96% center white;
outline: 2px solid rgba(76, 168, 76, 0.89);
}
input:invalid:focus{
background: url("invalid.png") no-repeat 96% center white;
outline: 2px solid rgba(200, 76, 76, 0.89);
}
input[type="submit"]:valid{
outline-color: transparent;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
border-radius: 3px;
background-image: none;
padding-right: 8px;
}
input[type="submit"]:valid:hover,
input[type="submit"]:valid:focus{
cursor: pointer;
box-shadow: none;
}
Raw
page.css
body{
background-color: rgba(169, 190, 192, 0.53);
font-size: 16px;
}
#wrapper{
width: 90%;
margin: 1% auto;
}
header{
background: url("wood_pole_texture2.png") no-repeat 0 0 #434343;
color: white;
}
h1, h2{
margin: 0;
padding: 12px 20px;
}
h1{
padding-bottom: 0;
font-size: 36px;
}
h2{
padding-top: 0;
font-size: 18px;
padding-left: 23px;
color: rgb(205, 228, 225);
}
footer{
background: url("wood_pole_texture2.png") no-repeat 0 0 #434343;
color: white;
padding: 12px 20px;
}
Raw
styles.css
body {
background-color: #DAC8A5;
}
label {
display: block;
margin-bottom: 24px;
}
input {
border: 1px solid rgba(0,0,0,0.3);
box-shadow: -1px -2px 3px rgba(0,0,0,0.2);
padding: 8px;
padding-right: 45px;
}
input:required {
background: url("mandatory.png") no-repeat 96% center white;
outline: 2px solid transparent;
}
input:valid {
background: url("valid.png") no-repeat 96% center white;
outline: 2px solid green;
}
input:invalid:focus {
background: url("invalid.png") no-repeat 96% center white;
outline: 2px solid red;
}
input[type="submit"]:valid {
outline-color: transparent;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
border-radius: 2px;
background-image: none;
padding-right: 8px;
}
input[type="submit"]:valid:hover,
input[type="submit"]:valid:focus {
cursor: pointer;
box-shadow: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment