CSS Is Easy » Tutorials http://cssiseasy.com Let me show you how! Wed, 05 Aug 2009 22:51:02 +0000 http://wordpress.org/?v=2.8 en hourly 1 Tutorial #3: Hot Dates With CSS http://cssiseasy.com/2009/08/04/tutorial-3-hot-dates-with-css/ http://cssiseasy.com/2009/08/04/tutorial-3-hot-dates-with-css/#comments Tue, 04 Aug 2009 20:12:04 +0000 Montoya http://cssiseasy.com/?p=42 I’m back from a long hiatus, and I present to you a classic tutorial from my blog, which I posted in 2006. Now you can watch my process in video form and see some new techniques not in the original tutorial. This is the first part; the second part will incorporate background images for more effects.

Remember to view in HD to get the proper quality.

Here is the HTML used in this tutorial:

<acronym class="published" title="August 11, 2009">
	<span class="pub-month">Aug</span>
	<span class="pub-date">11</span>
</acronym>

And here is the final CSS:

.published {
  display:block;
  text-align:center;
  float:left; 
  font-family:Arial, Helvetica, sans-serif; 
  border-bottom:none; 
}
.pub-month {
  display:block; 
  font-size:.9em; 
  margin:0; 
  padding:0; 
}
.pub-date { 
  display:block; 
  font-size:1.4em; 
  margin:0; 
  padding:0; 
}
 
.published { 
  border:1px outset #666; 
}
.pub-month { 
  background-color:#555;
  color:#fafafa; 
  padding:.2em .4em; 
}
.pub-date { 
}
 
body { 
  padding:2em; 
}
 
h1 { 
  font-size:1.5em; 
  margin-bottom:1em; 
}
 
p { 
  margin-left: 3em;
}
]]> http://cssiseasy.com/2009/08/04/tutorial-3-hot-dates-with-css/feed/ 1 Tutorial #2: “Dog Eared” Tabs With One Image http://cssiseasy.com/2009/06/17/tutorial-2-dog-eared-tabs-with-one-image/ http://cssiseasy.com/2009/06/17/tutorial-2-dog-eared-tabs-with-one-image/#comments Thu, 18 Jun 2009 01:53:50 +0000 Montoya http://cssiseasy.com/?p=32 In this tutorial, I’ll show you how to make a flexible set of navigation tabs with a single background image that allows you to use any set of colors for the inactive & active states. Hit “Continue Reading” for the video & code. Remember to view in HD for best quality.

View the finished version: Tutorial #2 Live Demo

Here is the base HTML for the page:

<h1>"Dog-eared" tabs</h1>
  <ul class="tabs">
    <li><a href="#">Main</a></li>
    <li><a href="#">Street</a></li>
    <li><a href="#">Weapon Shop</a></li>
    <li><a href="#">Item Shop</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Recruit</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Talk</a></li>
    <li><a href="#">Top</a></li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

And here is the final CSS (not including the reset file):

body { 
 padding:20px; 
 font-family:"Helvetica Neue", Arial, Helvetica, sans-serif; 
}
 
h1, ul, p { 
  margin-bottom:1em; 
}
 
h1 { 
 font-size:1.4em; 
}
 
ul.tabs {
  border-bottom:1px solid #aaa;  
  list-style-type:none;
  overflow:hidden;  
}
 
ul.tabs li {  
  float:left; 
  margin-right:2px; 
}
 
ul.tabs li a {
  background:#ddd url(corner.png) top right no-repeat; 
  border-left:1px solid #aaa; 
  color:#333; 
  font-weight:bold; 
  display:block; 
  padding:4px 10px 2px 8px; 
  text-decoration:none; 
}
 
ul.tabs li a:focus, ul.tabs li a:hover { 
  background-color:#aaf; 
}
]]> http://cssiseasy.com/2009/06/17/tutorial-2-dog-eared-tabs-with-one-image/feed/ 4 Tutorial #1: Inline Form with Blueprint http://cssiseasy.com/2009/06/07/tutorial-1-inline-form-with-blueprint/ http://cssiseasy.com/2009/06/07/tutorial-1-inline-form-with-blueprint/#comments Mon, 08 Jun 2009 01:01:27 +0000 Montoya http://cssiseasy.com/?p=10 The first tutorial ever right here on CSSIsEasy.com is a follow-up to a question posted by Jitrenda Vyas on my blog. The timing is perfect because it allowed me to showcase the latest feature in Blueprint: inline forms. It also allowed me to demonstrate how you can next columns to build complex layouts. Watch the video, or view the demo page.

You can also view the final web page: Tutorial #1 Demo Page

Body markup:

<div class="container">
  <div class="column span-12 append-6 prepend-6 last">
    <form method="get" action="#" class="inline">
      <div class="column span-4">
        <label for="input1">Label:</label>
      </div>
      <div class="column span-8 last">
        <input type="text" name="input1" id="input1">
      </div>
      <div class="column span-4">
        <label for="input2">Longer Label:</label>
      </div>
      <div class="column span-8 last">
        <select name="input2" id="input2">
          <option value="1">One</option>
          <option value="2">Two</option>
        </select>
      </div>
      <div class="column span-4">
        <label for="input3">Even Longer Label:</label>
      </div>
 
      <div class="column span-8 last">
        <input type="text" name="input3" id="input3">
      </div>
      <div class="column span-4">
        <label for="value">One More Label:</label>
      </div>
      <div class="column span-8 last" id="radio_inputs">
        <input type="radio" name="value" value="1"> Value 1<br>
        <input type="radio" name="value" value="2"> Value 2
      </div>
      <div class="column span-8 prepend-4 last">
        <button>Primary Action</button>
      </div>
    </form>
  </div>
</div>

Custom CSS (after Blueprint):

#radio_inputs {
line-height:1.5;
padding-top:.5em;
padding-bottom:.5em;
}
 
label {
color:#555;
display:block;
padding-right:1em;
/* text-align:right; */
}
 
#input2 {
width:13.5em;
}
]]> http://cssiseasy.com/2009/06/07/tutorial-1-inline-form-with-blueprint/feed/ 9