CSS Is Easy 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 Copyright 2009-Present Christian Montoyacss,webdesign,webdev,programming,websites,development,technology,htmlTechnology/Software How-ToChristian Montoyanocss,webdesign,webdev,programming,websites,development,technology,htmlLearn CSS through video tutorials fit for beginners & experts alike!Video tutorials on CSS from CSSIsEasy.com will help you become a true CSS expert and impress your friends!http://creativecommons.org/licenses/by-nc-nd/3.0/http://creativecommons.org/licenses/by-nc-nd/3.0/http://creativecommons.org/images/public/somerights20.gifSome Rights ReservedCssIsEasyhttp://feedburner.google.com Tutorial #3: Hot Dates With CSS http://feedproxy.google.com/~r/CssIsEasy/~3/nK57AxWLvuU/ http://cssiseasy.com/2009/08/04/tutorial-3-hot-dates-with-css/#comments Tue, 04 Aug 2009 20:12:04 +0000 Christian 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 noI&#8217;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 wChristian MontoyaI&#8217;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 [...]css,webdesign,webdev,programming,websites,development,technology,htmlhttp://cssiseasy.com/2009/08/04/tutorial-3-hot-dates-with-css/ Suggest an upcoming tutorial http://feedproxy.google.com/~r/CssIsEasy/~3/yFYuiX-hfNU/ http://cssiseasy.com/2009/06/22/suggest-an-upcoming-tutorial/#comments Mon, 22 Jun 2009 19:58:48 +0000 Christian Montoya http://cssiseasy.com/?p=39 You may now use the Suggest a Tutorial page to suggest a topic for an upcoming tutorial. I’ll keep an eye on this page to see what you, the reader, want most. Want to see tutorials about keeping CSS files organized? About hover effects with links? About floating divs like a butterfly and stinging browser bugs like a bee? Just head on over to the suggestions page and post your wishes!

]]> http://cssiseasy.com/2009/06/22/suggest-an-upcoming-tutorial/feed/ 4 http://cssiseasy.com/2009/06/22/suggest-an-upcoming-tutorial/ Tutorial #2: “Dog Eared” Tabs With One Image http://feedproxy.google.com/~r/CssIsEasy/~3/wCeOY85vhds/ http://cssiseasy.com/2009/06/17/tutorial-2-dog-eared-tabs-with-one-image/#comments Thu, 18 Jun 2009 01:53:50 +0000 Christian 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 noIn this tutorial, I&#8217;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 &#038; active states. Hit &#8220;Continue Reading&#8221; for the video &#038; codeChristian MontoyaIn this tutorial, I&#8217;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 &#038; active states. Hit &#8220;Continue Reading&#8221; for the video &#038; code. Remember to view in HD for best quality. View the finished version: [...]css,webdesign,webdev,programming,websites,development,technology,htmlhttp://cssiseasy.com/2009/06/17/tutorial-2-dog-eared-tabs-with-one-image/ Quick update http://feedproxy.google.com/~r/CssIsEasy/~3/oIWbz3Sg7fc/ http://cssiseasy.com/2009/06/15/quick-update/#comments Mon, 15 Jun 2009 21:15:26 +0000 Christian Montoya http://cssiseasy.com/?p=28 The computer that I have been using to create screencasts is now unusable, thanks to Apple’s latest OSX update. Until they fix it, I can’t create any new video tutorials. In the meantime, things will be quiet around here, but I promise I’ll have an update as soon as I know something, and if my computer is back in working order soon, I’ll make sure to post my next tutorial right away.

]]> http://cssiseasy.com/2009/06/15/quick-update/feed/ 1 http://cssiseasy.com/2009/06/15/quick-update/ Tutorial #1: Inline Form with Blueprint http://feedproxy.google.com/~r/CssIsEasy/~3/oJA1jEwgK24/ http://cssiseasy.com/2009/06/07/tutorial-1-inline-form-with-blueprint/#comments Mon, 08 Jun 2009 01:01:27 +0000 Christian 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 noThe 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 hChristian MontoyaThe 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 [...]css,webdesign,webdev,programming,websites,development,technology,htmlhttp://cssiseasy.com/2009/06/07/tutorial-1-inline-form-with-blueprint/ Introducing: CSS Is Easy! http://feedproxy.google.com/~r/CssIsEasy/~3/F0h8-VzTXBM/ http://cssiseasy.com/2009/06/04/introducing-css-is-easy/#comments Thu, 04 Jun 2009 19:12:30 +0000 Christian Montoya http://cssiseasy.com/?p=4 Welcome to CSS Is Easy.com! This is a website that I’ve been planning to launch for months, and I figured it was about time I made it happen. I’ve always been interested in teaching others, and I happen to be good at CSS. I think that there aren’t enough video tutorials on CSS out there, so I’m here to change that. I’m going to be doing lessons on CSS, including walkthroughs, tricks, and new features. With every tutorial, I’ll show you all the steps and I’ll share the final code samples too. Hopefully, I can help you improve your CSS skills, and we can all make CSS more popular as we go. My goal is to prove that CSS really is easy to learn — help me do that!

Watch this space for tutorials!

]]> http://cssiseasy.com/2009/06/04/introducing-css-is-easy/feed/ 3 http://cssiseasy.com/2009/06/04/introducing-css-is-easy/ Copyright 2009-Present Christian MontoyaChristian MontoyanonadultLearn CSS through video tutorials fit for beginners & experts alike!