Schart Tutorials

Like the heading effect on the picture above? It's actually really easy to make!  I put the code on jsfiddle instead, because it's a little too much to put in this post. But I am going to explain it:

The wrap around is actually just two triangles below to the right and left side. So it's just experimenting with :before and :after psuedo.

I love using CSS transitions. They just make the site more... interactive. This is also one of the things I love that CSS has updated, so that less Javascript, or scripting in general is needed.

So using CSS transitions on, say, :hover or :active (click) is really simple. Here is a button styling that I quickly made to show you how:

<style> /* Here is how you would normally do it: button{ border:1px solid red; } button:hover{ border:1px solid blue; } But by adding a few extra lines to the code, you can make it transition in a very smooth and stylish way. See: */ button{ -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; border:1px solid red; } button:hover{ border:1px solid blue; } </style>

It's pretty easy isn't it? Another trick is to add the transition codes into a separate class and add that class to everything that you want to have transitioned!

If you'd like to see this live on jsfiddle instead, click here If you are making a website that should be compatible without javascript, or just don't want to slow down the page with lots of scripts, this is a great trick. And it's really easy.

First of all you need to hide the div that's going to be shown on hover of something (let's say on hover of an image, since that's very typical). This is really easy in CSS, a little display:none; should do the trick.

#showonhover{ display:none; }

Now we are going to make the whole show on hover thing. Here's how:

<style> #showonhover{ display:none; } .showdiv:hover #showonhover{ display:block; /* when .showdiv is hovered, #showonhover will be visible */ } </style> <div class="showdiv"> <div id="showonhover"></div> </div>

CSS Box-Shadows will highlight your content in a unique way, and is really easy to make.

<style> .box-shadow{ box-shadow:[horizontal], [vertical], [blur], [spread]; /* ... or ... */ box-shadow:inset [horizontal], [vertical], [blur], [spread], [color]; } .example{ box-shadow:1px 1px 5px black; /* Makes: box-shadow:1px horizontal, 1px vertical, 5px blur, black; */ } </style>

CSS is a must-know web design language. Seriously, even if you are just getting started, this is something that will make everything so much easier.

Even if you don't know much CSS, you might be familiar with the style attribute. Basically, what you write in there is CSS. But the style attribute should be something you only do if it's the last option you have. You would rather write CSS inside the style tag.

This is how you write CSS: First, you locate what to style. Then you write the styling for it. To identify one specific tag, you just add the ID attribute to it, and give it an id like id="somethingspecific". If you want to style several, but not all of a tag, you can add a class, like class="something-that-can-be-used-several-times". You can also style a tag in general. The IDs, classes and tags are identified inside the style tag like this:

<style> #aid{ /* CSS for the ID */ } .aclass{ /* CSS for the class */ } p{ /* CSS for the <p> tag */ } </style>

The CSS inside the IDs, classes or tags are written like this:

<style> .white-text{ color:white; /* or color:#FFFFFF; using HEX codes */ }

Resources:

I find web designing and developing languages easy to learn, as long as you find that one thing that gets you really interested. For me, it was Javascript functions in Javascript, and fetching and displaying information from a database in PHP. It is pretty easy, just learn these lines of code:

< ?php $query = mysql_query("SELECT * FROM your_table WHERE a_row = 'something_specific'"); /* or just $query = mysql_query("SELECT * FROM a_table"); */ while ($row = mysql_fetch_assoc($query)){ $stringname = $row['some_table_to_get_info_from']; $and_so_on = $row['and_so_on']; /* ... */ } ?>

You can also list them, or repeat the search and get multiple results like this:

<?php $query = mysql_query("SELECT * FROM users"); while ($row = mysql_fetch_assoc($query)){ $username = $row['username']; $link_to_profile = $row['link']; ?> Username: &lt?php echo($username); ?> <a href="<?php echo($link_to_profile); ?>">Link to Profile</a> <br /> <br /> <?php } ?>

This will result in something like this:

Username: James <a href="http://domain.com/James">Link to Profile</a> Username: Billy <a href="http://domain.com/Billy">Link to Profile</a> Username: Christine <a href="http://domain.com/Christine">Link to Profile</a>

Loading external content into a div might seem difficult, but it's actually really easy! I use this for the wall system on The Schart Network, to load and browse trough posts without refreshing the page.

First of all, you need to load in jQuery. After that, you can write this code:

<script> function loadSomething{ $("#divid").load("http://place.com/to/content.php"); } </script>

You can easily add a transition to this function by doing this: