Skip to content

Instantly share code, notes, and snippets.

@melihbuyuk

melihbuyuk/dabblet.css

Created May 4, 2012 16:13
Show Gist options
  • Save melihbuyuk/2595828 to your computer and use it in GitHub Desktop.
Save melihbuyuk/2595828 to your computer and use it in GitHub Desktop.
Download ZIP
A "deeper" indented text effect with the :before and :after pseudo-elements.
Raw
dabblet.css
/**
* A "deeper" indented text effect with the :before and :after pseudo-elements.
*/
html, body {
height: 100%;
}
body {
margin: 0;
background: #fff;
overflow: hidden;
}
Raw
dabblet.html
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<div class="row">
<div class="span5 ">
<div class="well">
<form class="">
<fieldset>
<div class="control-group">
<div class="controls docs-input-sizes">
<label>Pickup Location</label>
<select class="reservationselect" name="pickup_id">
<option value="1">West Los Angeles</option>
<option value="2">Santa Monica</option>
<option value="3">Lax/Inglewood</option>
</select>
<label>Drop-off Location</label>
<select class="reservationselect" name="dropoff_id">
<option value="1">West Los Angeles</option>
<option value="2">Santa Monica</option>
<option value="3">Lax/Inglewood</option>
</select>
<label>Pick-up date</label>
<select name="from_time" class="reservationdates">
<option value="07:00 am">07:00 AM</option>
<option value="07:30 am">07:30 AM</option>
<option value="08:00 am">08:00 AM</option>
<option value="08:30 am">08:30 AM</option>
<option value="09:00 am">09:00 AM</option>
<option value="09:30 am">09:30 AM</option>
<option value="10:00 am">10:00 AM</option>
<option value="10:30 am">10:30 AM</option>
<option value="11:00 am">11:000 AM</option>
<option value="11:30 am">11:30 AM</option>
<option value="12:00 pm">12:00 PM</option>
<option value="12:30 pm">12:30 PM</option>
<option value="01:00 pm">01:00 PM</option>
<option value="01:30 pm">01:30 PM</option>
<option value="02:00 pm">02:00 PM</option>
<option value="02:30 pm">02:30 PM</option>
<option value="03:00 pm">03:00 PM</option>
<option value="03:30 pm">03:30 PM</option>
<option value="04:00 pm">04:00 PM</option>
<option value="04:30 pm">04:30 PM</option>
<option value="05:00 pm">05:00 PM</option>
<option value="05:30 pm">05:30 PM</option>
<option value="06:00 pm">06:00 PM</option>
<option value="06:30 pm">06:30 PM</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Alternate sizes</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
</div>
<p class="help-block">Here's some help text</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="appendedInput">Appended text</label>
<div class="controls">
<div class="input-append">
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
</div>
<span class="help-inline">Here's more help text</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="appendedPrependedInput">Append and prepend</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="appendedInputButton">Append with button</label>
<div class="controls">
<div class="input-append">
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="appendedInputButtons">Two-button append</label>
<div class="controls">
<div class="input-append">
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
<div class="controls">
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckboxList">Checkboxes</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="optionsCheckboxList1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
<label class="checkbox">
<input type="checkbox" name="optionsCheckboxList2" value="option2">
Option two can also be checked and included in form results
</label>
<label class="checkbox">
<input type="checkbox" name="optionsCheckboxList3" value="option3">
Option three can—yes, you guessed it—also be checked and included in form results
</label>
<p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
</div>
</div>
<div class="control-group">
<label class="control-label">Radio buttons</label>
<div class="controls">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can is something else and selecting it will deselect option one
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment